/* ═══════════════════════════════════════════════════════════════════════════
   HostAllow Cloud — Design System
   Monochrome dark theme. White on #0f0f0f.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --bg:              #0f0f0f;
    --surface:         #161616;
    --surface-hover:   #1c1c1c;
    --surface-active:  #222222;
    --overlay:         #1a1a1a;
    --border:          #232323;
    --border-hover:    #2e2e2e;
    --border-focus:    #454545;
    --ring:            rgba(255,255,255,.08);

    --text:            #ededed;
    --text-secondary:  #a0a0a0;
    --text-tertiary:   #606060;
    --text-inverse:    #0f0f0f;

    --link:            #8bb9fe;
    --link-hover:      #aaccff;

    --success:         #3fb950;
    --success-bg:      rgba(63,185,80,.10);
    --danger:          #f85149;
    --danger-bg:       rgba(248,81,73,.10);
    --warning:         #d29922;
    --warning-bg:      rgba(210,153,34,.10);
    --info-bg:         rgba(139,185,254,.08);

    --radius:          8px;
    --radius-lg:       12px;
    --mono:            'SF Mono','JetBrains Mono','Fira Code','Consolas',monospace;
    --sans:            -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,
                       Oxygen,Ubuntu,Cantarell,sans-serif;
    --transition:      120ms ease;
}

/* ─── Reset ─────────────────────────────────────────────────────────────── */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
    font-family:var(--sans);
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    min-height:100vh;
}
a{color:var(--link);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--link-hover)}
img{max-width:100%}
::selection{background:rgba(255,255,255,.15)}

/* ─── Typography ────────────────────────────────────────────────────────── */

h1{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:1.3}
h2{font-size:1.1rem;font-weight:600;letter-spacing:-.01em;line-height:1.4}
h3{font-size:.95rem;font-weight:600;line-height:1.4}
code,.text-mono{font-family:var(--mono);font-size:.85em}

/* ─── Layout ────────────────────────────────────────────────────────────── */

.container{
    max-width:1120px;
    margin:0 auto;
    padding:2.5rem 2rem;
}

/* ─── Navbar ────────────────────────────────────────────────────────────── */

.navbar{
    height:52px;
    border-bottom:1px solid var(--border);
    background:rgba(15,15,15,.85);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    position:sticky;top:0;z-index:100;
    padding:0 2rem;
    display:flex;align-items:center;
}
.nav-inner{
    max-width:1120px;margin:0 auto;width:100%;
    display:flex;align-items:center;justify-content:space-between;
    gap:2rem;
}
.nav-brand{
    font-weight:600;font-size:.95rem;color:var(--text)!important;
    white-space:nowrap;display:flex;align-items:center;gap:.6rem;
    letter-spacing:-.01em;
}
.nav-badge{
    font-size:.65rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.06em;
    padding:.15rem .5rem;border-radius:var(--radius);
    background:var(--surface-active);color:var(--text-secondary);
    line-height:1.4;
}
.nav-links{
    display:flex;align-items:center;gap:.15rem;
}
.nav-links a{
    color:var(--text-tertiary);font-size:.85rem;font-weight:500;
    padding:.35rem .75rem;border-radius:6px;
    transition:all var(--transition);
}
.nav-links a:hover{color:var(--text-secondary);background:var(--ring)}
.nav-links a.active{color:var(--text);background:var(--ring)}
.nav-user{
    display:flex;align-items:center;gap:.85rem;
    font-size:.85rem;color:var(--text-tertiary);white-space:nowrap;
}

/* ─── Auth Pages ────────────────────────────────────────────────────────── */

.auth-page{
    display:flex;align-items:center;justify-content:center;
    min-height:100vh;padding:2rem;
}
.auth-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:2.5rem;
    width:100%;max-width:400px;
}
.auth-card h1{
    text-align:center;font-size:1.35rem;font-weight:600;
    margin-bottom:.25rem;letter-spacing:-.02em;
}
.auth-card .subtitle{
    text-align:center;color:var(--text-tertiary);
    font-size:.85rem;margin-bottom:2rem;
}

/* ─── Cards ─────────────────────────────────────────────────────────────── */

.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:1.5rem;
    margin-bottom:1rem;
}
.card-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:1rem;
}
.card-header h2{margin:0}
.card-header h3{margin:0}

/* ─── Grids ─────────────────────────────────────────────────────────────── */

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ─── Stat Cards ────────────────────────────────────────────────────────── */

.stat-card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);padding:1.25rem;
}
.stat-label{
    font-size:.7rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.08em;color:var(--text-tertiary);margin-bottom:.4rem;
}
.stat-value{font-size:1.7rem;font-weight:700;letter-spacing:-.03em}

/* ─── Forms ─────────────────────────────────────────────────────────────── */

