/* ==========================================================================
   StreamlineGT — admin
   Same palette as the public site, but denser and built for reading tables.
   ========================================================================== */

:root {
    --space:   #050B12;
    --navy:    #071725;
    --deep:    #0B2235;
    --horizon: #169BDB;
    --glow:    #53BDF5;
    --white:   #E9EDF0;
    --gray:    #A9B5BF;
    --line:        rgba(83, 189, 245, .16);
    --line-strong: rgba(83, 189, 245, .34);
    --panel:  #08192A;
    --f-display: 'Orbitron', system-ui, sans-serif;
    --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ok:   #4ADE9B;
    --warn: #F5C451;
    --bad:  #FF8A8A;
}

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

body.admin-body {
    margin: 0;
    background: var(--space);
    color: var(--white);
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--glow); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.25; }

/* ── Shell ──────────────────────────────────────────────────────────── */

.admin-layout { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }

.admin-sidebar {
    background: linear-gradient(180deg, var(--navy), var(--space));
    border-right: 1px solid var(--line);
    padding: 26px 16px;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}
.admin-sidebar-logo { display: block; padding: 0 10px 26px; }
.admin-sidebar-logo img { width: 196px; height: auto; }
.sgt-domain {
    display: block; margin-top: 6px;
    font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray);
}

.admin-nav { display: flex; flex-direction: column; gap: 3px; }
.admin-nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    color: var(--gray);
    font-size: 14px; font-weight: 500;
    transition: background .22s var(--ease), color .22s var(--ease);
}
.admin-nav-item i { width: 17px; text-align: center; font-size: 14px; }
.admin-nav-item:hover { background: rgba(22, 155, 219, .10); color: var(--white); }
.admin-nav-item.active {
    background: rgba(22, 155, 219, .18);
    color: var(--white);
    box-shadow: inset 2px 0 0 var(--horizon);
}
.admin-sidebar-footer {
    margin-top: auto; padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 3px;
}
.admin-logout:hover { background: rgba(255, 138, 138, .12); color: var(--bad); }

.admin-main { padding: 30px 34px 60px; min-width: 0; }

/* ── Page header ────────────────────────────────────────────────────── */

