@charset "UTF-8";

/* ═══════════════════════════════════════════
   COLDSENSE DESIGN SYSTEM v15.0
   Light + Dark Theme with Animated Transitions
   ═══════════════════════════════════════════ */

:root {
    /* Dark Theme (Default) */
    --bg-main: #0a0c0f;
    --bg-sidebar: #121519;
    --bg-card: #181b21;
    --text-primary: #ffffff;
    --text-secondary: #8a949e;
    --border-light: rgba(255, 255, 255, 0.08);
    --input-bg: rgba(0,0,0,0.3);
    --hover-bg: rgba(255,255,255,0.03);
    --table-header-bg: rgba(0,0,0,0.1);

    /* Constants */
    --unifi-blue: #0066ff;
    --unifi-blue-glow: rgba(0, 102, 255, 0.4);
    --success: #00d481;
    --danger: #ff4d4d;
    --warning: #f59e0b;
    --sidebar-width: 260px;
    --sidebar-collapsed: 72px;
    --transition-theme: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] {
    --bg-main: #f4f5f7;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --text-primary: #1a1d21;
    --text-secondary: #6b7280;
    --border-light: rgba(0, 0, 0, 0.08);
    --input-bg: rgba(0,0,0,0.04);
    --hover-bg: rgba(0,0,0,0.02);
    --table-header-bg: rgba(0,0,0,0.03);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-main);
    color: var(--text-primary);
    overflow-x: hidden;
    transition: background var(--transition-theme), color var(--transition-theme);
}

/* ─── SIDEBAR ─── */
.sidebar {
    width: var(--sidebar-width); height: 100vh; background: var(--bg-sidebar);
    position: fixed; left: 0; top: 0; display: flex; flex-direction: column;
    border-right: 1px solid var(--border-light);
    transition: width 0.3s cubic-bezier(0.4,0,0.2,1), background var(--transition-theme), border var(--transition-theme);
    z-index: 1000;
}
.sidebar.collapsed { width: var(--sidebar-collapsed); }
.sidebar-logo {
    height: 72px; display: flex; align-items: center; padding: 0 24px; font-weight: 800;
    font-size: 1.2rem; gap: 12px; overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--border-light);
    transition: border var(--transition-theme);
}
.sidebar.collapsed .logo-text { opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.sidebar.collapsed .nav-btn span { display: none; }
.sidebar.collapsed .nav-group { padding: 12px 8px; }
.sidebar.collapsed .nav-btn { justify-content: center; padding: 0; }

.nav-group { padding: 12px; display: flex; flex-direction: column; gap: 4px; transition: padding 0.3s; }
.nav-btn {
    width: 100%; height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 14px;
    background: transparent; border: none; color: var(--text-secondary); cursor: pointer;
    border-radius: 8px; font-weight: 600; font-size: 0.82rem; transition: all 0.2s;
    white-space: nowrap; overflow: hidden;
}
.nav-btn svg, .nav-btn i { min-width: 20px; flex-shrink: 0; }
.nav-btn:hover { background: var(--hover-bg); color: var(--text-primary); }
.nav-btn.active { background: rgba(0,102,255,0.1); color: var(--unifi-blue); position: relative; }
.nav-btn.active::after { content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px; background:var(--unifi-blue); border-radius:0 4px 4px 0; box-shadow:0 0 8px var(--unifi-blue); }

.nav-divider { height:1px; background:var(--border-light); margin:8px 14px; transition:background var(--transition-theme); }

/* ─── MAIN ─── */
.main-carrier {
    margin-left: var(--sidebar-width);
    transition: margin-left 0.3s cubic-bezier(0.4,0,0.2,1), background var(--transition-theme);
    min-height: 100vh; display: flex; flex-direction: column;
}
.sidebar.collapsed ~ .main-carrier { margin-left: var(--sidebar-collapsed); }

.top-bar {
    height: 64px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 2rem; border-bottom: 1px solid var(--border-light);
    background: var(--bg-sidebar); backdrop-filter: blur(12px);
    transition: background var(--transition-theme), border var(--transition-theme);
}
.view-module { padding: 2rem; flex:1; display:flex; flex-direction:column; gap:1.5rem; animation:slideIn 0.35s ease-out; }

/* ─── BREADCRUMB ─── */
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:0.75rem; font-weight:600; color:var(--text-secondary); margin-bottom:0.5rem; }
.breadcrumb a { color:var(--unifi-blue); text-decoration:none; cursor:pointer; transition:0.2s; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb-sep { opacity:0.3; }

/* ─── CARDS ─── */
.metrics-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:1.2rem; }
.unifi-card {
    background: var(--bg-card); border:1px solid var(--border-light); border-radius:12px;
    padding:1.5rem; box-shadow:0 2px 12px rgba(0,0,0,0.08);
    transition: background var(--transition-theme), border var(--transition-theme), box-shadow var(--transition-theme);
}
.unifi-card:hover { box-shadow:0 4px 24px rgba(0,0,0,0.15); }
.label { font-size:0.62rem; font-weight:800; text-transform:uppercase; color:var(--text-secondary); letter-spacing:0.8px; display:block; margin-bottom:0.4rem; }
.value { font-size:2rem; font-weight:800; line-height:1; }

