/* ================================================
   NICEWORK CLIENT PORTAL — Component Styles
   ================================================ */

/* RESET */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh;width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}
input,select,textarea{font-family:inherit;color:var(--text)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.15)}
.text-gold{color:var(--gold)}

/* =============================================
   LOGIN SCREEN
   ============================================= */
.login-screen {
    position:fixed;inset:0;z-index:9999;
    background:var(--bg);
    display:flex;align-items:center;justify-content:center;
    transition:opacity 0.5s,visibility 0.5s;
}
.login-screen.hidden { opacity:0;visibility:hidden;pointer-events:none }

.login-bg {
    position:absolute;inset:0;
    background:radial-gradient(ellipse at 30% 50%,rgba(212,175,55,0.06) 0%,transparent 60%),
               radial-gradient(ellipse at 70% 80%,rgba(96,165,250,0.04) 0%,transparent 50%);
}

.login-card {
    position:relative;z-index:1;
    background:var(--bg-login);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:48px 40px;
    width:420px;max-width:92vw;
    box-shadow:var(--shadow-lg);
}

.login-logo {
    text-align:center;margin-bottom:32px;
}
.login-logo img { width:160px;height:auto;margin-bottom:12px }
.login-logo p { color:var(--text-muted);font-size:0.85rem }

.login-form { display:flex;flex-direction:column;gap:18px }

.login-field { display:flex;flex-direction:column;gap:6px }
.login-field label { font-size:0.8rem;color:var(--text-muted);font-weight:500 }
.login-field input, .login-field select {
    background:var(--bg-input);
    border:1px solid var(--border);
    border-radius:var(--radius-xs);
    padding:12px 14px;font-size:0.9rem;
    color:var(--text);outline:none;
    transition:var(--transition);
}
.login-field input:focus, .login-field select:focus { border-color:var(--gold) }
.login-field select { cursor:pointer;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='%238a95a8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}

.login-btn {
    margin-top:8px;padding:14px;border-radius:var(--radius-xs);
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:#0B1C2C;font-weight:700;font-size:0.95rem;
    transition:var(--transition);
    box-shadow:var(--glow-gold);
}
.login-btn:hover { transform:translateY(-1px);box-shadow:0 0 30px rgba(212,175,55,0.3) }

.login-demo {
    margin-top:20px;text-align:center;
    padding-top:20px;border-top:1px solid var(--border);
}
.login-demo p { font-size:0.75rem;color:var(--text-dim);margin-bottom:10px }
.login-demo-btns { display:flex;gap:8px }
.login-demo-btn {
    flex:1;padding:10px;border-radius:var(--radius-xs);
    border:1px solid var(--border);
    background:var(--bg-card);
    font-size:0.8rem;font-weight:500;
    transition:var(--transition);
    display:flex;align-items:center;justify-content:center;gap:6px;
}
.login-demo-btn:hover { border-color:var(--border-gold);background:var(--bg-hover) }
.login-demo-btn i { color:var(--gold) }

/* =============================================
   APP LAYOUT
   ============================================= */
.app { display:flex;min-height:100vh;width:100% }

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;border-radius:var(--radius-sm);transition:var(--transition);white-space:nowrap;font-size:0.875rem}
.btn--xs{padding:6px 12px;font-size:0.75rem;border-radius:var(--radius-xs)}
.btn--sm{padding:10px 18px;font-size:0.8rem}
.btn--md{padding:12px 24px}
.btn--primary{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#0B1C2C;box-shadow:var(--glow-gold)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(212,175,55,0.3)}
.btn--glass{background:var(--bg-glass);border:1px solid var(--border)}
.btn--glass:hover{border-color:var(--border-gold);background:var(--bg-hover)}
.btn--ghost{background:transparent;border:1px solid var(--border)}
.btn--ghost:hover{border-color:var(--border-gold)}
.btn--danger{background:var(--red-bg);color:var(--red);border:1px solid rgba(248,113,113,0.2)}
.btn--danger:hover{background:rgba(248,113,113,0.2)}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:0.7rem;font-weight:600;letter-spacing:0.3px}
.badge--success{background:var(--green-bg);color:var(--green)}
.badge--warning{background:var(--orange-bg);color:var(--orange)}
.badge--info{background:var(--blue-bg);color:var(--blue)}
.badge--neutral{background:rgba(255,255,255,0.05);color:var(--text-muted)}
.badge--danger{background:var(--red-bg);color:var(--red)}

/* CARDS */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:var(--transition);width:100%}
.card:hover{border-color:var(--border-gold)}
.card--highlight{border-color:var(--border-gold);box-shadow:var(--glow-gold)}
.card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.card__header h3{font-size:1rem;font-weight:600;display:flex;align-items:center;gap:8px}
.card__header h3 i{color:var(--gold);font-size:0.9rem}
.card__action{font-size:0.8rem;color:var(--gold);font-weight:500;transition:var(--transition)}
.card__action:hover{opacity:0.8}
.card__header-actions{display:flex;gap:8px;align-items:center}
.card__body{padding:0}

/* FILTER */
.filter-select{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);padding:8px 30px 8px 12px;font-size:0.8rem;color:var(--text);outline:none;cursor:pointer;transition:var(--transition);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='%238a95a8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.filter-select:focus{border-color:var(--gold)}
.filter-tabs{display:flex;gap:4px;margin-bottom:20px;flex-wrap:wrap}
.filter-tab{padding:8px 16px;border-radius:var(--radius-xs);font-size:0.8rem;font-weight:500;color:var(--text-muted);border:1px solid var(--border);background:transparent;transition:var(--transition);cursor:pointer}
.filter-tab:hover{color:var(--text);border-color:var(--border-gold)}
.filter-tab.active{background:rgba(212,175,55,0.1);color:var(--gold);border-color:var(--border-gold)}
.section-tabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:12px}
.section-tab{padding:8px 18px;border-radius:var(--radius-xs);font-size:0.85rem;font-weight:500;color:var(--text-muted);background:transparent;transition:var(--transition);cursor:pointer;border:1px solid transparent}
.section-tab:hover{color:var(--text)}
.section-tab.active{background:rgba(212,175,55,0.1);color:var(--gold);border-color:var(--border-gold)}
.tab-section{display:none}
.tab-section.active{display:block}

/* =============================================
   SIDEBAR
   ============================================= */
.sidebar{
    position:fixed;left:0;top:0;bottom:0;
    width:var(--sidebar-w);z-index:100;
    background:var(--bg-sidebar);
    border-right:1px solid var(--border);
    display:flex;flex-direction:column;
    transition:width var(--transition);
    overflow:hidden;
}
.sidebar.collapsed{width:var(--sidebar-collapsed)}
.sidebar.collapsed .sidebar__brand,
.sidebar.collapsed .sidebar__user-info,
.sidebar.collapsed .sidebar__link span,
.sidebar.collapsed .sidebar__badge,
.sidebar.collapsed .sidebar__dot,
.sidebar.collapsed .sidebar__nav-label,
.sidebar.collapsed .sidebar__plan-info span,
.sidebar.collapsed .sidebar__plan-text,
.sidebar.collapsed .sidebar__plan-bar { display:none }
.sidebar.collapsed .sidebar__link { justify-content:center;padding:12px }
.sidebar.collapsed .sidebar__user { justify-content:center }
.sidebar.collapsed .sidebar__collapse i { transform:rotate(180deg) }

.sidebar__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.sidebar__logo{display:flex;align-items:center;gap:10px}
.sidebar__logo img { width:120px;height:auto }
.sidebar__brand{font-weight:700;font-size:1.15rem;letter-spacing:-0.5px}
.sidebar__collapse{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--text-muted);transition:var(--transition)}
.sidebar__collapse:hover{background:var(--bg-hover);color:var(--gold)}
.sidebar__collapse i{transition:transform var(--transition)}