.admin-page-header {
    display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
    margin-bottom: 26px;
}
.admin-page-header h1 {
    font-family: var(--f-display);
    font-size: 21px; font-weight: 500; letter-spacing: .10em; text-transform: uppercase;
}
.page-subtitle { color: var(--gray); font-size: 14px; margin: 8px 0 0; }
.admin-page-header .action-buttons { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

.section-title {
    font-family: var(--f-display);
    font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
    color: var(--white);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.dashboard-section { margin-bottom: 40px; }

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

.btn {
    display: inline-flex; align-items: center; gap: 9px;
    font: 600 13px/1 var(--f-body);
    padding: 11px 18px;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: rgba(11, 34, 53, .5);
    color: var(--white);
    cursor: pointer;
    transition: background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { background: rgba(22, 155, 219, .18); border-color: var(--horizon); transform: translateY(-1px); }
.btn-primary { background: var(--horizon); border-color: transparent; color: #fff; }
.btn-primary:hover { background: var(--glow); }
.btn-outline { background: transparent; }
.btn-danger { border-color: rgba(255, 138, 138, .4); color: var(--bad); }
.btn-danger:hover { background: rgba(255, 138, 138, .14); border-color: var(--bad); }
.btn-sm { padding: 7px 12px; font-size: 12px; border-radius: 8px; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.small-link { font-size: 13px; }
.muted, .text-muted { color: var(--gray); }
.text-success { color: var(--ok); }
.text-warning { color: var(--warn); }

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

.alert {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 17px;
    border-radius: 11px;
    margin-bottom: 22px;
    font-size: 14px;
    border: 1px solid var(--line-strong);
    background: rgba(22, 155, 219, .12);
    color: var(--glow);
}
.alert-error, .alert-danger {
    border-color: rgba(255, 138, 138, .38);
    background: rgba(255, 138, 138, .10);
    color: var(--bad);
}
.alert-success { border-color: rgba(74, 222, 155, .35); background: rgba(74, 222, 155, .10); color: var(--ok); }

/* ── Stat cards ─────────────────────────────────────────────────────── */

.stat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 16px;
    margin-bottom: 34px;
}
.stat-card {
    display: flex; align-items: center; gap: 15px;
    padding: 19px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.stat-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.stat-icon {
    width: 44px; height: 44px; flex: none;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(22, 155, 219, .16);
    color: var(--glow);
    font-size: 18px;
}
.stat-body { min-width: 0; display: block; }
.stat-number { display: block; font-family: var(--f-display); font-size: 23px; font-weight: 600; line-height: 1.1; }
.stat-label { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); margin-top: 5px; }
.stat-sub { display: block; font-size: 12px; color: var(--gray); margin-top: 3px; }

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

.table-wrap {
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow-x: auto;
    background: var(--panel);
}
.admin-table, .posts-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.admin-table th, .posts-table th {
    text-align: left;
    padding: 13px 16px;
    font: 600 10.5px/1.4 var(--f-display);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--gray);
    background: rgba(11, 34, 53, .55);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.admin-table td, .posts-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(83, 189, 245, .08);
    vertical-align: middle;
}
.admin-table tr:last-child td, .posts-table tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover, .posts-table tbody tr:hover { background: rgba(22, 155, 219, .06); }
.admin-table .action-buttons, .posts-table .action-buttons { display: flex; gap: 7px; flex-wrap: wrap; }

.row-thumb {
    width: 62px; height: 44px; flex: none;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--deep);
}
.post-no-thumb {
    width: 62px; height: 44px;
    display: grid; place-items: center;
    border-radius: 8px;
    border: 1px dashed var(--line);
    color: var(--gray);
    font-size: 13px;
}
.post-snippet { max-width: 380px; color: var(--gray); font-size: 13.5px; }
.error-cell { color: var(--bad); font-size: 12.5px; max-width: 280px; }
.post-hidden { opacity: .5; }
.post-pinned { box-shadow: inset 2px 0 0 var(--horizon); }

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

.badge, .status-badge, .platform-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font: 600 10.5px/1.5 var(--f-display);
    letter-spacing: .1em; text-transform: uppercase;
    border: 1px solid var(--line);
    color: var(--gray);
    background: rgba(11, 34, 53, .6);
    white-space: nowrap;
}
.badge.success, .status-success { border-color: rgba(74, 222, 155, .4); color: var(--ok); }
.status-failed  { border-color: rgba(255, 138, 138, .4); color: var(--bad); }
.status-untested { color: var(--gray); }

.platform-facebook  { border-color: rgba(66, 103, 178, .55); color: #8AA9E8; }
.platform-instagram { border-color: rgba(214, 91, 154, .55); color: #F09ACB; }
.platform-tiktok    { border-color: rgba(105, 201, 208, .55); color: #7FE0E6; }
.platform-twitter, .platform-x { border-color: var(--line-strong); color: var(--white); }
.platform-youtube   { border-color: rgba(224, 74, 74, .55); color: #FF9B9B; }

/* ── Filter bar ─────────────────────────────────────────────────────── */

.filter-bar { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; align-items: center; }
.filter-pill {
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(11, 34, 53, .4);
    color: var(--gray);
    font: 600 12px/1 var(--f-body);
    cursor: pointer;
    transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.filter-pill:hover { color: var(--white); border-color: var(--line-strong); }
.filter-pill.active {
    color: var(--white);
    border-color: var(--horizon);
    background: rgba(22, 155, 219, .18);
}

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

.form-card {
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--panel);
    padding: 26px 28px;
    margin-bottom: 22px;
}
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
.form-group { margin-bottom: 18px; }
.form-group label, .field label {
    display: block;
    font: 600 10.5px/1.4 var(--f-display);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 8px;
}
.form-group label .required, .required { color: var(--horizon); }
.form-group input, .form-group textarea, .form-group select,
.field input, .field textarea, .field select {
    width: 100%;
    background: rgba(5, 11, 18, .7);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 14px;
    color: var(--white);
    font: 400 14.5px/1.5 var(--f-body);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none; border-color: var(--horizon); box-shadow: 0 0 0 3px rgba(22, 155, 219, .17);
}
.form-group input[type=file] { padding: 9px 12px; font-size: 13px; }
.form-group small, .form-hint { display: block; margin-top: 7px; font-size: 12.5px; color: var(--gray); }

.form-group .checkbox-label, .checkbox-label {
    display: inline-flex; align-items: center; gap: 10px;
    font: 500 14px/1.4 var(--f-body);
    color: var(--white);
    text-transform: none; letter-spacing: 0;
    cursor: pointer;
    margin-bottom: 0;
}
.form-group .checkbox-label input[type=checkbox], .checkbox-label input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--horizon); margin: 0; flex: none; }

.form-actions {
    display: flex; gap: 11px; flex-wrap: wrap; align-items: center;
    padding-top: 20px; margin-top: 4px;
    border-top: 1px solid var(--line);
}
.form-actions > .spacer { margin-left: auto; }

.info-row { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--gray); }

/* ── Credentials ────────────────────────────────────────────────────── */

.credentials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
.cred-card { border: 1px solid var(--line); border-radius: 15px; background: var(--panel); overflow: hidden; }
.cred-card-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    background: rgba(11, 34, 53, .5);
}
.cred-platform-label {
    font-family: var(--f-display);
    font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.cred-card-header .status-badge { margin-left: auto; }
.cred-form { padding: 20px; }
.cred-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 8px; }
.cred-error {
    margin: 0 20px 18px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(255, 138, 138, .10);
    border: 1px solid rgba(255, 138, 138, .3);
    color: var(--bad);
    font-size: 12.5px;
}
.cred-guide {
    padding: 16px 20px;
    border-top: 1px solid var(--line);
    font-size: 13px; color: var(--gray);
}
.cred-guide ol, .cred-guide ul { margin: 8px 0 0; padding-left: 1.2em; }
.cred-guide li { margin-bottom: 5px; }
.test-result { font-size: 13px; margin-top: 10px; }

/* ── Media grid (photo manager) ─────────────────────────────────────── */

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.media-item {
    border: 1px solid var(--line);
    border-radius: 13px;
    overflow: hidden;
    background: var(--panel);
    transition: border-color .25s var(--ease);
}
.media-item:hover { border-color: var(--line-strong); }
.media-thumb { aspect-ratio: 4 / 3; background: var(--deep); position: relative; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-flag {
    position: absolute; top: 9px; right: 9px;
    width: 27px; height: 27px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(5, 11, 18, .82);
    border: 1px solid var(--line-strong);
    color: var(--warn);
    font-size: 11px;
}
.media-body { padding: 12px 13px 14px; }
.media-body input[type=text] {
    width: 100%;
    background: rgba(5, 11, 18, .7);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--white);
    font: 400 13px var(--f-body);
    margin-bottom: 8px;
}
.media-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.upload-zone {
    border: 1px dashed var(--line-strong);
    border-radius: 14px;
    padding: 26px;
    background: rgba(11, 34, 53, .28);
    margin-bottom: 24px;
}
.upload-zone h3 {
    font-family: var(--f-display);
    font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: 6px;
}
.upload-zone p { color: var(--gray); font-size: 13.5px; margin: 0 0 16px; }

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

.empty-state {
    border: 1px dashed var(--line-strong);
    border-radius: 14px;
    padding: 52px 28px;
    text-align: center;
    color: var(--gray);
    background: rgba(11, 34, 53, .22);
}
.empty-state i { font-size: 30px; color: var(--horizon); opacity: .7; margin-bottom: 14px; display: block; }
.empty-state h3 {
    font-family: var(--f-display);
    font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--white); margin-bottom: 9px;
}
.empty-state p { margin: 0 auto 18px; max-width: 46ch; font-size: 14px; }

