/* p1.css - Premium Login Page Styles */

/* ========================================
   LOGIN PAGE - PREMIUM DESIGN
   ======================================== */

.admin-login {
    height: 100vh;
    background: linear-gradient(135deg, #0c1929 0%, #1e3a5f 50%, #0c1929 100%);
    overflow: hidden;
}

.admin-login .row {
    height: 100%;
}

/* Left Panel - Form Container */
.admin-login .col-md-6.bg-white {
    background: linear-gradient(135deg, #0f172a 0%, #0f172a 50%, #0f172a 100%);
    position: relative;
    overflow: hidden;
}

.admin-login .col-md-6.bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(37, 99, 235, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 50% 80%, rgba(29, 78, 216, 0.1) 0%, transparent 50%);
    animation: aurora 15s ease-in-out infinite;
}

.admin-login .col-md-6.bg-white::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

@keyframes aurora {
    0%, 100% {
        opacity: 1;
        filter: hue-rotate(0deg);
    }
    50% {
        opacity: 0.8;
        filter: hue-rotate(20deg);
    }
}

/* Logo Container */
.admin-login .logo-container {
    z-index: 10;
    padding: 2.5rem;
}

.admin-login .logo-container img {
    max-height: 45px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease, filter 0.3s ease;
}

.admin-login .logo-container img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

/* Form Container */
.admin-login .form-login {
    position: relative;
    z-index: 5;
    padding: 0 2rem;
}

.admin-login .login100-form {
    max-width: 420px;
    margin: 0 auto;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 25px 60px -12px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(37, 99, 235, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.admin-login .login100-form:hover {
    transform: translateY(-2px);
    box-shadow:
        0 32px 70px -16px rgba(0, 0, 0, 0.5),
        0 0 50px rgba(37, 99, 235, 0.15);
}

/* Title */
.admin-login .login100-form .h2 {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    margin-bottom: 2.5rem;
}

/* Labels */
.admin-login .form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.025em;
    margin-bottom: 0.5rem;
    display: block;
}

/* Input Wrapper */
.admin-login .wrap-input100 {
    position: relative;
    margin-bottom: 0;
}

.admin-login .mb-5 {
    margin-bottom: 1.75rem;
}

/* Input Fields */
.admin-login .input100 {
    width: 100%;
    height: 56px;
    padding: 0 20px 0 52px;
    font-size: 1rem;
    font-weight: 500;
    color: #1f2937;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.admin-login .input100::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.admin-login .input100:hover {
    border-color: #bfdbfe;
    background: #fefefe;
}

.admin-login .input100:focus {
    border-color: #2563eb;
    background: #ffffff;
    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Input Icons */
.admin-login .symbol-input100 {
    position: absolute;
    left: 0;
    top: 0;
    height: 56px;
    width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #9ca3af;
    transition: color 0.3s ease;
    pointer-events: none;
}

.admin-login .input100:focus ~ .symbol-input100,
.admin-login .input100:focus + .focus-input100 + .symbol-input100 {
    color: #2563eb;
}

.admin-login .symbol-input100 i {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: inherit;
}

/* Focus indicator line - hide default */
.admin-login .focus-input100 {
    display: none;
}

/* Forgot Password Link */
.admin-login .text-end {
    margin-top: -0.5rem;
    margin-bottom: 2rem;
}

.admin-login .text-end a {
    font-size: 0.875rem;
    font-weight: 500;
    color: #2563eb;
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

.admin-login .text-end a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border-radius: 1px;
    transition: width 0.3s ease;
}

.admin-login .text-end a:hover {
    color: #1d4ed8;
}

.admin-login .text-end a:hover::after {
    width: 100%;
}

/* Submit Button */
.admin-login .container-login100-form-btn {
    margin-top: 0.5rem;
}

.admin-login .login100-form-btn {
    width: 100%;
    height: 56px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 14px rgba(37, 99, 235, 0.35),
        0 0 0 0 rgba(37, 99, 235, 0.5);
}

.admin-login .login100-form-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.admin-login .login100-form-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(37, 99, 235, 0.45),
        0 0 0 0 rgba(37, 99, 235, 0.5);
}

.admin-login .login100-form-btn:hover::before {
    left: 100%;
}

.admin-login .login100-form-btn:active {
    transform: translateY(0);
    box-shadow:
        0 4px 14px rgba(37, 99, 235, 0.35),
        0 0 0 4px rgba(37, 99, 235, 0.2);
}

/* Right Panel - Hidden */
.admin-login .col-md-6.p-0,
.admin-login .login-right {
    display: none;
}

/* Left Panel - Full Width */
.admin-login .col-md-6.bg-white {
    flex: 0 0 100%;
    max-width: 100%;
}


/* ========================================
   ADMIN PANEL - FLAT CRM DESIGN
   ======================================== */

/* Global Font & Body */
body:not(.admin-login) {
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- SIDEBAR ---- */

/* Sidebar Container — !important needed to override sidemenu.css !important */
.app.sidebar-mini .app-sidebar,
.sidebar-mini .app-sidebar,
aside.app-sidebar {
    background: #0f172a !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1) !important;
}

/* Side Header - Logo Area — !important needed to override sidemenu.css */
.app-sidebar .side-header,
.sidebar-mini .side-header,
.side-header.active {
    background: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-right: none !important;
}

.side-header .header-brand1 img,
.side-header .header-brand-img {
    filter: brightness(0) invert(1);
    opacity: 0.95;
    transition: opacity 0.3s ease;
}

.side-header .header-brand1:hover img {
    opacity: 1;
}

/* Side Menu Container */
.app-sidebar .side-menu,
ul.side-menu {
    padding: 1rem 0.5rem 0 0.5rem;
    background: transparent;
}

/* Menu Section Headers */
.side-menu li h3,
.side-menu > li > h3 {
    color: #475569;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 1.25rem;
    margin-bottom: 0.5rem;
    margin-top: 1.25rem;
    background: transparent;
}

/* Menu Items — !important on color/bg to override sidemenu.css */
.side-menu .side-menu__item,
.app-sidebar .side-menu__item,
a.side-menu__item {
    color: #94a3b8 !important;
    padding: 0.7rem 0.95rem;
    margin: 2px 0.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.15s ease;
    position: relative;
    background: transparent !important;
}

.side-menu .side-menu__item:hover,
.app-sidebar .side-menu__item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

/* Menu Icons — !important needed to override sidemenu.css !important */
.side-menu .side-menu__icon,
.app-sidebar .side-menu__icon,
i.side-menu__icon {
    color: #94a3b8 !important;
    font-size: 1.25rem;
    width: 20px;
    text-align: center;
    transition: color 0.15s ease;
}

.side-menu .side-menu__item:hover .side-menu__icon {
    color: #ffffff !important;
}

/* Menu Labels — !important needed to override sidemenu.css !important on color */
.side-menu .side-menu__label,
.side-menu li > a .side-menu__label,
.side-menu__item .side-menu__label,
span.side-menu__label {
    color: #94a3b8 !important;
    font-size: 0.9rem;
    font-weight: 500;
}

.side-menu .side-menu__item:hover .side-menu__label {
    color: #ffffff !important;
}

/* Angle/Arrow Icon */
.side-menu .side-menu__item .angle,
.side-menu__item i.angle {
    color: #64748b;
    font-size: 0.625rem;
    transition: transform 0.2s ease;
    opacity: 0.7;
}

.side-menu .side-menu__item:hover .angle {
    color: #ffffff;
    opacity: 1;
}

/* Active Menu Item — !important needed to override sidemenu.css !important */
.side-menu .side-menu__item.active,
.side-menu li.is-expanded > .side-menu__item,
.is-expanded > a.side-menu__item {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
    border-radius: 8px;
}

.side-menu .side-menu__item.active .side-menu__icon,
.side-menu li.is-expanded > .side-menu__item .side-menu__icon,
.is-expanded .side-menu__icon {
    color: #ffffff !important;
}

.side-menu .side-menu__item.active .side-menu__label,
.side-menu li.is-expanded > .side-menu__item .side-menu__label {
    color: #ffffff !important;
}

/* Submenu */
.side-menu .slide-menu,
ul.slide-menu {
    background: transparent;
    border-radius: 0;
    margin: 0;
    padding: 0.25rem 0 0.25rem 0;
    border-left: none;
}

.slide-menu a,
.slide-menu.open a,
.slide-menu li a {
    padding: 0.55rem 0.95rem 0.55rem 3.25rem;
    color: #64748b !important;
    transition: all 0.15s ease;
    border-radius: 6px;
    margin: 1px 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    background: transparent !important;
}

.slide-menu a:hover,
.slide-menu.open a:hover,
.slide-menu li a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

.slide-menu a .side-menu__label,
.slide-menu.open a .side-menu__label {
    font-size: 0.9rem;
    font-weight: 500;
    color: inherit;
}

/* Active Submenu Item */
.slide-menu .active-sumenu a,
.slide-menu.open .active-sumenu a,
.is-expanded .slide-menu .active-sumenu a {
    color: #60a5fa !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.slide-menu .active-sumenu a .side-menu__label,
.slide-menu.open .active-sumenu a .side-menu__label,
.is-expanded .slide-menu .active-sumenu a .side-menu__label {
    color: #60a5fa !important;
}

/* Hover Effects on Li */
.side-menu li:hover {
    border-radius: 8px;
}

.side-menu li:hover > a .side-menu__icon {
    color: #ffffff !important;
}

/* Expanded State */
.is-expanded .angle,
li.is-expanded .angle {
    color: #ffffff;
    opacity: 1;
}

/* Scrollbar Styling */
.app-sidebar::-webkit-scrollbar,
.side-menu::-webkit-scrollbar {
    width: 4px;
}

.app-sidebar::-webkit-scrollbar-track,
.side-menu::-webkit-scrollbar-track {
    background: transparent;
}

.app-sidebar::-webkit-scrollbar-thumb,
.side-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.app-sidebar::-webkit-scrollbar-thumb:hover,
.side-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Sidebar Toggled State */
@media (min-width: 768px) {
    .sidebar-mini.sidenav-toggled .app-sidebar,
    .app.sidebar-mini.sidenav-toggled .app-sidebar {
        background: #0f172a;
    }

    .sidebar-mini.sidenav-toggled .side-header,
    .app.sidebar-mini.sidenav-toggled .side-header {
        background: #0f172a;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .sidebar-mini.sidenav-toggled .side-menu__icon {
        color: rgba(255, 255, 255, 0.6);
    }

    .sidebar-mini.sidenav-toggled .side-menu__item:hover .side-menu__icon {
        color: #ffffff;
    }

    .sidebar-mini.sidenav-toggled .side-menu__item.active .side-menu__icon {
        color: #ffffff;
    }

    .sidebar-mini.sidenav-toggled.sidenav-toggled-open .app-sidebar,
    .sidebar-mini.sidenav-toggled.sidenav-toggled-open .side-header {
        background: #0f172a;
    }
}

/* ---- CONTENT AREA ---- */

/* Main Content Background */
.app-content,
.hor-content {
    background: #f0f0f0;
    min-height: 100vh;
}

.app-content .side-app {
    position: relative;
    z-index: 1;
}

/* App Header */
.app-header.header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: none;
}

/* Search in Header */
.main-header-center .form-control {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding-left: 1rem;
    transition: all 0.2s ease;
}

.main-header-center .form-control:focus {
    background: #fff;
    border-color: #3b82f6;
    box-shadow: none;
    outline: none;
}

/* Page Header */
.page-header {
    background: #ffffff;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    padding: 1rem 1.5rem;
    border-radius: 0;
    margin-bottom: 1.5rem;
    box-shadow: none;
}

.page-header .page-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: #0f172a;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    letter-spacing: -0.025em;
}

.page-header .breadcrumb {
    margin-bottom: 0;
}

.page-header .breadcrumb-item a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.page-header .breadcrumb-item a:hover {
    color: #2563eb;
}

.page-header .breadcrumb-item.active {
    color: #64748b;
}

/* ---- CARDS ---- */

.card,
.custom-card {
    background: #ffffff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
}

.card-header {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 1rem 1.25rem;
}

.card-header .card-title {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.9375rem;
    margin: 0;
}

.card-body {
    padding: 1.25rem;
}

/* ---- BUTTONS ---- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-sm {
    padding: 0.4375rem 0.875rem;
    font-size: 0.8125rem;
    border-radius: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3);
}

.btn-outline-primary {
    border: 1px solid #3b82f6;
    color: #3b82f6;
    background: transparent;
    box-shadow: none;
}

.btn-outline-primary:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

.btn-secondary {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(71, 85, 105, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
    box-shadow: 0 4px 16px rgba(71, 85, 105, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.btn-secondary:active {
    transform: translateY(0);
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.btn-success:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(16, 185, 129, 0.3);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.btn-danger:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(239, 68, 68, 0.3);
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.btn-warning:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.3);
}

/* ---- FORM CONTROLS ---- */

.form-control,
select.form-control,
textarea.form-control {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: #f8fafc;
    color: #1e293b;
    box-shadow: none;
}

.form-control:hover {
    border-color: #cbd5e1;
}

.form-control:focus {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: none;
    outline: none;
}

.form-label {
    font-weight: 600;
    color: #374151;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
}

/* Input Groups */
.input-group {
    border-radius: 8px;
    overflow: hidden;
}

.input-group .form-control {
    border-radius: 8px 0 0 8px;
}

.input-group .btn,
.input-group-text {
    border-radius: 0 8px 8px 0;
}

/* Native Select */
select.form-control,
.form-select,
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 12px;
    padding-right: 2.25rem;
    min-height: 40px;
    line-height: 1.5;
}

/* ---- SELECT2 ---- */

.select2-container { width: 100% !important; }

/* Single — match .form-control exactly */
.select2-container--default .select2-selection--single {
    height: 40px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1e293b;
    line-height: 22px;
    padding-left: 0;
    padding-right: 26px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    right: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #475569 transparent transparent transparent;
    border-width: 5px 4px 0 4px;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: #94a3b8;
    font-size: 1rem;
    font-weight: 400;
    margin-right: 6px;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #ef4444;
}

/* Hover */
.select2-container--default .select2-selection--single:hover {
    border-color: #cbd5e1;
}

/* Focus / Open */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: none;
    outline: none;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #3b82f6 transparent;
    border-width: 0 4px 5px 4px;
}