.form-group{margin-bottom:1rem}
.form-group label{
    display:block;font-size:.8rem;font-weight:500;
    color:var(--text-secondary);margin-bottom:.35rem;
}

input[type="text"],input[type="email"],input[type="password"],
input[type="number"],input[type="search"],select,textarea{
    width:100%;padding:.6rem .8rem;
    background:var(--bg);color:var(--text);
    border:1px solid var(--border);border-radius:var(--radius);
    font-size:.9rem;font-family:var(--sans);
    transition:border-color var(--transition),box-shadow var(--transition);
    outline:none;
}
input:focus,select:focus,textarea:focus{
    border-color:var(--border-focus);
    box-shadow:0 0 0 3px var(--ring);
}
input::placeholder,textarea::placeholder{color:var(--text-tertiary)}
input:disabled,input[readonly]{opacity:.5;cursor:not-allowed}

/* ─── Buttons ───────────────────────────────────────────────────────────── */

.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
    padding:.55rem 1.1rem;border:none;border-radius:var(--radius);
    font-size:.85rem;font-weight:500;font-family:var(--sans);
    cursor:pointer;transition:all var(--transition);
    text-decoration:none;line-height:1.4;white-space:nowrap;
}
.btn:active{transform:scale(.97)}

.btn-primary{
    background:#fff;color:#0f0f0f;font-weight:600;
}
.btn-primary:hover{background:#e2e2e2;color:#0f0f0f}

.btn-danger{
    background:var(--danger-bg);color:var(--danger);
    border:1px solid rgba(248,81,73,.15);
}
.btn-danger:hover{background:var(--danger);color:#fff}

.btn-ghost{
    background:transparent;color:var(--text-secondary);
    border:1px solid var(--border);
}
.btn-ghost:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border-hover)}

.btn-sm{padding:.3rem .7rem;font-size:.78rem}
.btn-full{width:100%}

/* ─── Tables ────────────────────────────────────────────────────────────── */

.table-wrap{
    overflow-x:auto;
    border:1px solid var(--border);
    border-radius:var(--radius);
}

table{width:100%;border-collapse:collapse;font-size:.875rem}

thead th{
    padding:.6rem 1rem;text-align:left;
    font-size:.7rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.06em;color:var(--text-tertiary);
    background:var(--overlay);
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}
tbody td{
    padding:.6rem 1rem;
    border-bottom:1px solid var(--border);
    vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-hover)}

/* ─── Progress bars ─────────────────────────────────────────────────────── */

.progress-bar{
    width:100%;height:6px;
    background:var(--surface-active);
    border-radius:3px;overflow:hidden;
}
.progress-fill{
    height:100%;background:var(--text);
    border-radius:3px;transition:width .3s ease;
}
.progress-fill.warning{background:var(--warning)}
.progress-fill.danger{background:var(--danger)}

/* ─── Alerts ────────────────────────────────────────────────────────────── */

.alert{
    padding:.75rem 1rem;border-radius:var(--radius);
    font-size:.85rem;margin-bottom:1rem;
    border:1px solid transparent;
}
.alert-error{
    background:var(--danger-bg);
    border-color:rgba(248,81,73,.15);
    color:var(--danger);
}
.alert-success{
    background:var(--success-bg);
    border-color:rgba(63,185,80,.15);
    color:var(--success);
}
.alert-warning{
    background:var(--warning-bg);
    border-color:rgba(210,153,34,.15);
    color:var(--warning);
}
.alert-info{
    background:var(--info-bg);
    border-color:rgba(139,185,254,.12);
    color:var(--link);
}

/* ─── Badges ────────────────────────────────────────────────────────────── */

.badge{
    display:inline-block;padding:.1rem .45rem;
    font-size:.7rem;font-weight:600;border-radius:4px;
    letter-spacing:.02em;
}
.badge-active{background:var(--success-bg);color:var(--success)}
.badge-inactive{background:var(--danger-bg);color:var(--danger)}

/* ─── Cloud code / mono display ─────────────────────────────────────────── */

.cloud-code{
    font-family:var(--mono);
    font-size:1.7rem;font-weight:700;
    letter-spacing:.1em;color:var(--text);
}

.copy-wrap{display:flex;align-items:center;gap:.75rem}

/* ─── Key-value list ────────────────────────────────────────────────────── */

.kv-list{list-style:none}
.kv-list li{
    display:flex;justify-content:space-between;
    padding:.5rem 0;border-bottom:1px solid var(--border);
    font-size:.875rem;
}
.kv-list li:last-child{border-bottom:none}
.kv-label{color:var(--text-tertiary)}
.kv-value{font-family:var(--mono);font-size:.82rem;color:var(--text-secondary)}