/* ── Login ──────────────────────────────────────────────────────────── */

body.login-body {
    display: grid; place-items: center;
    min-height: 100vh;
    padding: 30px;
    background:
        radial-gradient(1100px 520px at 50% 118%, rgba(22, 155, 219, .30), transparent 66%),
        linear-gradient(180deg, #02060B, var(--space));
}
.login-card {
    width: 100%; max-width: 400px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(8, 25, 42, .88);
    backdrop-filter: blur(10px);
    padding: 36px 34px;
    box-shadow: 0 34px 90px -30px rgba(0, 0, 0, .9);
}
.login-logo { text-align: center; margin-bottom: 26px; }
.login-logo img { width: 236px; height: auto; margin: 0 auto; }
.login-heading {
    text-align: center;
    font-family: var(--f-display);
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 24px;
}
.login-form .form-group { margin-bottom: 16px; }
.login-form .btn { margin-top: 8px; }

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

@media (max-width: 960px) {
    .admin-layout { grid-template-columns: 1fr; }
    .admin-sidebar {
        position: static; height: auto;
        border-right: 0; border-bottom: 1px solid var(--line);
        padding: 18px;
    }
    .admin-nav { flex-direction: row; flex-wrap: wrap; }
    .admin-nav-item { padding: 9px 13px; font-size: 13px; }
    .admin-nav-item.active { box-shadow: inset 0 -2px 0 var(--horizon); }
    .admin-sidebar-footer { flex-direction: row; margin-top: 16px; }
    .admin-main { padding: 22px 20px 50px; }
    .form-row { grid-template-columns: 1fr; }
}