/* ============================================================
   SECaaS.tech – Application CSS (Light Theme)
   ============================================================ */

:root {
    --bg-primary:   #f1f5f9;
    --bg-secondary: #f8fafc;
    --bg-card:      #ffffff;
    --bg-hover:     #f1f5f9;
    --border:       #e2e8f0;
    --border-light: #cbd5e1;
    --text-primary: #0f172a;
    --text-muted:   #64748b;
    --accent:       #3b82f6;
    --accent-hover: #2563eb;
    --accent-glow:  rgba(59,130,246,.18);
    --cyan:         #0891b2;
    --green:        #059669;
    --amber:        #d97706;
    --red:          #dc2626;
    --purple:       #7c3aed;
    --radius:       .75rem;
    --radius-sm:    .5rem;
    --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow:       0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
    --shadow-lg:    0 10px 30px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.04);
}

/* ── Reset / Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

.app-body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Navbar ──────────────────────────────────────────────── */
.app-navbar {
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: .6rem 0;
}

.brand-icon {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, var(--accent), #1d4ed8);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    box-shadow: 0 2px 6px rgba(59,130,246,.35);
}

.brand-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
    letter-spacing: -.3px;
}
.brand-dot { color: var(--accent); }

.app-navbar .nav-link {
    color: var(--text-primary);
    font-size: .9rem;
    font-weight: 500;
    padding: .5rem .85rem;
    border-radius: var(--radius-sm);
    transition: color .15s, background .15s;
    opacity: .75;
}
.app-navbar .nav-link:hover { opacity: 1; color: var(--text-primary); background: var(--bg-hover); }
.app-navbar .nav-link.active {
    opacity: 1;
    color: var(--accent);
    background: rgba(59,130,246,.1);
    font-weight: 600;
}

