/* ============================================================
   PAPIRO STUDIO — Layout CSS v9
   Board, Calendar, Gantt, Filters, Admin Forms, Dashboard
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   BOARD TOPBAR — Stats strip (compact, inline)
   ══════════════════════════════════════════════════════════ */
.board-stats-strip {
  display:flex; align-items:center; gap:2px;
  flex-shrink:0;
}
.bss-item {
  display:flex; align-items:center; gap:4px;
  padding:3px 7px; border-radius:var(--r-sm); cursor:default;
}
.bss-dot    { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.bss-num    { font-size:12px; font-weight:700; color:var(--text-primary); line-height:1; }
.bss-label  { font-size:10px; color:var(--text-muted); }
.bss-divider{ width:1px; height:13px; background:var(--border-md); margin:0 4px; flex-shrink:0; }

/* ══════════════════════════════════════════════════════════
   BOARD FILTERBAR — Below topbar, dedicated row
   ══════════════════════════════════════════════════════════ */
.board-filterbar {
  display:flex; align-items:center; gap:8px;
  padding:8px 18px;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  flex-shrink:0; min-height:44px;
}
.board-filterbar-right {
  display:flex; align-items:center; gap:6px;
  margin-left:auto; flex-shrink:0;
}

/* Filter chips */
.filter-chip-row {
  display:flex; align-items:center; gap:5px;
  flex-wrap:nowrap; overflow-x:auto; flex:1;
  scrollbar-width:none; -ms-overflow-style:none;
}
.filter-chip-row::-webkit-scrollbar { display:none; }

.filter-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:500; font-family:var(--font-sans);
  cursor:pointer; border:1px solid var(--border-md);
  background:var(--bg-elevated); color:var(--text-muted);
  transition:all var(--tr-fast); white-space:nowrap; flex-shrink:0;
}
.filter-btn::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:currentColor; opacity:.45; flex-shrink:0;
}
.filter-btn:hover {
  border-color:var(--border-strong);
  color:var(--text-primary); background:var(--bg-card);
}
.filter-btn:hover::before { opacity:.8; }

/* Active network filters */
.filter-btn.active            { font-weight:600; }
.filter-btn.active::before    { opacity:1; }
.filter-btn.active.fb  { background:var(--fb-bg);  border-color:var(--fb-color);  color:var(--fb-text); }
.filter-btn.active.ig  { background:var(--ig-bg);  border-color:var(--ig-color);  color:var(--ig-text); }
.filter-btn.active.li  { background:var(--li-bg);  border-color:var(--li-color);  color:var(--li-text); }
.filter-btn.active.tt  { background:var(--tt-bg);  border-color:rgba(240,240,240,.4); color:var(--tt-text); }
.filter-btn.active.yt  { background:var(--yt-bg);  border-color:var(--yt-color);  color:var(--yt-text); }
.filter-btn.active.tw  { background:var(--tw-bg);  border-color:var(--tw-color);  color:var(--tw-text); }
.filter-btn.active.pi  { background:var(--pi-bg);  border-color:var(--pi-color);  color:var(--pi-text); }
.filter-btn.active.gn  { background:var(--gn-bg);  border-color:var(--gn-color);  color:var(--gn-text); }
/* Inactive: dot still shows network color */
.filter-btn.fb::before  { background:var(--fb-color); opacity:.6; }
.filter-btn.ig::before  { background:var(--ig-color); opacity:.6; }
.filter-btn.li::before  { background:var(--li-color); opacity:.6; }
.filter-btn.tt::before  { background:var(--tt-color); opacity:.5; }
.filter-btn.yt::before  { background:var(--yt-color); opacity:.6; }
.filter-btn.tw::before  { background:var(--tw-color); opacity:.6; }
.filter-btn.pi::before  { background:var(--pi-color); opacity:.6; }
.filter-btn.gn::before  { background:var(--gn-color); opacity:.6; }

/* Search */
.board-search-wrap {
  position:relative; display:flex; align-items:center;
}
.board-search-icon {
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  color:var(--text-disabled); pointer-events:none;
  display:flex; align-items:center;
}
.board-search-input {
  padding:5px 10px 5px 30px; border-radius:var(--r-full);
  border:1px solid var(--border-md); font-size:var(--fs-xs); font-family:var(--font-sans);
  color:var(--text-primary); background:var(--bg-elevated);
  outline:none; width:160px; transition:all var(--tr-base);
}
.board-search-input:focus {
  border-color:var(--ps-red); background:var(--bg-input);
  width:200px; box-shadow:0 0 0 3px var(--ps-red-muted);
}
.board-search-input::placeholder { color:var(--text-disabled); }