/* ─── TABLE ─── */
.enterprise-table-wrapper {
    background:var(--bg-card); border:1px solid var(--border-light); border-radius:12px; overflow:hidden;
    transition: background var(--transition-theme), border var(--transition-theme);
}
.table-header { padding:1rem 1.5rem; border-bottom:1px solid var(--border-light); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.8rem; transition:border var(--transition-theme); }

table { width:100%; border-collapse:collapse; text-align:left; }
th { font-size:0.62rem; font-weight:800; color:var(--text-secondary); text-transform:uppercase; padding:0.8rem 1.2rem; border-bottom:1px solid var(--border-light); background:var(--table-header-bg); letter-spacing:0.5px; transition:background var(--transition-theme), border var(--transition-theme); }
td { padding:0.8rem 1.2rem; font-size:0.82rem; border-bottom:1px solid var(--border-light); transition:border var(--transition-theme); }
tr:hover { background:var(--hover-bg); }
.status-orb { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; background:var(--text-secondary); }
.status-orb.online { background:var(--success); box-shadow:0 0 6px var(--success); }

.pill { font-size:0.68rem; font-weight:700; padding:4px 12px; border-radius:20px; display:inline-flex; align-items:center; gap:6px; }

/* ─── FORMS ─── */
.unifi-input {
    width:100%; padding:0.7rem 1rem; background:var(--input-bg); border:1px solid var(--border-light);
    border-radius:8px; color:var(--text-primary); margin-bottom:0.8rem; outline:none; font-size:0.82rem;
    transition: border 0.2s, background 0.2s, color var(--transition-theme);
}
.unifi-input:focus { border-color:var(--unifi-blue); box-shadow:0 0 0 3px rgba(0,102,255,0.1); }
select.unifi-input { appearance:none; cursor:pointer; }

