/* ============================================================
   ADMIN.CSS — Complete Redesign
   Swat Motors & Trading Ltd — Admin Panel
============================================================ */

/* ─── LOGIN PAGE ─── */
.admin-login-page {
    display:            flex;
    align-items:        center;
    justify-content:    center;
    min-height:         100vh;
    background:         linear-gradient(135deg, #f7f7f7 0%, #fff0f0 100%);
    padding:            24px;
    position:           relative;
    overflow:           hidden;
}

.admin-login-page::before {
    content:            '';
    position:           absolute;
    top:                -100px;
    right:              -100px;
    width:              400px;
    height:             400px;
    background:         radial-gradient(circle, rgba(204,0,0,0.06) 0%, transparent 70%);
    pointer-events:     none;
}

.admin-login-page::after {
    content:            '';
    position:           absolute;
    bottom:             -80px;
    left:               -80px;
    width:              300px;
    height:             300px;
    background:         radial-gradient(circle, rgba(204,0,0,0.04) 0%, transparent 70%);
    pointer-events:     none;
}

.login-card {
    background:         #ffffff;
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-lg);
    padding:            48px 42px;
    max-width:          440px;
    width:              100%;
    box-shadow:         0 20px 60px rgba(0,0,0,0.1);
    text-align:         center;
    position:           relative;
    z-index:            1;
}

.login-card::before {
    content:            '';
    position:           absolute;
    top:                0;
    left:               0;
    right:              0;
    height:             4px;
    background:         var(--gradient-red);
    border-radius:      var(--radius-lg) var(--radius-lg) 0 0;
}

.login-logo {
    display:            flex;
    align-items:        center;
    justify-content:    center;
    gap:                14px;
    margin-bottom:      24px;
}

.login-emblem {
    width:              56px;
    height:             56px;
    border-radius:      14px;
    background:         var(--dark);
    display:            flex;
    align-items:        center;
    justify-content:    center;
}

.login-emblem svg {
    width:              36px;
    height:             36px;
}

.login-brand-name {
    font-size:          20px;
    font-weight:        900;
    color:              var(--dark);
    letter-spacing:     -0.5px;
    line-height:        1.2;
    text-align:         left;
}

.login-brand-sub {
    font-size:          11px;
    font-weight:        600;
    color:              var(--primary);
    text-transform:     uppercase;
    letter-spacing:     1.5px;
    text-align:         left;
}

.login-card h2 {
    font-size:          26px;
    font-weight:        900;
    color:              var(--text);
    margin-bottom:      6px;
    letter-spacing:     -0.5px;
}

.login-card > p {
    font-size:          14px;
    color:              var(--text-muted);
    margin-bottom:      28px;
}

.login-error {
    background:         rgba(220,38,38,0.08);
    border:             1px solid rgba(220,38,38,0.2);
    color:              #dc2626;
    padding:            10px 14px;
    border-radius:      var(--radius-sm);
    font-size:          13px;
    font-weight:        500;
    margin-bottom:      16px;
    text-align:         left;
    animation:          shake 0.4s ease;
}

.login-hint {
    margin-top:         20px;
    font-size:          12.5px;
    color:              var(--text-muted);
    background:         var(--bg-2);
    border:             1px solid var(--border);
    padding:            8px 14px;
    border-radius:      var(--radius-sm);
}

.login-hint strong {
    color:              var(--primary);
    font-weight:        700;
}

.login-back-link {
    display:            inline-block;
    margin-top:         18px;
    font-size:          13px;
    color:              var(--text-muted);
    text-decoration:    none;
    font-weight:        500;
    transition:         var(--transition);
}

.login-back-link:hover {
    color:              var(--primary);
}


/* ─── ADMIN LAYOUT ─── */
.admin-layout {
    display:            grid;
    grid-template-columns: 260px 1fr;
    min-height:         100vh;
    background:         #f4f5f7;
}


/* ─── SIDEBAR ─── */
.admin-sidebar {
    background:         #0f0f0f;
    display:            flex;
    flex-direction:     column;
    position:           fixed;
    width:              260px;
    height:             100vh;
    overflow-y:         auto;
    overflow-x:         hidden;
    z-index:            var(--z-sidebar);
    transition:         transform 0.3s ease;
    scrollbar-width:    thin;
    scrollbar-color:    rgba(255,255,255,0.08) transparent;
}