/* Disabled */
.select2-container--default.select2-container--disabled .select2-selection--single {
    background: #f1f5f9;
    border-color: #e2e8f0;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Multiple */
.select2-container--default .select2-selection--multiple {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    min-height: 40px;
    padding: 4px 8px;
    font-size: 0.875rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 5px;
    color: #1e40af;
    font-size: 0.8rem;
    padding: 2px 8px;
    margin: 3px 4px 3px 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #93c5fd;
    margin-right: 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ef4444;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: none;
}
.select2-container--default .select2-selection--multiple .select2-search__field {
    font-size: 0.875rem;
    color: #1e293b;
    margin-top: 4px;
}

/* Dropdown panel */
.select2-dropdown {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    margin-top: 4px;
}
.select2-dropdown--above {
    margin-top: 0;
    margin-bottom: 4px;
}

/* Search inside dropdown */
.select2-search--dropdown {
    padding: 10px 10px 6px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #3b82f6;
    background: #fff;
}

/* Result items */
.select2-results__option {
    padding: 9px 14px;
    font-size: 0.85rem;
    color: #334155;
}
.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected] {
    background: #eff6ff !important;
    color: #1e40af !important;
}
.select2-results__option[aria-selected=true] {
    background: #f8fafc;
    color: #64748b;
}
.select2-results__option--disabled {
    color: #cbd5e1;
}
.select2-results__message {
    color: #94a3b8;
    font-size: 0.82rem;
    padding: 10px 14px;
}

