/* GTVC Admin CMS — dashboard styles. Reuses tokens from ../assets/style.css
   Admin UI is functionally distinct from the public site by design —
   it's a work tool, not a page visitors see — but stays on-brand. */

.admin-body{ background: var(--bg); min-height:100vh; margin:0; padding:0; }

/* ---- login screen ---- */
.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: var(--forest-dark); padding:24px;
}
.login-card{
  background: var(--paper); width:100%; max-width:400px; padding:44px 38px;
  border:1px solid var(--line); box-shadow: var(--shadow-lift);
}
.login-card .brand-mark{ margin:0 auto 20px; }
.login-card h1{ font-size:1.6rem; text-align:center; margin-bottom:6px; }
.login-card p.sub{ text-align:center; font-size:.86rem; margin-bottom:28px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.82rem; font-weight:700; margin-bottom:6px; color:var(--ink); }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); font-family:var(--font-body); font-size:.94rem;
  background:var(--paper); color:var(--ink);
}
.field textarea{ resize:vertical; min-height:90px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--moss); outline-offset:1px; }
.login-error{
  background: rgba(220,60,60,.08); border:1px solid rgba(220,60,60,.35); color:#a52323;
  padding:10px 14px; font-size:.84rem; margin-bottom:18px; display:none;
}
.login-error.is-visible{ display:block; }
.login-hint{ margin-top:22px; padding-top:18px; border-top:1px dashed var(--line); font-size:.78rem; color:var(--grey-light); text-align:center; }

