/* ============================================================
   PostMind — Telegram Dark Theme Design System
   Palette: Telegram dark (#17212b / #0e1621 / #2aabee)
   ============================================================ */

:root {
  /* ── Background (Telegram dark palette) ── */
  --bg-base:     #0e1621;    /* deepest: content area */
  --bg-surface:  #17212b;    /* sidebar / panels */
  --bg-card:     #1c2733;    /* cards */
  --bg-elevated: #242f3d;    /* inputs, elevated */
  --bg-hover:    #2b3945;    /* hover rows */

  /* ── Borders ── */
  --border:      #2b3945;
  --border-hover:#3a4a5c;

  /* ── Text ── */
  --text-1:      #f5f5f5;    /* primary */
  --text-2:      #aaaaaa;    /* secondary */
  --text-3:      #767676;    /* muted */

  /* ── Accent (Telegram blue) ── */
  --accent:           #2aabee;
  --accent-hover:     #229ed9;
  --accent-muted:     rgba(42,171,238,0.12);
  --accent-text:      #6ec3f5;

  /* ── Semantic ── */
  --ok:    #4dcd5e;    /* green — success / online */
  --warn:  #f5a623;    /* orange — warning */
  --err:   #e05d5d;    /* red — error */

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.6);

  /* ── Radius ── */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  12px;

  /* ── Layout ── */
  --sidebar-w: 240px;
  --header-h:  56px;
  --transition: 200ms ease;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg-base);color:var(--text-1);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent-hover)}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg-surface)}
::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:3px}

/* ============================================================
   LAYOUT
   ============================================================ */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--header-h) 1fr;min-height:100vh}

/* ── Sidebar ── */
.sidebar{grid-row:1/-1;background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border)}
.sidebar-brand .logo{width:32px;height:32px;background:var(--accent);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff}
.sidebar-brand h1{font-size:16px;font-weight:700;color:var(--text-1)}
.sidebar-nav{flex:1;padding:8px}
.nav-group{margin-bottom:4px}
.nav-group-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);padding:12px 12px 4px}
.nav-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r-sm);color:var(--text-2);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--transition)}
.nav-item:hover{background:var(--bg-hover);color:var(--text-1)}
.nav-item.active{background:var(--accent-muted);color:var(--accent)}
.nav-item .icon{font-size:16px;width:20px;text-align:center}
.nav-item .badge{margin-left:auto;background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:8px}
.sidebar-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px}
.sidebar-footer .avatar{width:28px;height:28px;border-radius:50%;background:var(--accent-muted);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--accent)}
.sidebar-footer .name{font-size:12px;font-weight:600}
.sidebar-footer .tier{font-size:10px;color:var(--text-3)}

/* ── Header ── */
.header{background:var(--bg-surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:12px}
.header-title{font-size:17px;font-weight:700;flex:1}
.header-actions{display:flex;align-items:center;gap:8px}

/* ── Content ── */
.content{background:var(--bg-base);padding:24px;overflow-y:auto}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ── Cards ── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;transition:border-color var(--transition)}
.card:hover{border-color:var(--border-hover)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-title{font-size:14px;font-weight:600;color:var(--text-1)}

/* ── Metrics ── */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.metric{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;transition:all var(--transition)}
.metric:hover{border-color:var(--border-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.metric .label{font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.metric .value{font-size:26px;font-weight:700;color:var(--text-1)}
.metric .change{font-size:11px;margin-top:4px;display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:8px}
.metric .change.up{background:rgba(77,205,94,.1);color:var(--ok)}
.metric .change.down{background:rgba(224,93,93,.1);color:var(--err)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 14px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all var(--transition);white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--text-2);border-color:var(--border)}
.btn-ghost:hover{background:var(--bg-hover);color:var(--text-1);border-color:var(--border-hover)}
.btn-sm{padding:5px 10px;font-size:11.5px}

/* ── Status ── */
.status{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:8px}
.status::before{content:'';width:5px;height:5px;border-radius:50%}
.status.published{background:rgba(77,205,94,.1);color:var(--ok)}.status.published::before{background:var(--ok)}
.status.draft{background:rgba(245,166,35,.1);color:var(--warn)}.status.draft::before{background:var(--warn)}
.status.failed{background:rgba(224,93,93,.1);color:var(--err)}.status.failed::before{background:var(--err)}

/* ── Table ── */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg)}
table{width:100%;border-collapse:collapse}
thead th{background:var(--bg-elevated);padding:10px 14px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);border-bottom:1px solid var(--border)}
tbody td{padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-2)}
tbody tr{transition:background var(--transition)}
tbody tr:hover{background:var(--bg-hover)}
tbody tr:last-child td{border-bottom:none}

/* ── Chart ── */
.chart-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px}
.chart-card canvas{width:100%!important;max-height:260px}

