/* HYDRA — Option B prototype. Admin styled to resemble Filament (themed navy). */

:root {
  --primary: #003263;        /* Filament "primary" themed to HMV navy */
  --primary-600: #0a4377;
  --primary-500: #14538f;
  --primary-tint: #e9eff6;   /* primary-50 */
  --teal: #00C6BE;
  --bg: #f9fafb;             /* gray-50 */
  --card: #ffffff;
  --line: #e5e7eb;           /* gray-200 */
  --line-soft: #f1f3f5;
  --ink: #111827;            /* gray-900 */
  --ink-700: #374151;        /* gray-700 */
  --ink-500: #6b7280;        /* gray-500 */
  --ink-400: #9ca3af;        /* gray-400 */
  --success: #16a34a; --success-bg:#dcfce7;
  --warning: #d97706; --warning-bg:#fef3c7;
  --danger:  #dc2626; --danger-bg:#fee2e2;
  --info:    #2563eb; --info-bg:#dbeafe;
  --sb-w: 17rem;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; height:100%; }
body {
  background: var(--bg); color: var(--ink-700);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { color: var(--ink); margin:0; }
a { color: inherit; }

/* ---- Layout ---- */
.fi-main { min-height:100vh; transition: padding-left .2s; }
@media (min-width:1024px){ .fi-main { padding-left: var(--sb-w); } }

/* ---- Sidebar ---- */
.fi-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sb-w);
  background: #fff; border-right: 1px solid var(--line);
  display:flex; flex-direction:column; z-index:60;
  transform: translateX(-100%); transition: transform .2s;
}
.fi-sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.15); }
@media (min-width:1024px){ .fi-sidebar { transform: translateX(0); } }
.fi-brand { display:flex; align-items:center; gap:.6rem; height:64px; padding:0 1.25rem; border-bottom:1px solid var(--line); }
.fi-brand img { height:34px; }
.fi-brand b { font-size:1.05rem; font-weight:800; color:var(--primary); letter-spacing:.01em; }
.fi-brand span { display:block; font-size:.66rem; color:var(--ink-400); font-weight:600; }
.fi-nav { padding:.75rem .75rem 1rem; overflow-y:auto; flex:1; }
.fi-group { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-400); padding:1rem .65rem .35rem; }
.fi-link {
  display:flex; align-items:center; gap:.7rem; padding:.5rem .65rem; margin:.1rem 0;
  border-radius:.5rem; color:var(--ink-700); font-weight:500; font-size:.9rem; text-decoration:none;
  transition: background .12s,color .12s;
}
.fi-link svg { width:20px; height:20px; color:var(--ink-400); flex:none; }
.fi-link:hover { background:#f3f4f6; }
.fi-link.active { background:var(--primary-tint); color:var(--primary); font-weight:600; }
.fi-link.active svg { color:var(--primary); }
.fi-link .count { margin-left:auto; background:var(--danger); color:#fff; font-size:.68rem; font-weight:700; min-width:1.1rem; text-align:center; padding:.05rem .35rem; border-radius:.4rem; }
.fi-sbfoot { padding:.85rem 1.25rem; border-top:1px solid var(--line); font-size:.72rem; color:var(--ink-400); }

/* ---- Topbar ---- */
.fi-topbar {
  position: sticky; top:0; z-index:40; height:64px;
  display:flex; align-items:center; gap:1rem;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); padding:0 1.25rem;
}
.fi-search { flex:1; max-width:420px; position:relative; }
.fi-search input { width:100%; border:1px solid var(--line); border-radius:.5rem; padding:.5rem .8rem .5rem 2.2rem; font:inherit; background:#fff; color:var(--ink); }
.fi-search input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,50,99,.12); }
.fi-search svg { position:absolute; left:.65rem; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--ink-400); }
.fi-search kbd { position:absolute; right:.6rem; top:50%; transform:translateY(-50%); font-size:.66rem; color:var(--ink-400); border:1px solid var(--line); border-radius:.3rem; padding:.05rem .3rem; font-family:inherit; }
.fi-iconbtn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:.5rem; border:1px solid var(--line); background:#fff; color:var(--ink-500); cursor:pointer; }
.fi-iconbtn:hover { background:#f3f4f6; }
.fi-user { display:flex; align-items:center; gap:.55rem; cursor:pointer; padding:.25rem .4rem; border-radius:.5rem; }
.fi-user:hover { background:#f3f4f6; }
.fi-avatar { width:34px; height:34px; border-radius:99px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.78rem; }
.fi-burger { display:inline-flex; }
@media (min-width:1024px){ .fi-burger { display:none; } }

/* ---- Page ---- */
.fi-page { max-width: 80rem; margin:0 auto; padding:1.5rem 1.25rem 4rem; }
@media (min-width:1024px){ .fi-page { padding:2rem 1.75rem 4rem; } }
.fi-header { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.fi-header h1 { font-size:1.6rem; font-weight:700; }
.fi-breadcrumb { font-size:.8rem; color:var(--ink-500); margin-bottom:.4rem; font-weight:500; }
.fi-breadcrumb a { color:var(--ink-500); text-decoration:none; }
.fi-breadcrumb a:hover { color:var(--primary); }

/* ---- Card ---- */
.fi-card { background:#fff; border-radius:.75rem; box-shadow:0 1px 3px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04); }
.fi-card-pad { padding:1.25rem 1.5rem; }
.fi-section-title { font-size:1rem; font-weight:600; }
.fi-section-desc { font-size:.82rem; color:var(--ink-500); margin-top:.15rem; }

/* ---- Buttons ---- */
.fi-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; font-weight:600; font-size:.875rem; padding:.5rem .9rem; border-radius:.5rem; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:.12s; }
.fi-btn svg { width:17px; height:17px; }
.fi-btn-primary { background:var(--primary); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.1); }
.fi-btn-primary:hover { background:var(--primary-500); }
.fi-btn-outline { background:#fff; color:var(--ink-700); border-color:var(--line); box-shadow:0 1px 2px rgba(0,0,0,.04); }
.fi-btn-outline:hover { background:#f9fafb; }
.fi-btn-sm { padding:.35rem .65rem; font-size:.8rem; }

/* ---- Badges (Filament pill) ---- */
.fi-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:600; padding:.15rem .55rem; border-radius:.375rem; line-height:1.4; }
.fi-badge .dot { width:6px; height:6px; border-radius:99px; background:currentColor; }
.fi-badge.success { color:var(--success); background:var(--success-bg); }
.fi-badge.warning { color:var(--warning); background:var(--warning-bg); }
.fi-badge.danger  { color:var(--danger);  background:var(--danger-bg); }
.fi-badge.info    { color:var(--info);    background:var(--info-bg); }
.fi-badge.gray    { color:var(--ink-500); background:#f3f4f6; }

/* ---- Stat widget ---- */
.fi-stats { display:grid; gap:1rem; grid-template-columns:repeat(1,1fr); }
@media (min-width:640px){ .fi-stats { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .fi-stats { grid-template-columns:repeat(3,1fr); } }
.fi-stat { background:#fff; border-radius:.75rem; box-shadow:0 1px 3px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04); padding:1.25rem 1.4rem; }
.fi-stat .label { font-size:.85rem; font-weight:600; color:var(--ink-500); }
.fi-stat .value { font-size:1.9rem; font-weight:700; color:var(--ink); line-height:1.15; margin-top:.25rem; }
.fi-stat .desc { font-size:.8rem; margin-top:.35rem; font-weight:500; display:flex; align-items:center; gap:.25rem; }

/* ---- Table ---- */
.fi-ta-head { display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.fi-ta-search { flex:1; min-width:180px; position:relative; }
.fi-ta-search input { width:100%; border:1px solid var(--line); border-radius:.5rem; padding:.45rem .7rem .45rem 2rem; font:inherit; }
.fi-ta-search input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,50,99,.12); }
.fi-ta-search svg { position:absolute; left:.6rem; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-400); }
table.fi-ta { width:100%; border-collapse:collapse; }
.fi-ta th { text-align:left; font-size:.78rem; font-weight:600; color:var(--ink-500); padding:.7rem 1rem; border-bottom:1px solid var(--line); white-space:nowrap; }
.fi-ta td { padding:.8rem 1rem; border-bottom:1px solid var(--line-soft); font-size:.875rem; vertical-align:middle; }
.fi-ta tbody tr { cursor:pointer; }
.fi-ta tbody tr:hover { background:#f9fafb; }
.fi-ta tbody tr:last-child td { border-bottom:none; }
.fi-ta-foot { display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem; border-top:1px solid var(--line); font-size:.82rem; color:var(--ink-500); flex-wrap:wrap; gap:.6rem; }
.fi-pages { display:flex; gap:.25rem; }
.fi-pages button { border:1px solid var(--line); background:#fff; border-radius:.4rem; min-width:32px; height:32px; font:inherit; font-weight:600; color:var(--ink-700); cursor:pointer; }
.fi-pages button.on { background:var(--primary); color:#fff; border-color:var(--primary); }
.mono { font-weight:600; color:var(--primary); }

/* ---- Filters chips ---- */
.fi-filterbar { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.fi-chip { border:1px solid var(--line); background:#fff; border-radius:.5rem; padding:.35rem .7rem; font-weight:500; font-size:.82rem; color:var(--ink-700); cursor:pointer; }
.fi-chip.on { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ---- Forms ---- */
.fi-field label { display:block; font-size:.82rem; font-weight:600; color:var(--ink-700); margin-bottom:.3rem; }
.fi-input { width:100%; border:1px solid var(--line); border-radius:.5rem; padding:.5rem .7rem; font:inherit; background:#fff; color:var(--ink); }
.fi-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,50,99,.12); }
.fi-form-grid { display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
.fi-field.full { grid-column:1/-1; }

/* ---- Infolist (view page) ---- */
.fi-il { display:grid; grid-template-columns:max-content 1fr; gap:.6rem 1.5rem; font-size:.9rem; }
.fi-il dt { color:var(--ink-500); font-weight:500; }
.fi-il dd { margin:0; font-weight:600; color:var(--ink); }

/* tabs */
.fi-tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--line); margin-bottom:1rem; flex-wrap:wrap; }
.fi-tab { padding:.6rem .9rem; font-weight:600; font-size:.875rem; color:var(--ink-500); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.fi-tab.on { color:var(--primary); border-bottom-color:var(--primary); }

/* modal */
.fi-modal-scrim { position:fixed; inset:0; background:rgba(17,24,39,.45); z-index:70; display:flex; align-items:center; justify-content:center; padding:1rem; }
.fi-modal { background:#fff; width:100%; max-width:560px; max-height:92vh; overflow:auto; border-radius:.75rem; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.fi-modal-head { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 1.5rem; border-bottom:1px solid var(--line); }
.fi-modal-body { padding:1.5rem; }
.fi-modal-foot { padding:1rem 1.5rem; border-top:1px solid var(--line); display:flex; gap:.6rem; justify-content:flex-end; }
.x-close { width:34px;height:34px;border-radius:.5rem;border:none;background:#f3f4f6;color:var(--ink-500);font-size:1.2rem;cursor:pointer; }

.scrim { position:fixed; inset:0; background:rgba(17,24,39,.4); z-index:55; opacity:0; pointer-events:none; transition:opacity .2s; }
.scrim.show { opacity:1; pointer-events:auto; }
@media(min-width:1024px){ .scrim{ display:none; } }

.fade-up { animation: fadeUp .4s ease both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }

.fi-toast { position:fixed; bottom:1.3rem; left:50%; transform:translateX(-50%) translateY(160%); background:var(--ink); color:#fff; padding:.8rem 1.2rem; border-radius:.6rem; font-weight:600; font-size:.9rem; box-shadow:0 12px 34px rgba(0,0,0,.3); z-index:90; opacity:0; visibility:hidden; transition:transform .3s,opacity .3s; display:flex; align-items:center; gap:.5rem; }
.fi-toast::before { content:""; width:7px; height:7px; border-radius:99px; background:var(--teal); }
.fi-toast.show { transform:translateX(-50%) translateY(0); opacity:1; visibility:visible; }
[x-cloak]{ display:none!important; }