/* Width in tables */
td .select2-container,
.input-group .select2-container {
    width: 100% !important;
}

/* ---- TABLES ---- */

.table {
    border-collapse: collapse;
    border-spacing: 0;
    background: #fff;
    width: 100%;
}

.table thead th {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    border-top: none;
    color: #64748b;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
}

.table tbody tr {
    transition: background 0.15s ease;
    background: #fff;
    box-shadow: none;
    border-radius: 0;
}

.table tbody tr:hover {
    background: #f8fafc;
}

.table tbody td,
.table tbody th {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    border-top: none;
    vertical-align: middle;
    color: #334155;
    background: inherit;
    box-shadow: none;
    border-radius: 0;
}

.table tbody tr:last-child td,
.table tbody tr:last-child th {
    border-bottom: none;
}

/* Table Links */
.table a {
    color: #3b82f6;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.table a:hover {
    color: #2563eb;
}

/* ---- NAV TABS ---- */

.nav-tabs {
    border-bottom: 2px solid #e2e8f0;
    gap: 0.25rem;
}

.nav-tabs .nav-link {
    border: none;
    border-radius: 8px 8px 0 0;
    color: #64748b;
    font-weight: 500;
    padding: 0.625rem 1rem;
    transition: all 0.2s ease;
    position: relative;
}