.sidebar__user{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.sidebar__avatar{position:relative;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--gold-light));display:grid;place-items:center;font-weight:700;font-size:0.8rem;color:#0B1C2C;flex-shrink:0}
.sidebar__avatar-status{position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid var(--bg-sidebar)}
.sidebar__user-info{overflow:hidden}
.sidebar__user-name{display:block;font-weight:600;font-size:0.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar__user-role{display:block;font-size:0.72rem;color:var(--text-muted)}

.sidebar__nav{flex:1;overflow-y:auto;padding:12px 10px}
.sidebar__nav-label{display:block;padding:12px 10px 6px;font-size:0.65rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim)}
.sidebar__link{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius-sm);color:var(--text-muted);transition:var(--transition);font-size:0.85rem;font-weight:500;position:relative}
.sidebar__link:hover{background:var(--bg-hover);color:var(--text)}
.sidebar__link.active{background:var(--bg-hover);color:var(--gold);border:1px solid var(--border-gold)}
.sidebar__link i{width:18px;text-align:center;font-size:0.9rem}
.sidebar__badge{background:var(--red-bg);color:var(--red);font-size:0.65rem;font-weight:700;padding:2px 8px;border-radius:10px;margin-left:auto}
.sidebar__badge--green{background:var(--green-bg);color:var(--green)}
.sidebar__dot{width:8px;height:8px;border-radius:50%;margin-left:auto;flex-shrink:0}
.sidebar__dot--warning{background:var(--orange)}

/* Admin only items */
.admin-only { display:none }
.app[data-role="admin"] .admin-only { display:flex }
.app[data-role="admin"] .admin-only-block { display:block }
.admin-only-block { display:none }

/* Project page: client vs admin view */
.app[data-role="admin"] .client-view { display:none }
.app[data-role="admin"] .admin-view { display:block !important }
.app[data-role="client"] .client-view { display:block }
.app[data-role="client"] .admin-view { display:none !important }

.sidebar__footer{padding:16px 20px;border-top:1px solid var(--border)}
.sidebar__plan{display:flex;flex-direction:column;gap:6px}
.sidebar__plan-info{display:flex;align-items:center;gap:6px;font-size:0.8rem;font-weight:600}
.sidebar__plan-info i{color:var(--gold);font-size:0.75rem}
.sidebar__plan-bar{height:4px;border-radius:2px;background:rgba(255,255,255,0.06);overflow:hidden}
.sidebar__plan-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width 1s ease}
.sidebar__plan-text{font-size:0.7rem;color:var(--text-dim)}

.sidebar__logout{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-sm);color:var(--red);font-size:0.85rem;font-weight:500;transition:var(--transition);width:100%;margin-top:8px}
.sidebar__logout:hover{background:var(--red-bg)}

/* MAIN WRAPPER */
.main-wrapper{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;transition:margin-left var(--transition);width:calc(100% - var(--sidebar-w))}
.sidebar.collapsed ~ .main-wrapper{margin-left:var(--sidebar-collapsed);width:calc(100% - var(--sidebar-collapsed))}

/* TOPBAR */
.topbar{position:sticky;top:0;z-index:50;height:var(--topbar-h);background:var(--bg-card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:16px;width:100%}
.topbar__left{display:flex;align-items:center;gap:12px}
.topbar__burger{display:none;width:36px;height:36px;border-radius:8px;place-items:center;font-size:1rem;color:var(--text-muted)}
.topbar__breadcrumb{display:flex;align-items:center;gap:8px;font-size:0.85rem}
.topbar__breadcrumb-item{color:var(--text-muted)}
.topbar__breadcrumb-item.active{color:var(--text);font-weight:600}
.topbar__breadcrumb i{font-size:0.6rem;color:var(--text-dim)}

.topbar__right{display:flex;align-items:center;gap:12px}
.topbar__search{position:relative;display:flex;align-items:center}
.topbar__search i{position:absolute;left:12px;color:var(--text-dim);font-size:0.8rem}
.topbar__search input{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);padding:8px 14px 8px 34px;font-size:0.8rem;width:180px;outline:none;color:var(--text);transition:var(--transition)}
.topbar__search input:focus{border-color:var(--gold);width:240px}

.topbar__account-status{display:flex;align-items:center;gap:6px;font-size:0.8rem;color:var(--text-muted);padding:6px 12px;background:var(--bg-input);border-radius:var(--radius-xs);border:1px solid var(--border)}
.status-dot{width:8px;height:8px;border-radius:50%}
.status-dot--active{background:var(--green);box-shadow:0 0 6px rgba(52,211,153,0.5)}

.topbar__icon-btn{position:relative;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--text-muted);transition:var(--transition)}
.topbar__icon-btn:hover{background:var(--bg-hover);color:var(--gold)}
.topbar__notif-count{position:absolute;top:4px;right:4px;background:var(--red);color:var(--white);font-size:0.55rem;font-weight:700;width:16px;height:16px;border-radius:50%;display:grid;place-items:center}

.topbar__profile{display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition)}
.topbar__profile:hover{background:var(--bg-hover)}
.topbar__profile-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--gold),var(--gold-light));display:grid;place-items:center;font-weight:700;font-size:0.7rem;color:#0B1C2C}
.topbar__profile-info{display:flex;flex-direction:column}
.topbar__profile-name{font-size:0.8rem;font-weight:600}
.topbar__profile-id{font-size:0.65rem;color:var(--text-muted)}

/* NOTIFICATION DROPDOWN */
.notif-dropdown{position:absolute;top:calc(var(--topbar-h) - 4px);right:80px;width:360px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-8px);transition:var(--transition);z-index:60}
.notif-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.notif-dropdown__header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.notif-dropdown__header h4{font-size:0.9rem}
.notif-dropdown__mark{font-size:0.75rem;color:var(--gold);font-weight:500}
.notif-dropdown__list{max-height:300px;overflow-y:auto}
.notif-item{display:flex;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);transition:var(--transition)}
.notif-item:hover{background:var(--bg-hover)}
.notif-item--unread{background:rgba(212,175,55,0.03)}
.notif-item__icon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:0.8rem;flex-shrink:0}
.notif-item__icon--info{background:var(--blue-bg);color:var(--blue)}
.notif-item__icon--warning{background:var(--orange-bg);color:var(--orange)}
.notif-item__icon--success{background:var(--green-bg);color:var(--green)}
.notif-item__content p{font-size:0.8rem;line-height:1.4}
.notif-item__content span{font-size:0.7rem;color:var(--text-dim)}

/* CONTENT */
.content{flex:1;padding:28px 32px;overflow-y:auto}
.page{display:none;animation:fadeIn 0.3s ease;width:100%}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.page__header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.page__header h2{font-size:1.5rem;font-weight:700}
.page__header p{color:var(--text-muted);font-size:0.85rem;margin-top:4px}
.page__header-actions{display:flex;gap:8px}

/* =============================================
   DASHBOARD PAGE
   ============================================= */
.welcome-banner{background:linear-gradient(135deg,rgba(212,175,55,0.08),rgba(14,34,54,0.9));border:1px solid var(--border-gold);border-radius:var(--radius);padding:36px 40px;display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:24px;box-shadow:var(--glow-gold);width:100%}
.welcome-banner__content h1{font-size:1.6rem;font-weight:700;margin-bottom:8px}
.welcome-banner__content p{color:var(--text-muted);margin-bottom:16px}
.welcome-banner__actions{display:flex;gap:10px;flex-wrap:wrap}
.welcome-banner__ring{position:relative;width:120px;height:120px;flex-shrink:0}
.welcome-banner__ring svg{width:100%;height:100%}
.welcome-banner__ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.welcome-banner__ring-number{font-size:1.4rem;font-weight:800;color:var(--gold)}
.welcome-banner__ring-label{font-size:0.65rem;color:var(--text-muted)}

