@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=Patrick+Hand&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   RefHome v1.0.2  ·  Main Stylesheet
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --blue-900: #1a3a52;
  --blue-700: #2c6e9a;
  --blue-500: #4a90b8;
  --blue-300: #7ab8d4;
  --blue-100: #e8f4fb;

  --pink-600:  #c0186a;
  --pink-500:  #e0218a;
  --pink-300:  #f48dbf;
  --pink-100:  #fde8f3;

  --gray-950: #0f1923;
  --gray-900: #1e2a35;
  --gray-700: #2d3a4a;
  --gray-600: #3a4a5a;
  --gray-500: #4a5568;
  --gray-400: #718096;
  --gray-300: #a0aec0;
  --gray-200: #e2e8f0;
  --gray-100: #f0f4f8;
  --gray-50:  #f8fafc;

  --white: #ffffff;

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05);
  --shadow-xl:  0 16px 40px rgba(0,0,0,.12);
  --shadow-box: 0 2px 8px rgba(74,144,184,.12);

  --transition: 0.18s ease;
  --transition-slow: 0.3s ease;

  --header-h: 80px;
  --nav-h: 44px;
  --gap: 14px;
  --sidebar-w: 350px;
  --right-w: 350px;

  /* Category nav gradient — changed by JS on category switch */
  --nav-start: #2c6e9a;
  --nav-end:   #4a90b8;
}

/* ─── Reset & base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-700);
  background: var(--gray-100);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-500); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--blue-700); }
img { max-width: 100%; display: block; }

/* ─── Site header ────────────────────────────────────────────────────────────── */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: relative;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding: 0 16px;
  gap: 12px;
}

.header-boxes-left,
.header-boxes-right {
  display: flex;
  gap: 8px;
  align-items: stretch;
  min-height: 54px;
}

.header-boxes-right { justify-content: flex-end; }

.header-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 6px 0;
}

.header-logo img {
  height: 60px;
  width: auto;
  object-fit: contain;
  transition: opacity 0.25s ease;
}

/* Header drop zones — always show as visible placeholders */
.header-drop-zone {
  min-width: 140px;
  max-width: 220px;
  flex: 1;
  display: flex;
  align-items: stretch;
}

.header-drop-zone .info-box {
  width: 100%;
  min-height: unset;
}

.header-empty-slot {
  min-height: 54px !important;
  width: 100%;
  border: 2px dashed var(--gray-200) !important;
  background: var(--gray-50) !important;
  border-radius: var(--radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: default;
  transition: all var(--transition);
}

.header-empty-slot:hover {
  border-color: var(--blue-300) !important;
  background: var(--blue-100) !important;
}

.header-empty-slot .empty-slot-inner {
  flex-direction: row;
  gap: 5px;
  font-size: 10.5px;
  color: var(--gray-300);
}

/* During drag: header drop zones light up */
body.drag-mode .header-empty-slot {
  border-color: rgba(224, 33, 138, 0.3) !important;
  background: rgba(224, 33, 138, 0.03) !important;
}

body.drag-mode .header-drop-zone.drag-over .header-empty-slot,
body.drag-mode .header-drop-zone.drag-over {
  border-color: var(--pink-500) !important;
  background: var(--pink-100) !important;
}

/* ─── Navigation bar ─────────────────────────────────────────────────────────── */
.site-nav {
  background: linear-gradient(135deg, var(--nav-start) 0%, var(--nav-end) 100%);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 4px;
  transition: background 0.45s ease;
}

.nav-link {
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  letter-spacing: .2px;
}

.nav-link:hover,
.nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.16);
}

.nav-divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.22);
  margin: 0 6px;
}

.nav-spacer { flex: 1; }

.nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.85);
  font-size: 13px;
}

.nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ─── Dashboard layout ───────────────────────────────────────────────────────── */
.dashboard {
  padding: var(--gap);
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--right-w);
  grid-template-rows: auto;
  gap: var(--gap);
  max-width: 1800px;
  margin: 0 auto;
}

/* Columns */
.col-left,
.col-center,
.col-right {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

/* Center sub-layouts */
.center-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.center-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.center-grid-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap);
}

/* ─── Info box shell ──────────────────────────────────────────────────────────── */
.info-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-box);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  min-height: 80px;
  position: relative;
  user-select: none;
}

.info-box:hover {
  box-shadow: var(--shadow-md);
}

/* Box header bar — the whole header is now the drag handle area */
.box-header {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 34px;
  background: linear-gradient(180deg, #fafbfc 0%, #f3f6f9 100%);
  border-bottom: 1px solid var(--gray-200);
  user-select: none;
  cursor: grab;
  touch-action: none;
}

.box-header:active { cursor: grabbing; }

.box-title {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-700);
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}

/* Plus button (edit) — prevent it from triggering drag */
.box-btn-edit {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--blue-300);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-500);
  transition: all var(--transition);
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  position: relative;
  z-index: 2;
}

.box-btn-edit:hover {
  background: var(--blue-100);
  border-color: var(--blue-500);
  color: var(--blue-700);
}

/* Drag handle (burger dots) */
.box-drag-handle {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-300);
  background: transparent;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  transition: all var(--transition);
  flex-shrink: 0;
  touch-action: none;
}

.box-drag-handle:hover {
  background: var(--gray-100);
  border-color: var(--gray-500);
  color: var(--gray-600);
}

.box-drag-handle:active { cursor: grabbing; }

/* Drag handle dots icon */
.drag-dots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5px;
  padding: 1px;
  pointer-events: none;
}
.drag-dots span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  display: block;
}