/* ─── Code block ────────────────────────────────────────────────────────── */

.code-block{
    background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius);padding:1rem 1.15rem;
    font-family:var(--mono);font-size:.8rem;line-height:1.8;
    overflow-x:auto;white-space:pre;color:var(--text-secondary);
    position:relative;
}

/* ─── Upload dropzone ───────────────────────────────────────────────────── */

.dropzone{
    border:1.5px dashed var(--border-hover);
    border-radius:var(--radius-lg);
    padding:2.5rem 1.5rem;text-align:center;
    cursor:pointer;transition:all .2s;
}
.dropzone:hover,.dropzone.drag-over{
    border-color:var(--text-tertiary);
    background:var(--ring);
}
.dropzone p{color:var(--text-tertiary);margin-bottom:.25rem;font-size:.9rem}
.dropzone .browse-label{color:var(--text);font-weight:500}

.upload-queue{margin-top:1rem}
.upload-entry{
    padding:.55rem 0;
    border-bottom:1px solid var(--border);
}
.upload-entry:last-child{border-bottom:none}
.upload-info{
    display:flex;justify-content:space-between;
    font-size:.82rem;margin-bottom:.3rem;
}
.upload-name{
    font-family:var(--mono);font-size:.8rem;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%;
}
.upload-entry .progress-bar{height:3px}
.upload-entry.upload-success .upload-info{color:var(--success)}
.upload-entry.upload-error .upload-info{color:var(--danger)}

/* ─── Server cards (dashboard) ──────────────────────────────────────────── */

.server-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:.75rem;margin-top:.5rem;
}
.server-card-link{text-decoration:none;color:inherit}
.server-card{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1.15rem;
    transition:border-color var(--transition),background var(--transition);
}
.server-card:hover{
    border-color:var(--border-hover);
    background:var(--surface-hover);
}
.server-card.inactive{opacity:.45}

/* ─── Collapsible ───────────────────────────────────────────────────────── */

.collapsible-toggle{
    background:none;border:none;
    color:var(--text-secondary);cursor:pointer;
    font-size:.82rem;font-family:var(--sans);padding:0;
    transition:color var(--transition);
}
.collapsible-toggle:hover{color:var(--text)}
.collapsible-content{
    display:none;margin-top:1rem;
    padding-top:1rem;border-top:1px solid var(--border);
}
.collapsible-content.open{display:block}

/* ─── Row actions ───────────────────────────────────────────────────────── */

.row-actions{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}

/* ─── Search bar ────────────────────────────────────────────────────────── */

.search-bar{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.search-bar input,.search-bar select{max-width:240px}

/* ─── Section title ─────────────────────────────────────────────────────── */

.section-title{font-size:1.25rem;font-weight:600;margin-bottom:1.25rem;letter-spacing:-.02em}

/* ─── Empty state ───────────────────────────────────────────────────────── */

.empty-state{text-align:center;padding:2.5rem 1rem;color:var(--text-tertiary)}
.empty-state p{font-size:.9rem}

/* ─── Utilities ─────────────────────────────────────────────────────────── */

.text-muted{color:var(--text-tertiary)}
.text-secondary{color:var(--text-secondary)}
.text-danger{color:var(--danger)}
.text-success{color:var(--success)}
.text-center{text-align:center}
.text-mono{font-family:var(--mono);font-size:.85em}
.text-sm{font-size:.82rem}

.mt-1{margin-top:.5rem}
.mt-2{margin-top:1rem}
.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}
.mb-2{margin-bottom:1rem}
.mb-3{margin-bottom:1.5rem}

.flex{display:flex}
.gap-1{gap:.5rem}
.gap-2{gap:1rem}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.flex-wrap{flex-wrap:wrap}
.hidden{display:none!important}

.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}

/* ═══════════════════════════════════════════════════════════════════════════
   Admin Layout — Sidebar + Main
   ═══════════════════════════════════════════════════════════════════════════ */

