/* HIGHLANDER HORSEKEEPER — theme (HTC blue & white) */
:root{
  --hh-dark:#002e7e;       /* HTC deep navy (brand)      */
  --hh-dark-2:#0f3d92;     /* navy hover                 */
  --hh-accent:#2f6bd6;     /* royal blue (buttons/active)*/
  --hh-accent-d:#1f52ad;   /* darker royal (hover/links) */
  --hh-tint:#eef3fb;       /* pale blue background wash  */
  --hh-sidebar-w:240px;
}
body{ background:#f3f6fc; color:#1e293b; }
.bg-hh-dark{ background:var(--hh-dark)!important; }
.text-hh, a.text-hh{ color:var(--hh-accent-d); }
.text-hh:hover{ color:var(--hh-dark); }

/* Layout: fixed sidebar on desktop, full width on mobile */
.hh-layout{ display:flex; min-height:100vh; }
.hh-sidebar{ width:var(--hh-sidebar-w); }
@media (min-width:992px){
  .hh-sidebar{ position:fixed; top:0; bottom:0; left:0; overflow-y:auto; }
  .hh-main{ margin-left:var(--hh-sidebar-w); flex:1; min-width:0; }
}
@media (max-width:991.98px){
  .hh-main{ flex:1; min-width:0; width:100%; }
}

/* Brand / logo chip (color logo reads on the navy sidebar via white chip) */
.hh-brand{ align-items:center; gap:.6rem; padding:1rem 1.1rem .5rem; color:#fff; }
.hh-logo-chip{ background:#fff; border-radius:.6rem; padding:.4rem .55rem; line-height:0;
  box-shadow:0 1px 4px rgba(0,0,0,.25); }
.hh-logo-chip img{ height:38px; width:auto; display:block; }
.hh-logo-chip.sm img{ height:26px; }
.hh-brand-name{ font-weight:700; letter-spacing:.5px; line-height:1; }
.hh-brand-sub{ font-size:.72rem; text-transform:uppercase; letter-spacing:2px; color:#a9c3f0; }

.hh-sidebar .nav-link{ color:#d3e0f7; border-radius:.5rem; margin-bottom:2px; }
.hh-sidebar .nav-link:hover{ background:var(--hh-dark-2); color:#fff; }
.hh-sidebar .nav-link.active{ background:var(--hh-accent); color:#fff; font-weight:600; }
.hh-sidebar .nav-link i{ color:#9dc0f5; }
.hh-sidebar .nav-link.active i{ color:#fff; }
.hh-userbox{ padding:1rem 1.2rem; margin-top:auto; }

/* Cards & headings */
.page-title{ font-weight:700; color:var(--hh-dark); }
.card{ border:none; box-shadow:0 1px 3px rgba(15,45,120,.08); }
.stat-card .stat-num{ font-size:2rem; font-weight:700; color:var(--hh-dark); line-height:1; }
.stat-card .stat-icon{ font-size:1.6rem; color:var(--hh-accent); }
.btn-hh{ background:var(--hh-accent); border-color:var(--hh-accent); color:#fff; font-weight:600; }
.btn-hh:hover,.btn-hh:focus{ background:var(--hh-accent-d); border-color:var(--hh-accent-d); color:#fff; }
.btn-outline-hh{ color:var(--hh-accent-d); border-color:var(--hh-accent); }
.btn-outline-hh:hover{ background:var(--hh-accent); color:#fff; }

/* Links & tabs pick up the blue */
a{ color:var(--hh-accent-d); }
.nav-tabs .nav-link.active{ color:var(--hh-dark); font-weight:600; }
.nav-tabs .nav-link{ color:#5b6b8c; }
.table-light th{ color:#334; }

.table-sm td, .table-sm th{ vertical-align:middle; }
.avatar{ width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--hh-tint);
  display:inline-flex;align-items:center;justify-content:center;color:var(--hh-accent-d);font-weight:700; }

/* ---- Barn board (big-screen display) ---- */
.board-body{ background:#061a45; color:#eef3fb; }
.board-wrap{ max-width:1600px; margin:0 auto; padding:1.5rem 2rem; }
.board-head{ display:flex; justify-content:space-between; align-items:center;
  border-bottom:3px solid var(--hh-accent); padding-bottom:1rem; margin-bottom:1rem; }
.board-head h1{ font-weight:800; letter-spacing:1px; margin:0; }
.board-clock{ font-size:1.6rem; color:#7ea8ee; font-variant-numeric:tabular-nums; }
.board-table{ width:100%; border-collapse:collapse; font-size:1.5rem; }
.board-table th{ text-align:left; color:#7ea8ee; text-transform:uppercase;
  font-size:1rem; letter-spacing:1px; padding:.5rem .75rem; border-bottom:2px solid #1b3a76; }
.board-table td{ padding:.7rem .75rem; border-bottom:1px solid #12295a; }
.board-table tr:nth-child(even){ background:rgba(255,255,255,.04); }
.board-done{ opacity:.45; text-decoration:line-through; }

/* Print */
@media print{
  .hh-sidebar, .navbar, .no-print, .btn{ display:none!important; }
  .hh-main{ margin:0!important; }
  body{ background:#fff; }
  .card{ box-shadow:none; border:1px solid #ccc; }
  a[href]:after{ content:""; }
}
.print-only{ display:none; }
@media print{ .print-only{ display:block; } }

/* Login */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#002e7e 0%,#0f3d92 55%,#2f6bd6 100%); padding:1rem; }
.login-card{ max-width:400px; width:100%; }
.login-logo{ max-width:210px; width:70%; height:auto; margin:0 auto .5rem; display:block; }

/* ===== Drag-and-drop boards (Barn Map + Work Board) ================== */
.hhk-chip{ position:relative; display:inline-flex; align-items:center; gap:6px; border-radius:8px; padding:5px 9px;
  margin:2px; font-size:13px; font-weight:700; cursor:grab; touch-action:none; user-select:none;
  border:1px solid rgba(0,0,0,.14); box-shadow:0 1px 2px rgba(15,45,120,.08); white-space:nowrap; }
.hhk-chip:focus-visible{ outline:2px solid var(--hh-dark); outline-offset:2px; }
.hhk-i{ position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%; border:0;
  background:#fff; color:#1e293b; font:800 10px/16px Georgia,'Times New Roman',serif; font-style:italic;
  text-align:center; padding:0; cursor:pointer; opacity:.55; box-shadow:0 1px 3px rgba(0,0,0,.3); z-index:2; }
.hhk-chip:hover .hhk-i, .hhk-i:focus{ opacity:1; }
.hhk-chip.hhk-picked{ box-shadow:0 0 0 3px var(--hh-dark); }
.hhk-chip.hhk-ghosted{ opacity:.3; }
.hhk-dragclone{ position:fixed; z-index:1080; pointer-events:none; margin:0;
  box-shadow:0 10px 24px rgba(2,20,60,.35); transform:scale(1.05) rotate(-2deg); }
.hhk-zone.hhk-over{ background:#dce8fb !important; box-shadow:inset 0 0 0 2px var(--hh-accent); }
body.hhk-picking .hhk-zone{ outline:1px dashed #b9c9e6; outline-offset:-3px; }
@media (prefers-reduced-motion:reduce){ .hhk-dragclone{ transform:none; } }

.hh-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; }
.hh-legend .li{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#42506a; }
.hh-legend .sw{ width:14px; height:14px; border-radius:4px; border:1px solid rgba(0,0,0,.15); }

/* Barn map */
.barn-group summary{ list-style:none; cursor:pointer; padding:11px 13px; display:flex; align-items:center; gap:10px; font-weight:700; }
.barn-group summary::-webkit-details-marker{ display:none; }
.barn-group summary .sw{ width:16px; height:16px; border-radius:5px; border:1px solid rgba(0,0,0,.18); }
.barn-group summary .count{ margin-left:auto; font-size:12px; font-weight:600; color:var(--hh-muted,#6b7a90); }
.stall-grid{ display:grid; gap:7px; grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); padding:0 12px 12px; }
.area-grid{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
.stall-cell{ border:1px solid var(--hh-line,#dae3f3); border-radius:9px; padding:5px; min-height:56px;
  background:#fbfcfe; display:flex; flex-direction:column; gap:3px; }
.stall-cell .sid{ font-size:10.5px; font-weight:700; color:#8492a8; letter-spacing:.3px; }
.stall-cell.is-empty .sid::after{ content:" · open"; color:#c0cad9; }
.stall-cell .hhk-chip{ width:100%; justify-content:flex-start; margin:0; }

/* Work board grid */
.wb-scroll{ overflow-x:scroll; border:1px solid var(--hh-line,#dae3f3); border-radius:12px; background:#fff;
  scrollbar-color:#9db6e6 #eef2f9; }
.wb-scroll::-webkit-scrollbar{ height:12px; }
.wb-scroll::-webkit-scrollbar-track{ background:#eef2f9; border-radius:0 0 12px 12px; }
.wb-scroll::-webkit-scrollbar-thumb{ background:#9db6e6; border-radius:6px; border:2px solid #eef2f9; }
.wb-scroll::-webkit-scrollbar-thumb:hover{ background:#7a9bd6; }
table.wb{ border-collapse:separate; border-spacing:0; min-width:640px; width:100%; }
table.wb th, table.wb td{ border-bottom:1px solid #e7eefb; border-right:1px solid #e7eefb; vertical-align:top; }
table.wb thead th{ position:sticky; top:0; background:var(--hh-dark); color:#fff; font-size:12px;
  font-weight:700; padding:8px 6px; text-align:center; z-index:2; }
table.wb thead th.time-col{ left:0; z-index:3; }
table.wb td.time-col, table.wb th.time-col{ position:sticky; left:0; background:var(--hh-dark); color:#fff;
  font-weight:700; text-align:center; min-width:56px; font-size:13px; }
table.wb td{ padding:3px; min-width:120px; }
.wb-cell{ min-height:52px; border-radius:8px; padding:3px; }
.wb-cell.empty{ background:#f7faff; }
.wb-card{ border-radius:8px; padding:5px 6px; border:1px solid rgba(0,0,0,.12); cursor:grab; }
.wb-card .nm{ display:flex; align-items:center; gap:5px; font-weight:800; font-size:13px; }
.wb-card .wb-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; min-width:0; }
.wb-card .wb-edit{ border:0; background:rgba(255,255,255,.35); color:inherit; width:19px; height:19px;
  border-radius:5px; font-size:11px; line-height:1; cursor:pointer; flex:0 0 auto; display:inline-flex;
  align-items:center; justify-content:center; }
.wb-card .hhk-x{ border:0; background:rgba(0,0,0,.14); color:inherit; width:19px; height:19px;
  border-radius:50%; font-size:13px; line-height:1; cursor:pointer; flex:0 0 auto; }
.wb-card .wb-meta{ font-size:11px; font-weight:700; opacity:.9; margin-top:2px; line-height:1.15; }
.wb-card .wb-actt{ font-weight:800; }
.wb-card .wb-note-line{ margin-top:3px; font-size:11px; font-style:italic; font-weight:600; line-height:1.15;
  white-space:normal; overflow-wrap:break-word; opacity:.95; }
.wb-hidden{ display:none !important; }
.wb-tray{ display:flex; flex-wrap:wrap; gap:2px; background:#fff; border:1px dashed var(--hh-line,#dae3f3);
  border-radius:12px; padding:8px; }

/* Large-roster tray usability */
.wb-tray{ max-height:240px; overflow-y:auto; }
.tray-tools{ display:flex; gap:8px; align-items:center; margin:0 0 6px; flex-wrap:wrap; }
.tray-tools input.tray-search{ max-width:260px; }
.tray-tools .tray-count{ font-size:12px; color:var(--hh-muted,#6b7a90); font-weight:600; }
.hhk-hidden{ display:none !important; }

/* Therapy whiteboard (tools view) */
.th-btn{ border:1px solid #94a3b8; background:#6b7280; color:#fff; font-weight:800; font-size:11px;
  padding:3px 6px; border-radius:4px; cursor:pointer; min-width:44px; }
.th-btn:disabled{ cursor:default; opacity:.75; }
.th-btn.on{ background:#e34ce0; border-color:#a32ea0; }
.th-stall{ display:inline-block; min-width:30px; text-align:center; font-weight:800; font-size:13px;
  padding:2px 5px; border-radius:4px; }
.th-time{ display:inline-block; background:#8a5a2b; color:#fff; font-weight:700; font-size:11px;
  padding:1px 5px; border-radius:4px; margin-left:5px; }

/* ---- Media thumbnails ------------------------------------------------
   Horse photos are usually PORTRAIT. Cropping them to a 16:9 box cuts off
   the head and the legs — exactly the parts you want. So we letterbox:
   the whole photo is shown, centred, on a neutral field.                 */
.media-thumb{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3; background:#eceff4; overflow:hidden; border-radius:6px 6px 0 0;
}
.media-thumb img, .media-thumb video{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
}
.media-thumb iframe{ width:100%; height:100%; border:0; }
.media-thumb .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:#fff; font-size:2.4rem; text-shadow:0 2px 10px rgba(0,0,0,.55); pointer-events:none;
}
.media-thumb a{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
.media-thumb .empty{ color:#9aa4b2; font-size:2rem; }

/* a taller frame where the photo is the point (the owner's gallery) */
.media-thumb.tall{ aspect-ratio:1/1; }