.admin-sidebar::-webkit-scrollbar {
    width:              4px;
}

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

/* Sidebar Logo */
.admin-sidebar-logo {
    display:            flex;
    align-items:        center;
    gap:                12px;
    padding:            24px 20px 20px;
    cursor:             pointer;
    text-decoration:    none;
    border-bottom:      1px solid rgba(255,255,255,0.06);
    margin-bottom:      8px;
    transition:         var(--transition);
}

.admin-sidebar-logo:hover {
    background:         rgba(255,255,255,0.03);
}

.sidebar-emblem {
    width:              40px;
    height:             40px;
    border-radius:      10px;
    background:         var(--gradient-red);
    flex-shrink:        0;
    display:            flex;
    align-items:        center;
    justify-content:    center;
}

.sidebar-emblem svg {
    width:              26px;
    height:             26px;
}

.sidebar-logo-top {
    font-size:          13px !important;
    color:              #ffffff !important;
    font-weight:        800;
    letter-spacing:     0.5px;
}

/* Sidebar Nav */
.admin-nav {
    flex:               1;
    padding:            8px 0;
}

.admin-nav-group {
    margin-bottom:      6px;
    padding:            0 12px;
}

.admin-nav-label {
    font-size:          9.5px;
    font-weight:        700;
    text-transform:     uppercase;
    letter-spacing:     2px;
    color:              rgba(255,255,255,0.25);
    padding:            12px 8px 6px;
    display:            block;
}

.admin-nav-link {
    display:            flex;
    align-items:        center;
    gap:                10px;
    padding:            10px 12px;
    color:              rgba(255,255,255,0.5);
    text-decoration:    none;
    font-size:          14px;
    font-weight:        500;
    transition:         var(--transition);
    border-radius:      var(--radius-sm);
    cursor:             pointer;
    margin-bottom:      2px;
    user-select:        none;
    position:           relative;
}

.admin-nav-link:hover {
    color:              rgba(255,255,255,0.85);
    background:         rgba(255,255,255,0.06);
}

.admin-nav-link.active {
    color:              #ffffff;
    background:         rgba(204,0,0,0.15);
    font-weight:        600;
}

.admin-nav-link.active::before {
    content:            '';
    position:           absolute;
    left:               0;
    top:                6px;
    bottom:             6px;
    width:              3px;
    background:         var(--primary);
    border-radius:      0 3px 3px 0;
    margin-left:        -12px;
}

.nav-ico {
    font-size:          17px;
    width:              20px;
    text-align:         center;
    flex-shrink:        0;
}

.nav-badge {
    margin-left:        auto;
    background:         var(--primary);
    color:              #ffffff;
    font-size:          10px;
    font-weight:        700;
    padding:            2px 7px;
    border-radius:      20px;
    min-width:          20px;
    text-align:         center;
}

.nav-badge:empty {
    display:            none;
}

/* Sidebar Footer */
.admin-sidebar-footer {
    padding:            16px 20px;
    border-top:         1px solid rgba(255,255,255,0.06);
    background:         rgba(0,0,0,0.2);
}

.admin-user {
    display:            flex;
    align-items:        center;
    gap:                10px;
    margin-bottom:      12px;
}

.admin-user-av {
    width:              36px;
    height:             36px;
    background:         var(--gradient-red);
    border-radius:      50%;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          14px;
    font-weight:        800;
    color:              #ffffff;
    flex-shrink:        0;
}

.admin-user-name {
    font-size:          13px;
    font-weight:        600;
    color:              #ffffff;
    line-height:        1.3;
}

.admin-user-role {
    font-size:          11px;
    color:              rgba(255,255,255,0.35);
    font-weight:        400;
}

.admin-logout-btn {
    display:            flex;
    align-items:        center;
    gap:                8px;
    color:              rgba(255,255,255,0.4);
    font-size:          13px;
    cursor:             pointer;
    padding:            8px 10px;
    border-radius:      var(--radius-sm);
    transition:         var(--transition);
    background:         none;
    border:             none;
    font-family:        var(--font-family);
    width:              100%;
    text-align:         left;
}

.admin-logout-btn:hover {
    color:              #ffffff;
    background:         rgba(204,0,0,0.2);
}


/* ─── ADMIN MAIN ─── */
.admin-main {
    margin-left:        260px;
    background:         #f4f5f7;
    min-height:         100vh;
    display:            flex;
    flex-direction:     column;
}