/* KPI Grid */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;width:100%}
.kpi-grid--4{grid-template-columns:repeat(4,1fr)}
.kpi-grid--3{grid-template-columns:repeat(3,1fr)}
.kpi-grid--2{grid-template-columns:repeat(2,1fr)}
.kpi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;align-items:center;gap:14px;transition:var(--transition)}
.kpi-card:hover{border-color:var(--border-gold)}
.kpi-card__icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1rem;flex-shrink:0}
.kpi-card__icon--blue{background:var(--blue-bg);color:var(--blue)}
.kpi-card__icon--green{background:var(--green-bg);color:var(--green)}
.kpi-card__icon--gold{background:rgba(212,175,55,0.1);color:var(--gold)}
.kpi-card__icon--red{background:var(--red-bg);color:var(--red)}
.kpi-card__info{flex:1}
.kpi-card__label{display:block;font-size:0.72rem;color:var(--text-muted);margin-bottom:2px}
.kpi-card__value{display:block;font-size:1.15rem;font-weight:700}
.kpi-card__trend{font-size:0.7rem;font-weight:600;display:flex;align-items:center;gap:4px}
.kpi-card__trend--up{color:var(--green)}
.kpi-card__trend--down{color:var(--red)}
.kpi-card__trend--neutral{color:var(--text-muted)}

/* Two Column Grid */
.grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;width:100%}

/* Timeline */
.timeline{display:flex;flex-direction:column;gap:0}
.timeline__item{display:flex;gap:16px;padding:16px 0;position:relative}
.timeline__item:not(:last-child)::after{content:'';position:absolute;left:15px;top:48px;bottom:0;width:2px;background:var(--border)}
.timeline__item--done::after{background:var(--green)}
.timeline__item--active::after{background:linear-gradient(to bottom,var(--gold),var(--border))}
.timeline__dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:0.7rem;position:relative;z-index:1}
.timeline__item--done .timeline__dot{background:var(--green-bg);color:var(--green);border:2px solid var(--green)}
.timeline__item--active .timeline__dot{background:rgba(212,175,55,0.1);color:var(--gold);border:2px solid var(--gold)}
.timeline__item--pending .timeline__dot{background:rgba(255,255,255,0.04);color:var(--text-dim);border:2px solid var(--border)}
.timeline__pulse{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.5)}}
.timeline__content{flex:1;min-width:0}
.timeline__row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.timeline__content h4{font-size:0.9rem;font-weight:600}
.timeline__content p{font-size:0.8rem;color:var(--text-muted)}
.timeline__date{font-size:0.72rem;color:var(--text-dim)}
.timeline__progress{height:4px;border-radius:2px;background:rgba(255,255,255,0.06);margin-top:8px;overflow:hidden}
.timeline__progress-bar{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light))}

/* Activity */
.activity-list{display:flex;flex-direction:column}
.activity-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.activity-item:last-child{border:none}
.activity-item__icon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:0.75rem;flex-shrink:0}
.activity-item__icon--blue{background:var(--blue-bg);color:var(--blue)}
.activity-item__icon--green{background:var(--green-bg);color:var(--green)}
.activity-item__icon--gold{background:rgba(212,175,55,0.1);color:var(--gold)}
.activity-item__icon--purple{background:var(--purple-bg);color:var(--purple)}
.activity-item__icon--red{background:var(--red-bg);color:var(--red)}
.activity-item__content p{font-size:0.8rem;line-height:1.4}
.activity-item__content span{font-size:0.7rem;color:var(--text-dim)}

/* Quick Access */
.quick-access{margin-bottom:24px;width:100%}
.quick-access__title{font-size:0.95rem;font-weight:600;margin-bottom:14px}
.quick-access__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.quick-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:var(--transition);font-size:0.8rem;color:var(--text-muted)}
.quick-card:hover{border-color:var(--border-gold);color:var(--gold);transform:translateY(-2px)}
.quick-card__icon{width:40px;height:40px;border-radius:10px;background:rgba(212,175,55,0.08);display:grid;place-items:center;color:var(--gold);font-size:1rem}

/* =============================================
   PROJECT STATUS PAGE
   ============================================= */
.project-overview{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.project-overview__info h3{font-size:1.1rem;margin-bottom:4px}
.project-overview__info p{font-size:0.8rem;color:var(--text-muted)}
.project-overview__meta{display:flex;gap:20px;margin-top:12px;flex-wrap:wrap}
.project-overview__meta span{font-size:0.78rem;color:var(--text-dim);display:flex;align-items:center;gap:6px}
.project-overview__meta i{color:var(--gold)}
.project-overview__progress{flex:1;min-width:200px}
.project-overview__bar{height:10px;border-radius:5px;background:rgba(255,255,255,0.06);overflow:hidden}
.project-overview__fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--gold),var(--gold-light));display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:0.6rem;font-weight:700;color:#0B1C2C}

.setup-steps{display:flex;flex-direction:column;gap:16px;margin-top:24px;width:100%}
.setup-step{display:flex;gap:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:var(--transition)}
.setup-step:hover{border-color:var(--border-gold)}
.setup-step--active{border-color:var(--border-gold);box-shadow:var(--glow-gold)}
.setup-step__number{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:0.85rem;flex-shrink:0}
.setup-step--done .setup-step__number{background:var(--green-bg);color:var(--green);border:2px solid var(--green)}
.setup-step--active .setup-step__number{background:rgba(212,175,55,0.1);color:var(--gold);border:2px solid var(--gold)}
.setup-step--pending .setup-step__number{background:rgba(255,255,255,0.04);color:var(--text-dim);border:2px solid var(--border)}
.setup-step__content{flex:1}
.setup-step__header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.setup-step__header h4{font-size:0.95rem}
.setup-step__content>p{font-size:0.82rem;color:var(--text-muted)}
.setup-step__meta{display:flex;gap:20px;margin-top:10px;flex-wrap:wrap}
.setup-step__meta span{font-size:0.75rem;color:var(--text-dim);display:flex;align-items:center;gap:4px}
.setup-step__meta i{color:var(--gold);font-size:0.7rem}
.setup-step__progress{display:flex;align-items:center;gap:10px;margin-top:10px}
.setup-step__bar{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.06);overflow:hidden}
.setup-step__fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light))}
.setup-step__progress span{font-size:0.75rem;color:var(--gold);font-weight:600}

/* Step Files (Admin upload / Client download) */
.step-files{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.step-files__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.step-files__header h5{font-size:0.8rem;font-weight:600;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.step-files__header h5 i{color:var(--gold)}
.step-upload-btn{cursor:pointer}
.step-upload-btn input[type="file"]{display:none}
.step-files__list{display:flex;flex-direction:column;gap:8px}
.step-file{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);font-size:0.82rem;transition:var(--transition)}
.step-file:hover{border-color:var(--border-gold)}
.step-file span:first-of-type{flex:1;font-weight:500}
.step-file__size{font-size:0.7rem;color:var(--text-dim)}
.step-file__actions{display:flex;gap:6px;margin-left:8px}
.step-file--new{border-color:var(--border-gold);background:rgba(212,175,55,0.04)}
/* On-hold badge */
.badge--hold{background:var(--purple-bg);color:var(--purple)}

/* =============================================
   BILLING / INVOICES
   ============================================= */
.billing-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;width:100%}
.billing-kpi{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-align:center}
.billing-kpi__label{display:block;font-size:0.75rem;color:var(--text-muted);margin-bottom:6px}
.billing-kpi__value{font-size:1.3rem;font-weight:700}
.billing-kpi__value--green{color:var(--green)}
.billing-kpi__value--gold{color:var(--gold)}
.billing-kpi__value--red{color:var(--red)}

/* TABLE */
.table-wrapper{overflow-x:auto;width:100%}
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;padding:12px 14px;font-size:0.72rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid var(--border)}
.table td{padding:14px;font-size:0.85rem;border-bottom:1px solid var(--border)}
.table tr:hover td{background:var(--bg-hover)}
.table__id{font-weight:600;color:var(--gold)}
.table__amount{font-weight:700}
.table__actions{display:flex;gap:6px}