.nav-tabs .nav-link:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.nav-tabs .nav-link.active {
    color: #3b82f6;
    background: #ffffff;
    font-weight: 600;
}

.nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #3b82f6;
    border-radius: 2px 2px 0 0;
}

/* ---- MODALS ---- */

.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.modal-header {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 16px 16px 0 0;
    padding: 1.25rem 1.5rem;
}

.modal-title {
    font-weight: 600;
    font-size: 1.125rem;
    color: #0f172a;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid #e2e8f0;
    padding: 1rem 1.5rem;
}

/* ---- BADGES ---- */

.badge {
    border-radius: 20px;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.badge.bg-success,
.badge-success {
    background: #10b981;
}

.badge.bg-danger,
.badge-danger {
    background: #ef4444;
}

.badge.bg-warning,
.badge-warning {
    background: #f59e0b;
}

.badge.bg-primary,
.badge-primary {
    background: #3b82f6;
}

/* ---- DROPDOWNS ---- */

.dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 8px;
}

.dropdown-item {
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
    font-weight: 500;
    font-size: 0.8125rem;
    transition: all 0.15s ease;
}

.dropdown-item:hover {
    background: #f8fafc;
    color: #334155;
}

/* ---- PAGINATION ---- */

.pagination .page-link {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 0 2px;
    color: #64748b;
    font-weight: 500;
    transition: all 0.2s ease;
}

.pagination .page-link:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #3b82f6;
}

.pagination .page-item.active .page-link {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

/* ---- ALERTS ---- */

.alert {
    border: none;
    border-radius: 10px;
    padding: 0.875rem 1.125rem;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #991b1b;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
}

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    color: #1e40af;
}

/* ---- PROGRESS BARS ---- */

.progress {
    height: 8px;
    border-radius: 4px;
    background: #e2e8f0;
}

.progress-bar {
    background: #3b82f6;
    border-radius: 4px;
}

/* ---- CHECKBOXES & RADIO ---- */

input[type="checkbox"],
input[type="radio"] {
    accent-color: #3b82f6;
}

/* ---- TOAST NOTIFICATIONS ---- */

