/* ==========================================================================
   FC Fredericia · Dark UI
   - Module accents with body.theme-* classes
   - Glow only on hover (cards, tiles, optælling cards)
   - Consistent dark forms + visible focus
   ========================================================================== */

/* ===== Core palette ======================================================= */
:root{
  --bg:#0b0f16;
  --surface:#121826;
  --surface-2:#0e1422;
  --surface-3:#0f182c;
  --border:#1f2a3a;

  --text:#eef3fb;
  --muted:#9aa3b2;

  /* Brand & module accents */
  --brand:#E2000F;               /* club red */
  --accent:#3b82f6;              /* default/fallback */

  --accent-count:#3b82f6;        /* Optælling */
  --accent-consume:#f59e0b;      /* Forbrugsrapport */
  --accent-stats:#16a34a;        /* Værdi/Statistik */
  --accent-events:#8b5cf6;       /* Events */
  --accent-items:#0ea5e9;        /* Varer */
  --accent-locations:#f97316;    /* Lokationer */
  --accent-categories:#a855f7;   /* Kategorier */

  /* Bootstrap compat */
  --bs-primary:#2563eb;
  --bs-success:#198754;
  --bs-danger:#dc3545;
  --bs-warning:#ffc107;

  --sp-0:0; --sp-1:.5rem; --sp-2:.75rem; --sp-3:1rem; --sp-4:1.5rem; --sp-5:2rem; --sp-6:3rem;
}
@media (min-width:1200px){
  .container-xl{width:100%!important;max-width:min(1920px,calc(100vw - 4%))!important;margin:0 auto;}
}

/* ===== Theme hooks (set --accent) ======================================== */
body.theme-count      { --accent:var(--accent-count); }
body.theme-consume    { --accent:var(--accent-consume); }
body.theme-stats      { --accent:var(--accent-stats); }
body.theme-events     { --accent:var(--accent-events); }
body.theme-items      { --accent:var(--accent-items); }
body.theme-locations  { --accent:var(--accent-locations); }
body.theme-categories { --accent:var(--accent-categories); }

html,body{height:100%;}
body{
  min-height:100vh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--text);font-weight:500;
}

/* ===== Layout ============================================================== */
.content-wrap{flex:1 0 auto;padding:0 var(--sp-0);padding-top:var(--sp-4);}
.content-wrap:has(>.page-subheader){padding-top:0;}
.row{--bs-gutter-y:var(--sp-4);}

/* ===== Header / Top Nav =================================================== */
.navbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding-top:.55rem;padding-bottom:.55rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
/* Subtle theme underline */
body[class*="theme-"] .navbar{
  border-bottom-color: color-mix(in oklab, var(--accent) 35%, var(--border));
  box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--accent) 16%, transparent);
}
.navbar .navbar-brand{font-weight:800;letter-spacing:.2px;color:var(--text);}
.navbar .brand-logo{height:36px !important;width:auto !important;display:inline-block}
.navbar .nav-link{font-weight:600;color:#cfd8e3;padding:.35rem .6rem;}
.navbar .nav-link:hover{color:#fff;}
.navbar .nav-link.active{color:var(--accent);}

/* 3-col header grid */
.nav-grid{display:grid;grid-template-columns:1fr;align-items:center;gap:.6rem;}
.nav-left{display:flex;align-items:center;gap:.5rem;}
.nav-center{display:flex;justify-content:center;}
.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:.4rem;}

/* Header search */
.header-search{position:relative;min-width:280px;width:540px;max-width:64vw;}
.nav-center .header-search{width:100%;max-width:980px;min-width:280px;}
.header-search .form-control{
  background:rgba(10,16,28,.55)!important;color:var(--text)!important;
  border:1px solid #2b3a55;border-radius:999px;
  padding:.55rem 2.5rem .55rem 1rem;backdrop-filter: blur(6px);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.header-search .form-control:focus,
.header-search .form-control:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 .18rem color-mix(in oklab, var(--accent) 25%, transparent);
}
.header-search .bi-search{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);opacity:.85;pointer-events:none;}
.header-search .kbd{display:none;}