/* =============================================
   PAYMENTS PAGE
   ============================================= */
.payment-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.payment-method{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;align-items:center;gap:14px;transition:var(--transition);cursor:pointer}
.payment-method:hover,.payment-method.active{border-color:var(--border-gold);box-shadow:var(--glow-gold)}
.payment-method__icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem}
.payment-method__icon--gold{background:rgba(212,175,55,0.1);color:var(--gold)}
.payment-method__icon--blue{background:var(--blue-bg);color:var(--blue)}
.payment-method__icon--green{background:var(--green-bg);color:var(--green)}
.payment-method__info h4{font-size:0.9rem;font-weight:600}
.payment-method__info p{font-size:0.75rem;color:var(--text-muted)}

/* =============================================
   RECEIPTS PAGE
   ============================================= */
.receipt-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:var(--transition);margin-bottom:12px}
.receipt-card:hover{border-color:var(--border-gold)}
.receipt-card__left{display:flex;align-items:center;gap:14px}
.receipt-card__icon{width:44px;height:44px;border-radius:10px;background:var(--green-bg);color:var(--green);display:grid;place-items:center;font-size:1rem}
.receipt-card__info h4{font-size:0.9rem;font-weight:600}
.receipt-card__info p{font-size:0.75rem;color:var(--text-muted)}
.receipt-card__amount{font-size:1.1rem;font-weight:700;color:var(--green)}
.receipt-card__actions{display:flex;gap:8px}

/* =============================================
   SYSTEMS ACCESS
   ============================================= */
.systems-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;width:100%}
.system-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:var(--transition)}
.system-card:hover{border-color:var(--border-gold)}
.system-card__header{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.system-card__icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1rem}
.system-card__icon--blue{background:var(--blue-bg);color:var(--blue)}
.system-card__icon--green{background:var(--green-bg);color:var(--green)}
.system-card__icon--gold{background:rgba(212,175,55,0.1);color:var(--gold)}
.system-card__icon--purple{background:var(--purple-bg);color:var(--purple)}
.system-card__status{font-size:0.75rem;display:flex;align-items:center;gap:6px}
.system-card__status--online{color:var(--green)}
.system-card__status--setup{color:var(--orange)}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
.system-card__details{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.system-detail{display:flex;align-items:center;justify-content:space-between;gap:8px}
.system-detail__label{font-size:0.75rem;color:var(--text-muted)}
.system-detail__value{display:flex;align-items:center;gap:8px}
.system-detail__value code{font-size:0.8rem;background:var(--bg-input);padding:4px 10px;border-radius:4px;font-family:'Courier New',monospace}
.system-detail__value code.masked{letter-spacing:2px;color:var(--text-dim)}
.copy-btn{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--text-muted);transition:var(--transition);font-size:0.75rem}
.copy-btn:hover{background:var(--bg-hover);color:var(--gold)}
.system-card__actions{display:flex;gap:8px}

/* =============================================
   RISK MONITOR
   ============================================= */
.risk-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;width:100%}
.risk-kpi{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.risk-kpi__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.risk-kpi__label{font-size:0.75rem;color:var(--text-muted)}
.risk-kpi__trend{font-size:0.72rem;font-weight:600;display:flex;align-items:center;gap:4px}
.risk-kpi__trend--up{color:var(--green)}
.risk-kpi__trend--down{color:var(--red)}
.risk-kpi__value{font-size:1.3rem;font-weight:700;display:block;margin-bottom:8px}
.risk-kpi__value--green{color:var(--green)}
.risk-kpi__value--warning{color:var(--orange)}
.risk-kpi__chart{height:40px}
.risk-kpi__alerts{display:flex;gap:8px}
.risk-alert-mini{font-size:0.68rem;font-weight:600;padding:4px 8px;border-radius:4px}
.risk-alert-mini--high{background:var(--red-bg);color:var(--red)}
.risk-alert-mini--medium{background:var(--orange-bg);color:var(--orange)}
.risk-gauge{height:8px;border-radius:4px;background:rgba(255,255,255,0.06);overflow:hidden}
.risk-gauge__fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--red),var(--orange),var(--green))}
.risk-gauge__label{font-size:0.7rem;color:var(--green);margin-top:4px}

.chart-container{position:relative}
.equity-svg{width:100%;height:200px}
.chart-labels{display:flex;justify-content:space-between;padding:8px 0;font-size:0.7rem;color:var(--text-dim)}
.chart-tabs{display:flex;gap:4px}
.chart-tab{padding:6px 12px;border-radius:var(--radius-xs);font-size:0.75rem;font-weight:500;color:var(--text-muted);transition:var(--transition)}
.chart-tab:hover{color:var(--text)}
.chart-tab.active{background:rgba(212,175,55,0.1);color:var(--gold)}

.alerts-list{display:flex;flex-direction:column;gap:12px}
.alert-item{display:flex;gap:14px;padding:16px;border-radius:var(--radius-sm);border:1px solid var(--border);transition:var(--transition)}
.alert-item:hover{border-color:var(--border-gold)}
.alert-item--high{border-left:3px solid var(--red)}
.alert-item--medium{border-left:3px solid var(--orange)}
.alert-item__icon{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-size:0.9rem;flex-shrink:0}
.alert-item--high .alert-item__icon{background:var(--red-bg);color:var(--red)}
.alert-item--medium .alert-item__icon{background:var(--orange-bg);color:var(--orange)}
.alert-item__content{flex:1}
.alert-item__content h4{font-size:0.9rem;margin-bottom:4px}
.alert-item__content p{font-size:0.8rem;color:var(--text-muted)}
.alert-item__time{font-size:0.7rem;color:var(--text-dim);margin-top:4px;display:block}
.alert-item__actions{display:flex;gap:6px;align-items:flex-start}

/* =============================================
   DOCUMENTS
   ============================================= */
.documents-list{display:flex;flex-direction:column}
.doc-item{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);transition:var(--transition)}
.doc-item:last-child{border:none}
.doc-item:hover{background:var(--bg-hover);margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:var(--radius-xs)}
.doc-item__icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:1rem;flex-shrink:0}
.doc-item__icon--pdf{background:var(--red-bg);color:var(--red)}
.doc-item__icon--doc{background:var(--blue-bg);color:var(--blue)}
.doc-item__icon--img{background:var(--purple-bg);color:var(--purple)}
.doc-item__info{flex:1;min-width:0}
.doc-item__info h4{font-size:0.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-item__info span{font-size:0.72rem;color:var(--text-dim)}
.doc-item__actions{display:flex;gap:6px}

/* =============================================
   SUPPORT + CHAT
   ============================================= */
.support-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:20px;width:100%}
.tickets-list{display:flex;flex-direction:column;gap:8px}
.ticket-item{padding:14px;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;transition:var(--transition)}
.ticket-item:hover{border-color:var(--border-gold)}
.ticket-item--active{border-color:var(--gold);background:var(--bg-hover);box-shadow:var(--glow-gold)}
.ticket-item__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ticket-item__id{font-size:0.75rem;color:var(--gold);font-weight:600}
.ticket-item h4{font-size:0.85rem;font-weight:600;margin-bottom:4px}
.ticket-item p{font-size:0.78rem;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ticket-item__meta{display:flex;gap:14px;margin-top:8px}
.ticket-item__meta span{font-size:0.7rem;color:var(--text-dim);display:flex;align-items:center;gap:4px}

.chat-card{display:flex;flex-direction:column}
.chat-messages{flex:1;padding:16px 0;overflow-y:auto;max-height:420px;display:flex;flex-direction:column;gap:12px}
.chat-msg{display:flex;gap:10px;align-items:flex-start}
.chat-msg--me{justify-content:flex-end}
.chat-msg__avatar{width:32px;height:32px;border-radius:8px;background:var(--blue-bg);color:var(--blue);display:grid;place-items:center;font-size:0.65rem;font-weight:700;flex-shrink:0}
.chat-msg__bubble{max-width:70%;padding:12px 16px;border-radius:12px;font-size:0.85rem;line-height:1.5}
.chat-msg--them .chat-msg__bubble{background:var(--bg-glass);border:1px solid var(--border);border-top-left-radius:4px}
.chat-msg--me .chat-msg__bubble{background:rgba(212,175,55,0.1);border:1px solid var(--border-gold);border-top-right-radius:4px}
.chat-msg__name{font-size:0.72rem;font-weight:600;display:block;margin-bottom:4px;color:var(--blue)}
.chat-msg__name small{font-weight:400;color:var(--text-dim)}
.chat-msg__time{font-size:0.65rem;color:var(--text-dim);margin-top:4px;display:block}
.chat-msg--system{text-align:center;font-size:0.75rem;color:var(--text-dim);font-style:italic}

.chat-input{display:flex;gap:8px;padding-top:16px;border-top:1px solid var(--border)}
.chat-input input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);padding:10px 14px;font-size:0.85rem;outline:none;color:var(--text);transition:var(--transition)}
.chat-input input:focus{border-color:var(--gold)}