/* ─── TOP BAR ─── */
.admin-topbar {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    padding:            0 32px;
    height:             64px;
    background:         #ffffff;
    border-bottom:      1px solid var(--border);
    position:           sticky;
    top:                0;
    z-index:            50;
    gap:                16px;
    flex-shrink:        0;
}

.admin-page-title {
    font-size:          18px;
    font-weight:        800;
    color:              var(--text);
    display:            flex;
    align-items:        center;
    gap:                10px;
    letter-spacing:     -0.3px;
}

.admin-topbar-actions {
    display:            flex;
    align-items:        center;
    gap:                10px;
}

.go-site-btn {
    font-size:          13px;
    color:              var(--text-3);
    text-decoration:    none;
    display:            flex;
    align-items:        center;
    gap:                6px;
    padding:            8px 16px;
    border-radius:      var(--radius-sm);
    border:             1.5px solid var(--border);
    transition:         var(--transition);
    font-weight:        500;
    background:         #fff;
}

.go-site-btn:hover {
    border-color:       var(--primary);
    color:              var(--primary);
    background:         var(--primary-faint);
}


/* ─── ADMIN CONTENT ─── */
.admin-content {
    padding:            28px 32px;
    flex:               1;
}

.admin-tab {
    animation:          fadeIn 0.2s ease;
}


/* ─── DASHBOARD STATS ─── */
.dash-stats {
    display:            grid;
    grid-template-columns: repeat(4,1fr);
    gap:                18px;
    margin-bottom:      24px;
}

.dash-stat {
    background:         #ffffff;
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-md);
    padding:            22px 20px;
    display:            flex;
    align-items:        center;
    gap:                16px;
    transition:         var(--transition);
    position:           relative;
    overflow:           hidden;
}

.dash-stat::after {
    content:            '';
    position:           absolute;
    bottom:             0;
    left:               0;
    right:              0;
    height:             3px;
    background:         var(--gradient-red);
    transform:          scaleX(0);
    transition:         transform 0.3s ease;
    transform-origin:   left;
}

.dash-stat:hover::after {
    transform:          scaleX(1);
}

.dash-stat:hover {
    box-shadow:         var(--shadow-md);
    transform:          translateY(-3px);
    border-color:       rgba(204,0,0,0.15);
}

.ds-ico {
    width:              52px;
    height:             52px;
    border-radius:      14px;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          24px;
    flex-shrink:        0;
}

.ds-red    { background: rgba(204,0,0,0.08);  color: var(--primary); }
.ds-green  { background: var(--green-bg);      color: var(--green); }
.ds-blue   { background: var(--blue-bg);       color: var(--blue); }
.ds-orange { background: var(--orange-bg);     color: var(--orange); }
.ds-purple { background: var(--purple-bg);     color: var(--purple); }

.ds-info h4 {
    font-size:          28px;
    font-weight:        900;
    color:              var(--text);
    margin-bottom:      3px;
    letter-spacing:     -0.5px;
    line-height:        1;
}

.ds-info p {
    font-size:          12.5px;
    color:              var(--text-muted);
    font-weight:        500;
}


/* ─── DASH TWO COL ─── */
.dash-two-col {
    display:            grid;
    grid-template-columns: 1fr 1fr;
    gap:                20px;
    margin-bottom:      20px;
}


/* ─── QUICK ACTIONS ─── */
.quick-actions-row {
    display:            grid;
    grid-template-columns: repeat(4,1fr);
    gap:                14px;
}

.quick-action-btn {
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    justify-content:    center;
    gap:                8px;
    padding:            22px 16px;
    background:         var(--bg-2);
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-md);
    cursor:             pointer;
    transition:         var(--transition);
    font-family:        var(--font-family);
    text-align:         center;
}

.quick-action-btn:hover {
    border-color:       var(--primary);
    background:         var(--primary-faint);
    transform:          translateY(-4px);
    box-shadow:         var(--shadow-md);
}

.quick-action-btn span {
    font-size:          30px;
    line-height:        1;
}

.quick-action-btn strong {
    font-size:          13px;
    font-weight:        700;
    color:              var(--text);
}

.quick-action-btn small {
    font-size:          11.5px;
    color:              var(--text-muted);
    font-weight:        400;
}