.search-pop{
  position:absolute;left:0;right:0;top:calc(100% + .35rem);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:.75rem;overflow:hidden;box-shadow:0 18px 38px rgba(0,0,0,.45);z-index:1040;display:none;
}
.search-pop.show{display:block;}
.search-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:.7rem .85rem;text-decoration:none;color:var(--text);border-bottom:1px solid rgba(255,255,255,.03);
}
.search-item:last-child{border-bottom:0;}
.search-item:hover{background:#162238;}
.search-item .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:.75rem;}
.badge-cat{font-size:.72rem;border:1px solid currentColor;padding:.1rem .4rem;border-radius:.5rem;opacity:.9;}
.badge-vare{color:#7db3ff;}
.badge-lok{color:#d6a8ff;}
.badge-kamp{color:#9be6b1;}
.badge-side{color:#b9c2d3;}

/* ===== Subheader ========================================================== */
.page-subheader{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:.6rem 0;margin:0 0 1rem 0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
body[class*="theme-"] .page-subheader{
  border-bottom-color: color-mix(in oklab, var(--accent) 30%, var(--border));
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--accent) 20%, transparent);
}
.page-subheader h4{font-size:1.08rem;line-height:1.2;margin:0;color:var(--text);}

/* ===== Cards (global) — no glow by default =============================== */
.card{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:none;  /* <- off until hover */
  color:var(--text);
  margin-bottom:1.1rem;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{
  transform:translateY(-1px);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  box-shadow:
    0 14px 28px rgba(0,0,0,.32),
    0 0 0 1.5px color-mix(in oklab, var(--accent) 26%, transparent);
}
.card-header{
  background:#0f1626;border-bottom:1px solid var(--border);
  font-weight:800;padding:.85rem 1rem;border-top-left-radius:12px;border-top-right-radius:12px;color:var(--text);
}
.card-body{padding:1.05rem;color:var(--text);}

/* ===== Type / utilities ================================================== */
a{color:#93c5fd;} a:hover{color:#cfe1ff;}
.text-muted{color:var(--muted)!important;}
.text-dark,.link-dark,.text-black,.text-body,.text-body-emphasis{color:var(--text)!important;}
.bg-body,.bg-white{background:var(--surface-2)!important;color:var(--text)!important;}
.bg-body-tertiary{background:var(--surface-3)!important;color:var(--text)!important;}
.list-group-item{background:transparent;color:var(--text);border-color:var(--border);}
.badge{color:var(--text);}

/* Themed outline badges (optional) */
.badge-outline{background:transparent;border:1px solid currentColor;}
.badge-kamp    {color:color-mix(in oklab, var(--accent-events) 80%, #fff);}
.badge-lokation{color:color-mix(in oklab, var(--accent-locations) 80%, #fff);}
.badge-varer   {color:color-mix(in oklab, var(--accent-items) 80%, #fff);}

/* Alerts */
.alert{background:var(--surface-3);color:var(--text);border-color:var(--border);}
.alert-success{border-left:3px solid var(--bs-success);}
.alert-danger{border-left:3px solid var(--bs-danger);}
.alert-warning{border-left:3px solid var(--bs-warning);}

/* ===== Tables ============================================================ */
.table{border-color:var(--border);color:var(--text);}
.table thead th,.table thead td{
  background:#0d1526;border-bottom:1px solid var(--border)!important;
  padding:.70rem .85rem;font-weight:800;color:var(--text)!important;
}
.table>:not(caption)>*>*{padding:.75rem .85rem;border-color:var(--border);color:var(--text)!important;}
.table-striped>tbody>tr:nth-of-type(odd)>*{background-color:#101a2d;}
.table-striped>tbody>tr:nth-of-type(even)>*{background-color:#0c1324;}
.table-hover>tbody>tr:hover>*{background-color:#152136;}
.table tfoot th,.table tfoot td{
  background:#0d1526;border-top:2px solid var(--border)!important;font-weight:800;padding:.85rem;color:var(--text)!important;
}

/* ===== Forms (dark, readable focus) ===================================== */
.form-label{font-weight:700;margin-bottom:.3rem;color:#cbd5e1;}
.form-control,.form-select{
  background:var(--surface-3)!important;
  border:1px solid #2b3a55;color:var(--text)!important;border-radius:.5rem;
}
.form-control::placeholder{color:#7c889a;}
.form-control:focus,.form-select:focus{
  background:var(--surface-3)!important;color:var(--text)!important;caret-color:var(--text);
  border-color:var(--accent);
  box-shadow:0 0 0 .2rem color-mix(in oklab, var(--accent) 25%, transparent);
}
.input-qty{font-size:1.05rem;font-weight:800;text-align:center;background:var(--surface-3);color:var(--text);}

/* ===== Buttons =========================================================== */
.btn{border-radius:.45rem;font-weight:700;}
.btn-lg{min-height:2.1rem;padding:.42rem .9rem;font-size:.95rem;}
.btn-sm{padding:.25rem .5rem;font-size:.85rem;}
.btn-pill{border-radius:999px;}
.btn-primary{background-color:#2563eb;border-color:#2563eb;}
.btn-primary:hover{background-color:#1e4fd0;border-color:#1e4fd0;}
.btn-success{background-color:#1a9a55;border-color:#1a9a55;}
.btn-success:hover{background-color:#168349;border-color:#168349;}
.btn-danger{background-color:#e23a4a;border-color:#e23a4a;}
.btn-danger:hover{background-color:#c83240;border-color:#c83240;}
.btn-secondary{background-color:#3a4759;border-color:#3a4759;}
.btn-secondary:hover{background-color:#323f4f;border-color:#323f4f;}
.btn-outline-primary{color:#cfe1ff;border-color:#3566a8;}
.btn-outline-primary:hover{background:#172338;border-color:#3e73bd;color:#eaf2ff;}
.btn-outline-secondary{color:#cfd8e3;border-color:#3b4a63;}
.btn-outline-secondary:hover{background:#161e2c;border-color:#4a5b79;color:#eef2f8;}
.btn-outline-danger{color:#ffd7db;border-color:#a34752;}
.btn-outline-danger:hover{background:#2a1518;border-color:#ba5763;color:#ffecef;}

/* ===== KPIs ============================================================== */
.kpi{font-size:1.6rem;font-weight:900;color:var(--text);}
.kpi-sub{color:var(--muted);font-size:.9rem;}
.metric-value{font-size:1.55rem;line-height:1.1;font-weight:800;color:var(--text);}
.metric-positive{color:#86efac;}
.metric-negative{color:#ff9aa5;}

/* ===== Footer ============================================================ */
.site-footer{color:#cbd5e1;background:var(--surface);border-top:1px solid var(--border);padding:.85rem 0;margin-top:0;}

/* ===== Optælling / Location cards ======================================= */
.loc-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-bottom:1rem;}
@media (min-width:576px){ .loc-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:992px){ .loc-grid{grid-template-columns:1fr 1fr 1fr;} }

.loc-card{
  display:block;position:relative;text-decoration:none;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:.9rem 1rem;color:var(--text);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow:none; /* no default glow */
}
.loc-card .lc-title{font-weight:800;}
.loc-card .lc-badges .badge{margin-left:.25rem;}
/* Hover: subtle accent glow, no fat left border */
.loc-card:hover{
  transform:translateY(-1px);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  box-shadow:
    0 14px 28px rgba(0,0,0,.32),
    0 0 0 1.5px color-mix(in oklab, var(--accent) 26%, transparent);
}
.loc-card.active{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
  box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent);
}

/* Status edge kept thin (if shown somewhere else) */
.location-card.status-done{border-left:3px solid var(--bs-success);}
.location-card.status-before{border-left:3px solid var(--bs-warning);}

/* Drag reordering helpers */
.drag-handle{cursor:grab;opacity:.65;}
tbody.reordering tr{user-select:none;}
tr.dragging{opacity:.55;}

/* Divider */
.section-divider{display:flex;align-items:center;gap:.75rem;color:var(--muted);}
.section-divider::before,.section-divider::after{content:"";flex:1;height:1px;background:var(--border);}
.section-divider>span{white-space:nowrap;font-weight:800;font-size:.9rem;letter-spacing:.2px;}

/* ===== Dashboard tiles ==================================================== */
.home-tiles{display:grid;gap:1rem;grid-template-columns:1fr;}
@media (min-width:768px){ .home-tiles{grid-template-columns:1fr 1fr;} }
@media (min-width:1200px){ .home-tiles{grid-template-columns:1fr 1fr 1fr;} }

.home-tile{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:none; /* off until hover */
  color:var(--text);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  min-height:220px;
}
.home-tile:hover{
  transform:translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  box-shadow:
    0 14px 32px rgba(0,0,0,.35),
    0 0 0 1.5px color-mix(in oklab, var(--accent) 26%, transparent);
  text-decoration:none;
}
.home-tile .tile-header{
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  padding:.9rem 1rem;border-top-left-radius:14px;border-top-right-radius:14px;
  display:flex;align-items:center;gap:.6rem;
}
.home-tile .tile-title{font-weight:800;letter-spacing:.2px;font-size:1.05rem;color:var(--text);}
.home-tile .tile-icon{font-size:1.35rem;opacity:.95;}
.home-tile .tile-body{padding:1rem;flex:1 1 auto;}
.home-tile .tile-footer{
  padding:.8rem 1rem;border-top:1px dashed var(--border);color:#93c5fd;
  position:relative;z-index:11;
}
.home-tile .tile-footer .link-like,
.home-tile .tile-footer a{color:#cfe1ff;cursor:pointer;text-decoration:none;}
.home-tile .tile-footer .link-like:hover,
.home-tile .tile-footer a:hover{color:#ffffff;text-decoration:underline;}
.home-tile .tile-link{position:absolute;inset:0;z-index:10;border-radius:inherit;}

/* Stronger palettes per tile (no global red icons) */
.home-tile.tile-blue   {background:linear-gradient(180deg, rgba(59,130,246,.16), rgba(59,130,246,.04)), var(--surface-2);border:1px solid rgba(59,130,246,.38);}
.home-tile.tile-orange {background:linear-gradient(180deg, rgba(245,158,11,.18), rgba(245,158,11,.05)), var(--surface-2);border:1px solid rgba(245,158,11,.40);}
.home-tile.tile-green  {background:linear-gradient(180deg, rgba(22,163,74,.16), rgba(22,163,74,.05)), var(--surface-2);border:1px solid rgba(22,163,74,.40);}
.home-tile.tile-purple {background:linear-gradient(180deg, rgba(139,92,246,.18), rgba(139,92,246,.05)), var(--surface-2);border:1px solid rgba(139,92,246,.42);}

.home-tile.tile-blue   .tile-icon{color:#93c5fd;}
.home-tile.tile-orange .tile-icon{color:#facc15;}
.home-tile.tile-green  .tile-icon{color:#86efac;}
.home-tile.tile-purple .tile-icon{color:#c4b5fd;}

/* Dashboard helpers */
.tile-kicker{color:var(--muted);font-size:.9rem;margin-bottom:.25rem;}
.tile-metric{font-size:1.6rem;font-weight:900;line-height:1.1;color:var(--text);}
.truncate{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ===== Responsive tweaks ================================================== */
@media (max-width:991.98px){
  .nav-grid{grid-template-columns:1fr;}
  .brand-logo{height:30px !important;}
  .navbar .navbar-brand span{font-size:1rem;}
  .nav-right{justify-content:space-between;gap:.35rem;}
  .header-search{max-width:100%!important;width:100%!important;min-width:0;}
  .navbar .btn.btn-light{padding:.375rem .6rem;}
  .navbar .nav-link{padding:.3rem .45rem;}
  .nav-right nav .navbar-nav{flex-wrap:wrap;row-gap:.2rem;}
  .nav-right nav .navbar-nav .nav-item{white-space:nowrap;}
}
@media (max-width:575.98px){
  .navbar{padding-top:.45rem;padding-bottom:.45rem;}
  .brand-logo{height:26px !important;}
  .navbar .navbar-brand span{font-size:.95rem;}
  .nav-right{gap:.25rem;}
}