/* Box body */
.box-body {
  padding: 10px 14px 12px;
}

/* ─── Two-column links box ────────────────────────────────────────────────────── */
.box-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 16px;
}

.box-links-grid a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue-500);
  display: block;
  padding: 2.5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transition);
  cursor: pointer;
  user-select: none;
}

.box-links-grid a:hover {
  color: var(--blue-700);
  text-decoration: underline;
}

/* ─── Drop zone (drag target) ─────────────────────────────────────────────────── */
/* NOTE: use .drop-zone in HTML and CSS consistently */
.drop-zone {
  border-radius: var(--radius-lg);
  border: 2px dashed transparent;
  min-height: 80px;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
}

/* Highlight all drop zones during drag */
body.drag-mode .drop-zone {
  border-color: rgba(224, 33, 138, 0.18);
}

body.drag-mode .drop-zone.drag-over {
  border-color: var(--pink-500) !important;
  background: var(--pink-100) !important;
  box-shadow: 0 0 0 4px rgba(224, 33, 138, 0.12);
}

/* Empty drop zone label — shown during drag mode */
body.drag-mode .drop-zone > .empty-slot {
  border-color: rgba(224, 33, 138, 0.3);
  background: rgba(224, 33, 138, 0.04);
}

body.drag-mode .drop-zone.drag-over > .empty-slot {
  border-color: var(--pink-500);
  background: var(--pink-100);
}

/* ─── SortableJS drag states ─────────────────────────────────────────────────── */
.sortable-ghost {
  opacity: .3;
  background: var(--blue-100) !important;
  border: 2px dashed var(--blue-300) !important;
  border-radius: var(--radius-lg) !important;
}

.sortable-chosen {
  box-shadow: var(--shadow-xl) !important;
  transform: rotate(0.8deg) scale(1.02) !important;
  z-index: 1000;
  opacity: 0.92;
}

.sortable-drag {
  opacity: 1 !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.22) !important;
  cursor: grabbing !important;
  transform: rotate(1.5deg) !important;
}

/* ─── Box library panel (side drawer) ────────────────────────────────────────── */
.box-library {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 300px;
  background: var(--white);
  box-shadow: -4px 0 24px rgba(0,0,0,.14);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}

.box-library.open {
  transform: translateX(0);
}

.box-library-header {
  padding: 20px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 12px;
}

.box-library-header h2 {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  transition: all var(--transition);
}

.btn-icon:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.box-library-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Library items */
.library-item {
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: grab;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 10px;
  touch-action: none;
  user-select: none;
}

.library-item:hover {
  border-color: var(--blue-300);
  background: var(--blue-100);
  box-shadow: var(--shadow-sm);
}

.library-item:active { cursor: grabbing; }

.library-item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--blue-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-500);
  flex-shrink: 0;
  font-size: 16px;
}

.library-item-info { min-width: 0; }
.library-item-name { font-size: 13px; font-weight: 600; color: var(--gray-700); }
.library-item-desc { font-size: 11.5px; color: var(--gray-400); margin-top: 1px; }

/* ─── Edit modal ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 25, 35, .6);
  backdrop-filter: blur(4px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  width: 640px;
  max-width: 96vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  transform: translateY(16px) scale(.98);
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}

.modal-overlay.open .modal {
  transform: translateY(0) scale(1);
}

.modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-title {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  color: var(--gray-900);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ─── Form elements ───────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-label { font-size: 12.5px; font-weight: 600; color: var(--gray-600); }
.form-input {
  height: 38px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  font-size: 13.5px;
  color: var(--gray-700);
  transition: border-color var(--transition);
  font-family: inherit;
  background: var(--white);
  width: 100%;
}
.form-input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(74,144,184,.14); }

/* Link rows in editor */
.link-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-100);
}

.link-row:last-child { border-bottom: none; }

.btn-remove-link {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all var(--transition);
}

.btn-remove-link:hover { color: #e53e3e; background: #fff5f5; }

/* ─── Buttons ─────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  white-space: nowrap;
  letter-spacing: .2px;
}

.btn-primary {
  background: var(--blue-500);
  color: #fff;
  border-color: var(--blue-500);
}
.btn-primary:hover { background: var(--blue-700); border-color: var(--blue-700); }

.btn-secondary {
  background: var(--white);
  color: var(--gray-700);
  border-color: var(--gray-300);
}
.btn-secondary:hover { background: var(--gray-100); }

.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }

/* ─── FAB (floating action) ──────────────────────────────────────────────────── */
.fab-library {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue-500);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(74,144,184,.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  z-index: 150;
  transition: all var(--transition);
}

.fab-library:hover {
  background: var(--blue-700);
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(74,144,184,.55);
}

/* ─── Login page ──────────────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 60%, var(--blue-500) 100%);
  padding: 24px;
}

.login-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  width: 420px;
  max-width: 100%;
  padding: 40px;
  box-shadow: var(--shadow-xl);
}

.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo img { height: 72px; margin: 0 auto; }

.login-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 6px;
  text-align: center;
}

.login-sub {
  font-size: 13px;
  color: var(--gray-400);
  text-align: center;
  margin-bottom: 28px;
}

.alert {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 16px;
}
.alert-error {
  background: #fff5f5;
  border: 1.5px solid #feb2b2;
  color: #c53030;
}
.alert-success {
  background: #f0fff4;
  border: 1.5px solid #9ae6b4;
  color: #276749;
}

.login-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--gray-400);
}

/* ─── Empty slot placeholder ──────────────────────────────────────────────────── */
.empty-slot {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  border: 2px dashed var(--gray-200);
  background: transparent;
  transition: all var(--transition);
  cursor: default;
  width: 100%;
}

.empty-slot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--gray-300);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: uppercase;
  pointer-events: none;
}