/* ── Grids ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g21{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.g12{display:grid;grid-template-columns:1fr 2fr;gap:16px}

/* ── Tabs ── */
.tabs{display:flex;gap:2px;background:var(--bg-elevated);border-radius:var(--r-sm);padding:3px}
.tab{padding:6px 14px;font-size:12px;font-weight:500;color:var(--text-3);border-radius:4px;cursor:pointer;transition:all var(--transition)}
.tab:hover{color:var(--text-2)}
.tab.active{background:var(--accent);color:#fff}

/* ── Input ── */
.input{width:100%;padding:8px 12px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-1);font-size:13px;transition:border-color var(--transition)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.input::placeholder{color:var(--text-3)}
select.input{appearance:auto;background-color:var(--bg-elevated)}
select.input option{background:var(--bg-card);color:var(--text-1);padding:8px}

/* ── Progress ── */
.progress{height:4px;background:var(--bg-elevated);border-radius:2px;overflow:hidden}
.progress-bar{height:100%;border-radius:2px;background:var(--accent);transition:width .6s ease}

/* ── Activity ── */
.activity{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.activity:last-child{border-bottom:none}
.activity .dot{width:6px;height:6px;border-radius:50%;margin-top:7px;flex-shrink:0}
.activity .body{flex:1}
.activity .title{font-size:13px;font-weight:500;color:var(--text-1)}
.activity .time{font-size:11px;color:var(--text-3);margin-top:1px}

/* ── Animation ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .25s ease forwards}

/* ── Burger button (hidden on desktop, shown on mobile) ── */
.burger{display:none;align-items:center;justify-content:center;width:36px;height:36px;background:none;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-2);font-size:18px;cursor:pointer;transition:var(--transition);flex-shrink:0}
.burger:hover{background:var(--bg-hover);color:var(--text-1)}

/* ── Mobile sidebar overlay ── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:2000;justify-content:flex-start}
.sidebar-overlay.open{display:flex}
.sidebar-mobile{display:flex!important;flex-direction:column;width:280px;height:100%;background:var(--bg-surface);border-right:1px solid var(--border);overflow-y:auto;animation:slideIn .25s ease}
.burger-close{margin-left:auto;background:none;border:none;color:var(--text-3);font-size:18px;cursor:pointer;padding:4px;border-radius:var(--r-sm)}
.burger-close:hover{background:var(--bg-hover);color:var(--text-1)}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}

/* ── Responsive ── */
@media(max-width:900px){
  .app{grid-template-columns:1fr!important}
  .sidebar:not(.sidebar-mobile){display:none!important}
  .burger{display:flex}
  .g2,.g21,.g12{grid-template-columns:1fr}
  .content{padding:12px}
  .header{padding:0 12px}
  .header-actions .input{width:100%!important;max-width:160px}
  .metrics{grid-template-columns:1fr 1fr}
  .metric .value{font-size:20px}
  .modal{max-width:calc(100vw - 24px);margin:12px}
  .panel{padding:16px}
  .post-row{grid-template-columns:36px 1fr 70px 36px!important;font-size:12px}
  .post-row .post-channel,.post-row .post-date{display:none}
}

/* ── Modals & Overlays ── */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:1100;justify-content:center;align-items:center;padding:20px;overflow-y:auto}
.overlay.open{display:flex}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;animation:fadeUp .25s ease}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.modal-title{font-size:18px;font-weight:700;color:var(--text-1);display:flex;align-items:center;gap:8px}
.modal-close{background:none;border:none;color:var(--text-3);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:var(--r-sm);transition:var(--transition)}
.modal-close:hover{background:var(--bg-hover);color:var(--text-1)}
.modal-footer{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:12px;flex-wrap:wrap}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:16px;border-top:1px solid var(--border)}

/* ── Modal Form Components ── */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--text-3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px}
.field .input{width:100%}
.btn-group{display:flex;gap:6px;flex-wrap:wrap}
.btn-group .btn-sm{padding:5px 12px;font-size:12px}
.btn-group .btn-sm.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.field-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.progress{display:none;margin-bottom:16px}
.progress.active{display:block}
.progress-bar{background:var(--bg-2);border-radius:var(--r-sm);overflow:hidden;height:24px;position:relative}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--ok));transition:width .3s ease}
.progress-text{position:absolute;top:0;left:0;right:0;text-align:center;font-size:11px;line-height:24px;color:var(--text-1)}
.aspect-btn{display:inline-flex;align-items:center;justify-content:center;padding:5px 12px;font-size:12px;font-weight:600;border-radius:6px;background:var(--bg-2,#1e1e26);color:var(--text-2,#9ca3af);border:1px solid var(--border,#374151);cursor:pointer;transition:all .15s ease}
.aspect-btn.active{background:var(--accent,#3b82f6);color:#fff;border-color:var(--accent,#3b82f6)}
.aspect-btn:hover:not(.active){border-color:var(--accent,#3b82f6);color:var(--text-1,#f9fafb)}

/* ── Full-screen panel (wide modal) ── */
.overlay-panel{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1000;justify-content:center;align-items:flex-start;padding:24px 20px;overflow-y:auto}
.overlay-panel.open{display:flex}
.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 32px 40px;max-width:1000px;width:100%;animation:fadeUp .25s ease}
.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.panel-header h2{font-size:20px;font-weight:700;color:var(--text-1);margin:0}
.panel-close{background:none;border:none;font-size:24px;color:var(--text-3);cursor:pointer;padding:4px 8px;border-radius:var(--r-sm);transition:color .2s,background .2s}
.panel-close:hover{background:var(--bg-hover);color:var(--text-1)}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .3s ease}

/* ── Toast notifications ── */
#toastContainer{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px}

/* ── Profile dropdown ── */
.profile-dropdown .profile-btn:hover{background:var(--bg-hover)}
.profile-dropdown .profile-menu a:hover{background:var(--bg-hover)!important;color:var(--text-1)!important}

/* ── Profile page avatar ── */
.avatar-lg{width:56px;height:56px;border-radius:50%;background:var(--accent-muted);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--accent)}