/* Reset button */
.btn-reset-filters {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:var(--r-md);
  border:1px solid var(--border-md); background:var(--bg-elevated);
  color:var(--text-muted); cursor:pointer; transition:all var(--tr-fast);
  flex-shrink:0;
}
.btn-reset-filters:hover { background:var(--bg-card); color:var(--text-primary); border-color:var(--border-strong); }
.btn-reset-filters:active { transform:rotate(180deg); }

/* Light theme filterbar */
[data-theme="light"] .board-filterbar { background:#FFFFFF; }
[data-theme="light"] .filter-btn { background:#F0F2F9; border-color:#C8CDD8; color:#5A6480; }
[data-theme="light"] .filter-btn:hover { background:#E8EBF4; color:#0D1022; }
[data-theme="light"] .board-search-input { background:#F0F2F9; border-color:#C8CDD8; }

/* ══════════════════════════════════════════════════════════
   KANBAN BOARD
   ══════════════════════════════════════════════════════════ */
.kanban-board {
  display:flex; gap:12px; padding:14px 16px 20px;
  overflow-x:auto; overflow-y:hidden; align-items:flex-start;
  flex:1; min-height:0;
}
.kanban-board::-webkit-scrollbar { height:6px; }
.kanban-board::-webkit-scrollbar-thumb { background:var(--scroll-thumb); border-radius:var(--r-full); }

.kanban-col {
  flex:0 0 280px; min-width:280px;
  background:var(--bg-elevated); border-radius:var(--r-xl);
  border:1px solid var(--border); display:flex; flex-direction:column;
  max-height:100%;
}
.col-head {
  padding:12px 14px 10px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.col-head-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.col-name  { font-size:13px; font-weight:700; color:var(--text-primary); letter-spacing:-.01em; }
.col-dates { font-size:10px; color:var(--text-muted); margin-top:2px; }
.col-badge {
  font-size:11px; font-weight:700;
  background:var(--bg-card); border:1px solid var(--border);
  padding:2px 7px; border-radius:var(--r-full); color:var(--text-muted);
}

/* Progress bar */
.col-progress-wrap { display:flex; align-items:center; gap:7px; }
.col-progress-bar  {
  flex:1; height:4px; border-radius:var(--r-full);
  background:var(--bg-card); overflow:hidden;
}
.col-progress-fill { height:100%; border-radius:var(--r-full); transition:width .4s ease; }
.col-progress-label { font-size:10px; color:var(--text-muted); white-space:nowrap; flex-shrink:0; min-width:48px; text-align:right; }

/* Cards */
.col-body {
  flex:1; overflow-y:auto; padding:8px 8px 4px;
  display:flex; flex-direction:column; gap:7px;
}
.col-body::-webkit-scrollbar { width:3px; }
.col-body::-webkit-scrollbar-thumb { background:var(--scroll-thumb); }

.card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:12px 13px;
  cursor:pointer; transition:all var(--tr-fast);
}
.card:hover     { border-color:var(--border-md); box-shadow:var(--sh-sm); transform:translateY(-1px); }
.card.is-priority { border-left:3px solid var(--ps-red); }
.card.is-past   { opacity:.55; filter:grayscale(.4); }
.card.hidden    { display:none; }

.card-date   { font-size:10px; color:var(--text-disabled); margin-bottom:4px; font-family:var(--font-mono); }
.card-title  { font-size:var(--fs-sm); font-weight:600; color:var(--text-primary); line-height:1.4; margin-bottom:5px; letter-spacing:-.01em; }
.card-hook   { font-size:11px; color:var(--text-muted); line-height:1.4; margin-bottom:8px; font-style:italic; }
.card-footer { display:flex; align-items:center; justify-content:space-between; gap:4px; flex-wrap:wrap; }
.card-tags   { display:flex; flex-wrap:wrap; gap:3px; }
.card-meta   { display:flex; align-items:center; gap:4px; flex-shrink:0; }

.card-status-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 7px; border-radius:var(--r-full);
  font-size:10px; font-weight:600;
  background:var(--bg-elevated); color:var(--text-muted);
  border:1px solid var(--border);
}
.card-paid-badge {
  font-size:10px; padding:2px 6px; border-radius:var(--r-full);
  background:var(--c-warning-bg); color:var(--c-warning);
  border:1px solid var(--c-warning-border); font-weight:600;
}

/* Light mode kanban */
[data-theme="light"] .kanban-col  { background:#EDF0F7; border-color:#D8DCE9; }
[data-theme="light"] .col-head    { border-color:#D8DCE9; }
[data-theme="light"] .card        { background:#FFFFFF; border-color:#D8DCE9; }
[data-theme="light"] .card:hover  { border-color:#BFC5D8; box-shadow:0 2px 8px rgba(0,0,0,.07); }
[data-theme="light"] .card.is-past{ background:#F6F8FC; }
[data-theme="light"] .col-badge   { background:#FFFFFF; border-color:#D8DCE9; }

/* ══════════════════════════════════════════════════════════
   CALENDAR VIEW
   ══════════════════════════════════════════════════════════ */
.calendar-view {
  flex:1; overflow-y:auto; padding:16px 20px;
  display:flex; flex-direction:column;
}
.calendar-month-title {
  font-size:var(--fs-lg); font-weight:700; color:var(--text-primary);
  letter-spacing:-.02em; margin-bottom:14px;
}
.calendar-grid {
  display:grid; grid-template-columns:repeat(7, 1fr);
  gap:1px; background:var(--border-md);
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border-md); flex:1;
}
.cal-header-cell {
  background:var(--bg-elevated); color:var(--text-muted);
  font-size:var(--fs-xs); font-weight:700; text-align:center;
  padding:9px 4px; text-transform:uppercase; letter-spacing:.07em;
}
.cal-day {
  background:var(--bg-card); min-height:110px; padding:7px;
  display:flex; flex-direction:column; gap:3px;
}
.cal-day.is-other-month { background:var(--bg-page); opacity:.6; }
.cal-day.is-today       { background:rgba(59,130,246,.08); }
.cal-day-num {
  font-size:11px; font-weight:600; color:var(--text-muted);
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; flex-shrink:0; align-self:flex-start;
}
.cal-day.is-today .cal-day-num { background:var(--ps-red); color:#fff; font-weight:700; }
.cal-event {
  font-size:11px; font-weight:500; padding:3px 6px;
  border-radius:var(--r-xs); cursor:pointer; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:opacity var(--tr-fast); border-left:2px solid transparent;
}
.cal-event:hover { opacity:.8; transform:none; }

/* Light mode calendar */
[data-theme="light"] .cal-day             { background:#FFFFFF; }
[data-theme="light"] .cal-day.is-other-month { background:#F0F2F8; }
[data-theme="light"] .cal-header-cell     { background:#EDF0F7; }

/* ══════════════════════════════════════════════════════════
   GANTT VIEW
   ══════════════════════════════════════════════════════════ */
.gantt-view { flex:1; overflow:auto; padding:16px 20px; }
.gantt-table { width:100%; min-width:900px; border-collapse:collapse; }
.gantt-table th {
  background:var(--bg-elevated); color:var(--text-muted);
  font-size:var(--fs-xs); font-weight:700; padding:10px 12px; text-align:left;
  text-transform:uppercase; letter-spacing:.07em; white-space:nowrap;
  border-bottom:2px solid var(--border-md);
}
.gantt-table td {
  padding:8px 12px; border-bottom:1px solid var(--border);
  font-size:var(--fs-sm); vertical-align:middle; color:var(--text-primary);
}
.gantt-table tr:hover td { background:var(--bg-elevated); }
.gantt-table tr.is-past td { opacity:.5; }
.gantt-bar-cell   { width:55%; padding:6px 12px !important; }
.gantt-bar-track  { height:22px; background:var(--bg-elevated); border-radius:var(--r-sm); position:relative; overflow:hidden; border:1px solid var(--border); }
.gantt-bar {
  position:absolute; top:0; height:100%; border-radius:var(--r-sm);
  display:flex; align-items:center; padding:0 7px;
  font-size:10px; font-weight:600; color:#fff;
  white-space:nowrap; overflow:hidden;
}
.gantt-today-line {
  position:absolute; top:0; bottom:0; width:2px;
  background:var(--ps-red); opacity:.8;
}

/* ══════════════════════════════════════════════════════════
   ADMIN FORM PANELS — tabbed
   ══════════════════════════════════════════════════════════ */
.form-panel {
  background:var(--bg-card);
  border:1px solid var(--border-md);
  border-radius:var(--r-xl);
  margin-bottom:20px;
  overflow:hidden;
  box-shadow:var(--sh-sm);
}
[data-theme="light"] .form-panel {
  background:#FFFFFF;
  border-color:#D8DCE9;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.fp-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 12px; background:var(--bg-card);
}
[data-theme="light"] .fp-header { background:#FFFFFF; }
.fp-title {
  font-size:var(--fs-md); font-weight:700; color:var(--text-primary);
  letter-spacing:-.02em;
}
.fp-close {
  background:none; border:none; cursor:pointer; color:var(--text-muted);
  font-size:14px; padding:4px 6px; border-radius:var(--r-sm); line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--tr-fast), color var(--tr-fast);
}
.fp-close:hover { background:var(--bg-elevated); color:var(--text-primary); }

.fp-tabs {
  display:flex; padding:0 18px;
  border-bottom:2px solid var(--border);
  gap:0; background:var(--bg-card);
}
[data-theme="light"] .fp-tabs { background:#FFFFFF; border-bottom-color:#D8DCE9; }
.fp-tab {
  padding:9px 18px; font-size:var(--fs-xs); font-weight:600;
  font-family:inherit; border:none; border-bottom:2px solid transparent;
  background:none; color:var(--text-muted); cursor:pointer;
  margin-bottom:-1px; white-space:nowrap; letter-spacing:.01em;
  transition:color var(--tr-fast), border-color var(--tr-fast);
  line-height:1; appearance:none; -webkit-appearance:none;
}
.fp-tab:hover  { color:var(--text-primary); }
.fp-tab.active { color:var(--ps-red); border-bottom-color:var(--ps-red); font-weight:700; }
[data-theme="light"] .fp-tab        { color:#5A6480; }
[data-theme="light"] .fp-tab:hover  { color:#0D1022; }
[data-theme="light"] .fp-tab.active { color:var(--ps-red); }

.fp-body {
  padding:18px 20px; max-height:60vh; overflow-y:auto;
  background:var(--bg-card);
}
.fp-body::-webkit-scrollbar { width:4px; }
.fp-body::-webkit-scrollbar-thumb { background:var(--border-md); border-radius:var(--r-full); }
[data-theme="light"] .fp-body { background:#FFFFFF; }

.fp-admin-notice {
  font-size:var(--fs-xs); color:var(--c-warning);
  background:var(--c-warning-bg); border:1px solid var(--c-warning-border);
  border-radius:var(--r-md); padding:8px 12px; margin-bottom:16px;
}
.form-panel-sub {
  font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted); margin:14px 0 8px;
}
.form-panel-sub:first-child { margin-top:0; }

.fp-footer {
  display:flex; gap:8px; align-items:center;
  padding:12px 20px;
  border-top:1px solid var(--border);
  background:var(--bg-elevated);
}
[data-theme="light"] .fp-footer {
  background:#F0F2F9; border-top-color:#D8DCE9;
}

/* Admin misc */
.field-select-dark {
  background:var(--bg-elevated); color:var(--text-primary);
  border:1px solid var(--border-md); border-radius:var(--r-sm);
  padding:5px 8px; font-size:var(--fs-xs); font-family:var(--font-sans);
}
.field-input-dark {
  background:var(--bg-elevated); color:var(--text-primary);
  border:1px solid var(--border-md); border-radius:var(--r-sm);
  padding:5px 8px; font-size:var(--fs-xs); font-family:var(--font-sans);
}
.proj-user-row {
  display:flex; align-items:center; gap:10px;
  padding:7px 0; border-bottom:1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD ADMIN STATS
   ══════════════════════════════════════════════════════════ */
.dash-alert {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-radius:var(--r-md); margin-bottom:7px;
  font-size:var(--fs-xs);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media(max-width:640px) {
  .kanban-board { padding:8px 8px 16px; gap:8px; }
  .kanban-col   { flex:0 0 250px; min-width:250px; }
  .fp-body      { max-height:50vh; }
}