.empty-slot-inner svg { opacity: .5; }

/* ─── Toolbar strip ───────────────────────────────────────────────────────────── */
.dashboard-toolbar {
  padding: 8px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.dashboard-toolbar .toolbar-label {
  font-weight: 600;
  color: var(--gray-400);
  margin-right: 4px;
}

#save-indicator {
  font-size: 11.5px;
  font-weight: 600;
  color: #48bb78;
  opacity: 0;
  transition: opacity .3s;
  margin-left: 8px;
}

#save-indicator.visible { opacity: 1 !important; }

/* ─── Scrollbar styling ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ─── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root { --sidebar-w: 280px; --right-w: 280px; }
  .dashboard {
    grid-template-columns: var(--sidebar-w) 1fr;
  }
  .col-right {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 220px; }
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  /* Center first, left second, right third on tablet/mobile */
  .col-center { grid-row: 1; grid-column: 1; }
  .col-left   { grid-row: 2; grid-column: 1; }
  .col-right  { grid-row: 3; grid-column: 1; display: flex; flex-direction: column; }
  /* Keep logo centered by giving it a symmetric 3-col header even when sides hide */
  .header-inner {
    grid-template-columns: 1fr auto 1fr;
  }
  .header-boxes-right {
    display: flex;          /* keep for symmetry */
    visibility: hidden;     /* but make invisible */
    pointer-events: none;
  }
  /* 3-col center row collapses to 1 on small screens */
  .center-grid-3col { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root { --gap: 10px; }
  .header-boxes-left { display: none; }
  .header-inner { grid-template-columns: 1fr; justify-items: center; }
  .center-grid-2x2, .center-grid-2col, .center-grid-3col { grid-template-columns: 1fr; }
  .dashboard { padding: 10px; }
  .login-card { padding: 28px 20px; }
}

/* ─── Utility ─────────────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.text-center { text-align: center; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.3 additions
   ══════════════════════════════════════════════════════════════════ */

/* ─── Faster drag — slim animation ──────────────────────────────────────── */
/* Override slower values from v1.0.2 */
.sortable-chosen {
  box-shadow: 0 8px 28px rgba(0,0,0,.18) !important;
  transform: scale(1.015) !important;   /* no rotation — cleaner */
  z-index: 1000;
  opacity: 0.95;
  transition: box-shadow 0.08s, transform 0.08s !important;
}
.sortable-drag {
  box-shadow: 0 12px 32px rgba(0,0,0,.20) !important;
  transform: scale(1.015) !important;
  cursor: grabbing !important;
  opacity: 1 !important;
}
.sortable-ghost {
  opacity: .22 !important;
  background: var(--blue-100) !important;
  border: 2px dashed var(--blue-300) !important;
  border-radius: var(--radius-lg) !important;
  transform: none !important;
}

/* ─── Box fills container — content scales, never grows frame ────────────── */
.info-box {
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}
.box-links-grid a {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Delete button ──────────────────────────────────────────────────────── */
.box-btn-delete {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
  font-size: 13px;
  line-height: 1;
  transition: all var(--transition);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.box-btn-delete:hover {
  color: #e53e3e;
  border-color: #feb2b2;
  background: #fff5f5;
}

/* ─── Zone forbidden state during drag ──────────────────────────────────── */
.drop-zone.zone-forbidden {
  opacity: 0.35;
}
.drop-zone.zone-forbidden .empty-slot {
  border-color: rgba(180,0,0,.15) !important;
  background: rgba(180,0,0,.03) !important;
}

/* ─── Header — taller, more breathing room ───────────────────────────────── */
:root { --header-h: 96px; }

.header-drop-zone {
  min-height: 70px;
  min-width: 160px;
  max-width: 260px;
}
.header-empty-slot {
  min-height: 70px !important;
}

/* ─── Library: search bar ────────────────────────────────────────────────── */
.library-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 199;
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.library-overlay.open { opacity: 1; pointer-events: auto; }

.library-search-wrap {
  position: relative;
  padding: 10px 14px 6px;
  border-bottom: 1px solid var(--gray-200);
}
.library-search-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-30%);
  color: var(--gray-400);
  pointer-events: none;
}
.library-search-input {
  width: 100%;
  height: 34px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 0 10px 0 30px;
  font-size: 13px;
  font-family: inherit;
  color: var(--gray-700);
  background: var(--gray-50);
  transition: border-color var(--transition);
}
.library-search-input:focus {
  outline: none;
  border-color: var(--blue-300);
  background: var(--white);
}

/* ─── Library: category tabs ─────────────────────────────────────────────── */
.library-cats {
  display: flex;
  gap: 4px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--gray-200);
  flex-wrap: wrap;
}
.lib-cat {
  padding: 4px 10px;
  border-radius: 99px;
  border: 1.5px solid var(--gray-200);
  background: transparent;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  white-space: nowrap;
}
.lib-cat:hover { border-color: var(--blue-300); color: var(--blue-500); }
.lib-cat.active {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: #fff;
}

/* ─── Library disabled items ─────────────────────────────────────────────── */
.library-item-disabled {
  opacity: .38;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* No-results message in library */
.library-no-results {
  text-align: center;
  padding: 24px 16px;
  color: var(--gray-300);
  font-size: 12.5px;
}

/* ─── Edit modal: new sections ────────────────────────────────────────────── */
.modal-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-100);
}
.modal-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 10px;
}
.column-editor-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}

