/* ===========================================================
   Fixed desktop layout: 900 total = 760 (banner) + 160 (rail)
   Stacks below 900px
   =========================================================== */

:root {
  --wf-bg: #ffffff;
  --wf-bg-soft: #f9f9f9;
  --wf-border: #e5e7eb;
  --wf-border-strong: #d1d5db;
  --wf-shadow: 0 2px 10px rgba(0,0,0,.06);
  --wf-text: #111827;
  --wf-accent: #e43010;
  --wf-link: #DF8300;
  --wf-link-hover: #b86500;
}

:root.dark {
  --wf-bg: #0b0f12;
  --wf-bg-soft: #0e1418;
  --wf-border: #26323c;
  --wf-border-strong: #2f3c48;
  --wf-shadow: 0 2px 10px rgba(0,0,0,.4);
  --wf-text: #e5e7eb;
  --wf-accent: #ff5a3c;
  --wf-link: #ffb14d;
  --wf-link-hover: #ffc57d;
}

/* Container: center and cap at 900px */
#hero-row {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;   /* stack by default */
  flex-wrap: nowrap;        /* ❗ prevent accidental wrapping */
  gap: 0;                   /* ❗ keep total exactly 900 */
}

/* Ensure children don't add extra width */
#hero-row > #banner,
#hero-row > #workflow_accordian,
#hero-row > .workflow-accordian {
  box-sizing: border-box;   /* ❗ widths include padding/border */
  margin: 0;                /* guard against default margins */
  max-width: 100%;
}

/* Banner */
#banner {
  position: relative;
  overflow: visible;
  width: 100%;              /* full width when stacked */
}

/* Legacy inner constraints (optional) */
#banner
#icons,
#icons-new { max-width: 760px; }

/* Right rail container */
#workflow_accordian,
.workflow-accordian {
  position: relative;
  width: 100%;              /* full width when stacked */
  min-height: 1px;
}

/* Dialog fits the rail */
#reminderDialog {
  position: relative;
  box-sizing: border-box;
  width: 160px;             /* will switch to 100% when stacked */
  min-height: 134px;
  background: var(--wf-bg-soft);
  color: var(--wf-text);
  border: 1px solid var(--wf-accent);
  border-radius: 8px;
  padding: 12px 10px;
  box-shadow: var(--wf-shadow);
  z-index: 10;
}

/* ===== Content styles (unchanged) ===== */
#reminderDialog[title]::before,
#reminderDialog .wf-title { content: attr(title); display: block; font-weight: 700; font-size: 13px; margin: 0 0 8px 0; color: var(--wf-text); }

#reminderTabs { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--wf-text); overflow-x: hidden; overflow-y: hidden; }
#reminderTabs ul { list-style: none; margin: 0; padding: 0; }
#reminderTabs li { margin: 0; padding: 6px 8px; border: 1px solid var(--wf-border); border-radius: 6px; background: var(--wf-bg); line-height: 1.3; cursor: pointer; user-select: none; transition: background .15s ease, border-color .15s ease, transform .05s ease; }
#reminderTabs li + li { margin-top: 6px; }
#reminderTabs li:hover { background: #fff; border-color: var(--wf-border-strong); transform: translateY(-1px); }
#reminderTabs li a { color: var(--wf-link); text-decoration: none; }
#reminderTabs li a:hover { color: var(--wf-link-hover); text-decoration: underline; }

#relatedActivitiesTab, #reportsTab { font-weight: 600; margin: 4px 0; }
#relatedActivitiesTab a, #reportsTab a { color: var(--wf-link); text-decoration: none; }
#relatedActivitiesTab a:hover, #reportsTab a:hover { text-decoration: underline; color: var(--wf-link-hover); }

.hide { display: none !important; }

#accordion { margin: 0; padding: 0; }
#accordion > ul { list-style: none; margin: 0; padding: 0; }
#accordion > ul > li { border: 1px solid var(--wf-border); border-radius: 6px; background: var(--wf-bg); padding: 6px 8px; }
#accordion > ul > li + li { margin-top: 6px; }
#accordion > ul > li > .section-title { font-weight: 600; margin-bottom: 4px; }
#accordion > ul > li > .section-body { max-height: 145px; overflow: auto; padding-top: 4px; }

/* =========================
   Responsive behavior
   ========================= */

/* Stack below 900px */
@media (max-width: 899.98px) {       /* ❗ avoid overlap with the next rule */
  #hero-row { flex-direction: column; }
  #banner { width: 100%; }
  #workflow_accordian, #hero-row > .workflow-accordian { width: 100%; max-width: 100%; margin-top: 8px; }
  #reminderDialog { width: 100%; }   /* fill when stacked */
}

/* Side-by-side at ≥ 900px EXACT */
@media (min-width: 900px) {          /* ❗ previously 901px—caused stacking at 900 */
 /* #hero-row { flex-direction: row; align-items: flex-start; } & * */
  #hero-row { flex-direction: row; flex-wrap: nowrap; }

  /* EXACT fixed widths — no gaps, no margins */
  #banner {
    flex: 0 0 760px;
    width: 760px;
    max-width: 760px;
  }

  #workflow_accordian,
  #hero-row > .workflow-accordian {
    flex: 0 0 160px;
    width: 160px;
    max-width: 160px;
    margin-left: 0;                 /* ensure total stays 900 */
  }

  #reminderDialog { width: 160px; }  /* fills the rail */
}

/* A11y & highlight */
#reminderTabs li:focus-within { outline: 2px solid var(--wf-accent); outline-offset: 2px; }
#reminderTabs li.highlight,
#contactReminderTab.highlight,
#driverReminderTab.highlight,
#truckReminderTab.highlight,
#trailerReminderTab.highlight { background: #fff7ed; border-color: #fdba74; }
#reminderTabs li.highlight:hover { background: #ffedd5; border-color: #fb923c; }
/* =========================================================
   Legacy styles (to be migrated)
   ========================================================= */
/* ---------- Top menu active/inactive states ---------- */
.active{color:#fff;font:400 12px Arial,Helvetica,sans-serif;display:block;float:left;
  background-image:url(/images/menu-active-02.jpg);background-repeat:repeat-x;height:20px;padding-top:5px;}
.active-left{background-image:url(/images/menu-active-left.jpg);width:5px;height:25px;background-repeat:no-repeat;display:block;float:left;}
.active-right{background-image:url(/images/menu-active-right.jpg);width:5px;height:25px;background-repeat:no-repeat;display:block;float:left;}
.inactive{color:#fff;font:400 12px Arial,Helvetica,sans-serif;display:block;float:left;
  background-image:url(/images/inactive-02.jpg);background-repeat:repeat-x;height:20px;padding-top:5px;}
.inactive-left{background-image:url(/images/inactive-left.jpg);width:5px;height:25px;background-repeat:no-repeat;display:block;float:left;}
.inactive-right{background-image:url(/images/inactive-right.jpg);width:5px;height:25px;background-repeat:no-repeat;display:block;float:left;}