/* ─── ADMIN CARDS ─── */
.admin-card {
    background:         #ffffff;
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-md);
    overflow:           hidden;
    margin-bottom:      20px;
    box-shadow:         var(--shadow-xs);
}

.admin-card-head {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    padding:            16px 22px;
    border-bottom:      1px solid var(--border);
    flex-wrap:          wrap;
    gap:                12px;
    background:         #fff;
}

.admin-card-head h3 {
    font-size:          15px;
    font-weight:        800;
    color:              var(--text);
    display:            flex;
    align-items:        center;
    gap:                8px;
}

.admin-card-link {
    font-size:          13px;
    font-weight:        600;
    color:              var(--primary);
    text-decoration:    none;
    cursor:             pointer;
    transition:         var(--transition);
    padding:            4px 10px;
    border-radius:      20px;
    background:         var(--primary-faint);
}

.admin-card-link:hover {
    background:         var(--primary);
    color:              #fff;
}

.admin-card-actions {
    display:            flex;
    align-items:        center;
    gap:                10px;
}

.admin-card-body {
    padding:            20px;
}

.admin-card-body.no-pad {
    padding:            0;
}

.admin-table-wrap {
    overflow-x:         auto;
}


/* ─── ADMIN TABLE ─── */
.admin-table {
    width:              100%;
    border-collapse:    collapse;
}

.admin-table thead {
    position:           sticky;
    top:                0;
    z-index:            1;
}

.admin-table th {
    padding:            11px 16px;
    text-align:         left;
    font-size:          11px;
    font-weight:        700;
    text-transform:     uppercase;
    letter-spacing:     0.8px;
    color:              var(--text-muted);
    background:         var(--bg-2);
    border-bottom:      1px solid var(--border);
    white-space:        nowrap;
}

.admin-table td {
    padding:            13px 16px;
    font-size:          13.5px;
    border-bottom:      1px solid var(--border);
    color:              var(--text-2);
    vertical-align:     middle;
}

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

.admin-table tbody tr:hover td {
    background:         #fafafa;
}

.car-cell {
    display:            flex;
    align-items:        center;
    gap:                12px;
}

.car-cell img {
    width:              66px;
    height:             46px;
    border-radius:      var(--radius-sm);
    object-fit:         cover;
    flex-shrink:        0;
    border:             1px solid var(--border);
}

.car-cell-info {
    font-size:          14px;
    font-weight:        700;
    color:              var(--text);
}

.car-cell-sub {
    font-size:          12px;
    color:              var(--text-muted);
    margin-top:         2px;
}


/* ─── SEARCH INPUT ─── */
.admin-search-input {
    background:         var(--bg-2);
    border:             1.5px solid var(--border);
    color:              var(--text);
    padding:            8px 14px;
    border-radius:      var(--radius-sm);
    font-size:          13px;
    font-family:        var(--font-family);
    outline:            none;
    width:              200px;
    transition:         var(--transition);
}

.admin-search-input:focus {
    border-color:       var(--primary);
    box-shadow:         0 0 0 3px rgba(204,0,0,0.08);
    background:         #fff;
}

.admin-search-input::placeholder {
    color:              var(--text-muted);
}


/* ─── ENQ FILTER TABS ─── */
.enq-filter-tabs {
    display:            flex;
    gap:                6px;
}

.enq-filter-tabs .ftab {
    font-size:          12px;
    padding:            6px 14px;
}


/* ─── ACTIVITY LOG ─── */
.activity-list {
    display:            flex;
    flex-direction:     column;
}

.activity-item {
    display:            flex;
    align-items:        flex-start;
    gap:                14px;
    padding:            12px 0;
    border-bottom:      1px solid var(--border);
}

.activity-item:last-child {
    border-bottom:      none;
}

.act-dot {
    width:              10px;
    height:             10px;
    border-radius:      50%;
    margin-top:         5px;
    flex-shrink:        0;
}

.act-dot.add  { background: var(--green); }
.act-dot.edit { background: var(--blue); }
.act-dot.del  { background: var(--red-danger); }
.act-dot.msg  { background: var(--orange); }

.act-text {
    font-size:          13.5px;
    color:              var(--text-2);
    line-height:        1.5;
    font-weight:        500;
}

.act-time {
    font-size:          12px;
    color:              var(--text-muted);
    margin-top:         3px;
}


/* ─── ENQ DETAIL MODAL ─── */
.enq-detail-content {
    padding:            24px;
}