/* New Ticket Modal */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center}
.modal-overlay.open,.modal-overlay.active{display:flex}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;width:500px;max-width:92vw;box-shadow:var(--shadow-lg)}
.modal__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.modal__header h3{font-size:1.1rem}
.modal__close{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--text-muted);transition:var(--transition)}
.modal__close:hover{background:var(--bg-hover);color:var(--red)}
.modal__form{display:flex;flex-direction:column;gap:16px}
.modal__field{display:flex;flex-direction:column;gap:6px}
.modal__field label{font-size:0.8rem;color:var(--text-muted);font-weight:500}
.modal__field input,.modal__field select,.modal__field textarea{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);padding:10px 14px;font-size:0.85rem;outline:none;color:var(--text);transition:var(--transition)}
.modal__field input:focus,.modal__field select:focus,.modal__field textarea:focus{border-color:var(--gold)}
.modal__field textarea{resize:vertical;min-height:80px}
.modal__actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.modal__body{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}
.modal__footer{display:flex;gap:8px;justify-content:flex-end;padding-top:16px;border-top:1px solid var(--border)}
.modal--lg{width:700px}
.modal--sm{width:420px}

/* =============================================
   SETTINGS / PROFILE
   ============================================= */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;width:100%}
.settings-form{display:flex;flex-direction:column;gap:16px}
.settings-row{display:flex;flex-direction:column;gap:6px}
.settings-row label{font-size:0.8rem;color:var(--text-muted);font-weight:500}
.settings-input{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);padding:10px 14px;font-size:0.85rem;outline:none;color:var(--text);transition:var(--transition)}
.settings-input:focus{border-color:var(--gold)}
.settings-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border)}
.settings-toggle-row:last-of-type{border:none}
.settings-toggle-row h4{font-size:0.85rem;font-weight:600}
.settings-toggle-row p{font-size:0.72rem;color:var(--text-muted)}
.toggle{position:relative;display:inline-block;width:44px;height:24px}
.toggle input{opacity:0;width:0;height:0}
.toggle__slider{position:absolute;inset:0;background:rgba(255,255,255,0.1);border-radius:12px;cursor:pointer;transition:var(--transition)}
.toggle__slider::before{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:var(--text-muted);left:3px;bottom:3px;transition:var(--transition)}
.toggle input:checked+.toggle__slider{background:linear-gradient(135deg,var(--gold),var(--gold-light))}
.toggle input:checked+.toggle__slider::before{transform:translateX(20px);background:var(--white)}

/* =============================================
   ADMIN: CLIENT MANAGEMENT
   ============================================= */
.client-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:20px}
.client-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:var(--transition)}
.client-card:hover{border-color:var(--border-gold)}
.client-card__header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.client-card__avatar{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--gold-light));display:grid;place-items:center;font-weight:700;font-size:0.8rem;color:#0B1C2C;flex-shrink:0}
.client-card__name{font-weight:600;font-size:0.9rem}
.client-card__company{font-size:0.75rem;color:var(--text-muted)}
.client-card__stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.client-card__stat{background:var(--bg-input);border-radius:var(--radius-xs);padding:10px;text-align:center}
.client-card__stat-label{font-size:0.65rem;color:var(--text-dim);display:block}
.client-card__stat-value{font-size:0.9rem;font-weight:700;display:block;margin-top:2px}

/* =============================================
   PACKAGES
   ============================================= */
.packages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%}
.package-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--transition);position:relative;display:flex;flex-direction:column}
.package-card:hover{border-color:var(--border-gold)}
.package-card--popular{border-color:var(--border-gold);box-shadow:var(--glow-gold)}
.package-card__ribbon{position:absolute;top:12px;right:-30px;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#0B1C2C;font-size:0.65rem;font-weight:700;padding:4px 36px;transform:rotate(45deg);letter-spacing:0.5px;z-index:1}
.package-card__header{display:flex;align-items:center;gap:14px;padding:24px;border-bottom:1px solid var(--border)}
.package-card__header--starter{background:linear-gradient(135deg,rgba(96,165,250,0.08),transparent)}
.package-card__header--pro{background:linear-gradient(135deg,rgba(212,175,55,0.1),transparent)}
.package-card__header--inst{background:linear-gradient(135deg,rgba(167,139,250,0.08),transparent)}
.package-card__icon{width:44px;height:44px;border-radius:12px;background:rgba(212,175,55,0.1);display:grid;place-items:center;color:var(--gold);font-size:1.1rem;flex-shrink:0}
.package-card__header h3{font-size:1rem;font-weight:700}
.package-card__price{font-size:0.8rem;color:var(--text-muted);margin-top:2px}
.package-card__price strong{color:var(--gold);font-size:1rem}
.package-card__body{padding:20px 24px;flex:1}
.package-card__body h4{font-size:0.85rem;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.package-card__items{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto}
.package-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);font-size:0.8rem;transition:var(--transition)}
.package-item:hover{border-color:var(--border-gold)}
.package-item__name{display:flex;align-items:center;gap:8px;flex:1}
.package-item__name i{color:var(--green);font-size:0.7rem}
.package-item__price{font-weight:600;color:var(--gold);font-size:0.78rem}
.package-card__footer{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-top:1px solid var(--border);background:rgba(255,255,255,0.02)}
.package-card__total{font-size:0.85rem;color:var(--text-muted)}
.package-card__total strong{color:var(--gold);font-size:1rem}

/* Product package badges in table */
.pkg-badges{display:flex;gap:4px;flex-wrap:wrap}
.pkg-badge{font-size:0.6rem;padding:2px 8px;border-radius:10px;font-weight:600;cursor:default}
.pkg-badge--starter{background:var(--blue-bg);color:var(--blue)}
.pkg-badge--professional{background:rgba(212,175,55,0.1);color:var(--gold)}
.pkg-badge--institutional{background:var(--purple-bg);color:var(--purple)}

/* =============================================
   SELECT2 DARK THEME OVERRIDE
   ============================================= */