/* Style pickers */
.style-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.style-field { display: flex; flex-direction: column; gap: 5px; }
.color-row { display: flex; align-items: center; gap: 6px; }
.color-row input[type=color] {
  width: 40px; height: 34px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 2px;
  cursor: pointer;
  background: none;
}
.btn-clear-color {
  font-size: 15px; color: var(--gray-400);
  background: none; border: none; cursor: pointer;
  padding: 2px 4px; border-radius: 4px;
  transition: color var(--transition);
}
.btn-clear-color:hover { color: var(--gray-700); }

/* Zone checkboxes */
.zone-checks {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.zone-check {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--gray-600);
  cursor: pointer;
}
.zone-check input { cursor: pointer; }

/* ─── Calendar box ────────────────────────────────────────────────────────── */
.rh-cal-body { padding: 0 !important; }

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px 4px;
  border-bottom: 1px solid var(--gray-200);
}
.cal-nav-btn {
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 20px;
  font-weight: 300;
  color: var(--blue-500);
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
  line-height: 1;
  padding: 0;
  font-family: inherit;
}
.cal-nav-btn:hover { background: var(--blue-100); border-color: var(--blue-300); }

.cal-month-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-700);
  letter-spacing: .3px;
  user-select: none;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 4px 4px 6px;
  gap: 1px 0;
}
.cal-dow {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--gray-400);
  padding: 3px 0 5px;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.cal-dow.cal-weekend { color: var(--gray-300); }
.cal-day {
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--gray-600);
  padding: 3px 1px;
  border-radius: 50%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: background 0.1s;
  min-width: 0;
}
.cal-day.cal-weekend { color: var(--gray-400); }
.cal-day.cal-today {
  background: var(--blue-500);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
}
.cal-day:not(.cal-empty):not(.cal-today):hover {
  background: var(--gray-100);
}
.cal-empty { background: none; }

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.4 — targeted fixes
   ══════════════════════════════════════════════════════════════════ */