.enq-meta {
    display:            grid;
    grid-template-columns: 1fr 1fr;
    gap:                12px;
    margin-bottom:      18px;
}

.enq-meta-item {
    background:         var(--bg-2);
    padding:            12px 14px;
    border-radius:      var(--radius-sm);
    border:             1px solid var(--border);
}

.enq-meta-item label {
    display:            block;
    font-size:          10.5px;
    font-weight:        700;
    text-transform:     uppercase;
    color:              var(--text-muted);
    letter-spacing:     0.5px;
    margin-bottom:      4px;
}

.enq-meta-item span {
    font-size:          14px;
    font-weight:        600;
    color:              var(--text);
    word-break:         break-word;
}

.enq-message-box {
    background:         var(--bg-2);
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-md);
    padding:            16px;
    margin-bottom:      18px;
}

.enq-message-box label {
    display:            block;
    font-size:          11px;
    font-weight:        700;
    text-transform:     uppercase;
    color:              var(--text-muted);
    letter-spacing:     0.5px;
    margin-bottom:      8px;
}

.enq-message-box p {
    font-size:          14px;
    color:              var(--text-2);
    line-height:        1.72;
}

.enq-actions {
    display:            flex;
    gap:                8px;
    flex-wrap:          wrap;
}

.enq-detail-header {
    display:            flex;
    justify-content:    space-between;
    align-items:        center;
    margin-bottom:      16px;
    flex-wrap:          wrap;
    gap:                10px;
}

.enq-date {
    font-size:          12px;
    color:              var(--text-muted);
}


/* ─── ADMIN MODALS ─── */
.admin-modal {
    position:           fixed;
    inset:              0;
    background:         rgba(0,0,0,0.5);
    z-index:            var(--z-admin-modal);
    display:            flex;
    align-items:        center;
    justify-content:    center;
    opacity:            0;
    pointer-events:     none;
    transition:         opacity 0.3s ease;
    padding:            20px;
    overflow-y:         auto;
}

.admin-modal.open {
    opacity:            1;
    pointer-events:     all;
}

.admin-modal-box {
    background:         #fff;
    border-radius:      var(--radius-lg);
    max-width:          660px;
    width:              100%;
    max-height:         92vh;
    overflow-y:         auto;
    box-shadow:         var(--shadow-xl);
    transform:          scale(0.94) translateY(20px);
    transition:         transform 0.3s cubic-bezier(0.4,0,0.2,1);
    scrollbar-width:    thin;
}

.admin-modal.open .admin-modal-box {
    transform:          scale(1) translateY(0);
}

.admin-modal-head {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    padding:            18px 24px;
    border-bottom:      1px solid var(--border);
    position:           sticky;
    top:                0;
    background:         #fff;
    z-index:            2;
    border-radius:      var(--radius-lg) var(--radius-lg) 0 0;
}

.admin-modal-head h3 {
    font-size:          17px;
    font-weight:        800;
    color:              var(--text);
}

.modal-close-btn {
    width:              32px;
    height:             32px;
    border-radius:      50%;
    border:             1.5px solid var(--border);
    background:         #fff;
    cursor:             pointer;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          14px;
    transition:         var(--transition);
    color:              var(--text-3);
    flex-shrink:        0;
}

.modal-close-btn:hover {
    border-color:       var(--primary);
    color:              var(--primary);
    background:         var(--primary-faint);
}

.admin-modal-body {
    padding:            22px 24px;
}

.admin-modal-foot {
    padding:            14px 24px;
    border-top:         1px solid var(--border);
    display:            flex;
    gap:                10px;
    justify-content:    flex-end;
    position:           sticky;
    bottom:             0;
    background:         #fff;
    border-radius:      0 0 var(--radius-lg) var(--radius-lg);
}


/* ─── CONFIRM MODAL ─── */
.confirm-modal-box {
    max-width:          400px;
    padding:            40px 32px;
    text-align:         center;
}

.confirm-warn-ico {
    font-size:          44px;
    margin-bottom:      14px;
    line-height:        1;
    animation:          bounce 0.5s ease;
}

.confirm-modal-box h3 {
    font-size:          20px;
    font-weight:        800;
    margin-bottom:      8px;
    color:              var(--text);
}

.confirm-modal-box p {
    font-size:          14px;
    color:              var(--text-3);
    line-height:        1.65;
    margin-bottom:      24px;
}