/* Container */
.select2-container--default .select2-selection--single {
    background:var(--bg-input) !important;
    border:1px solid var(--border) !important;
    border-radius:var(--radius-xs) !important;
    height:auto !important;
    padding:3px 4px;
    transition:var(--transition);
}
.select2-container--default .select2-selection--single:hover {
    border-color:var(--border-hover) !important;
}
.select2-container--default.select2-container--open .select2-selection--single {
    border-color:var(--gold) !important;
    box-shadow:0 0 0 1px rgba(212,175,55,0.2);
}
/* Rendered text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color:var(--text) !important;
    font-size:0.85rem;
    line-height:32px !important;
    padding-left:10px !important;
    padding-right:28px !important;
    font-family:var(--font);
}
/* Arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height:100% !important;
    right:8px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color:var(--text-muted) transparent transparent transparent !important;
    margin-top:-2px !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color:transparent transparent var(--gold) transparent !important;
    border-width:0 5px 5px 5px !important;
    margin-top:-4px !important;
}
/* Dropdown */
.select2-dropdown {
    background:var(--bg-card) !important;
    border:1px solid var(--border-gold) !important;
    border-radius:var(--radius-xs) !important;
    box-shadow:var(--shadow-lg), 0 0 20px rgba(212,175,55,0.08) !important;
    overflow:hidden;
    z-index:9999 !important;
}
.select2-container--open .select2-dropdown--below { border-top:1px solid var(--border-gold) !important; margin-top:4px; border-radius:var(--radius-xs) !important }
.select2-container--open .select2-dropdown--above { border-bottom:1px solid var(--border-gold) !important; margin-bottom:4px; border-radius:var(--radius-xs) !important }
/* Search box */
.select2-search--dropdown {
    padding:10px !important;
    background:rgba(255,255,255,0.02);
    border-bottom:1px solid var(--border) !important;
}
.select2-search--dropdown .select2-search__field {
    background:var(--bg-input) !important;
    border:1px solid var(--border) !important;
    border-radius:var(--radius-xs) !important;
    color:var(--text) !important;
    padding:8px 12px !important;
    font-size:0.85rem !important;
    font-family:var(--font) !important;
    outline:none !important;
    transition:var(--transition);
}
.select2-search--dropdown .select2-search__field:focus {
    border-color:var(--gold) !important;
}
.select2-search--dropdown .select2-search__field::placeholder {
    color:var(--text-dim) !important;
}
/* Options */
.select2-results__options {
    max-height:240px !important;
    scrollbar-width:thin;
}
.select2-results__option {
    padding:10px 14px !important;
    font-size:0.85rem !important;
    font-family:var(--font) !important;
    color:var(--text-muted) !important;
    transition:all 0.15s ease !important;
    border-bottom:1px solid rgba(255,255,255,0.03);
}
.select2-results__option:last-child { border-bottom:none }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background:rgba(212,175,55,0.1) !important;
    color:var(--gold) !important;
}
.select2-container--default .select2-results__option--selected {
    background:rgba(212,175,55,0.06) !important;
    color:var(--gold) !important;
    font-weight:600;
    position:relative;
}
.select2-container--default .select2-results__option--selected::after {
    content:'\f00c';
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    color:var(--gold);
    font-size:0.7rem;
}
/* No results */
.select2-results__message {
    color:var(--text-dim) !important;
    font-size:0.82rem !important;
    padding:14px !important;
    text-align:center;
}
/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color:var(--text-dim) !important;
}
/* Clear */
.select2-container--default .select2-selection--single .select2-selection__clear {
    color:var(--text-dim) !important;
    font-size:1.2rem;
    margin-right:4px;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color:var(--red) !important;
}
/* Multiple select */
.select2-container--default .select2-selection--multiple {
    background:var(--bg-input) !important;
    border:1px solid var(--border) !important;
    border-radius:var(--radius-xs) !important;
    min-height:38px !important;
    padding:4px 6px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background:rgba(212,175,55,0.1) !important;
    border:1px solid var(--border-gold) !important;
    border-radius:4px !important;
    color:var(--gold) !important;
    font-size:0.78rem !important;
    padding:3px 8px !important;
    font-family:var(--font) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color:var(--text-dim) !important;
    margin-right:4px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color:var(--red) !important;
}
.select2-container--default .select2-selection--multiple .select2-search__field {
    color:var(--text) !important;
    font-family:var(--font) !important;
}
/* Width fix */
.select2-container { min-width:140px }
.modal .select2-container, .modal__field .select2-container { width:100% !important }
.card__header-actions .select2-container { min-width:150px }
/* Login select stays native */
.login-field .select2-container { display:none !important }
.login-field select { display:block !important }

/* =============================================
   PROJECT REQUEST
   ============================================= */
.request-list{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.request-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:var(--transition)}
.request-card:hover{border-color:var(--border-gold)}
.request-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.request-card__id{font-size:0.8rem;color:var(--gold);font-weight:600}
.request-card__date{font-size:0.72rem;color:var(--text-dim)}
.request-card__title{font-size:1rem;font-weight:700;margin-bottom:4px}
.request-card__desc{font-size:0.82rem;color:var(--text-muted);margin-bottom:14px}
.request-card__items{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.request-card__item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);font-size:0.82rem}
.request-card__item-name{display:flex;align-items:center;gap:8px;flex:1}
.request-card__item-name i{color:var(--green);font-size:0.7rem}
.request-card__item-price{font-weight:600;color:var(--gold)}
.request-card__item-qty{font-size:0.75rem;color:var(--text-dim);margin:0 12px}
.request-card__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--border)}
.request-card__total{font-size:0.9rem;font-weight:700}
.request-card__total strong{color:var(--gold)}
.request-card__actions{display:flex;gap:8px}
.request-card__note{margin-top:12px;padding:12px 14px;background:rgba(212,175,55,0.04);border:1px solid var(--border-gold);border-radius:var(--radius-xs);font-size:0.82rem;color:var(--text-muted)}
.request-card__note strong{color:var(--text);display:block;margin-bottom:4px;font-size:0.78rem}

/* Product selector in modal */
.product-selector{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 0}
.product-select-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;transition:var(--transition);font-size:0.85rem}
.product-select-item:hover{border-color:var(--border-gold)}
.product-select-item.selected{border-color:var(--gold);background:rgba(212,175,55,0.06)}
.product-select-item input[type="checkbox"]{accent-color:var(--gold);width:16px;height:16px;cursor:pointer}
.product-select-item__info{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px}
.product-select-item__name{font-weight:500}
.product-select-item__cat{font-size:0.7rem;color:var(--text-dim)}
.product-select-item__price{font-weight:600;color:var(--gold);font-size:0.85rem}
.product-select-item__qty{width:60px;padding:4px 8px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;font-size:0.8rem;color:var(--text);text-align:center;outline:none}
.product-select-item__qty:focus{border-color:var(--gold)}
.request-summary{margin-top:12px;padding:14px;background:rgba(212,175,55,0.04);border:1px solid var(--border-gold);border-radius:var(--radius-xs)}
.request-summary__row{display:flex;justify-content:space-between;font-size:0.85rem;padding:4px 0}
.request-summary__total{font-weight:700;font-size:1rem;border-top:1px solid var(--border);padding-top:8px;margin-top:4px}
.request-summary__total span{color:var(--gold)}

/* Admin note modal */
.admin-note-area{margin-top:12px;padding:14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs)}
.admin-note-area textarea{width:100%;min-height:60px;background:transparent;border:none;color:var(--text);resize:vertical;outline:none;font-size:0.85rem}

/* =============================================
   HISTORY TIMELINE & RENEWALS
   ============================================= */
.history-timeline{display:flex;flex-direction:column;gap:0}
.history-item{display:flex;gap:14px;padding:12px 0;position:relative}
.history-item:not(:last-child)::after{content:'';position:absolute;left:15px;top:40px;bottom:0;width:2px;background:var(--border)}
.history-item__dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:0.65rem;flex-shrink:0;position:relative;z-index:1;border:2px solid var(--border);background:var(--bg-card);color:var(--text-dim)}
.history-item__dot--submit{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}
.history-item__dot--approve{border-color:var(--green);color:var(--green);background:var(--green-bg)}
.history-item__dot--reject{border-color:var(--red);color:var(--red);background:var(--red-bg)}
.history-item__dot--quote{border-color:var(--gold);color:var(--gold);background:rgba(212,175,55,0.1)}
.history-item__dot--review{border-color:var(--orange);color:var(--orange);background:var(--orange-bg)}
.history-item__dot--renew{border-color:var(--purple);color:var(--purple);background:var(--purple-bg)}
.history-item__dot--note{border-color:var(--text-dim);color:var(--text-dim)}
.history-item__content{flex:1}
.history-item__header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.history-item__action{font-size:0.85rem;font-weight:600}
.history-item__date{font-size:0.72rem;color:var(--text-dim)}
.history-item__detail{font-size:0.8rem;color:var(--text-muted);margin-top:2px}
.history-item__by{font-size:0.72rem;color:var(--text-dim);margin-top:2px}

