/* ============================================================
   QistManager  -  Global Stylesheet  (UTF-8, ASCII only)
   ============================================================ */

/* ---- Searchable select (qmSearchableSelect) ---- */
.qm-ss-wrap {
    position: relative;
}
.qm-ss-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1060;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    margin-top: 2px;
}
.qm-ss-item {
    padding: .35rem .75rem;
    font-size: .875rem;
    cursor: pointer;
    white-space: nowrap;
}
.qm-ss-item:hover,
.qm-ss-item.hover {
    background: #e9ecef;
}
.qm-ss-item.active {
    background: #e7e9fd;
    font-weight: 600;
}
.qm-ss-empty {
    font-size: .85rem;
}

/* ---- CSS Variables ---- */
:root {
    --sb-width:        260px;
    --sb-collapsed:     72px;
    --topbar-h:         62px;

    /* Sidebar colours */
    --sb-bg:           #0f1623;
    --sb-bg2:          #161f30;
    --sb-border:       rgba(255,255,255,.06);
    --sb-text:         #8a99b4;
    --sb-text-hover:   #ffffff;
    --sb-active-bg:    rgba(99,102,241,.18);
    --sb-active-color: #818cf8;
    --sb-icon-size:    1.05rem;

    /* Accent */
    --accent:          #6366f1;
    --accent-hover:    #4f52e0;
    --accent-light:    rgba(99,102,241,.12);

    /* Topbar */
    --tb-bg:           #ffffff;
    --tb-border:       #e8ecf4;
    --tb-shadow:       0 1px 0 #e8ecf4, 0 2px 8px rgba(0,0,0,.04);

    /* Page */
    --page-bg:         #f0f2f8;

    /* Transitions */
    --t-fast:  .15s ease;
    --t-med:   .25s ease;
    --t-slow:  .35s cubic-bezier(.4,0,.2,1);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: .9rem;
    background: var(--page-bg);
    color: #1e293b;
    height: 100%;
    overflow-x: hidden;
}

a { text-decoration: none; }

/* ============================================================
   LAYOUT WRAPPER
   ============================================================ */
.qm-wrapper {
    display: flex;
    min-height: 100vh;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.qm-sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sb-width);
    height: 100vh;
    background: var(--sb-bg);
    display: flex;
    flex-direction: column;
    z-index: 1050;
    transition: width var(--t-slow), transform var(--t-slow);
    overflow: hidden;
}

/* ---- Brand ---- */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 0 1.2rem;
    height: var(--topbar-h);
    border-bottom: 1px solid var(--sb-border);
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
}

.brand-icon-wrap {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--accent), #818cf8);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(99,102,241,.4);
}

.brand-text { overflow: hidden; }

.brand-name {
    display: block;
    color: #ffffff;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.2;
    letter-spacing: .3px;
}

.brand-tagline {
    display: block;
    color: var(--sb-text);
    font-size: .68rem;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* ---- Nav wrapper (scrollable) ---- */
.sidebar-nav-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .75rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}

.sidebar-nav-wrap::-webkit-scrollbar { width: 3px; }
.sidebar-nav-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

/* ---- Nav list ---- */
.sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0 .6rem;
}

.nav-section-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(138,153,180,.5);
    padding: 1rem .7rem .3rem;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--t-med), padding var(--t-med);
}

/* ---- Nav link ---- */
.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .62rem .75rem;
    color: var(--sb-text);
    border-radius: 10px;
    margin-bottom: 2px;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.sidebar-nav .nav-link:hover {
    background: rgba(255,255,255,.06);
    color: var(--sb-text-hover);
    transform: translateX(2px);
}

.sidebar-nav .nav-link.active {
    background: var(--sb-active-bg);
    color: var(--sb-active-color);
    font-weight: 600;
}

.sidebar-nav .nav-link.active .nav-icon {
    color: var(--sb-active-color);
}

/* Active indicator pill */
.sidebar-nav .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 25%; height: 50%;
    width: 3px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
}

.nav-icon {
    width: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--sb-icon-size);
    flex-shrink: 0;
    color: var(--sb-text);
    transition: color var(--t-fast);
}

.nav-text {
    flex: 1;
    font-size: .875rem;
    transition: opacity var(--t-med);
}

/* Collapse arrow */
.nav-arrow {
    font-size: .72rem;
    margin-left: auto;
    flex-shrink: 0;
    transition: transform var(--t-med);
    color: rgba(138,153,180,.5);
}