.plan-badge {
    font-size: .7rem;
    font-weight: 600;
    padding: .3rem .7rem;
    border-radius: 20px;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.plan-badge.plan-free         { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
.plan-badge.plan-home_office  { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.plan-badge.plan-small_office { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.plan-badge.plan-custom       { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

.btn-user {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: .875rem;
    padding: .4rem .85rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.btn-user:hover { background: var(--bg-hover); color: var(--text-primary); }

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

.app-dropdown {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    z-index: 1050;
}
.app-dropdown .dropdown-item { color: var(--text-primary); font-size: .875rem; padding: .5rem 1rem; }
.app-dropdown .dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.app-dropdown .dropdown-divider { border-color: var(--border); }
.app-dropdown .dropdown-item-text { padding: .5rem 1rem; color: var(--text-muted); }

/* ── Page Layout ─────────────────────────────────────────── */
.app-page { flex: 1; padding: 2rem 0; }

.page-header { margin-bottom: 1.5rem; }
.page-title  { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.page-sub    { color: var(--text-muted); font-size: .9rem; margin: .25rem 0 0; }

/* ── Cards ───────────────────────────────────────────────── */
.app-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.app-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: #fafafa;
    display: flex;
    align-items: center;
}
.app-card-title { font-size: .95rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.app-card-body  { padding: 1.25rem; }

/* ── Stat Widgets ────────────────────────────────────────── */
.stat-widget {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s, transform .2s;
}
.stat-widget:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.sw-icon {
    width: 48px; height: 48px;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.stat-widget-blue   .sw-icon { background: #dbeafe; color: #2563eb; }
.stat-widget-green  .sw-icon { background: #d1fae5; color: #059669; }
.stat-widget-red    .sw-icon { background: #fee2e2; color: #dc2626; }
.stat-widget-amber  .sw-icon { background: #fef3c7; color: #d97706; }
.stat-widget-purple .sw-icon { background: #ede9fe; color: #7c3aed; }
.stat-widget-cyan   .sw-icon { background: #cffafe; color: #0891b2; }
.stat-widget-orange .sw-icon { background: #ffedd5; color: #ea580c; }
.stat-widget-teal   .sw-icon { background: #ccfbf1; color: #0d9488; }

.stat-widget-blue   { border-left: 3px solid #3b82f6; background: #eff6ff; }
.stat-widget-green  { border-left: 3px solid #10b981; background: #ecfdf5; }
.stat-widget-red    { border-left: 3px solid #ef4444; background: #fef2f2; }
.stat-widget-amber  { border-left: 3px solid #f59e0b; background: #fffbeb; }
.stat-widget-purple { border-left: 3px solid #7c3aed; background: #f5f3ff; }
.stat-widget-cyan   { border-left: 3px solid #06b6d4; background: #ecfeff; }
.stat-widget-orange { border-left: 3px solid #ea580c; background: #fff7ed; }
.stat-widget-teal   { border-left: 3px solid #14b8a6; background: #f0fdfa; }

/* Stat group: pairs two widgets visually */
.stat-group {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.stat-group .stat-widget {
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.stat-group .stat-widget.stat-widget-blue   { border-left: 3px solid #3b82f6; }
.stat-group .stat-widget.stat-widget-green  { border-left: 3px solid #10b981; }
.stat-group .stat-widget.stat-widget-red    { border-left: 3px solid #ef4444; }
.stat-group .stat-widget.stat-widget-amber  { border-left: 3px solid #f59e0b; }
.stat-group .stat-widget.stat-widget-purple { border-left: 3px solid #7c3aed; }
.stat-group .stat-widget.stat-widget-cyan   { border-left: 3px solid #06b6d4; }
.stat-group .stat-widget.stat-widget-orange { border-left: 3px solid #ea580c; }
.stat-group .stat-widget.stat-widget-teal   { border-left: 3px solid #14b8a6; }
.stat-group .stat-widget:first-child {
    border-bottom: 1px solid var(--border);
}
.stat-group .stat-widget:hover { transform: none; }

.sw-number { font-size: 1.75rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.sw-label  { font-size: .8rem;  font-weight: 600; color: var(--text-muted); margin-top: .15rem; }
.sw-sub    { font-size: .72rem; color: #94a3b8; }

/* ── Tables ──────────────────────────────────────────────── */
.app-table {
    color: var(--text-primary);
    border-color: var(--border);
    margin: 0;
}
.app-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .75rem 1rem;
}
.app-table tbody td {
    border-bottom: 1px solid var(--border);
    padding: .85rem 1rem;
    vertical-align: middle;
    color: var(--text-primary);
}
.app-table tbody tr:hover td { background: #f8fafc; }
.app-table tbody tr:last-child td { border-bottom: none; }

.alert-row-danger  td { border-left: 3px solid #fca5a5 !important; background: #fff5f5; }
.alert-row-warning td { border-left: 3px solid #fcd34d !important; background: #fffbeb; }
.alert-row-info    td { border-left: 3px solid #67e8f9 !important; background: #f0fdff; }

/* ── Alert mobile cards ─────────────────────────────────── */
.alert-mobile-list { display: none; }
.alert-mobile-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem;
    margin-bottom: .5rem;
    background: #fff;
    border-left: 3px solid var(--border);
}
.alert-mobile-card.amc-danger  { border-left-color: #fca5a5; background: #fff5f5; }
.alert-mobile-card.amc-warning { border-left-color: #fcd34d; background: #fffbeb; }
.alert-mobile-card.amc-info    { border-left-color: #67e8f9; background: #f0fdff; }
.alert-mobile-card .amc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}
.alert-mobile-card .amc-desc {
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: .5rem;
    line-height: 1.4;
}
.alert-mobile-card .amc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    font-size: .75rem;
    color: var(--text-muted);
}
.alert-mobile-card .amc-meta i { margin-right: .2rem; }
.alert-mobile-card .amc-actions {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--border);
}
/* ── JSON viewer with copy button ────────────────────────── */
.json-block {
    position: relative;
}
.json-block .json-copy-btn {
    position: absolute;
    top: .4rem;
    right: .4rem;
    z-index: 2;
    font-size: .7rem;
    padding: .2rem .5rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s;
}
.json-block .json-copy-btn:hover {
    background: rgba(255,255,255,.25);
}

.alert-mobile-card .amc-json-pre {
    background: #1e293b;
    color: #e2e8f0;
    font-size: .72rem;
    line-height: 1.4;
    max-height: 300px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: var(--radius-sm);
    padding: .75rem;
    margin-top: .5rem;
}

/* ── Agent mobile cards ─────────────────────────────────── */
.agent-mobile-list { display: none; }
.agent-mobile-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem;
    margin-bottom: .5rem;
    background: #fff;
}
.agent-mobile-card .agmc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .4rem;
}
.agent-mobile-card .agmc-name {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--text-primary);
}
.agent-mobile-card .agmc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: .35rem;
}
.agent-mobile-card .agmc-meta i { margin-right: .2rem; }
.agent-mobile-card .agmc-actions {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--border);
}
.agent-mobile-card .agmc-badges {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-top: .35rem;
}

/* ── Badges ──────────────────────────────────────────────── */
.badge-status {
    font-size: .72rem;
    font-weight: 600;
    padding: .25rem .65rem;
    border-radius: 20px;
}
.badge-status-active          { background: #d1fae5; color: #065f46; }
.badge-status-disconnected    { background: #fee2e2; color: #991b1b; }
.badge-status-never_connected { background: #fef3c7; color: #92400e; }

/* ── Agent status dots ───────────────────────────────────── */
.agent-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.agent-dot-lg { width: 12px; height: 12px; }
.status-active          { background: #10b981; box-shadow: 0 0 0 3px #d1fae5; }
.status-disconnected    { background: #ef4444; box-shadow: 0 0 0 3px #fee2e2; }
.status-never_connected { background: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }

/* Agent row colors by status */
tr.agent-row[data-status="active"] td              { background: #f0fdf4; }
tr.agent-row[data-status="active"]:hover td        { background: #dcfce7; }
tr.agent-row[data-status="disconnected"] td           { background: #fef2f2; }
tr.agent-row[data-status="disconnected"]:hover td     { background: #fee2e2; }
tr.agent-row[data-status="never_connected"] td         { background: #fffbeb; }
tr.agent-row[data-status="never_connected"]:hover td   { background: #fef3c7; }
.agent-mobile-card[data-status="active"]        { background: #f0fdf4; border-left: 3px solid #10b981; }
.agent-mobile-card[data-status="disconnected"]  { background: #fef2f2; border-left: 3px solid #ef4444; }

.agent-chip {
    display: inline-flex;
    align-items: center;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .8rem;
    padding: .2rem .6rem;
    border-radius: 20px;
    border: 1px solid #bfdbfe;
    font-weight: 500;
}

.agent-list { display: flex; flex-direction: column; gap: .5rem; }
.agent-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    background: #f8fafc;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.agent-name { font-size: .875rem; font-weight: 600; color: var(--text-primary); }
.agent-meta { font-size: .75rem; color: var(--text-muted); }
.agent-info { flex: 1; min-width: 0; }

/* Agent cards */
.agent-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.agent-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.agent-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.agent-card-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.agent-card-body { padding: 1rem 1.25rem; }
.agent-card-actions {
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--border);
    background: #fafafa;
}
.agent-desc { margin-bottom: .75rem; color: var(--text-muted); }

.agent-details { display: flex; flex-direction: column; gap: .4rem; }
.detail-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: var(--text-muted);
}
.detail-row i { width: 14px; color: #94a3b8; }

.enrollment-key-box {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    padding: .75rem;
}
.enrollment-key-text {
    display: block;
    word-break: break-all;
    font-size: .7rem;
    color: #92400e;
    font-family: monospace;
}
.btn-xs { padding: .15rem .35rem; font-size: .7rem; }

/* ── Progress bars ───────────────────────────────────────── */
.app-progress {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
}

/* ── User cell ───────────────────────────────────────────── */
.user-cell { display: flex; align-items: center; gap: .75rem; }
.user-avatar-sm {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.user-cell-name  { font-weight: 600; font-size: .875rem; color: var(--text-primary); }
.user-cell-email { font-size: .75rem; color: var(--text-muted); }

/* ── Compact alert list ──────────────────────────────────── */
.compact-alert-list { display: flex; flex-direction: column; }
.compact-alert-item {
    display: flex;
    align-items: center;
    padding: .65rem 1.25rem;
    border-bottom: 1px solid var(--border);
    gap: .5rem;
}
.compact-alert-item:last-child { border-bottom: none; }
.compact-alert-item:hover { background: #f8fafc; }

/* ── Upgrade banner ──────────────────────────────────────── */
.upgrade-banner {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    padding: .85rem 1.25rem;
    color: #92400e;
    display: flex;
    align-items: center;
    font-size: .9rem;
}

/* ── Settings page ─────────────────────────────────────── */
.settings-nav { display:flex; flex-direction:column; }
.settings-nav-item {
    display:flex; align-items:center; gap:.65rem;
    padding:.75rem 1rem; color:var(--text-primary);
    text-decoration:none; border-left:3px solid transparent;
    transition: background .15s, border-color .15s;
    font-size:.9rem;
}
.settings-nav-item:hover { background:#f1f5f9; }
.settings-nav-item.active { background:#eff6ff; border-left-color:var(--accent); color:var(--accent); font-weight:600; }
.settings-nav-item.disabled { opacity:.45; pointer-events:none; }
.settings-nav-item i { font-size:1.1rem; width:1.2rem; text-align:center; }

.settings-item {
    display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem;
    padding:1rem 0;
}
.settings-item-info { flex:1; }
.settings-item-title { font-weight:600; font-size:.95rem; color:var(--text-primary); }
.settings-item-desc { font-size:.85rem; color:var(--text-muted); margin-top:.25rem; }
.settings-item-warn { font-size:.8rem; color:#b45309; background:#fffbeb; border:1px solid #fde68a; border-radius:var(--radius); padding:.4rem .65rem; }
.settings-item-control { flex-shrink:0; padding-top:.15rem; }

.nav-tabs-sm .nav-link { font-size:.82rem; padding:.4rem .75rem; }

.settings-toggle { width:3rem !important; height:1.5rem !important; cursor:pointer; }
.settings-toggle:checked { background-color:var(--accent); border-color:var(--accent); }
.settings-toggle ~ .form-check-label { cursor:pointer; font-size:.8rem; color:var(--text-muted); }
.settings-toggle:checked ~ .form-check-label .toggle-label-on { display:inline; }
.settings-toggle:checked ~ .form-check-label .toggle-label-off { display:none; }
.settings-toggle:not(:checked) ~ .form-check-label .toggle-label-on { display:none; }
.settings-toggle:not(:checked) ~ .form-check-label .toggle-label-off { display:inline; }

/* ── User management cards ──────────────────────────────── */
.user-mgmt-card { transition: box-shadow .15s; }
.user-mgmt-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.user-card-inactive { opacity: .55; border-left: 3px solid #ef4444; }
.user-card-inactive:hover { opacity: .8; }
.admin-user-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.25rem; border-bottom:1px solid var(--border); }
.admin-user-row:last-child { border-bottom:none; }

/* ── Plan management page ───────────────────────────────── */
.plan-card-active { border: 2px solid var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.plan-price-tag { display:flex; align-items:baseline; justify-content:center; gap:.35rem; }
.plan-price-amount { font-size:2rem; font-weight:700; color:var(--text-primary); }
.plan-price-currency { font-size:.85rem; color:var(--text-muted); }

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--text-muted);
    gap: .5rem;
    padding: 2rem;
}
.empty-state i, .empty-state .bi { font-size: 2.5rem; color: #cbd5e1; }
.empty-state h3 { color: var(--text-primary); font-size: 1.1rem; }

/* ── Forms / Inputs ──────────────────────────────────────── */
.app-input, .app-select {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    padding: .6rem .9rem;
    font-size: .9rem;
    transition: border-color .2s, box-shadow .2s;
}
.app-input:focus, .app-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    outline: none;
}
.app-input::placeholder { color: #94a3b8 !important; }

.input-group-icon { position: relative; }
.input-group-icon > i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: .9rem;
    pointer-events: none;
    z-index: 2;
}
.input-group-icon .form-control { padding-left: 2.5rem; }

.form-label { color: var(--text-muted); font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary-glow {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: none;
    color: #fff;
    font-weight: 600;
    transition: opacity .2s, box-shadow .2s, transform .15s;
    box-shadow: 0 4px 12px rgba(59,130,246,.35);
}
.btn-primary-glow:hover {
    opacity: .92;
    box-shadow: 0 6px 18px rgba(59,130,246,.45);
    transform: translateY(-1px);
    color: #fff;
}
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; border: none; color: var(--text-muted); }
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-hover); }

/* ── Pagination ──────────────────────────────────────────── */
.app-pagination .page-link {
    background: #fff;
    border-color: var(--border);
    color: var(--text-muted);
    font-size: .875rem;
}
.app-pagination .page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.app-pagination .page-link:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── Modal ───────────────────────────────────────────────── */
.app-modal { background: #fff; border: 1px solid var(--border); color: var(--text-primary); }
.app-modal .modal-header { border-bottom: 1px solid var(--border); background: #fafafa; }
.app-modal .modal-footer { border-top: 1px solid var(--border); background: #fafafa; }
.app-modal .btn-close { filter: none; }

/* ── Install info box ────────────────────────────────────── */
.install-info-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}
.install-info-title { font-size: .9rem; color: #1d4ed8; margin-bottom: .75rem; font-weight: 600; }
.install-steps { font-size: .85rem; color: var(--text-muted); padding-left: 1.2rem; }
.install-steps li { margin-bottom: .4rem; }

.code-block {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: var(--radius-sm);
    padding: .5rem .85rem;
    overflow-x: auto;
}
.code-block code { color: #86efac; font-size: .8rem; }

/* ── Plan selector (register) ────────────────────────────── */
.plan-selector { display: flex; gap: .5rem; }
.plan-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .75rem .5rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    text-align: center;
    background: #fff;
}
.plan-option input[type="radio"] { display: none; }
.plan-option:hover { border-color: var(--accent); background: #eff6ff; }
.plan-option.selected { border-color: var(--accent); background: #eff6ff; }
.plan-opt-icon { font-size: 1.2rem; color: #94a3b8; }
.plan-option.selected .plan-opt-icon { color: var(--accent); }
.plan-opt-name  { font-size: .75rem; font-weight: 600; color: var(--text-primary); }
.plan-opt-price { font-size: .7rem; color: var(--text-muted); }

/* ── Auth pages ──────────────────────────────────────────── */
.auth-body {
    background: #f1f5f9;
    color: var(--text-primary);
    font-family: 'Inter', system-ui, sans-serif;
    min-height: 100vh;
}

.auth-wrapper { display: flex; min-height: 100vh; }

.auth-panel-left {
    flex: 1;
    background: linear-gradient(160deg, #1e3a8a 0%, #1d4ed8 50%, #0369a1 100%);
    padding: 3rem;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.auth-left-content { position: relative; z-index: 2; max-width: 440px; width: 100%; text-align: center; }
.auth-hero-title { font-size: 1.7rem; font-weight: 800; line-height: 1.3; color: #fff; margin-bottom: .75rem; }
.auth-hero-sub { color: rgba(255,255,255,.7); font-size: .9rem; line-height: 1.6; margin-bottom: 1.5rem; }

.auth-panel-left .auth-brand { color: #0f172a; }
.auth-panel-left .auth-brand .brand-dot { color: #fff; }
.auth-panel-left .auth-brand i { color: #93c5fd; }

.auth-illustration-wrap { margin: 1.5rem 0; }
.auth-illustration { width: 100%; max-width: 360px; height: auto; }

.auth-features { display: flex; flex-wrap: wrap; gap: .5rem .75rem; justify-content: center; }
.auth-feature-item {
    display: flex; align-items: center; gap: .5rem;
    font-size: .8rem; color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    padding: .4rem .85rem; border-radius: 2rem;
}
.auth-feature-item i { color: #93c5fd; font-size: .9rem; }

.auth-pricing-cards { display: flex; flex-direction: column; gap: .5rem; text-align: left; }
.auth-plan-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem .85rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius-sm);
    font-size: .8rem;
    color: rgba(255,255,255,.85);
}
.auth-plan-item i { color: #93c5fd; font-size: 1rem; }
.auth-plan-item strong { display: block; font-size: .85rem; color: #fff; }
.auth-plan-item .price { margin-left: auto; color: #7dd3fc; font-weight: 700; }

.auth-panel-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #f8fafc;
}
.auth-form-wrap { width: 100%; max-width: 420px; }
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
}
.auth-brand i          { color: var(--accent); }
.auth-brand .brand-dot { color: var(--accent); }
.auth-title { font-size: 1.8rem; font-weight: 800; color: var(--text-primary); margin-bottom: .25rem; text-align: center; }
.auth-sub   { color: var(--text-muted); margin-bottom: 1.5rem; font-size: .9rem; text-align: center; }
.auth-link  { color: var(--accent); text-decoration: none; font-weight: 600; }
.auth-link:hover { text-decoration: underline; }
.auth-footer-links { display:flex; justify-content:center; gap:.5rem; margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border); }
.auth-footer-links a { font-size:.78rem; color:var(--text-muted); text-decoration:none; }
.auth-footer-links a:hover { color:var(--accent); text-decoration:underline; }
.auth-footer-links span { color:var(--border); font-size:.78rem; }

/* ── Language switcher ─────────────────────────────────── */
.btn-lang {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    font-size: .7rem; font-weight: 700; letter-spacing: .03em;
    color: var(--text-muted); background: var(--bg-hover);
    border: 1px solid var(--border); border-radius: 50%;
    text-decoration: none; transition: color .15s, background .15s, border-color .15s;
}
.btn-lang:hover { color: var(--accent); border-color: var(--accent); background: rgba(59,130,246,.06); }

/* ── Google Sign-In button ───────────────────────────────── */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1.5px solid #dadce0;
    color: #3c4043;
    font-weight: 600;
    font-size: .9rem;
    padding: .65rem 1rem;
    border-radius: .5rem;
    transition: background .15s, box-shadow .15s;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.btn-google:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    color: #3c4043;
    border-color: #c6c9cc;
}
.btn-google svg { flex-shrink: 0; }

/* ── Google disabled state ───────────────────────────────── */
.btn-google-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border: 1.5px solid #e2e8f0;
    color: #94a3b8;
    font-weight: 600;
    font-size: .9rem;
    padding: .65rem 1rem;
    border-radius: .5rem;
    cursor: not-allowed;
    position: relative;
}
.btn-google-disabled svg { opacity: .4; flex-shrink: 0; }
.google-disabled-badge {
    margin-left: auto;
    font-size: .65rem;
    font-weight: 700;
    background: #e2e8f0;
    color: #64748b;
    padding: .15rem .5rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── GitHub button ───────────────────────────────────────── */
.btn-github {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1.5px solid #dadce0;
    color: #3c4043;
    font-weight: 600;
    font-size: .9rem;
    padding: .65rem 1rem;
    border-radius: .5rem;
    transition: background .15s, box-shadow .15s;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.btn-github:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    color: #3c4043;
    border-color: #c6c9cc;
}
.btn-github-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border: 1.5px solid #e2e8f0;
    color: #94a3b8;
    font-weight: 600;
    font-size: .9rem;
    padding: .65rem 1rem;
    border-radius: .5rem;
    cursor: not-allowed;
    position: relative;
}
.btn-github-disabled .bi-github { opacity: .4; }

/* Microsoft OAuth button */
.btn-microsoft {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    color: #2f2f2f;
    font-weight: 600;
    font-size: .9rem;
    padding: .65rem 1rem;
    border-radius: .5rem;
    transition: all .2s;
}
.btn-microsoft:hover {
    background: #f0f6ff;
    border-color: #00a4ef;
    color: #00a4ef;
}
.btn-microsoft-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border: 1.5px solid #e2e8f0;
    color: #94a3b8;
    font-weight: 600;
    font-size: .9rem;
    padding: .65rem 1rem;
    border-radius: .5rem;
    cursor: not-allowed;
    position: relative;
}
.btn-microsoft-disabled .bi-microsoft { opacity: .4; }

/* ── AI Analysis ────────────────────────────────────────── */
.ai-analysis-text {
    font-size: .875rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}
.ai-analysis-text strong { color: var(--text-primary); }

/* ── Auth divider ────────────────────────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 1.1rem 0;
    color: #94a3b8;
    font-size: .82rem;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Method selector (register step 1) ───────────────────── */
.btn-method-local {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: .9rem 1rem;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: .65rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color .15s, box-shadow .15s, background .15s;
    box-shadow: var(--shadow-sm);
}
.btn-method-local:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: #fafcff;
    color: var(--text-primary);
}
.method-icon {
    width: 40px; height: 40px;
    background: #eff6ff;
    border-radius: .5rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    color: var(--accent);
    flex-shrink: 0;
}
.method-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.method-title { font-weight: 600; font-size: .9rem; }
.method-sub   { font-size: .77rem; color: var(--text-muted); }
.method-arrow { color: #94a3b8; font-size: .85rem; }

/* ── Back link ───────────────────────────────────────────── */
.btn-back-link {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    font-size: .85rem;
    text-decoration: none;
    font-weight: 500;
    transition: color .15s;
}
.btn-back-link:hover { color: var(--text-primary); }

/* ── Footer ──────────────────────────────────────────────── */
.app-footer {
    background: #fff;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .85rem;
}
.brand-name-sm { font-weight: 700; font-size: .95rem; color: var(--text-primary); }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Responsive ──────────────────────────────────────────── */
/* ── Mobile (< 768px) ───────────────────────────────────── */
@media (max-width: 768px) {
    /* Layout */
    .app-page { padding: .75rem 0; }
    .container-fluid { padding-left: .75rem !important; padding-right: .75rem !important; }

    /* Navbar */
    .app-navbar { padding: .4rem 0; }
    .brand-icon { width: 28px; height: 28px; font-size: .85rem; }
    .brand-name { font-size: .95rem; }
    .app-navbar .nav-link { font-size: .8rem; padding: .5rem .6rem; }
    .navbar-toggler { border: none; padding: .25rem; }
    .navbar-collapse { background: #fff; border-radius: var(--radius); margin-top: .5rem; padding: .5rem; box-shadow: var(--shadow); }
    .navbar-nav .nav-item { border-bottom: 1px solid var(--border); }
    .navbar-nav .nav-item:last-child { border-bottom: none; }
    .btn-user { font-size: .85rem; padding: .35rem .5rem; }
    .user-avatar { width: 28px; height: 28px; font-size: .7rem; }

    /* Page headers */
    .page-header { margin-bottom: 1rem !important; }
    .page-title { font-size: 1.2rem; }
    .page-sub { font-size: .8rem; }

    /* Stat widgets */
    .stat-widget { padding: .75rem; }
    .sw-icon { width: 32px; height: 32px; font-size: .85rem; }
    .sw-number { font-size: 1.3rem; }
    .sw-label { font-size: .7rem; }
    .sw-sub { font-size: .6rem; }

    /* Cards */
    .app-card { border-radius: var(--radius-sm); }
    .app-card-header { padding: .75rem 1rem; }
    .app-card-body { padding: .75rem 1rem; }
    .app-card-title { font-size: .9rem; }

    /* Tables */
    .app-table th { font-size: .7rem; padding: .5rem; }
    .app-table td { font-size: .78rem; padding: .5rem; }
    .agent-chip { font-size: .7rem; padding: .15rem .4rem; }

    /* User management cards */
    .user-mgmt-card .row { gap: .5rem !important; }
    .user-cell-name { font-size: .85rem; }
    .user-cell-email { font-size: .7rem; }
    .user-avatar-sm { width: 30px; height: 30px; font-size: .7rem; }

    /* Buttons */
    .btn-sm { font-size: .75rem; padding: .3rem .5rem; }

    /* Plan selector */
    .plan-selector { flex-direction: column; }
    .plan-option { flex-direction: row; justify-content: flex-start; gap: .5rem; padding: .6rem .75rem; }

    /* Upgrade banner */
    .upgrade-banner { flex-direction: column; gap: .5rem; text-align: center; font-size: .8rem; }

    /* Plan page cards */
    .plan-price-amount { font-size: 1.5rem; }

    /* Settings */
    .settings-item { flex-direction: column; gap: .75rem; }
    .settings-nav { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0; white-space: nowrap; padding: .25rem 0; }
    .settings-nav-item { font-size: .75rem; padding: .45rem .6rem; border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; gap: .35rem; }
    .settings-nav-item.active { border-left-color: transparent; border-bottom-color: var(--accent); }
    .settings-nav-item i { font-size: .9rem; }
    .settings-nav-item .badge { display: none; }
    /* Webhook/settings cards mobile */
    .wh-card-header { flex-direction: column !important; gap: .75rem; }
    .wh-card-header > .d-flex.gap-1 { flex-wrap: wrap; }
    /* Monospace inputs overflow */
    .font-monospace { font-size: .75rem !important; }
    /* Settings card titles */
    .app-card-header .app-card-title { font-size: .9rem; }
    .app-card-header { flex-wrap: wrap; gap: .5rem; }

    /* Filters bar */
    .app-card .row.g-2 > [class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; }

    /* Alert & Agent mobile cards */
    .alert-desktop-table, .agent-desktop-table { display: none !important; }
    .alert-mobile-list, .agent-mobile-list { display: block !important; padding: .75rem; }
    .alert-mobile-card .amc-meta { gap: .25rem .5rem; }

    /* Mass delete mobile */
    .mass-delete-form .col-md-4,
    .mass-delete-form .col-md-3,
    .mass-delete-form .col-md-2 { flex: 0 0 100%; max-width: 100%; }

    /* Auth pages */
    .auth-panel-left { display: none !important; }
    .auth-panel-right { padding: 1.25rem; }
    .auth-form-wrap { max-width: 100%; }
    .auth-title { font-size: 1.4rem; }
    .auth-sub { font-size: .85rem; }

    /* Footer */
    .app-footer { font-size: .8rem; }

    /* Dropdown menu */
    .dropdown-menu { font-size: .85rem; }
    .app-dropdown { min-width: 240px !important; }
}

/* ── Small mobile (< 480px) ─────────────────────────────── */
@media (max-width: 480px) {
    .stat-widget .sw-icon { display: none; }
    .sw-number { font-size: 1.5rem; }
    .page-title { font-size: 1.1rem; }
    .auth-title { font-size: 1.2rem; }
    .auth-panel-right { padding: 1rem; }
    .btn-lg { padding: .6rem 1rem; font-size: .9rem; }
}