.renewal-card{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;display:flex;align-items:center;gap:14px;transition:var(--transition);margin-bottom:10px}
.renewal-card:hover{border-color:var(--border-gold)}
.renewal-card__icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:0.9rem;flex-shrink:0}
.renewal-card__icon--active{background:var(--green-bg);color:var(--green)}
.renewal-card__icon--upcoming{background:var(--orange-bg);color:var(--orange)}
.renewal-card__icon--expired{background:var(--red-bg);color:var(--red)}
.renewal-card__info{flex:1}
.renewal-card__info h4{font-size:0.9rem;font-weight:600}
.renewal-card__info p{font-size:0.78rem;color:var(--text-muted)}
.renewal-card__dates{display:flex;gap:16px;margin-top:6px}
.renewal-card__dates span{font-size:0.72rem;color:var(--text-dim);display:flex;align-items:center;gap:4px}
.renewal-card__dates i{color:var(--gold);font-size:0.65rem}
.renewal-card__amount{font-weight:700;color:var(--gold);font-size:0.95rem;white-space:nowrap}
.renewal-card__actions{display:flex;gap:6px}

.internal-note-box{background:rgba(248,113,113,0.04);border:1px solid rgba(248,113,113,0.15);border-radius:var(--radius-sm);padding:16px}
.internal-note-box__header{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:0.8rem;font-weight:600;color:var(--red)}
.internal-note-box__header i{font-size:0.75rem}

/* =============================================
   BILLING TYPE BADGES
   ============================================= */
.billing-type{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:12px;font-size:0.68rem;font-weight:600;white-space:nowrap}
.billing-type--onetime{background:rgba(255,255,255,0.05);color:var(--text-muted)}
.billing-type--monthly{background:var(--blue-bg);color:var(--blue)}
.billing-type--yearly{background:var(--purple-bg);color:var(--purple)}
.billing-type-select{padding:4px 8px;font-size:0.78rem;background:var(--bg-input);border:1px solid var(--border);border-radius:4px;color:var(--text);outline:none;cursor:pointer;transition:var(--transition)}
.billing-type-select:focus{border-color:var(--gold)}

/* =============================================
   CATEGORIES
   ============================================= */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:20px}
.cat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:var(--transition);position:relative}
.cat-card:hover{border-color:var(--border-gold)}
.cat-card__header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cat-card__color{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:1rem;flex-shrink:0}
.cat-card__name{font-weight:700;font-size:1rem}
.cat-card__slug{font-size:0.72rem;color:var(--text-dim);font-family:monospace}
.cat-card__desc{font-size:0.82rem;color:var(--text-muted);margin-bottom:14px;line-height:1.5}
.cat-card__stats{display:flex;gap:12px;margin-bottom:14px}
.cat-card__stat{background:var(--bg-input);border-radius:var(--radius-xs);padding:8px 12px;text-align:center;flex:1}
.cat-card__stat-label{font-size:0.65rem;color:var(--text-dim);display:block}
.cat-card__stat-value{font-size:0.95rem;font-weight:700;display:block;margin-top:2px}
.cat-card__actions{display:flex;gap:8px}

/* =============================================
   PORTAL PAGE LAYOUT & FORMS
   ============================================= */
.page-container{width:100%}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.page-header-left{flex:1}
.page-title{font-size:1.5rem;font-weight:700;display:flex;align-items:center;gap:10px}
.page-title i{color:var(--gold)}
.page-subtitle{color:var(--text-muted);font-size:0.85rem;margin-top:4px}
.page-header-actions{display:flex;gap:8px}
.page-header-stats{display:flex;gap:16px;align-items:center}
.header-stat{font-size:0.85rem;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.header-stat i{color:var(--gold)}

/* Buttons used in templates */
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#0B1C2C;font-weight:700}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(212,175,55,0.3)}
.btn-outline{background:transparent;border:1px solid var(--border)}
.btn-outline:hover{border-color:var(--border-gold)}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid rgba(248,113,113,0.2)}
.btn-danger:hover{background:rgba(248,113,113,0.2)}
.btn-sm{padding:6px 12px;font-size:0.75rem}
.btn-back{display:inline-flex;align-items:center;gap:8px;color:var(--text-muted);font-size:0.85rem;margin-bottom:16px;transition:var(--transition)}
.btn-back:hover{color:var(--gold)}

/* Detail Page */
.detail-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.detail-header-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.detail-header-right{display:flex;align-items:center;gap:16px}
.detail-ref{font-size:0.85rem;font-weight:600}
.detail-title{font-size:1.3rem;font-weight:700}
.detail-badges{display:flex;gap:8px;margin-top:4px}
.detail-progress{min-width:200px}
.detail-progress-label{display:flex;justify-content:space-between;font-size:0.8rem;color:var(--text-muted);margin-bottom:4px}
.progress-bar{height:8px;border-radius:4px;background:rgba(255,255,255,0.06);overflow:hidden}
.progress-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--gold-light))}
.client-header-avatar{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--gold),var(--gold-light));display:grid;place-items:center;font-weight:700;font-size:1rem;color:#0B1C2C;flex-shrink:0}

/* Info Cards */
.info-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.info-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;align-items:center;gap:12px;transition:var(--transition)}
.info-card:hover{border-color:var(--border-gold)}
.info-card-icon{width:38px;height:38px;border-radius:10px;background:rgba(212,175,55,0.08);color:var(--gold);display:grid;place-items:center;font-size:0.9rem;flex-shrink:0}
.info-card-body{flex:1;min-width:0}
.info-card-label{display:block;font-size:0.7rem;color:var(--text-dim);margin-bottom:2px}
.info-card-value{display:block;font-size:0.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* User Cell (table) */
.user-cell{display:flex;align-items:center;gap:10px}
.user-cell-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--gold),var(--gold-light));display:grid;place-items:center;font-weight:700;font-size:0.7rem;color:#0B1C2C;flex-shrink:0}

/* Data Table */
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;padding:12px 14px;font-size:0.72rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid var(--border)}
.data-table td{padding:14px;font-size:0.85rem;border-bottom:1px solid var(--border)}
.data-table tr:hover td{background:var(--bg-hover)}
.table-responsive{overflow-x:auto;width:100%}
.table-empty{text-align:center;padding:40px 20px!important;color:var(--text-dim)}
.table-empty i{font-size:1.5rem;margin-bottom:8px;display:block}
.table-total-row td{font-weight:600;border-top:2px solid var(--border)}
.action-btns{display:flex;gap:6px}

/* Badge Extensions */
.badge--secondary{background:rgba(255,255,255,0.05);color:var(--text-muted)}
.badge--primary{background:rgba(212,175,55,0.1);color:var(--gold)}
.badge--purple{background:var(--purple-bg);color:var(--purple)}
.badge--lg{font-size:0.8rem;padding:6px 14px}