.jq-toast-wrap .jq-toast-single {
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ---- SCROLLBAR ---- */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ---- FOOTER ---- */

footer.footer {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 991.98px) {
    .admin-login .login100-form {
        padding: 2.5rem;
        max-width: 400px;
    }
}

@media (max-width: 767.98px) {
    .admin-login .col-md-6.bg-white {
        padding: 2rem;
    }

    .admin-login .login100-form {
        padding: 2rem;
    }

    .admin-login .logo-container {
        position: relative;
        padding: 0 0 2rem 0;
        text-align: center;
    }

    .admin-login .form-login {
        padding: 0;
    }

    .admin-login .login100-form .h2 {
        font-size: 1.75rem;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .admin-login .login100-form {
        padding: 1.5rem;
        border-radius: 20px;
    }

    .admin-login .input100 {
        height: 52px;
    }

    .admin-login .symbol-input100 {
        height: 52px;
    }

    .admin-login .login100-form-btn {
        height: 52px;
    }
}

/* ========================================
   DARK MODE SUPPORT (optional)
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* Uncomment below for automatic dark mode support */
    /*
    .admin-login .col-md-6.bg-white {
        background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    }

    .admin-login .login100-form {
        background: rgba(31, 41, 55, 0.8);
        border-color: rgba(55, 65, 81, 0.5);
    }

    .admin-login .login100-form .h2 {
        background: linear-gradient(135deg, #f3f4f6 0%, #93c5fd 100%);
        -webkit-background-clip: text;
    }

    .admin-login .form-label {
        color: #d1d5db;
    }

    .admin-login .input100 {
        background: #374151;
        border-color: #4b5563;
        color: #f3f4f6;
    }
    */
}

/* ========================================
   ORDER STATUS BADGES
   ======================================== */

.badge-status {
	font-weight: 500;
	padding: 12px 12px;
	letter-spacing: 0.3px;
	border: none;
	border-radius: 3px !important;
}

/* ========================================
   ORDER VIEW PAGE
   ======================================== */

/* Modal backdrop fix — ensure backdrop never covers modal */
.modal-backdrop {
	display: none !important;
}
.modal {
	z-index: 1050 !important;
}

/* Status dropdown overflow */
.ov-sidebar-body .btn-group { position: static; }
.ov-sidebar-body .dropdown-menu { z-index: 1020; }

/* Hero bar */
.ov-hero {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 20px 24px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.ov-hero-id {
	font-size: 1.2rem;
	font-weight: 700;
	color: #111827;
}
.ov-hero-id span { color: #2563eb; }
.ov-hero-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #6b7280;
}
.ov-hero-meta i { font-size: 13px; opacity: .5; }
.ov-hero-total {
	margin-left: auto;
	text-align: right;
}
.ov-hero-total .ov-amount {
	font-size: 1.3rem;
	font-weight: 700;
	color: #111827;
}
.ov-hero-total .ov-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #9ca3af;
	font-weight: 600;
}

/* Cards */
.ov-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}
.ov-card-head {
	padding: 16px 20px;
	border-bottom: 1px solid #f3f4f6;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ov-card-head h6 {
	font-size: 14px;
	font-weight: 600;
	color: #111827;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.ov-card-head h6 i { color: #9ca3af; font-size: 15px; }
.ov-card-body { padding: 20px; }

/* Customer info grid */
.ov-info-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	background: #fff;
	border: 1px solid #e8e9f0;
	border-radius: 0;
	overflow: hidden;
}
.ov-info-block {
	padding: 20px 24px;
	border-right: 1px solid #f0f0f5;
	position: relative;
}
.ov-info-block:last-child { border-right: none; }
.ov-info-block .ov-info-title {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: #8b8fa3;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #f0f0f5;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ov-info-block .ov-info-title .ov-edit-link {
	font-size: 0.72rem;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	cursor: pointer;
	color: #3b82f6;
	transition: color .15s;
}
.ov-info-block .ov-info-title .ov-edit-link:hover { color: #1d4ed8; }
.ov-info-content {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ov-info-name {
	font-weight: 600;
	font-size: 0.88rem;
	color: #1a1d2e;
	margin-bottom: 4px;
}
.ov-info-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.82rem;
	color: #3a3f58;
	line-height: 1.5;
}
.ov-info-icon {
	font-size: 13px;
	color: #9ca3af;
	flex-shrink: 0;
	width: 16px;
	text-align: center;
}
.ov-info-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: #8b8fa3;
	min-width: 60px;
}
.ov-info-block p {
	font-size: 0.82rem;
	color: #3a3f58;
	margin-bottom: 4px;
	line-height: 1.6;
}
.ov-info-block p strong { font-weight: 600; color: #1a1d2e; }
.ov-info-block a { color: #3b82f6; text-decoration: none; transition: color .15s; }
.ov-info-block a:hover { color: #1d4ed8; }

/* Products table */
.ov-product-cell {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ov-product-cell img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid #f3f4f6;
}
.ov-product-name {
	font-size: 13px;
	font-weight: 500;
	color: #111827;
	margin: 0;
	line-height: 1.4;
}
.ov-product-code {
	font-size: 11px;
	color: #9ca3af;
	margin: 0;
}
.ov-product-variants .badge {
	font-size: 10px;
	font-weight: 500;
	padding: 2px 8px;
}

/* Qty control */
.ov-qty-control {
	display: inline-flex;
	align-items: center;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}
.ov-qty-control .qty {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #6b7280;
	font-size: 10px;
	transition: background .15s;
}
.ov-qty-control .qty:hover { background: #f3f4f6; }
.ov-qty-control input {
	width: 36px;
	text-align: center;
	border: none;
	border-left: 1px solid #e5e7eb;
	border-right: 1px solid #e5e7eb;
	font-size: 13px;
	font-weight: 500;
	padding: 4px 0;
	outline: none;
	background: #fafafa;
}

/* Totals */
.ov-totals { padding: 16px 20px; }
.ov-totals .ov-total-row {
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
	font-size: 13px;
	color: #6b7280;
}
.ov-totals .ov-total-row .val { font-weight: 500; color: #374151; }
.ov-totals .ov-grand-total {
	border-top: 2px solid #e5e7eb;
	margin-top: 8px;
	padding-top: 10px;
	font-size: 15px;
	font-weight: 700;
	color: #111827;
}

/* Customer note */
.ov-note {
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 6px;
	padding: 12px 16px;
	margin-bottom: 16px;
}
.ov-note-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #b45309;
	margin-bottom: 4px;
}
.ov-note-text { font-size: 13px; color: #78350f; margin: 0; }

/* Sidebar */
.ov-sidebar {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	margin-bottom: 16px;
}
.ov-sidebar-body { padding: 16px 20px; }
.ov-sidebar-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #9ca3af;
	margin-bottom: 4px;
}
.ov-sidebar-value {
	font-size: 13px;
	font-weight: 500;
	color: #111827;
}
.ov-sidebar-value i { color: #9ca3af; font-size: 13px; margin-right: 4px; }
.ov-sidebar-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
}
.ov-sidebar-row + .ov-sidebar-row { border-top: 1px solid #f3f4f6; }
.ov-sidebar-divider { border-top: 1px solid #f3f4f6; margin: 4px 0; }

/* Sidebar edit fields */
.ov-edit-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
}
.ov-edit-field + .ov-edit-field { border-top: 1px solid #f3f4f6; }
.ov-edit-field .ov-edit-label {
	font-size: 13px;
	color: #6b7280;
	white-space: nowrap;
	margin-right: 12px;
}
.ov-edit-field select {
	font-size: 13px;
	padding: 4px 28px 4px 8px;
	border-radius: 6px;
	border: 1px solid #e5e7eb;
	background-color: #fafafa;
	max-width: 170px;
}
.ov-edit-field .ov-inline-form { width: 110px; }
.ov-edit-field .ov-inline-form input {
	font-size: 13px;
	padding: 4px 8px;
	border-radius: 6px;
	border: 1px solid #e5e7eb;
	background-color: #fafafa;
	text-align: right;
}

.ov-extra-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 0;
	font-size: 13px;
	color: #374151;
}

/* Section cards (AWB, invoices, etc.) */
.ov-section {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	margin-bottom: 16px;
}
.ov-section-head {
	padding: 14px 20px;
	border-bottom: 1px solid #f3f4f6;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ov-section-head h6 {
	font-size: 14px;
	font-weight: 600;
	color: #111827;
	margin: 0;
}
.ov-section-body { padding: 16px 20px; }

/* Blacklist box */
.ov-blacklist {
	padding: 12px 20px;
	background: #fef2f2;
	border-top: 1px solid #fecaca;
	font-size: 13px;
	color: #991b1b;
	display: flex;
	align-items: center;
	gap: 8px;
}
.ov-blacklist-add {
	padding: 8px 20px;
	border-top: 1px solid #f3f4f6;
	font-size: 12px;
}
.ov-blacklist-add a { color: #6b7280; cursor: pointer; }
.ov-blacklist-add a:hover { color: #ef4444; }

@media (max-width: 768px) {
	.ov-info-grid {
		grid-template-columns: 1fr;
		border-radius: 10px;
	}
	.ov-info-block {
		border-right: none;
		border-bottom: 1px solid #f0f0f5;
	}
	.ov-info-block:last-child { border-bottom: none; }
	.ov-hero { gap: 12px; }
	.ov-hero-total { margin-left: 0; width: 100%; text-align: left; }
}

/* ---- PICKER v2 ---- */

.picker-wrapper {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.picker-wrapper .picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.picker-wrapper .picker-header h4 {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.picker-wrapper .picker-add-btn {
    font-size: 0.8125rem;
    padding: 5px 14px;
    border-radius: 6px;
}

.picker-wrapper .table {
    margin: 0;
    border: none;
    background: transparent;
}

.picker-wrapper .table thead {
    display: none;
}

.picker-wrapper .table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
}

.picker-wrapper .table tbody tr:last-child {
    border-bottom: none;
}

.picker-wrapper .table tbody tr:hover {
    background: #f8fafc;
}

.picker-wrapper .table tbody td {
    padding: 10px 14px;
    border: none;
    vertical-align: middle;
}

.picker-wrapper .table tbody td .fa-sort {
    color: #cbd5e1;
    cursor: grab;
    font-size: 13px;
}

.picker-wrapper .table tbody td .fa-trash {
    font-size: 13px;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.picker-wrapper .table tbody tr:hover td .fa-trash {
    opacity: 1;
}

.picker-wrapper .table tbody td a {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #334155;
    text-decoration: none;
}

.picker-wrapper .table tbody td a:hover {
    color: #3b82f6;
}

.picker-wrapper .table tbody td small {
    color: #94a3b8;
    font-size: 0.75rem;
}

.picker-wrapper .picker-empty {
    text-align: center;
    padding: 24px 16px;
    color: #94a3b8;
    font-size: 0.8125rem;
}

/* Picker modal content */
.picker-modal .modal-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 14px 20px;
}

.picker-modal .modal-header .modal-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
}

.picker-modal .modal-body {
    padding: 16px 20px;
    background: #fff;
}

.picker-modal .picker-content {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.picker-modal .picker-content .picker-results {
    max-height: 500px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.picker-modal .picker-content table {
    margin: 0;
}

.picker-modal .picker-pagination {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 6px 1rem 2px;
    display: flex;
    align-items: center;
}

.picker-modal .modal-body .input-group {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.picker-modal .modal-body .input-group .form-control {
    border: none;
    box-shadow: none;
    padding: 10px 14px;
    font-size: 0.875rem;
}

.picker-modal .modal-body .input-group .form-control:focus {
    box-shadow: none;
}

.picker-modal .modal-body .search-btn {
    border: none;
    border-left: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 8px 18px;
    font-size: 0.8125rem;
    color: #64748b;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.picker-modal .modal-body .search-btn:hover {
    background: #f1f5f9;
}

.picker-modal .modal-body .search-btn img {
    width: 16px;
    opacity: 0.6;
}

.picker-modal .product_tr {
    transition: background 0.1s ease;
}

.picker-modal .product_tr:hover {
    background: #f8fafc;
}

.picker-modal .product_tr td {
    padding: 8px 12px;
    font-size: 0.8125rem;
    color: #334155;
    vertical-align: middle;
}

.picker-modal .product_tr td.picker-img,
.picker-wrapper .table tbody td.picker-img {
    width: 50px;
    min-width: 50px;
    padding: 5px;
}

.picker-toggle-sub {
    background: none;
    border: none;
    padding: 0 6px 0 0;
    cursor: pointer;
    color: #94a3b8;
    font-size: 11px;
    vertical-align: middle;
    transition: color 0.15s ease;
}

.picker-toggle-sub:hover {
    color: #3b82f6;
}

.picker-modal .product_tr input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #3b82f6;
}

.picker-modal .modal-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 10px 20px;
}

.picker-modal .modal-footer .btn {
    font-size: 0.8125rem;
    border-radius: 6px;
}

/* Picker pagination */
.picker-modal .pagination {
    margin: 0;
    gap: 2px;
}

.picker-modal .pagination .page-item .page-link {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.picker-modal .pagination .page-item.active .page-link {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

.picker-modal .results-found {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-left: 8px;
}

/* Sortable drag state */
.picker-wrapper .ui-sort-highlight {
    background: #eff6ff;
    border: 2px dashed #93c5fd;
    height: 42px;
}

.picker-wrapper .ui-sortable-helper {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 6px;
}

/* ========================================
   SHARED ADMIN PATTERNS
   ======================================== */

/* Section headers for collapsible cards */
.section-title {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #0f172a;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.section-desc {
	font-size: 0.8rem;
	color: #94a3b8;
	margin-top: 2px;
}

/* Card section header with bottom border */
.card-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 16px;
	margin-bottom: 20px;
	border-bottom: 1px solid #f1f5f9;
}

/* Info bar (ID, count badges in card headers) */
.info-bar {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 12px 20px;
	background: #f8fafc;
	border-radius: 10px;
	border: 1px solid #e2e8f0;
}
.info-item {
	font-size: 0.8rem;
	color: #64748b;
}
.info-item strong {
	color: #0f172a;
	font-weight: 600;
}

/* Empty state (dashed border box) */
.empty-state {
	border: 2px dashed #e2e8f0;
	border-radius: 10px;
	padding: 24px;
	text-align: center;
	color: #94a3b8;
	font-size: 0.85rem;
}
.empty-state i {
	font-size: 1.5rem;
	margin-bottom: 6px;
	display: block;
	opacity: 0.5;
}

/* Add bar (inline form row at bottom of card) */
.add-bar {
	display: flex;
	align-items: end;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid #f1f5f9;
	margin-top: 12px;
}

/* Deactivated card */
.deactivated {
	opacity: 0.5;
	pointer-events: none;
}

/* Collapse chevron icons */
.ci-general, .ci-filters, .ci-fields, .ci-categories, .ci-price,
.collapse-icon, .seo-collapse-icon {
	transition: transform .2s;
	color: #94a3b8;
}

/* SEO rule variables */
.variable-row {
	display: flex;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #f8fafc;
}
.variable-row:last-child {
	border-bottom: none;
}
.variable-code {
	font-size: 0.82rem;
	font-weight: 600;
	padding: 3px 10px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	color: #0f172a;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
.variable-desc {
	font-size: 0.8rem;
	color: #64748b;
}
.variable-example {
	font-size: 0.75rem;
	color: #94a3b8;
	font-style: italic;
}

/* Route/type badges */
.route-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 6px;
	background: #f1f5f9;
	color: #64748b;
	letter-spacing: 0.02em;
}
.rule-content-preview {
	max-width: 400px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.82rem;
	color: #475569;
}

/* Shared pill tabs (used by exim, ai_companion, product edit, settings, etc.) */
.pluto-tabs {
	margin-bottom: 30px;
	background: #fff;
	border: 1px solid #eaeaea;
	width: 100%;
	padding: 7px;
	border-radius: 12px;
}
.pluto-tabs.nav-tabs .nav-link::after {
	content: '' !important;
	display: none !important;
}
.pluto-tabs.nav-tabs .nav-link {
	border-bottom: none !important;
}
.pluto-tabs .nav-link {
	padding: 8px 30px !important;
	border-radius: 10px !important;
	font-size: 0.78rem !important;
	font-weight: 500 !important;
	color: #64748b !important;
	background: transparent !important;
	border: none !important;
	white-space: nowrap !important;
}
.pluto-tabs .nav-link:hover {
	color: #1e293b !important;
	background: rgba(0,0,0,.03) !important;
}
.pluto-tabs .nav-link.active, .pluto-tabs .nav-link:hover.active {
	color: #fff !important;
	font-weight: 600 !important;
	background: var(--bg-primary) !important;
	box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.2);
}

/* AWB link inline */
.shipping-info .awb-link {
	display: inline;
}

/* Fix nav-tabs icon size (override style.css 0em) */
.nav-tabs .nav-item i {
	font-size: inherit;
}

/* Flatpickr custom theme */
.flatpickr-calendar {
	border-radius: 10px !important;
	box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
	border: 1px solid #e2e8f0 !important;
	font-family: inherit !important;
}
.flatpickr-months .flatpickr-month {
	height: 40px !important;
}
.flatpickr-current-month {
	font-size: 0.9rem !important;
	font-weight: 600 !important;
}
.flatpickr-day.selected, .flatpickr-day.selected:hover {
	background: var(--bg-primary) !important;
	border-color: var(--bg-primary) !important;
}
.flatpickr-day.today {
	border-color: var(--bg-primary) !important;
}
.flatpickr-day.today:hover {
	background: var(--bg-primary) !important;
	color: #fff !important;
}
.flatpickr-time input {
	font-size: 0.85rem !important;
	font-weight: 500 !important;
}

/* Addon details card overflow for dropdown */
.mode-details .custom-card {
	overflow: visible !important;
}

/* Bulk action bar */
.bulk-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 6px 6px 6px 14px;
	margin-bottom: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.bulk-bar__check {
	display: flex;
	align-items: center;
	gap: 8px;
}
.bulk-bar__check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--bg-primary);
}
.bulk-bar__count {
	font-size: 0.8rem;
	font-weight: 600;
	color: #334155;
}
.bulk-bar__actions {
	display: flex;
	align-items: center;
	gap: 4px;
}
.bulk-bar__btn {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border: none;
	border-radius: 8px;
	background: #f1f5f9;
	color: #475569;
	font-size: 0.78rem;
	font-weight: 500;
	cursor: pointer;
	transition: all .12s ease;
	white-space: nowrap;
}
.bulk-bar__btn:hover {
	background: #e2e8f0;
	color: #1e293b;
}
.bulk-bar__btn--danger {
	color: #dc2626;
	background: #fef2f2;
}
.bulk-bar__btn--danger:hover {
	background: #fee2e2;
	color: #b91c1c;
}
.bulk-bar__btn--ai {
	color: #7c3aed;
	background: #f5f3ff;
}
.bulk-bar__btn--ai:hover {
	background: #ede9fe;
	color: #6d28d9;
}
.bulk-bar__btn.dropdown-toggle::after {
	margin-left: 4px;
	font-size: 0.6rem;
}

/* Order list shared styles (used in orders/list and customer_order_history) */
.order-id-link {
	font-weight: 600;
	color: #0d6efd;
	text-decoration: none;
	font-size: 0.85rem;
}
.order-id-link:hover { text-decoration: underline; }
.client-cell { display: flex; align-items: center; gap: 10px; }
.client-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 0.75rem;
	color: #fff;
	flex-shrink: 0;
	text-transform: uppercase;
}
.client-details .client-name {
	font-weight: 500;
	color: #1a1d2e;
	font-size: 0.85rem;
	margin: 0;
	line-height: 1.3;
}
.client-details .client-name a { color: #1a1d2e; text-decoration: none; }
.client-details .client-name a:hover { color: #0d6efd; }
.client-details .client-sub {
	font-size: 0.75rem;
	color: #8b8fa3;
	margin: 0;
	line-height: 1.4;
}
.date-cell {
	font-size: 0.8rem;
	color: #5b6178;
	white-space: nowrap;
}
.date-cell .date-day { font-weight: 500; color: #3a3f58; }
.date-cell .date-time { font-size: 0.72rem; color: #8b8fa3; }
.total-cell {
	font-weight: 600;
	color: #1a1d2e;
	font-size: 0.9rem;
	white-space: nowrap;
}

/* Payment/shipping info (shared from orders list) */
.payment-info, .shipping-info { line-height: 1.5; }
.payment-info .method-name, .shipping-info .method-name {
	font-size: 0.8rem;
	color: #3a3f58;
	display: block;
}
.shipping-info .awb-link {
	font-size: 0.7rem;
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: 500;
}

/* Hide number input spinners globally */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type="number"] {
	-moz-appearance: textfield;
}

/* Category tree expand/collapse button */
.show-sub-categories {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	border: 1px solid #e8e9f0;
	background: #fff;
	color: #5b6178;
	cursor: pointer;
	transition: all .15s ease;
	padding: 0;
	margin-right: 8px;
	vertical-align: middle;
	flex-shrink: 0;
}
.show-sub-categories:hover {
	background: #f0f2f8;
	border-color: #d0d2dd;
	color: #1a1d2e;
}
.show-sub-categories i {
	font-size: 10px;
	transition: transform .2s ease;
}
.show-sub-categories[opened="opened"] i {
	transform: rotate(180deg);
}

/* Form switch alignment */
.form-check.form-switch {
	display: block;
	margin-right: 0;
}

/* Fix app-content padding */
.app-content, .hor-content {
	padding-bottom: 0 !important;
	margin-bottom: 90px;
}

.rate-tiers input.form-control,
.rate-tiers select.form-select { background: #fff; }