/* Ghost = fully invisible so the box LOOKS like it moves with the cursor */
.sortable-ghost {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Chosen/drag state — subtle lift, no rotation */
.sortable-chosen {
  box-shadow: 0 6px 20px rgba(0,0,0,.15) !important;
  opacity: .92 !important;
  transform: none !important;
}
.sortable-drag {
  box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
  opacity: 1 !important;
  transform: none !important;
  cursor: grabbing !important;
}

/* ─── Taller header ─────────────────────────────────────────────────── */
:root {
  --header-h: 100px;
}
.header-drop-zone {
  min-width: 180px;
  max-width: 280px;
  min-height: 80px;
}
.header-empty-slot {
  min-height: 80px !important;
}
.header-logo img {
  height: 70px !important;
  width: auto !important;
}

/* ─── Calendar — fills its container, never overflows ───────────────── */
.rh-calendar-box { overflow: hidden; }
.rh-cal-body     { padding: 0 !important; overflow: hidden; }

.rh-calendar {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Calendar in a header slot: compact */
.header-drop-zone .rh-cal-body { padding: 0 !important; }
.header-drop-zone .cal-nav     { padding: 3px 6px; }
.header-drop-zone .cal-grid    { padding: 2px; gap: 0; }
.header-drop-zone .cal-dow     { font-size: 8px; padding: 2px 0; }
.header-drop-zone .cal-day     { font-size: 9px; padding: 2px 0; }
.header-drop-zone .cal-month-label { font-size: 10px; }

/* Responsive font sizes for calendar in narrow columns */
.col-right .cal-nav     { padding: 4px 6px; }
.col-right .cal-grid    { gap: 0; padding: 3px 2px 4px; }
.col-right .cal-dow     { font-size: 8.5px; }
.col-right .cal-day     { font-size: 10px; }

/* ─── Nav bar transition ────────────────────────────────────────────── */
.site-nav {
  transition: background 0.35s ease !important;
}

/* ─── Category color placeholder — set via JS only ─────────────────── */
/* (removing the CSS var approach for gradients — direct style is set in JS) */

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.9 — header overflow clip + nav scroll
   ══════════════════════════════════════════════════════════════════ */

/* Clip everything inside the header — no box can overflow it */
.site-header  { overflow: hidden !important; }
.header-inner { overflow: hidden !important; }

.header-boxes-left,
.header-boxes-right { overflow: hidden; }

.header-drop-zone {
  overflow: hidden !important;
  max-height: calc(var(--header-h) - 8px);
}

.header-drop-zone .info-box {
  max-height: calc(var(--header-h) - 8px);
  overflow: hidden !important;
}

/* Calendar in header: compact — hide the day grid, show only month nav */
.header-drop-zone .rh-cal-body {
  overflow: hidden !important;
  max-height: 52px;
}

/* Nav bar: allow horizontal scroll when many categories */
.site-nav {
  overflow-x: auto !important;
  scrollbar-width: none;     /* Firefox */
  flex-wrap: nowrap !important;
  padding-right: 8px;
}
.site-nav::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.10 — taller header, bigger logo, compact cal in header
   ══════════════════════════════════════════════════════════════════ */

/* Override all previous --header-h values in one place */
:root { --header-h: 130px; }

.site-header {
  height: var(--header-h);
  overflow: hidden !important;
}
.header-inner {
  height: var(--header-h) !important;
  overflow: hidden !important;
}

/* Bigger logo */
.header-logo img {
  height: 90px !important;
  max-height: 90px !important;
  width: auto !important;
}

/* Header drop zones — fill the header height */
.header-boxes-left,
.header-boxes-right {
  min-height: calc(var(--header-h) - 16px);
  align-items: stretch;
}

.header-drop-zone {
  max-height: calc(var(--header-h) - 16px) !important;
  overflow: hidden !important;
}
.header-drop-zone .info-box {
  max-height: calc(var(--header-h) - 16px) !important;
  overflow: hidden !important;
}

/* Calendar in header: show ONLY the navigation bar (< Month Year >).
   The day-of-week row and day grid are hidden — they need more vertical
   space than a header slot allows. The inline style on the grid div
   contains 'display:grid' which lets us target it precisely. */
.header-drop-zone .rh-calendar > div[style*="display:grid"] {
  display: none !important;   /* hides day-name row + day number grid */
}

/* Allow the nav bar itself to be taller and more comfortable */
.header-drop-zone .rh-calendar > div[style*="display:flex"] {
  padding: 8px 10px !important;
  border-bottom: none !important;
}
.header-drop-zone .rh-calendar > div[style*="display:flex"] span {
  font-size: 13px !important;
}
.header-drop-zone .rh-calendar > div[style*="display:flex"] button {
  font-size: 20px !important;
  width: 30px !important;
  height: 30px !important;
}

/* Empty header slots — taller placeholder */
.header-empty-slot {
  min-height: calc(var(--header-h) - 16px) !important;
}

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.11 — hidden header option, no-border, compact calendar
   ══════════════════════════════════════════════════════════════════ */

/* ─── Hidden header option ──────────────────────────────────────── */
/* Normally a thin 4px draggable stripe; expands on hover to show controls */
.box-header.box-header-hidden {
  height: 4px;
  min-height: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  opacity: 0.3;
  transition: height 0.18s ease, padding 0.18s ease, opacity 0.18s ease;
  cursor: grab;
}
.info-box:hover .box-header.box-header-hidden {
  height: 34px;
  padding: 0 10px !important;
  opacity: 1;
}

/* ─── No border option ───────────────────────────────────────────── */
.info-box.no-border {
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--radius-lg) !important;
}

/* ─── Calendar in header: SHOW days but very compressed ────────────
   Override the v1.0.10 rule that was hiding the grid.             */
.header-drop-zone .rh-calendar > div[style*="display:grid"] {
  display: grid !important;   /* restore — was display:none in 1.0.10 */
  padding: 1px 2px !important;
  gap: 0 !important;
}

/* Compress every cell in the header context */
.header-drop-zone .rh-calendar > div[style*="display:grid"] > div {
  font-size: 7px !important;
  padding: 1px 0 !important;
  aspect-ratio: unset !important;
  min-height: 10px !important;
  line-height: 1.15 !important;
  border-radius: 3px !important;
}

/* Compress the nav bar in header */
.header-drop-zone .rh-calendar > div[style*="display:flex"] {
  padding: 4px 8px !important;
}
.header-drop-zone .rh-calendar > div[style*="display:flex"] span {
  font-size: 11px !important;
}
.header-drop-zone .rh-calendar > div[style*="display:flex"] button {
  font-size: 14px !important;
  width: 22px !important;
  height: 22px !important;
}

/* Remove the max-height cap that was clipping the calendar body */
.header-drop-zone .rh-cal-body {
  max-height: none !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.12 — floating-button hidden header, taller header
   ══════════════════════════════════════════════════════════════════ */

/* Override header height — taller to fit compact calendar */
:root { --header-h: 150px; }
.site-header  { height: var(--header-h); }
.header-inner { height: var(--header-h) !important; }
.header-logo img { height: 100px !important; max-height: 100px !important; }
.header-drop-zone { max-height: calc(var(--header-h) - 16px) !important; }
.header-drop-zone .info-box { max-height: calc(var(--header-h) - 16px) !important; }
.header-empty-slot { min-height: calc(var(--header-h) - 16px) !important; }

/* ─── Hidden header: floating buttons only, NO bar reveal on hover ──────── */
/* Remove the old v1.0.11 hover-reveal rule by overriding it */
.box-header.box-header-hidden {
  height: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;  /* buttons can float ABOVE content */
  padding: 0 !important;
  opacity: 1 !important;
  position: relative;
  z-index: 10;
  cursor: grab;
  transition: none !important;
  background: transparent !important;
}

/* Hide the title text completely */
.box-header.box-header-hidden .box-title {
  display: none !important;
}

/* Buttons are normally invisible, appear as floating pills on hover */
.box-header.box-header-hidden .box-btn-edit,
.box-header.box-header-hidden .box-btn-delete {
  position: absolute;
  top: 2px;
  opacity: 0;
  pointer-events: none;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid var(--gray-200);
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
  border-radius: 6px;
  transition: opacity 0.15s;
  z-index: 20;
  width: 24px;
  height: 24px;
}
.box-header.box-header-hidden .box-btn-edit   { left:  4px; }
.box-header.box-header-hidden .box-btn-delete { right: 4px; }

.info-box:hover .box-header.box-header-hidden .box-btn-edit,
.info-box:hover .box-header.box-header-hidden .box-btn-delete {
  opacity: 1;
  pointer-events: auto;
}

/* Override the v1.0.11 bar-expand rule explicitly */
.info-box:hover .box-header.box-header-hidden {
  height: 0 !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.12 — truly hidden header, floating mini controls,
                     taller header, compressed calendar
   ══════════════════════════════════════════════════════════════════ */

/* ─── Taller header — override all previous values ───────────────── */
:root { --header-h: 160px; }
.site-header  { height: var(--header-h) !important; overflow: hidden !important; }
.header-inner { height: var(--header-h) !important; overflow: hidden !important; }

.header-boxes-left,
.header-boxes-right {
  min-height: calc(var(--header-h) - 16px) !important;
}

.header-drop-zone {
  max-height: calc(var(--header-h) - 16px) !important;
  overflow: hidden !important;
}
.header-drop-zone .info-box {
  max-height: calc(var(--header-h) - 16px) !important;
  overflow: hidden !important;
}
.header-empty-slot {
  min-height: calc(var(--header-h) - 16px) !important;
}

/* Bigger logo to match taller header */
.header-logo img {
  height: 110px !important;
  max-height: 110px !important;
}

/* ─── Hidden header bar — truly zero height, never expands ───────── */
/* Override the v1.0.11 rule completely */
.box-header.box-header-hidden {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
}
/* Cancel the v1.0.11 hover-expand rule */
.info-box:hover .box-header.box-header-hidden {
  height: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ─── Floating mini controls — only on hover, replaces header ─────── */
.box-mini-controls {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 20;
  pointer-events: none;
}
.info-box.no-header-bar { position: relative; }
.info-box.no-header-bar:hover .box-mini-controls {
  opacity: 1;
  pointer-events: auto;
}
.box-mini-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  transition: background 0.12s;
  font-family: inherit;
}
.box-mini-btn-edit   { background: rgba(74,144,184,0.85); color: #fff; }
.box-mini-btn-delete { background: rgba(200,50,50,0.8);   color: #fff; }
.box-mini-btn:hover  { filter: brightness(1.15); transform: scale(1.1); }

/* ─── Calendar in header: ultra-compact, show all days ───────────── */
/* Remove the max-height from v1.0.9 that was clipping content */
.header-drop-zone .rh-cal-body  { max-height: none !important; overflow: hidden !important; }

/* Restore grid but very tight */
.header-drop-zone .rh-calendar > div[style*="display:grid"] {
  display: grid !important;
  padding: 0 2px 2px !important;
  gap: 0 !important;
}
/* Every cell in the grid (day names + day numbers) */
.header-drop-zone .rh-calendar > div[style*="display:grid"] > div {
  font-size: 8px !important;
  padding: 1.5px 0 !important;
  aspect-ratio: unset !important;
  min-height: 0 !important;
  border-radius: 3px !important;
  line-height: 1.2 !important;
}
/* Nav bar (< Month Year >) */
.header-drop-zone .rh-calendar > div[style*="display:flex"] {
  padding: 5px 8px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.header-drop-zone .rh-calendar > div[style*="display:flex"] span {
  font-size: 12px !important;
}
.header-drop-zone .rh-calendar > div[style*="display:flex"] button {
  font-size: 16px !important;
  width: 24px !important;
  height: 24px !important;
}

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.13 — calendar white space, mini controls left,
                     new box types, library categories
   ══════════════════════════════════════════════════════════════════ */

/* ─── Remove white space under calendar ─────────────────────────── */
/* box-body has 22px of vertical padding by default; strip it for calendar */
.rh-calendar-box .box-body {
  padding: 0 !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.rh-calendar-box {
  display: flex;
  flex-direction: column;
}
.rh-calendar-box .rh-calendar {
  flex: 1;
  overflow: hidden;
}

/* ─── Mini controls: left side variant for calendar (avoids > button) ── */
.box-mini-controls-left {
  left: 5px !important;
  right: auto !important;
}
/* When calendar header hidden, shift nav bar right to clear mini controls */
.rh-calendar-box.no-header-bar .rh-calendar > div[style*="display:flex"] {
  padding-left: 34px !important;
}

/* ─── Library: Reference category tab ───────────────────────────── */
/* (already in markup as data-cat="reference") */

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.14 — taller header, calendar fills height, column fix
   ══════════════════════════════════════════════════════════════════ */

/* ─── Header: taller so calendar can be more square ─────────────── */
:root { --header-h: 290px; }
.site-header  { height: var(--header-h) !important; overflow: hidden !important; }
.header-inner { height: var(--header-h) !important; overflow: hidden !important; }
.header-logo img { height: 120px !important; max-height: 120px !important; }
.header-drop-zone {
  max-height: calc(var(--header-h) - 16px) !important;
  overflow: hidden !important;
}
.header-drop-zone .info-box,
.header-drop-zone .rh-calendar-box {
  max-height: calc(var(--header-h) - 16px) !important;
  overflow: hidden !important;
  height: calc(var(--header-h) - 16px) !important;
}
.header-empty-slot { min-height: calc(var(--header-h) - 16px) !important; }

/* ─── Calendar: fills full box height — no white space ──────────── */
/* Force the entire flex chain to fill 100% */
.rh-calendar-box { display: flex !important; flex-direction: column !important; }
.rh-calendar-box .box-body {
  padding: 0 !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
.rh-calendar-box .rh-calendar {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
/* Day-number grid fills remaining space after nav + DOW header */
.rh-calendar-box .rh-calendar > div[style*="flex:1"] {
  flex: 1 !important;
}

/* ─── Header calendar: remove size constraints from prev versions ── */
.header-drop-zone .rh-cal-body { max-height: none !important; }
.header-drop-zone .rh-calendar > div[style*="display:grid"] {
  display: grid !important;
  padding: 2px 4px 4px !important;
}
.header-drop-zone .rh-calendar > div[style*="display:grid"] > div {
  aspect-ratio: unset !important;
}
/* Padding for nav bar — arrows already flush via inline style */
.header-drop-zone .rh-calendar > div[style*="display:flex"],
.header-drop-zone .rh-calendar > div[style*="border-bottom"] {
  height: 32px !important;
}

/* ─── Column boxes: always horizontal, never wrap/stack ─────────── */
/* The flex container from LinkBoxBase.render() */
.info-box .box-body > div[style*="display:flex"] {
  flex-wrap: nowrap !important;   /* keep all columns in one row */
  overflow-x: auto;               /* scroll rather than collapse */
}
.info-box .box-body > div[style*="display:flex"] > div {
  min-width: 0;                   /* prevent overflow from long text */
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.15 — non-sticky header, smaller calendar header
   ══════════════════════════════════════════════════════════════════ */

/* Header NOT sticky — scrolls with page */
.site-header { position: relative !important; top: auto !important; }

/* Shrink header 35%: 290px × 0.65 ≈ 190px */
:root { --header-h: 190px; }
.header-logo img { height: 80px !important; max-height: 80px !important; }

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.16 — bigger logo, calendar side nav
   ══════════════════════════════════════════════════════════════════ */

/* Bigger logo */
.header-logo img { height: 100px !important; max-height: 100px !important; }

/* Calendar side-arrow layout: the grid area has padding for arrows */
.rh-calendar-box .rh-cal-body { overflow: hidden !important; }

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.22 — drop zones invisible at rest, fade in on drag
   ══════════════════════════════════════════════════════════════════ */

/* Empty slots: invisible border + transparent label when NOT dragging */
.drop-zone > .empty-slot {
  border-color: transparent !important;
  background: transparent !important;
  opacity: 0;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

/* Main content empty slots: show a very faint hint so users know there's space */
/* (completely invisible feels broken — this is subtle, not distracting) */
.drop-zone > .empty-slot .empty-slot-inner {
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* During drag: fade all empty slots IN so user can see drop targets */
body.drag-mode .drop-zone > .empty-slot {
  opacity: 1 !important;
  border-color: rgba(74, 144, 184, 0.25) !important;
  background: rgba(74, 144, 184, 0.03) !important;
}
body.drag-mode .drop-zone > .empty-slot .empty-slot-inner {
  opacity: 1 !important;
}

/* Active hover during drag: bolder highlight */
body.drag-mode .drop-zone.drag-over > .empty-slot,
body.drag-mode .drop-zone > .empty-slot:hover {
  border-color: var(--blue-400) !important;
  background: rgba(74, 144, 184, 0.08) !important;
}

/* Header empty slots: same treatment */
.header-drop-zone .header-empty-slot {
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
}
body.drag-mode .header-drop-zone .header-empty-slot {
  opacity: 1 !important;
}

/* Right-column "DROP HERE" labels: same */
.right-col-slot .empty-slot,
[data-slot^="right-"] .empty-slot {
  opacity: 0;
  transition: opacity 0.25s ease;
}
body.drag-mode [data-slot^="right-"] .empty-slot {
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.24 — Marquee ticker zones and animation
   ══════════════════════════════════════════════════════════════════ */

/* ─── Zone wrapper ───────────────────────────────────────────────── */
.marquee-zones-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ─── Individual marquee drop zone ───────────────────────────────── */
.marquee-drop-zone {
  width: 100%;
  min-height: 38px;
  height: 38px;
  display: flex;
  align-items: stretch;
  position: relative;
  background: transparent;
  /* Override the generic .drop-zone border during drag mode */
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ─── Empty slot inside marquee zone ─────────────────────────────── */
.marquee-empty-slot {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Invisible at rest — fade in only during drag */
  opacity: 0;
  border: 2px dashed transparent;
  background: transparent;
  transition: opacity 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  cursor: pointer;
}

.marquee-empty-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue-400);
  letter-spacing: .3px;
}

/* During drag: marquee zone appears as a subtle bar */
body.drag-mode .marquee-drop-zone .marquee-empty-slot {
  opacity: 1;
  border-color: rgba(74, 144, 184, 0.35);
  background: rgba(74, 144, 184, 0.05);
}

/* Drag-over highlight */
body.drag-mode .marquee-drop-zone.drag-over .marquee-empty-slot {
  opacity: 1;
  border-color: var(--blue-400);
  background: rgba(74, 144, 184, 0.1);
}

/* Ticker box fills its container completely */
.marquee-ticker-box {
  width: 100% !important;
  height: 38px !important;
  max-height: 38px !important;
  min-height: 38px !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ─── Scrolling ticker animation ──────────────────────────────────── */
@keyframes rh-ticker-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes rh-ticker-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.marquee-scroll-left {
  display: inline-block;
  animation: rh-ticker-left linear infinite;
}
.marquee-scroll-right {
  display: inline-block;
  animation: rh-ticker-right linear infinite;
}

/* Pause on hover for readability */
.marquee-ticker-box:hover .marquee-scroll-left,
.marquee-ticker-box:hover .marquee-scroll-right {
  animation-play-state: paused;
}

/* ─── Mini controls positioned for ticker (very narrow box) ──────── */
.marquee-ticker-box .box-mini-controls-left {
  top: 50%;
  transform: translateY(-50%);
  left: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.27 — marquee zones stack vertically on finance page
   ══════════════════════════════════════════════════════════════════ */

/* Force block layout so zones stack one above the other — not side by side */
.marquee-zones-wrapper {
  display: block !important;
  width: 100% !important;
  position: static !important;
}

.marquee-drop-zone {
  display: block !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  position: relative !important;
  overflow: hidden !important;
  /* Hard-reset any flex/grid that could pull zones into the same row */
  flex: none !important;
  grid-column: unset !important;
  grid-row: unset !important;
}

/* Ticker box must also be constrained to the zone height */
.marquee-drop-zone .marquee-ticker-box {
  position: absolute !important;
  inset: 0 !important;
  height: 38px !important;
}

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.28 — ticker speed via CSS custom property (reliable)
   ══════════════════════════════════════════════════════════════════ */

/* Using var(--ticker-speed) means the animation shorthand and the
   inline duration can't conflict — the variable IS the duration. */
.marquee-scroll-left {
  display: inline-block !important;
  animation: rh-ticker-left var(--ticker-speed, 45s) linear infinite !important;
}
.marquee-scroll-right {
  display: inline-block !important;
  animation: rh-ticker-right var(--ticker-speed, 45s) linear infinite !important;
}

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.30 — stock ticker hover pause + link cursor
   ══════════════════════════════════════════════════════════════════ */

/* Pause stock ticker on hover so users can read and click */
.stock-ticker-box:hover .marquee-scroll-left,
.stock-ticker-box:hover .marquee-scroll-right {
  animation-play-state: paused !important;
}

/* Make the scrolling content clearly clickable */
.stock-ticker-box a {
  cursor: pointer;
}
.stock-ticker-box a:hover span {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.31 — straight corners on all ticker/marquee elements
   ══════════════════════════════════════════════════════════════════ */
.stock-ticker-box,
.marquee-ticker-box,
.marquee-drop-zone,
.marquee-zones-wrapper,
.marquee-empty-slot,
.stock-ticker-box *,
.marquee-ticker-box * {
  border-radius: 0 !important;
}

/* Also re-run stock tickers on new boxes dropped into zones */

/* ══════════════════════════════════════════════════════════════════
   RefHome v1.0.32 — force square corners on ALL ticker elements
   The .info-box base rule sets border-radius:var(--radius-lg).
   These rules beat it with compound selectors + !important.
   ══════════════════════════════════════════════════════════════════ */
.info-box.stock-ticker-box,
.info-box.marquee-ticker-box,
.info-box.stock-ticker-box *,
.info-box.marquee-ticker-box *,
div.stock-ticker-box,
div.marquee-ticker-box,
.marquee-drop-zone,
.marquee-zones-wrapper {
  border-radius: 0 !important;
}

/* Marquee ticker headline links */
.ticker-link { color:inherit; text-decoration:none; }
.ticker-link:hover { text-decoration:underline; }

/* Box header logo (Clearbit or custom URL) */
.box-logo-img { max-height:36px; width:auto; max-width:100px; object-fit:contain;
                vertical-align:middle; border-radius:2px; display:inline-block; }
.box-title-logo { display:flex; align-items:center; gap:6px; }

/* Crypto price row hover */
.crypto-row-link:hover { background:#f8fafc; }

/* Clearbit logo fallback */
.rh-logo-clearbit.error + .rh-logo-fallback { display:inline !important; }
.rh-logo-clearbit.error { display:none; }

/* ─── Web Search Box — responsive ────────────────────────────────────────── */
/* Engine buttons wrap gracefully at any width */
.web-search-box .box-body { overflow: hidden; }

@media (max-width: 900px) {
  /* Tighten engine buttons on tablet */
  .web-search-box .box-body button[onclick] {
    padding: 5px 9px 5px 7px;
    font-size: 11.5px;
    gap: 5px;
  }
  .web-search-box .box-body button[onclick] img {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 600px) {
  /* Full mobile: even more compact, icon-only option */
  .web-search-box .box-body button[onclick] {
    padding: 4px 7px;
    font-size: 10.5px;
    gap: 4px;
  }
  .web-search-box .box-body button[onclick] img {
    width: 14px;
    height: 14px;
  }
  /* Keep pill row as single row, prevent wrapping */
  .web-search-box [style*="border-radius:26px"] {
    padding: 0 8px !important;
  }
  /* Shipping carrier buttons — smaller on mobile */
  .shipping-tracker-box .trk-car-btn {
    padding: 2px 6px !important;
    font-size: 10px !important;
  }
}

/* ─── Shipping tracker carrier buttons ────────────────────────────────────── */
.trk-car-btn { line-height: 1; }
/* When Clearbit logo loads fine — hide the text label */
.trk-car-logo:not(.error) + .trk-car-name { display: none; }
/* When Clearbit logo fails — hide the broken img, show text */
.trk-car-logo.error { display: none !important; }
.trk-car-logo.error + .trk-car-name { display: inline !important; }

/* ─── RSS Refresh button — hidden at rest, fades in on header hover ────────── */
.rss-refresh-btn {
  opacity: 0;
  transition: opacity 0.25s ease;
  flex-shrink: 0;
}
/* Fade in when user hovers anywhere on the box header */
.box-header:hover .rss-refresh-btn {
  opacity: 0.6;
}
/* Full brightness on the button itself */
.rss-refresh-btn:hover {
  opacity: 1 !important;
}
.rss-refresh-btn:disabled {
  opacity: 0.3 !important;
  cursor: default;
}
/* Spin animation for the SVG icon while refreshing */
@keyframes rss-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.rss-refresh-btn svg { display:block; }