/* Forms */
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:0.8rem;color:var(--text-muted);font-weight:500}
.form-label-sm{font-size:0.72rem;color:var(--text-dim);font-weight:500}
.form-input{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);padding:10px 14px;font-size:0.85rem;outline:none;color:var(--text);transition:var(--transition)}
.form-input:focus{border-color:var(--gold)}
.form-input--sm{padding:6px 10px;font-size:0.8rem}
.form-textarea{resize:vertical;min-height:80px}
.form-grid{display:grid;gap:16px}
.form-grid--2{grid-template-columns:1fr 1fr}
.form-section{margin-bottom:20px}
.form-section-title{font-size:0.95rem;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px;color:var(--gold)}
.form-inline{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.form-inline--wrap{flex-wrap:wrap}

/* Product Selector */
.product-category{margin-bottom:16px}
.product-category-title{font-size:0.85rem;font-weight:600;color:var(--text-muted);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.product-category-title i{color:var(--gold)}
.product-list{display:flex;flex-direction:column;gap:6px}
.product-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);transition:var(--transition)}
.product-item:hover{border-color:var(--border-gold)}
.product-checkbox{display:flex;align-items:center;gap:10px;flex:1;cursor:pointer}
.product-checkbox input[type="checkbox"]{accent-color:var(--gold);width:16px;height:16px;cursor:pointer}
.product-info{display:flex;align-items:center;justify-content:space-between;flex:1}
.product-name{font-size:0.85rem;font-weight:500}
.product-price{font-weight:600;color:var(--gold);font-size:0.85rem}
.product-qty{display:flex;align-items:center;gap:6px}
.product-summary{margin-top:14px;padding:14px;background:rgba(212,175,55,0.04);border:1px solid var(--border-gold);border-radius:var(--radius-xs)}
.product-summary-row{display:flex;justify-content:space-between;font-size:0.85rem;padding:4px 0}
.product-summary-total{font-weight:700;font-size:1rem;border-top:1px solid var(--border);padding-top:8px;margin-top:4px}

/* Section Headers */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-header h3{font-size:1rem;font-weight:600}

/* Empty State */
.empty-state{text-align:center;padding:40px 20px;color:var(--text-dim)}
.empty-state i{font-size:2rem;margin-bottom:12px;display:block}

/* Doc Grid & Cards */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.doc-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;gap:14px;align-items:flex-start;transition:var(--transition)}
.doc-card:hover{border-color:var(--border-gold)}
.doc-card-icon{width:40px;height:40px;border-radius:10px;background:var(--bg-input);display:grid;place-items:center;font-size:1rem;flex-shrink:0}
.doc-card-body{flex:1;min-width:0}
.doc-card-name{font-size:0.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px}
.doc-card-meta{display:flex;gap:8px;align-items:center;margin-bottom:6px;font-size:0.75rem;color:var(--text-dim)}
.doc-card-footer{display:flex;justify-content:space-between;font-size:0.7rem;color:var(--text-dim)}
.doc-card-date,.doc-card-uploader{font-size:0.7rem;color:var(--text-dim)}
.doc-card-actions{display:flex;gap:6px;flex-shrink:0}

/* Receipt Grid */
.receipt-grid{display:flex;flex-direction:column;gap:12px}

/* Category Grid */
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.category-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;gap:14px;align-items:center;transition:var(--transition)}
.category-card:hover{border-color:var(--border-gold)}
.category-card-icon{width:40px;height:40px;border-radius:10px;background:rgba(212,175,55,0.08);color:var(--gold);display:grid;place-items:center;font-size:1rem;flex-shrink:0}
.category-card-body{flex:1}
.category-card-body h4{font-size:0.9rem;font-weight:600}
.category-count{font-size:0.75rem;color:var(--text-dim);display:block;margin-top:4px}
.category-card-actions{display:flex;gap:6px}

/* Package Grid */
.package-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.package-card-header{padding:16px;border-bottom:1px solid var(--border)}
.package-card-header h4{font-size:0.95rem;font-weight:600}
.package-price-range{font-size:0.8rem;color:var(--gold);font-weight:600}
.package-card-body{padding:16px}
.package-features{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.package-features li{font-size:0.82rem;display:flex;align-items:center;gap:8px}
.package-card-actions{display:flex;gap:8px;padding:16px;border-top:1px solid var(--border)}

/* Profile */
.profile-layout{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:flex-start}
.profile-card{text-align:center}
.profile-card-header{display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--border);margin-bottom:20px}
.profile-avatar{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--gold),var(--gold-light));display:grid;place-items:center;font-weight:700;font-size:1.2rem;color:#0B1C2C}
.profile-name{font-size:1.1rem;font-weight:700}
.profile-email{font-size:0.82rem;color:var(--text-muted)}
.profile-card-body{display:flex;flex-direction:column;gap:10px}
.profile-detail{display:flex;align-items:center;gap:10px;font-size:0.85rem;color:var(--text-muted)}
.profile-detail i{color:var(--gold);width:18px;text-align:center}
.profile-settings{display:flex;flex-direction:column;gap:20px}
.notif-options{display:flex;flex-direction:column;gap:8px}
.notif-option{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;transition:var(--transition)}
.notif-option:hover{border-color:var(--border-gold)}
.notif-option input[type="checkbox"]{accent-color:var(--gold);width:18px;height:18px}
.notif-option-body{display:flex;align-items:center;gap:10px;flex:1}
.notif-option-body i{color:var(--gold);width:20px;text-align:center}
.notif-option-body strong{display:block;font-size:0.85rem}
.notif-option-body small{display:block;font-size:0.72rem;color:var(--text-dim)}

/* Chat extras */
.chat-card{display:flex;flex-direction:column}
.chat-empty{text-align:center;padding:40px 20px;color:var(--text-dim)}
.chat-empty i{font-size:1.5rem;margin-bottom:8px;display:block}
.chat-closed{text-align:center;padding:16px;color:var(--text-dim);font-size:0.85rem;border-top:1px solid var(--border)}

/* Alert List */
.alert-list{display:flex;flex-direction:column;gap:12px}

/* Sparkline */
.sparkline-mock{background:var(--bg-input);border-radius:var(--radius-xs);padding:16px;margin-bottom:12px}
.sparkline-svg{width:100%;height:100px}
.sparkline-stats{display:flex;gap:16px;font-size:0.78rem;color:var(--text-muted)}

/* Flash Toast */
.flash-toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius-xs);margin-bottom:8px;animation:fadeIn 0.3s ease}
.flash-toast--hiding{opacity:0;transition:opacity 0.4s}
.flash-success{background:var(--green-bg);border:1px solid rgba(52,211,153,0.2);color:var(--green)}
.flash-error{background:var(--red-bg);border:1px solid rgba(248,113,113,0.2);color:var(--red)}

/* Changelog */
.changelog{display:flex;flex-direction:column;gap:0}
.changelog-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.changelog-item:last-child{border:none}
.changelog-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:6px;flex-shrink:0}
.changelog-content{flex:1}
.changelog-content p{font-size:0.85rem}
.changelog-time{font-size:0.72rem;color:var(--text-dim)}

/* System Card Footer Override */
.system-card__actions{display:flex;align-items:center;gap:8px;padding-top:14px;border-top:1px solid var(--border);font-size:0.75rem;color:var(--text-dim)}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:1024px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.open{transform:translateX(0)}
    .main-wrapper{margin-left:0!important}
    .topbar__burger{display:grid}
    .kpi-grid,.billing-kpis,.risk-kpis{grid-template-columns:repeat(2,1fr)}
    .grid-2col,.support-grid,.systems-grid{grid-template-columns:1fr}
    .quick-access__grid{grid-template-columns:repeat(3,1fr)}
    .payment-methods{grid-template-columns:1fr}
    .packages-grid{grid-template-columns:1fr}
    .topbar__search,.topbar__account-status,.topbar__profile-info{display:none}
    .profile-layout{grid-template-columns:1fr}
    .form-grid--2{grid-template-columns:1fr}
    .info-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
    .info-cards{grid-template-columns:1fr}
    .kpi-grid,.billing-kpis,.risk-kpis{grid-template-columns:1fr}
    .quick-access__grid{grid-template-columns:repeat(2,1fr)}
    .welcome-banner{flex-direction:column;text-align:center}
    .welcome-banner__actions{justify-content:center}
    .content{padding:16px}
    .login-card{padding:32px 24px}
}

/* Mobile sidebar overlay */
body.sidebar-open::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99}