/* Private Net Manager — Design System */

:root{--pn-sidebar:220px;--pn-radius:0.5rem;--pn-transition:0.2s ease}
[data-bs-theme="light"]{--pn-bg:#f8f9fa;--pn-card:#fff;--pn-sidebar-bg:#1a1d23;--pn-sidebar-text:#adb5bd;--pn-hover:rgba(0,0,0,.04)}
[data-bs-theme="dark"]{--pn-bg:#111318;--pn-card:#1a1d23;--pn-sidebar-bg:#111318;--pn-sidebar-text:#8b949e;--pn-hover:rgba(255,255,255,.05)}

body{min-height:100vh;background:var(--pn-bg);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.font-monospace{font-size:.78rem;letter-spacing:-.02em}
.table th{font-weight:600;white-space:nowrap;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;opacity:.7}
.table td{vertical-align:middle}

/* Cards */
.card{border:0;border-radius:var(--pn-radius);background:var(--pn-card);box-shadow:0 1px 3px rgba(0,0,0,.08);transition:box-shadow var(--pn-transition),transform var(--pn-transition)}
.card:hover{box-shadow:0 4px 12px rgba(0,0,0,.12)}
.card-header{background:transparent;border-bottom:1px solid rgba(128,128,128,.15);font-weight:600}
.stat-card{text-align:center;padding:1.5rem 1rem}
.stat-card .stat-value{font-size:2rem;font-weight:700;line-height:1.2}
.stat-card .stat-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;opacity:.6;margin-top:.25rem}

/* Badges */
.badge{font-weight:500;letter-spacing:.02em;border-radius:.25rem}

/* Buttons */
.btn{border-radius:var(--pn-radius);font-weight:500;transition:all var(--pn-transition)}
.btn-sm{border-radius:.375rem}

/* Copy button */
.copy-btn{cursor:pointer;transition:color .2s,border-color .2s}
.copy-btn.copied{color:var(--bs-success)!important;border-color:var(--bs-success)!important}

/* Alerts */
.alert{border-radius:var(--pn-radius);border:0}
.alert.fade-out{transition:opacity .5s;opacity:0}

/* Sidebar */
.sidebar{width:var(--pn-sidebar);min-height:100vh;flex-shrink:0;position:sticky;top:0;overflow-y:auto;background:var(--pn-sidebar-bg)!important;border-right:1px solid rgba(128,128,128,.1)!important}
.sidebar-brand{font-size:1.05rem;letter-spacing:-.01em}
.sidebar-nav{display:flex;flex-direction:column;gap:2px}
.sidebar-link{display:flex;align-items:center;padding:.6rem .85rem;border-radius:var(--pn-radius);color:var(--pn-sidebar-text);text-decoration:none;font-size:.875rem;transition:all .15s;position:relative}
.sidebar-link .badge{font-size:.65rem;min-width:1.2rem;padding:.15rem .35rem}
.sidebar-link:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-link.active{background:var(--bs-primary);color:#fff}
.sidebar-link i{width:1.25rem;text-align:center;margin-right:.5rem;font-size:.95rem}
.sidebar-footer{font-size:.8rem}
@media(max-width:991.98px){.sidebar{display:none!important}}

/* Mobile nav */
.mobile-nav{background:var(--pn-sidebar-bg)!important;padding:.4rem 0}

/* Announcements carousel */
.ann-carousel{position:relative;margin-bottom:.5rem}
.ann-card{cursor:pointer;border-radius:var(--pn-radius);transition:all .2s}
.ann-header{display:flex;align-items:center;gap:.5rem}
.ann-preview{opacity:.6;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ann-body{display:none;margin-top:.5rem;font-size:.9rem;line-height:1.6;white-space:pre-line}
.ann-card.expanded .ann-preview{display:none}
.ann-card.expanded .ann-body{display:block}
.ann-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.3);color:#fff;border:0;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:background .2s}
.ann-arrow:hover{background:rgba(0,0,0,.6)}
.ann-prev{left:-12px}
.ann-next{right:-12px}
.ann-counter{text-align:center;font-size:.7rem;opacity:.5;margin-top:.25rem}

/* Key cards */
.key-card{border-left:3px solid var(--bs-primary)}
.key-card.revoked{border-left-color:var(--bs-secondary);opacity:.7}
.key-card.expired{border-left-color:var(--bs-danger);opacity:.8}

/* Chat / ticket messages */
.msg-bubble{max-width:80%;padding:.6rem 1rem;border-radius:1rem;margin-bottom:.5rem;font-size:.9rem;line-height:1.5;word-break:break-word}
.msg-user{background:var(--bs-primary);color:#fff;border-bottom-right-radius:.25rem;margin-left:auto}
.msg-admin{background:var(--pn-hover);border-bottom-left-radius:.25rem}
.msg-time{font-size:.7rem;opacity:.5;margin-top:.15rem}

/* Theme toggle */
.theme-toggle{cursor:pointer;padding:.25rem;border-radius:50%;transition:transform .2s}
.theme-toggle:hover{transform:scale(1.15)}

/* Content */
.instruction-content{line-height:1.7}
.instruction-content img{max-width:100%;height:auto;border-radius:var(--pn-radius);margin:.5rem 0}

/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(128,128,128,.3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(128,128,128,.5)}

/* Display */
.display-4,.display-5{font-weight:700}

/* ── Mobile optimizations ──────────────────────────── */
@media(max-width:767.98px){
    .stat-card{padding:1rem .5rem}
    .stat-card .stat-value{font-size:1.5rem}
    .stat-card .stat-label{font-size:.7rem}
    h2{font-size:1.3rem}
    .table{font-size:.82rem}
    .msg-bubble{max-width:90%;font-size:.85rem;padding:.5rem .75rem}
    .input-group{max-width:100%!important}
    .font-monospace{font-size:.7rem}
    .ann-prev{left:-6px}
    .ann-next{right:-6px}
    .ann-arrow{width:24px;height:24px;font-size:.8rem}
    .modal-dialog{margin:.5rem}
}