.confirm-action-btns {
    display:            flex;
    gap:                10px;
    justify-content:    center;
}

.enq-modal-box {
    max-width:          540px;
    text-align:         left;
}


/* ─── SETTINGS ─── */
.settings-grid {
    display:            grid;
    grid-template-columns: 1fr 1fr;
    gap:                20px;
}

.settings-card {
    background:         #fff;
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-md);
    padding:            26px;
    box-shadow:         var(--shadow-xs);
}

.settings-card h3 {
    font-size:          15px;
    font-weight:        800;
    color:              var(--text);
    margin-bottom:      18px;
    padding-bottom:     14px;
    border-bottom:      1px solid var(--border);
    display:            flex;
    align-items:        center;
    gap:                8px;
}

.settings-card-full {
    grid-column:        1 / -1;
}

.settings-desc {
    font-size:          14px;
    color:              var(--text-3);
    line-height:        1.65;
    margin-bottom:      18px;
}

.data-mgmt-btns {
    display:            flex;
    gap:                10px;
    flex-wrap:          wrap;
}


/* ─── IMAGE URL MANAGER ─── */
.img-url-list {
    display:            flex;
    flex-direction:     column;
    gap:                8px;
    margin-bottom:      10px;
}

.img-url-row {
    display:            flex;
    align-items:        center;
    gap:                8px;
}

.img-url-input {
    flex:               1;
    background:         var(--bg-2);
    border:             1.5px solid var(--border);
    color:              var(--text);
    padding:            9px 12px;
    border-radius:      var(--radius-sm);
    font-size:          13px;
    font-family:        var(--font-family);
    transition:         var(--transition);
    outline:            none;
}

.img-url-input:focus {
    border-color:       var(--primary);
    box-shadow:         0 0 0 3px rgba(204,0,0,0.08);
    background:         #fff;
}

.img-url-input::placeholder {
    color:              var(--text-muted);
    font-size:          12px;
}

.img-remove-btn {
    width:              34px;
    height:             34px;
    border-radius:      var(--radius-sm);
    border:             1.5px solid var(--border);
    background:         #fff;
    cursor:             pointer;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          13px;
    transition:         var(--transition);
    flex-shrink:        0;
    color:              var(--text-muted);
}

.img-remove-btn:hover {
    border-color:       var(--red-danger);
    color:              var(--red-danger);
    background:         var(--red-danger-bg);
}

.add-img-btn {
    display:            flex;
    align-items:        center;
    justify-content:    center;
    gap:                6px;
    padding:            9px 14px;
    background:         var(--bg-2);
    border:             1.5px dashed var(--border);
    border-radius:      var(--radius-sm);
    cursor:             pointer;
    font-size:          13px;
    font-weight:        600;
    color:              var(--text-3);
    transition:         var(--transition);
    font-family:        var(--font-family);
    width:              100%;
}

.add-img-btn:hover {
    border-color:       var(--primary);
    color:              var(--primary);
    background:         var(--primary-faint);
}


/* ─── FEATURE TAGS ─── */
.feat-tags-wrap {
    display:            flex;
    flex-wrap:          wrap;
    gap:                6px;
    margin-bottom:      10px;
    min-height:         36px;
    padding:            8px;
    background:         var(--bg-2);
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-sm);
}

.feat-tag {
    display:            inline-flex;
    align-items:        center;
    gap:                5px;
    background:         #fff;
    border:             1px solid var(--border);
    padding:            4px 10px;
    border-radius:      20px;
    font-size:          12px;
    font-weight:        500;
    color:              var(--text-2);
    transition:         var(--transition);
}

.feat-tag:hover {
    border-color:       var(--primary);
}

.feat-tag button {
    background:         none;
    border:             none;
    cursor:             pointer;
    color:              var(--text-muted);
    font-size:          13px;
    line-height:        1;
    padding:            0;
    transition:         var(--transition);
}

.feat-tag button:hover {
    color:              var(--red-danger);
}

.feat-input-row {
    display:            flex;
    gap:                8px;
}

.feat-input-row input {
    flex:               1;
    background:         var(--bg-2);
    border:             1.5px solid var(--border);
    color:              var(--text);
    padding:            9px 12px;
    border-radius:      var(--radius-sm);
    font-size:          13px;
    font-family:        var(--font-family);
    transition:         var(--transition);
    outline:            none;
}