.nav-link-collapse.open .nav-arrow {
    transform: rotate(90deg);
}

/* ---- Submenu ---- */
.nav-submenu {
    list-style: none;
    margin: 2px 0 4px;
    padding: 0;
}

.nav-submenu a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem .5rem 2.6rem;
    color: rgba(138,153,180,.8);
    border-radius: 8px;
    font-size: .84rem;
    transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-fast);
    white-space: nowrap;
}

.nav-submenu a i { font-size: .8rem; width: 16px; flex-shrink: 0; }

.nav-submenu a:hover {
    background: rgba(255,255,255,.05);
    color: #fff;
    padding-left: 2.9rem;
}

.nav-submenu a.active {
    color: var(--sb-active-color);
    font-weight: 600;
}

/* ---- Sidebar footer ---- */
.sidebar-footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border-top: 1px solid var(--sb-border);
    background: rgba(0,0,0,.15);
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
}

.sf-avatar {
    width: 34px; height: 34px;
    background: rgba(99,102,241,.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--sb-active-color);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.sf-info { flex: 1; overflow: hidden; }

.sf-name {
    font-size: .82rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-role {
    font-size: .68rem;
    color: var(--sb-text);
    white-space: nowrap;
}

.sf-logout {
    color: rgba(138,153,180,.6);
    font-size: 1rem;
    padding: .35rem;
    border-radius: 7px;
    flex-shrink: 0;
    transition: color var(--t-fast), background var(--t-fast);
}

.sf-logout:hover { color: #f87171; background: rgba(248,113,113,.12); }

/* ============================================================
   COLLAPSED SIDEBAR  (desktop)
   ============================================================ */
.qm-sidebar.collapsed {
    width: var(--sb-collapsed);
}

.qm-sidebar.collapsed .brand-text,
.qm-sidebar.collapsed .nav-text,
.qm-sidebar.collapsed .nav-arrow,
.qm-sidebar.collapsed .nav-section-label,
.qm-sidebar.collapsed .sf-info,
.qm-sidebar.collapsed .sf-logout {
    opacity: 0;
    pointer-events: none;
    width: 0;
    overflow: hidden;
}

.qm-sidebar.collapsed .sidebar-nav {
    padding: 0 .4rem;
}

.qm-sidebar.collapsed .nav-link {
    justify-content: center;
    padding: .68rem;
    gap: 0;
}

.qm-sidebar.collapsed .nav-link::before { display: none; }

.qm-sidebar.collapsed .sidebar-footer {
    justify-content: center;
    padding: .85rem .5rem;
    gap: 0;
}

.qm-sidebar.collapsed .nav-submenu,
.qm-sidebar.collapsed .collapse.show { display: none !important; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.qm-main {
    flex: 1;
    margin-left: var(--sb-width);
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: margin-left var(--t-slow);
}

.qm-main.expanded { margin-left: var(--sb-collapsed); }

/* ============================================================
   TOPBAR
   ============================================================ */
.qm-topbar {
    position: sticky;
    top: 0;
    z-index: 1040;
    height: var(--topbar-h);
    background: var(--tb-bg);
    border-bottom: 1px solid var(--tb-border);
    box-shadow: var(--tb-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    gap: .75rem;
}

.topbar-left { display: flex; align-items: center; gap: .75rem; }
.topbar-right { display: flex; align-items: center; gap: .5rem; }

.topbar-toggle {
    width: 38px; height: 38px;
    border: none;
    background: transparent;
    border-radius: 10px;
    color: #64748b;
    font-size: 1.35rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
    flex-shrink: 0;
}

.topbar-toggle:hover { background: #f1f5f9; color: var(--accent); }

.tb-biz {
    font-weight: 700;
    color: var(--accent);
    font-size: .95rem;
    white-space: nowrap;
}

/* Icon buttons in topbar */
.topbar-icon-btn {
    position: relative;
    width: 38px; height: 38px;
    border: none;
    background: transparent;
    border-radius: 10px;
    color: #64748b;
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

.topbar-icon-btn:hover { background: #f1f5f9; color: var(--accent); }

.notif-dot {
    position: absolute;
    top: 7px; right: 7px;
    width: 7px; height: 7px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* User pill */
.user-pill {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .65rem .3rem .3rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    color: #334155;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.user-pill:hover, .user-pill.show {
    background: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
    color: var(--accent);
}

.user-pill::after { display: none; } /* Remove default caret */

.user-avatar-sm {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, var(--accent), #818cf8);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: .85rem;
}

.user-pill-name { font-size: .82rem; }

/* User dropdown */
.user-dropdown-menu {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: .4rem;
    box-shadow: 0 10px 40px rgba(0,0,0,.12);
    min-width: 220px;
}

.udm-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .6rem .75rem;
}

.udm-avatar {
    font-size: 2rem;
    color: var(--accent);
    line-height: 1;
}

.udm-name {
    font-weight: 600;
    font-size: .88rem;
    color: #1e293b;
}

.udm-badge {
    font-size: .68rem;
    background: var(--accent-light);
    color: var(--accent);
    padding: .15rem .5rem;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: .3px;
}

.user-dropdown-menu .dropdown-item {
    border-radius: 8px;
    padding: .5rem .8rem;
    font-size: .85rem;
    transition: background var(--t-fast);
}

/* ============================================================
   PAGE CONTENT
   ============================================================ */
.qm-page-content {
    padding: 1.5rem;
    flex: 1;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
    transition: box-shadow var(--t-fast), transform var(--t-fast);
}

.card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); }

/* ============================================================
   TABLES
   ============================================================ */
.table thead th {
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #94a3b8;
    border-bottom: 1px solid #f1f5f9;
    padding: .6rem .75rem;
    white-space: nowrap;
    background: #f8fafc;
}

.table tbody td {
    padding: .65rem .75rem;
    border-color: #f1f5f9;
    vertical-align: middle;
    color: #334155;
}

.table tbody tr {
    transition: background var(--t-fast);
}

.table tbody tr:hover { background: rgba(99,102,241,.04); }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.form-control, .form-select {
    border-color: #e2e8f0;
    border-radius: 9px;
    padding: .5rem .85rem;
    font-size: .88rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.form-label {
    font-size: .82rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: .35rem;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    border-radius: 9px;
    font-size: .86rem;
    font-weight: 500;
    padding: .45rem 1rem;
    transition: all var(--t-fast);
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 4px 12px rgba(99,102,241,.35);
    transform: translateY(-1px);
}

.btn-outline-primary {
    color: var(--accent);
    border-color: var(--accent);
}

.btn-outline-primary:hover {
    background: var(--accent);
    box-shadow: 0 4px 12px rgba(99,102,241,.25);
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    font-weight: 600;
    border-radius: 6px;
    letter-spacing: .2px;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
#toastContainer {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    min-width: 310px;
    max-width: 400px;
}

.toast {
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
}

/* ============================================================
   MOBILE OVERLAY
   ============================================================ */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1049;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.sidebar-overlay.visible { display: block; }

/* ============================================================
   RESPONSIVE  (mobile < 992px)
   ============================================================ */
@media (max-width: 991.98px) {

    /* Sidebar slides off-canvas */
    .qm-sidebar {
        transform: translateX(-100%);
        width: var(--sb-width) !important;
    }

    /* Open state */
    .qm-sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 30px rgba(0,0,0,.3);
    }

    /* Main takes full width */
    .qm-main {
        margin-left: 0 !important;
    }

    .qm-page-content { padding: 1rem .875rem; }

    .tb-biz { font-size: .88rem; }
}

@media (max-width: 575.98px) {
    .qm-page-content { padding: .75rem .625rem; }
    .qm-topbar { padding: 0 .875rem; }
}

/* ============================================================
   PAGE HEADER PATTERN  (used across all pages)
   ============================================================ */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.page-header h4 {
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.page-header .text-muted { font-size: .82rem; }

/* Section title accent bar */
.section-title {
    font-size: .88rem;
    font-weight: 700;
    color: #0f172a;
    border-left: 3px solid var(--accent);
    padding-left: .65rem;
    margin-bottom: 1rem;
    letter-spacing: .2px;
}

/* ============================================================
   MISC UTILITIES
   ============================================================ */
.btn-action {
    padding: .25rem .55rem;
    font-size: .78rem;
    border-radius: 7px;
}

/* Animated spinner dots (loading state) */
.qm-dots span {
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    margin: 0 2px;
    animation: qmBounce 1.2s infinite ease-in-out;
}

.qm-dots span:nth-child(2) { animation-delay: .2s; }
.qm-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes qmBounce {
    0%, 80%, 100% { transform: scale(0); opacity: .4; }
    40%            { transform: scale(1); opacity: 1;  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .qm-sidebar, .qm-topbar, .sidebar-overlay { display: none !important; }
    .qm-main { margin-left: 0 !important; }
    .no-print { display: none !important; }
}