.btn-unifi {
    width:100%; padding:0.75rem; background:var(--unifi-blue); border:none; border-radius:8px;
    color:white; font-weight:700; cursor:pointer; transition:0.25s; text-transform:uppercase;
    letter-spacing:0.8px; font-size:0.78rem;
}
.btn-unifi:hover { background:#0052cc; transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,102,255,0.3); }

.btn-sm { padding:5px 12px; font-size:0.7rem; border-radius:6px; font-weight:700; border:none; cursor:pointer; transition:0.2s; display:inline-flex; align-items:center; gap:5px; }
.btn-sm:hover { transform:translateY(-1px); }
.btn-primary { background:var(--unifi-blue); color:white; }
.btn-primary:hover { box-shadow:0 3px 10px var(--unifi-blue-glow); }
.btn-danger { background:rgba(255,77,77,0.08); color:var(--danger); border:1px solid rgba(255,77,77,0.15); }
.btn-danger:hover { background:var(--danger); color:white; }
.btn-ghost { background:var(--hover-bg); color:var(--text-primary); border:1px solid var(--border-light); }
.btn-ghost:hover { background:rgba(0,0,0,0.06); }
.btn-success { background:rgba(0,212,129,0.08); color:var(--success); border:1px solid rgba(0,212,129,0.15); }
.btn-success:hover { background:var(--success); color:white; }
.btn-warning { background:rgba(245,158,11,0.1); color:var(--warning); border:1px solid rgba(245,158,11,0.2); }
.btn-warning:hover { background:var(--warning); color:white; }

.action-btn {
    background:var(--hover-bg); border:1px solid var(--border-light); color:var(--text-secondary);
    padding:5px; border-radius:6px; cursor:pointer; transition:0.2s; display:inline-flex;
    align-items:center; justify-content:center;
}
.action-btn:hover { background:var(--unifi-blue); border-color:var(--unifi-blue); color:white; transform:scale(1.08); }
.action-btn.delete:hover { background:var(--danger); border-color:var(--danger); }

/* ─── MODALS ─── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); z-index:2000; display:flex; align-items:center; justify-content:center; }
.modal-unifi {
    background:var(--bg-card); max-width:460px; width:92%; border:1px solid var(--border-light);
    border-radius:16px; padding:2rem; animation:modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
    transition: background var(--transition-theme), border var(--transition-theme);
}
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.modal-close { background:none; border:none; color:var(--text-secondary); cursor:pointer; padding:4px; border-radius:6px; transition:0.2s; }
.modal-close:hover { color:var(--text-primary); background:var(--hover-bg); }

/* ─── THEME TOGGLE ─── */
.theme-toggle {
    width:44px; height:24px; border-radius:12px; background:rgba(255,255,255,0.1); border:1px solid var(--border-light);
    cursor:pointer; position:relative; transition:background 0.3s;
}
.theme-toggle::after {
    content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
    background:var(--text-secondary); transition:transform 0.3s cubic-bezier(0.68,-0.55,0.27,1.55), background 0.3s;
}
[data-theme="light"] .theme-toggle { background:rgba(0,102,255,0.1); }
[data-theme="light"] .theme-toggle::after { transform:translateX(20px); background:var(--unifi-blue); }

/* ─── SONNER TOASTS ─── */
.sonner-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column-reverse; gap:0.5rem; pointer-events:none; }
.sonner-toast {
    pointer-events:all; background:var(--bg-card); border:1px solid var(--border-light);
    border-radius:12px; padding:12px 16px; color:var(--text-primary); font-size:0.8rem; font-weight:500;
    display:flex; align-items:center; gap:10px; box-shadow:0 16px 48px rgba(0,0,0,0.4);
    animation:sonnerIn 0.4s cubic-bezier(0.16,1,0.3,1); min-width:300px; max-width:400px;
    position:relative; overflow:hidden;
    transition: background var(--transition-theme), border var(--transition-theme);
}
.sonner-toast.removing { animation:sonnerOut 0.35s forwards; }
.sonner-icon { width:18px; height:18px; flex-shrink:0; }
.sonner-icon.success { color:var(--success); }
.sonner-icon.error { color:var(--danger); }
.sonner-icon.info { color:var(--unifi-blue); }
.sonner-body { flex:1; }
.sonner-title { font-weight:700; font-size:0.8rem; }
.sonner-desc { font-size:0.7rem; color:var(--text-secondary); margin-top:1px; }
.sonner-progress { position:absolute; bottom:0; left:0; height:2px; border-radius:0 0 12px 12px; animation:sonnerProgress 3s linear forwards; }

/* ─── IMPERSONATE BANNER ─── */
.impersonate-banner {
    background:rgba(0,102,255,0.08); border-bottom:1px solid rgba(0,102,255,0.15);
    padding:8px 2rem; display:flex; align-items:center; justify-content:space-between;
    font-size:0.75rem; font-weight:700; color:var(--unifi-blue);
}

/* ─── ANIMATIONS ─── */
@keyframes sonnerIn { from { transform:translateY(100%) scale(0.95); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
@keyframes sonnerOut { from { transform:translateX(0); opacity:1; } to { transform:translateX(120%); opacity:0; } }
@keyframes modalIn { from { transform:scale(0.92); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes slideIn { from { transform:translateY(8px); opacity:0; } to { transform:translateY(0); opacity:1; } }

.hidden { display: none !important; }