.feat-input-row input:focus {
    border-color:       var(--primary);
    box-shadow:         0 0 0 3px rgba(204,0,0,0.08);
    background:         #fff;
}


/* ─── MOBILE TOGGLE ─── */
.admin-mob-toggle {
    display:            none;
    position:           fixed;
    bottom:             20px;
    left:               20px;
    width:              48px;
    height:             48px;
    border-radius:      50%;
    background:         var(--dark);
    color:              #fff;
    border:             none;
    font-size:          20px;
    cursor:             pointer;
    z-index:            calc(var(--z-sidebar) - 1);
    box-shadow:         var(--shadow-lg);
    align-items:        center;
    justify-content:    center;
    transition:         var(--transition);
}

.admin-mob-toggle:hover {
    background:         var(--primary);
}


/* ─── STATUS BADGES ─── */
.status-badge {
    display:            inline-flex;
    align-items:        center;
    gap:                4px;
    padding:            3px 10px;
    border-radius:      20px;
    font-size:          11.5px;
    font-weight:        600;
    white-space:        nowrap;
}

.sb-active   { background: var(--green-bg);   color: var(--green); }
.sb-reserved { background: var(--orange-bg);  color: var(--orange); }
.sb-sold     { background: rgba(0,0,0,0.06);  color: #888; }
.sb-featured { background: var(--primary-faint); color: var(--primary); }
.sb-unread   { background: var(--blue-bg);    color: var(--blue); }
.sb-read     { background: rgba(0,0,0,0.04);  color: #999; }
.sb-premium  { background: rgba(0,0,0,0.06);  color: var(--dark-3); }


/* ─── ACTION BUTTONS ─── */
.action-btns {
    display:            flex;
    gap:                6px;
}

.action-btn {
    width:              32px;
    height:             32px;
    border-radius:      var(--radius-sm);
    border:             1.5px solid var(--border);
    background:         #fff;
    cursor:             pointer;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          14px;
    transition:         var(--transition);
}

.action-btn:hover {
    border-color:       var(--primary);
    background:         var(--primary-faint);
}

.action-btn.del:hover {
    border-color:       var(--red-danger);
    background:         var(--red-danger-bg);
}


/* ─── EMPTY STATE ─── */
.empty-state {
    text-align:         center;
    padding:            48px 20px;
}

.empty-state .empty-ico {
    font-size:          44px;
    margin-bottom:      12px;
    opacity:            0.4;
}

.empty-state h3 {
    font-size:          17px;
    font-weight:        700;
    margin-bottom:      6px;
    color:              var(--text-2);
}

.empty-state p {
    font-size:          14px;
    color:              var(--text-muted);
}


/* ─── RESPONSIVE ─── */
@media (max-width: 1200px) {
    .dash-stats {
        grid-template-columns: repeat(2,1fr);
    }
    .dash-two-col {
        grid-template-columns: 1fr;
    }
    .quick-actions-row {
        grid-template-columns: repeat(2,1fr);
    }
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }
    .admin-sidebar {
        transform:          translateX(-100%);
    }
    .admin-sidebar.open {
        transform:          translateX(0);
    }
    .admin-main {
        margin-left:        0;
    }
    .admin-mob-toggle {
        display:            flex;
    }
    .admin-topbar {
        padding:            0 20px;
    }
    .admin-content {
        padding:            20px;
    }
}

@media (max-width: 600px) {
    .login-card {
        padding:            36px 24px;
    }
    .admin-content {
        padding:            16px;
    }
    .dash-stats {
        grid-template-columns: 1fr;
    }
    .quick-actions-row {
        grid-template-columns: 1fr 1fr;
    }
    .enq-meta {
        grid-template-columns: 1fr;
    }
    .admin-modal-body {
        padding:            18px;
    }
    .admin-modal-foot {
        padding:            14px 18px;
        flex-wrap:          wrap;
    }
    .data-mgmt-btns {
        flex-direction:     column;
    }
    .confirm-modal-box {
        padding:            28px 20px;
    }
}

/* ============================================================
   IMAGE UPLOAD PREVIEW
============================================================ */

#imagePreviewGrid {
    display:            grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                8px;
}

@media (max-width: 600px) {
    #imagePreviewGrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 400px) {
    #imagePreviewGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Drop zone hover effect */
#dropZone:hover {
    border-color:       var(--primary) !important;
    background:         rgba(204,0,0,0.03) !important;
}