/* ---- dashboard shell ---- */
.admin-shell{ display:flex; min-height:100vh; }
.admin-sidebar{
  width:240px; flex-shrink:0; background: var(--forest); color:#FFFFFF;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.admin-sidebar, .admin-sidebar *{ color:#FFFFFF; }
.admin-sidebar .brand{ padding:24px 22px; display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(255,255,255,.18); }
.admin-sidebar .brand-mark{ width:40px; height:40px; }
.admin-sidebar .brand-text b{ color:#FFFFFF; font-size:.98rem; }
.admin-sidebar .brand-text span{ color: var(--moss-light); font-size:.72rem; }
.admin-nav{ flex:1; padding:18px 12px; display:flex; flex-direction:column; gap:2px; }
.admin-nav button{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:none; border:none; color: var(--moss-light); font-family:var(--font-body); font-weight:600; font-size:.9rem;
  padding:12px 14px; cursor:pointer; border-radius:2px; transition: background .15s, color .15s;
}
.admin-nav button:hover{ background: rgba(205,255,107,.08); color:#FFFFFF; }
.admin-nav button.is-active{ background: var(--moss); color: var(--forest-dark); }
.admin-nav button svg{ width:18px; height:18px; flex-shrink:0; }
.admin-sidebar-foot{
  padding:18px 22px; font-size:.78rem; background: var(--forest); color:#FFFFFF;
  border-top:1px solid rgba(255,255,255,.18);
}
.admin-sidebar-foot, .admin-sidebar-foot *{ color:#FFFFFF; }
.admin-sidebar-foot a{ opacity:.9; }
.admin-sidebar-foot a:hover{ opacity:1; text-decoration:underline; }

.admin-main{ flex:1; padding: 34px 40px 60px; max-width: 1180px; }
.admin-topline{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:30px; flex-wrap:wrap; gap:16px; }
.admin-topline h1{ font-size:1.8rem; margin-bottom:4px; }
.admin-topline p{ margin:0; font-size:.9rem; }

.admin-panel{ display:none; }
.admin-panel.is-active{ display:block; }

/* ---- stat cards ---- */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:34px; }
.stat-card{ background:var(--paper); border:1px solid var(--line); padding:20px 22px; }
.stat-card b{ display:block; font-family:var(--font-display); font-size:1.9rem; color:var(--forest-dark); }
.stat-card span{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--grey-light); }

/* ---- toolbar ---- */
.admin-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.admin-filters{ display:flex; gap:10px; flex-wrap:wrap; }
.admin-filters select{ padding:9px 12px; border:1px solid var(--line); background:var(--paper); font-family:var(--font-body); font-size:.84rem; }

/* ---- data table ---- */
.data-table{ width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); }
.data-table th{
  text-align:left; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--grey-light); padding:12px 16px; border-bottom:1px solid var(--line); background:var(--grey-bg);
}
.data-table td{ padding:14px 16px; border-bottom:1px solid var(--line); font-size:.88rem; vertical-align:top; }
.data-table tr:last-child td{ border-bottom:none; }
.data-table .row-title{ font-weight:700; color:var(--ink); }
.data-table .row-meta{ font-family:var(--font-mono); font-size:.72rem; color:var(--grey-light); margin-top:2px; }
.row-actions{ display:flex; gap:8px; }
.row-actions button{
  border:1px solid var(--line); background:var(--paper); padding:6px 12px; font-size:.76rem; font-weight:700;
  cursor:pointer; transition: background .15s, border-color .15s;
}
.row-actions button:hover{ border-color:var(--moss); }
.row-actions .danger:hover{ border-color:#c94b4b; color:#c94b4b; }

.badge{ display:inline-block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:2px; }
.badge-published{ background:rgba(205,255,107,.25); color:#2f5c0d; border:1px solid var(--moss); }
.badge-draft{ background:rgba(107,99,80,.1); color:var(--grey); border:1px solid var(--line); }
.badge-open{ background:rgba(205,255,107,.25); color:#2f5c0d; border:1px solid var(--moss); }
.badge-closed{ background:rgba(107,99,80,.1); color:var(--grey); border:1px solid var(--line); }

.empty-state{ text-align:center; padding:50px 20px; color:var(--grey-light); font-size:.9rem; }

/* ---- editor form ---- */
.editor-card{ background:var(--paper); border:1px solid var(--line); padding:30px; margin-bottom:26px; display:none; }
.editor-card.is-open{ display:block; }
.editor-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.editor-grid .field-full{ grid-column: 1 / -1; }
.editor-actions{ display:flex; gap:10px; margin-top:8px; }

/* ---- activity log ---- */
.activity-list{ background:var(--paper); border:1px solid var(--line); }
.activity-row{ padding:14px 18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; font-size:.86rem; }
.activity-row:last-child{ border-bottom:none; }
.activity-row .a-time{ font-family:var(--font-mono); font-size:.74rem; color:var(--grey-light); white-space:nowrap; }

/* ---- image field widget ---- */
.image-field{ display:grid; grid-template-columns: 120px 1fr; gap:16px; align-items:start; }
.image-field .img-preview-box{
  width:120px; height:120px; border:1px dashed var(--line); background:var(--grey-bg);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
}
.image-field .img-preview-box img{ width:100%; height:100%; object-fit:cover; display:none; }
.image-field .img-preview-box .img-placeholder{ font-family:var(--font-mono); font-size:.62rem; color:var(--grey-light); text-align:center; padding:8px; }
.image-field .img-controls{ display:flex; flex-direction:column; gap:8px; }
.image-field .img-controls input[type="file"]{ font-size:.8rem; }
.image-field .img-or{ font-family:var(--font-mono); font-size:.68rem; color:var(--grey-light); text-transform:uppercase; letter-spacing:.05em; }
.image-field .img-controls input[type="text"]{ padding:9px 12px; border:1px solid var(--line); font-size:.84rem; }
.img-status{ font-size:.74rem; color:var(--grey-light); }

/* ---- thumb table cell ---- */
.thumb-cell{ width:52px; height:52px; overflow:hidden; border:1px solid var(--line); background:var(--grey-bg); flex-shrink:0; }
.thumb-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.row-with-thumb{ display:flex; align-items:center; gap:12px; }

/* ---- simple data grid (short courses table) ---- */
.mini-table{ width:100%; border-collapse:collapse; }
.mini-table th, .mini-table td{ padding:8px 10px; border-bottom:1px solid var(--line); font-size:.82rem; text-align:left; }
.mini-table th{ font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; color:var(--grey-light); }

/* ---- gallery grid (admin) ---- */
.gallery-admin-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:16px; }
.gallery-admin-item{ background:var(--paper); border:1px solid var(--line); overflow:hidden; }
.gallery-admin-item .thumb{ height:120px; overflow:hidden; background:var(--grey-bg); }
.gallery-admin-item .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-admin-item .info{ padding:10px 12px; }
.gallery-admin-item .info p{ margin:0 0 8px; font-size:.8rem; color:var(--ink); }
.gallery-admin-item .info .row-actions{ gap:6px; }
.gallery-admin-item .info .row-actions button{ padding:5px 9px; font-size:.7rem; }
.toast{
  position:fixed; bottom:26px; right:26px; z-index:100; background:var(--forest-dark); color:#FFFFFF;
  padding:14px 22px; font-size:.88rem; font-weight:600; box-shadow:var(--shadow-lift);
  opacity:0; transform:translateY(10px); transition: opacity .25s, transform .25s; pointer-events:none;
}
.toast.is-visible{ opacity:1; transform:none; }

@media (max-width: 900px){
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{ width:100%; height:auto; position:relative; flex-direction:row; overflow-x:auto; }
  .admin-sidebar .brand{ border-bottom:none; border-right:1px solid var(--line-dark); }
  .admin-nav{ flex-direction:row; padding:10px; }
  .admin-sidebar-foot{ display:none; }
  .admin-main{ padding:24px 18px 60px; }
  .stat-row{ grid-template-columns:1fr 1fr; }
  .editor-grid{ grid-template-columns:1fr; }
  .data-table{ display:block; overflow-x:auto; }
}