.admin-layout{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{
    width:232px;min-width:232px;
    background:var(--surface);
    border-right:1px solid var(--border);
    position:fixed;top:0;left:0;height:100vh;
    display:flex;flex-direction:column;
    padding:1.75rem 1rem 1.25rem;
    z-index:50;overflow-y:auto;
}
.sidebar-top{padding-bottom:1.5rem;margin-bottom:.5rem}
.sidebar-brand{
    font-weight:700;font-size:1rem;color:var(--text);
    letter-spacing:-.02em;
}
.sidebar-label{
    font-size:.65rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.1em;color:var(--text-tertiary);
    margin-top:.3rem;display:block;
}
.sidebar-nav{
    display:flex;flex-direction:column;gap:2px;flex:1;
}
.sidebar-link{
    display:flex;align-items:center;gap:.6rem;
    padding:.55rem .75rem;border-radius:6px;
    font-size:.875rem;font-weight:500;
    color:var(--text-tertiary);
    transition:all var(--transition);
}
.sidebar-link:hover{color:var(--text-secondary);background:var(--ring)}
.sidebar-link.active{color:var(--text);background:rgba(255,255,255,.06)}
.sidebar-sep{
    height:1px;background:var(--border);
    margin:.75rem 0;
}
.sidebar-footer{
    padding-top:1rem;border-top:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
}
.sidebar-user{font-size:.82rem;color:var(--text-secondary);font-weight:500}
.sidebar-logout{font-size:.78rem;color:var(--text-tertiary)}
.sidebar-logout:hover{color:var(--danger)}

/* Main content */
.admin-main{
    margin-left:232px;flex:1;
    padding:2.5rem 3rem;
    max-width:calc(100% - 232px);
    min-height:100vh;
}

/* Page header */
.page-header{margin-bottom:2rem}
.page-header h1{
    font-size:1.5rem;font-weight:700;letter-spacing:-.03em;
    margin-bottom:.15rem;
}
.page-header .page-desc{
    color:var(--text-tertiary);font-size:.875rem;
}

/* Larger stat cards for admin */
.admin-main .stat-card{padding:1.5rem 1.25rem}
.admin-main .stat-value{font-size:2rem;font-weight:700;letter-spacing:-.04em}
.admin-main .stat-label{margin-bottom:.5rem}

/* Avatar circle */
.avatar{
    width:32px;height:32px;border-radius:50%;
    background:var(--surface-active);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:.72rem;font-weight:600;color:var(--text-secondary);
    text-transform:uppercase;flex-shrink:0;
    border:1px solid var(--border);
    overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-sm{width:26px;height:26px;font-size:.65rem}

/* Activity items */
.activity-list{list-style:none}
.activity-item{
    display:flex;align-items:center;gap:.75rem;
    padding:.7rem 0;border-bottom:1px solid var(--border);
}
.activity-item:last-child{border-bottom:none}
.activity-body{flex:1;min-width:0}
.activity-file{
    font-family:var(--mono);font-size:.82rem;color:var(--text);
}
.activity-meta{
    color:var(--text-tertiary);font-size:.78rem;
    display:block;margin-top:1px;
}
.activity-time{
    font-size:.75rem;color:var(--text-tertiary);
    white-space:nowrap;flex-shrink:0;
}

/* User list items */
.user-item{
    display:flex;align-items:center;gap:.75rem;
    padding:.65rem 0;border-bottom:1px solid var(--border);
}
.user-item:last-child{border-bottom:none}
.user-item-info{flex:1;min-width:0}
.user-item-info a{color:var(--text);font-weight:500;font-size:.875rem}
.user-item-info a:hover{color:var(--link)}
.user-item-sub{
    font-size:.78rem;color:var(--text-tertiary);
    font-family:var(--mono);margin-top:1px;display:block;
}

/* Action toolbar */
.toolbar{
    display:flex;align-items:center;gap:.5rem;
    margin-bottom:1.25rem;flex-wrap:wrap;
}
.toolbar-spacer{flex:1}

/* Inline edit row */
.edit-row{
    display:flex;gap:.35rem;align-items:center;
    margin-top:.5rem;flex-wrap:wrap;
}
.edit-row input{
    padding:.3rem .5rem;font-size:.8rem;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media(max-width:900px){
    .sidebar{width:200px;min-width:200px;padding:1.25rem .75rem}
    .admin-main{margin-left:200px;padding:2rem 1.5rem;max-width:calc(100% - 200px)}
}
@media(max-width:640px){
    html{font-size:13px}
    .container{padding:1.5rem 1rem}
    .card{padding:1.15rem}
    .auth-card{padding:1.75rem}
    .cloud-code{font-size:1.3rem}
    .navbar{padding:0 1rem}
    .nav-links{gap:0}
    .nav-links a{padding:.3rem .5rem;font-size:.8rem}
    .stat-value{font-size:1.3rem}
    .server-grid{grid-template-columns:1fr}

    .admin-layout{flex-direction:column}
    .sidebar{
        position:relative;width:100%;min-width:100%;height:auto;
        flex-direction:row;padding:.6rem 1rem;
        align-items:center;gap:1rem;
        border-right:none;border-bottom:1px solid var(--border);
    }
    .sidebar-top{padding-bottom:0;margin-bottom:0}
    .sidebar-label{display:none}
    .sidebar-nav{flex-direction:row;gap:2px;flex:unset}
    .sidebar-sep{display:none}
    .sidebar-footer{border-top:none;padding-top:0;gap:.75rem}
    .admin-main{margin-left:0;max-width:100%;padding:1.25rem 1rem}
}