/* ============================================================
   NOTIFICATION DROPDOWN
============================================================ */

/* Scrollbar for notification list */
#notifList::-webkit-scrollbar {
    width: 4px;
}

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

/* Responsive */
@media (max-width: 480px) {
    #notifDropdown {
        width: calc(100vw - 32px) !important;
        right: -60px !important;
    }
}

/* Blink animation for notification dot */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Fade in animation for dropdown */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bell shake animation */
@keyframes bellShake {
    0%   { transform: rotate(0); }
    15%  { transform: rotate(14deg); }
    30%  { transform: rotate(-14deg); }
    45%  { transform: rotate(10deg); }
    60%  { transform: rotate(-10deg); }
    75%  { transform: rotate(6deg); }
    90%  { transform: rotate(-4deg); }
    100% { transform: rotate(0); }
}

/* ============================================================
   PRINT STYLES
============================================================ */

/* Print modal is wider */
#printModal .admin-modal-box {
    max-width:          900px;
    max-height:         95vh;
}

/* Print content area */
#printContent {
    font-family:        -apple-system, BlinkMacSystemFont,
                        'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color:              #333;
    background:         #fff;
}

/* Print table */
.print-table {
    width:              100%;
    border-collapse:    collapse;
    font-size:          13px;
}

.print-table th {
    padding:            10px 12px;
    font-size:          10px;
    font-weight:        700;
    text-transform:     uppercase;
    letter-spacing:     0.8px;
    text-align:         left;
    white-space:        nowrap;
}

.print-table td {
    padding:            10px 12px;
    font-size:          13px;
    border-bottom:      1px solid #eee;
    vertical-align:     middle;
}

.print-table tbody tr:nth-child(even) {
    background:         #f8f8f8;
}

.print-table tbody tr:hover {
    background:         #f0f0f0;
}

/* Print header */
.print-header {
    display:            flex;
    align-items:        flex-start;
    justify-content:    space-between;
    padding-bottom:     18px;
    border-bottom:      3px solid #cc0000;
    margin-bottom:      20px;
    gap:                20px;
}

.print-logo img {
    height:             55px;
    width:              auto;
    max-width:          200px;
    object-fit:         contain;
}

.print-contact {
    text-align:         right;
    font-size:          12px;
    color:              #333;
    line-height:        1.7;
}

.print-contact-label {
    font-size:          10px;
    font-weight:        700;
    color:              #cc0000;
    text-transform:     uppercase;
    letter-spacing:     1.5px;
    margin-bottom:      5px;
}

/* Title bar */
.print-title-bar {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    margin-bottom:      16px;
    padding:            12px 16px;
    background:         #f7f7f7;
    border-radius:      8px;
    border:             1px solid #e0e0e0;
}

/* Footer */
.print-footer {
    margin-top:         20px;
    padding-top:        14px;
    border-top:         1px solid #e0e0e0;
    display:            flex;
    justify-content:    space-between;
    align-items:        center;
    font-size:          11px;
    color:              #999;
}

/* When actually printing — hide modal chrome */
@media print {

    /* Hide everything except print content */
    body > *:not(#printModal) {
        display:        none !important;
    }

    /* Show modal full screen */
    #printModal {
        position:       fixed !important;
        inset:          0 !important;
        background:     #fff !important;
        z-index:        99999 !important;
        display:        block !important;
        opacity:        1 !important;
        pointer-events: all !important;
        overflow:       visible !important;
        padding:        0 !important;
    }

    #printModal .admin-modal-box {
        max-width:      100% !important;
        max-height:     none !important;
        width:          100% !important;
        height:         auto !important;
        border:         none !important;
        border-radius:  0 !important;
        box-shadow:     none !important;
        overflow:       visible !important;
        transform:      none !important;
    }

    /* Hide modal header (buttons) */
    #printModal .admin-modal-head {
        display:        none !important;
    }

    /* Print content full width */
    #printModal .admin-modal-body {
        padding:        0 !important;
        overflow:       visible !important;
    }

    #printContent {
        padding:        20px !important;
        overflow:       visible !important;
    }

    /* Make table not cut off */
    .print-table {
        page-break-inside: auto;
    }

    .print-table tr {
        page-break-inside: avoid;
    }

    /* Page settings */
    @page {
        size:           A4 landscape;
        margin:         12mm;
    }
}