/* static/css/app.css
   ITG Job Tracker - App Layout + UI
   Designed to override SimpleCSS defaults safely.
*/

/* =========================
   0) Reset / SimpleCSS overrides
   ========================= */
:root{
  --sidebar-w: 220px;
  --sidebar-collapsed-w: 0px;   /* keep the “blue rail” visible */
  --topbar-h: 64px;

  --page-bg: #f6f7fb;
  --page-text: #0f1720;
  --chrome-text: #0f1720;
  --chrome-muted-text: rgba(15,23,32,.75);
  --surface-bg: #ffffff;
  --surface-alt-bg: #f2f5fa;
  --surface-text: #0f1720;
  --surface-border: rgba(0,0,0,.16);
  --surface-focus: rgba(131,155,179,.28);
  --table-header-bg: #e8edf4;
  --table-row-alt-bg: #f8fafc;

  --brand: #8d8d8d;
  --brand-dark: #374455;
  --accent: #839bb3;
  --accent-dark: #0d2742;

  --border: rgba(0,0,0,.15);
  --muted: rgba(0,0,0,.65);
  --card-bg: #fff;
  --card-border: rgba(0,0,0,.12);
  --card-shadow: 0 1px 2px rgba(0,0,0,.06);
  --badge-primary-bg: rgba(0,105,217,.12);
  --badge-primary-color: #004a9c;
  --badge-primary-border: rgba(0,105,217,.25);
  --badge-secondary-bg: rgba(25,180,134,.14);
  --badge-secondary-color: #0a6d50;
  --badge-secondary-border: rgba(25,180,134,.28);
}

html[data-theme="night"]{
  color-scheme: dark;
  --page-bg: #0f141b;
  --page-text: #e9eef5;
  --chrome-text: #eef3fb;
  --chrome-muted-text: rgba(238,243,251,.78);
  --surface-bg: #16202a;
  --surface-alt-bg: #202c38;
  --surface-text: #e9eef5;
  --surface-border: rgba(255,255,255,.2);
  --surface-focus: rgba(124,190,255,.3);
  --table-header-bg: #22303d;
  --table-row-alt-bg: #19232d;
  --brand: #374455;
  --brand-dark: #1f2a36;
  --accent: #839bb3;
  --accent-dark: #5a7b9c;
  --border: rgba(255,255,255,.18);
  --muted: rgba(255,255,255,.72);
  --card-bg: #1a232d;
  --card-border: rgba(255,255,255,.15);
  --card-shadow: 0 4px 14px rgba(0,0,0,.35);
  --badge-primary-bg: rgba(88,170,255,.2);
  --badge-primary-color: #b9d9ff;
  --badge-primary-border: rgba(124,190,255,.35);
  --badge-secondary-bg: rgba(64,204,159,.2);
  --badge-secondary-color: #a8f2d6;
  --badge-secondary-border: rgba(98,225,183,.35);
}

html[data-theme="slate"]{
  color-scheme: light;
  --page-bg: #edf3f8;
  --page-text: #152331;
  --chrome-text: #f7fbff;
  --chrome-muted-text: rgba(247,251,255,.82);
  --surface-bg: #ffffff;
  --surface-alt-bg: #eff5fa;
  --surface-text: #152331;
  --surface-border: rgba(47,58,70,.2);
  --surface-focus: rgba(75,127,163,.28);
  --table-header-bg: #dde8f1;
  --table-row-alt-bg: #f5f9fc;
  --brand: #5f6d7a;
  --brand-dark: #2f3a46;
  --accent: #4b7fa3;
  --accent-dark: #1f4a66;
  --border: rgba(32,42,54,.2);
  --card-border: rgba(47,58,70,.16);
  --badge-primary-bg: rgba(75,127,163,.12);
  --badge-primary-color: #1f4a66;
  --badge-primary-border: rgba(75,127,163,.28);
}

html[data-theme="forest"]{
  color-scheme: light;
  --page-bg: #eef6f0;
  --page-text: #16261d;
  --chrome-text: #f5fff8;
  --chrome-muted-text: rgba(245,255,248,.84);
  --surface-bg: #ffffff;
  --surface-alt-bg: #edf6ef;
  --surface-text: #16261d;
  --surface-border: rgba(44,104,64,.18);
  --surface-focus: rgba(91,156,108,.28);
  --table-header-bg: #ddecdf;
  --table-row-alt-bg: #f6fbf7;
  --brand: #6f8f7a;
  --brand-dark: #2f4b3a;
  --accent: #5b9c6c;
  --accent-dark: #2c6840;
  --border: rgba(27,66,45,.18);
  --card-border: rgba(44,104,64,.15);
  --badge-secondary-bg: rgba(91,156,108,.16);
  --badge-secondary-color: #235235;
  --badge-secondary-border: rgba(91,156,108,.3);
}

html[data-theme="sunset"]{
  color-scheme: light;
  --page-bg: #fff2ea;
  --page-text: #311a12;
  --chrome-text: #fff7f2;
  --chrome-muted-text: rgba(255,247,242,.86);
  --surface-bg: #fffdfb;
  --surface-alt-bg: #fff3eb;
  --surface-text: #311a12;
  --surface-border: rgba(155,69,31,.2);
  --surface-focus: rgba(210,119,77,.28);
  --table-header-bg: #f6e1d5;
  --table-row-alt-bg: #fff8f3;
  --brand: #b98666;
  --brand-dark: #6b3f2b;
  --accent: #d2774d;
  --accent-dark: #9b451f;
  --border: rgba(107,63,43,.2);
  --card-border: rgba(155,69,31,.14);
  --badge-primary-bg: rgba(210,119,77,.14);
  --badge-primary-color: #8a3d1c;
  --badge-primary-border: rgba(210,119,77,.28);
}

html, body { height: 100%; }

body{
  margin: 0 !important;
  padding: 0 !important;
  background: var(--page-bg);
  color: var(--page-text);

  /* SimpleCSS constrains body; remove that */
  max-width: none !important;
  width: 100% !important;

  /* We do our own layout */
  display: block !important;
}

/* SimpleCSS constrains main too */
main{
  max-width: none !important;
  width: auto !important;
}

*, *::before, *::after{
  box-sizing: border-box;
}

/* Utility */
.muted{ opacity: .8; color: var(--muted); }
.link-group{ display:inline-flex; gap: 50px; align-items:center; }

/* Shared responsive table-fit contract */
.table-autofit-wrap{
  --table-fit-scale: 1;
  --table-fit-font-size: clamp(.8rem, calc(1rem * var(--table-fit-scale)), 1rem);
  --table-fit-cell-pad-y: clamp(.3rem, calc(.6rem * var(--table-fit-scale)), .6rem);
  --table-fit-cell-pad-x: clamp(.4rem, calc(.75rem * var(--table-fit-scale)), .75rem);
  --table-fit-control-font-size: clamp(.78rem, calc(1rem * var(--table-fit-scale)), 1rem);
  --table-fit-control-pad-y: clamp(.22rem, calc(.45rem * var(--table-fit-scale)), .45rem);
  --table-fit-control-pad-x: clamp(.35rem, calc(.75rem * var(--table-fit-scale)), .75rem);

  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

.table-autofit{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--table-fit-font-size);
}

.table-autofit th,
.table-autofit td{
  padding: var(--table-fit-cell-pad-y) var(--table-fit-cell-pad-x);
}

.table-autofit input,
.table-autofit select,
.table-autofit textarea,
.table-autofit button{
  font-size: var(--table-fit-control-font-size);
}

.table-autofit input,
.table-autofit select,
.table-autofit textarea{
  padding: var(--table-fit-control-pad-y) var(--table-fit-control-pad-x);
  max-width: 100%;
  box-sizing: border-box;
}

.table-autofit button{
  padding: var(--table-fit-control-pad-y) var(--table-fit-control-pad-x);
}

/* =========================
   1) Sidebar
   ========================= */
.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;

  width: var(--sidebar-w);
  padding: 1rem;

  background-color: var(--brand);
  border-right: 1px solid var(--border);
  overflow: hidden;

  transition: width .3s ease, padding .3s ease;
  z-index: 1000;
}

.sidebar img{
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 12px;
}

.sidebar a{
  display: block;
  margin-bottom: .5rem;
  color: var(--chrome-text);
  text-decoration: none;
  font-weight: 600;
}

.sidebar a:hover{
  text-decoration: underline;
}

.sidebar h2{
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

/* “Collapsed” leaves a small visible rail */
.sidebar.collapsed{
  width: var(--sidebar-collapsed-w);
  padding-left: .5rem;
  padding-right: .5rem;
}

/* Hide contents, keep toggle visible */
.sidebar.collapsed img,
.sidebar.collapsed .sidebar-menu,
.sidebar.collapsed h2{
  display: none;
}

/* Toggle rail */
.sidebar-toggle{
  position: absolute;
  top: 0;
  right: 0;

  width: 40px;
  height: 100%;

  background-color: var(--accent);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  font-size: 18px;
  user-select: none;

  transition: background-color .2s ease;
}

.sidebar-toggle:hover{
  background-color: var(--accent-dark);
}

.estimator-table .estimator-actions{
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .4rem;
  justify-content: flex-start;
}

.estimator-action-stack,
.estimator-action-group{
  display: flex;
  align-items: center;
}

.estimator-action-stack{
  flex-direction: column;
  gap: .2rem;
}

.estimator-action-group{
  gap: .25rem;
}

.estimator-icon-button{
  min-width: 0;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .45rem;
  line-height: 1;
}

.estimator-icon-button--reorder{
  width: 1.65rem;
  height: 1.45rem;
  font-size: .85rem;
}

.estimator-icon-button--danger{
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.estimator-icon-button--danger:hover,
.estimator-icon-button--danger:focus-visible{
  border-color: var(--accent-dark);
  background: var(--accent-dark);
  color: #fff;
}

.estimator-section{
  margin-top: 1.5rem;
}

.estimator-section > h4{
  margin: 0 0 .75rem;
}

.estimator-feedback{
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--surface-border);
  border-radius: .5rem;
}

.estimator-feedback--success{
  background: color-mix(in srgb, var(--accent) 10%, white);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--surface-border));
}

.estimator-feedback--error{
  background: color-mix(in srgb, #b42318 10%, white);
  border-color: color-mix(in srgb, #b42318 30%, var(--surface-border));
}

.is-hidden,
.estimator-table tr.is-hidden{
  display: none;
}

.estimator-table .inline-add-trigger td,
.estimator-table .section-divider td{
  background: var(--surface-alt-bg);
  font-weight: 600;
}

.estimator-table--milestones tbody tr:first-child td,
.estimator-table--matrix thead th{
  background: var(--table-header-bg);
}

.estimator-dialog{
  border: none;
  padding: 0;
  background: transparent;
}

.estimator-dialog--task-description{
  width: min(760px, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  box-sizing: border-box;
  overflow: hidden;
}

.estimator-dialog::backdrop{
  background: rgba(0, 0, 0, .35);
}

.estimator-dialog--task-description::backdrop{
  background: rgba(18, 24, 32, .42);
  backdrop-filter: blur(6px);
}

.estimator-table input[type="number"]{
  min-width: clamp(3.75rem, calc(5.5rem * var(--table-fit-scale)), 5.5rem);
}

.estimator-table--matrix .matrix-total-cell,
.estimator-table--matrix .section-total-cell{
  text-align: center;
}

.estimator-table--matrix .matrix-col-milestone{
  width: clamp(8rem, calc(11rem * var(--table-fit-scale)), 11rem);
}

.estimator-table--matrix .matrix-col-task{
  min-width: clamp(12rem, calc(22rem * var(--table-fit-scale)), 22rem);
  width: 32%;
}

.estimator-table--matrix .matrix-col-drawings{
  width: clamp(4.5rem, calc(7rem * var(--table-fit-scale)), 7rem);
}

.estimator-table--matrix .matrix-col-hours{
  width: clamp(4rem, calc(6.5rem * var(--table-fit-scale)), 6.5rem);
}

.estimator-table--matrix .matrix-col-total{
  width: clamp(4.75rem, calc(7.5rem * var(--table-fit-scale)), 7.5rem);
}

.estimator-table--matrix .matrix-col-actions{
  width: 1%;
}

.estimator-table--matrix td.matrix-col-task input[type="text"],
.estimator-table--matrix td.matrix-col-task textarea,
.estimator-table--matrix td.matrix-col-task select{
  width: 100%;
  max-width: none;
}

.estimator-table--matrix .section-divider td{
  border-top: 2px solid var(--surface-border);
}

.estimator-table--matrix .section-total-label{
  font-size: .85rem;
  color: var(--muted);
}

.estimator-table--matrix .matrix-totals-row td{
  background: var(--surface-alt-bg);
  border-top: 2px solid var(--surface-border);
}

.estimator-summary-grid,
.estimator-rollup-grid{
  display: grid;
  gap: 1rem;
}

.estimator-summary-grid{
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: 1rem;
}

.estimator-summary-card,
.estimator-rollup-card,
.estimator-export-card{
  padding: 1rem;
  border: 1px solid var(--surface-border);
  border-radius: .75rem;
  background: var(--surface-alt-bg);
}

.estimator-summary-panel{
  margin-bottom: 1rem;
}

.estimator-summary-panel--embedded{
  margin-bottom: 0;
}

.estimator-inline-summary-card{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--surface-border);
  border-radius: .75rem;
  background: var(--surface-alt-bg);
}

.estimator-inline-summary-card h5,
.estimator-subsection-header h5{
  margin: 0 0 .5rem;
}

.estimator-inline-summary-list{
  display: grid;
  gap: .75rem;
  margin: 0;
}

.estimator-inline-summary-list dt{
  font-size: .85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.estimator-inline-summary-list dd{
  margin: .15rem 0 0;
}

.estimator-summary-list{
  margin: .5rem 0 0;
  padding-left: 1.25rem;
}

.estimator-subsection{
  margin-top: 1rem;
}

.estimator-subsection-header{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .75rem;
}

.estimator-summary-card{
  display: grid;
  gap: .25rem;
}

.estimator-summary-card--emphasis{
  background: color-mix(in srgb, var(--accent) 8%, white);
}

.estimator-summary-card--proposal{
  order: 99;
  background: var(--surface-alt-bg);
}

.estimator-summary-label{
  font-size: .85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.estimator-rollup-grid{
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  margin-bottom: 1rem;
  align-items: stretch;
}

.estimator-rollup-card,
.estimator-export-card{
  display: flex;
  flex-direction: column;
}

.estimator-rollup-card-header{
  margin-bottom: 1rem;
}

.estimator-rollup-card-body{
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 1px solid var(--surface-border);
  border-radius: .75rem;
  background: var(--surface-bg);
  overflow: hidden;
}

.estimator-rollup-card h4,
.estimator-export-card h4{
  margin-top: 0;
  margin-bottom: 0;
}

.estimator-rollup-table{
  width: 100%;
  border-collapse: collapse;
  height: 100%;
}

.estimator-rollup-table th,
.estimator-rollup-table td{
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--surface-border);
  text-align: left;
}

.estimator-rollup-table thead th{
  background: var(--surface-alt-bg);
}

.estimator-rollup-table tbody tr:last-child td{
  border-bottom: none;
}

.estimator-rollup-empty{
  flex: 1;
  min-height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.estimator-rollup-empty p{
  margin: 0;
}

.estimator-export-header{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.estimator-summary-block{
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
  line-height: 1.5;
}

.proposal-summary-section{
  margin-top: 1.5rem;
}

.proposal-summary-card{
  padding: 1rem;
  border: 1px solid var(--surface-border);
  border-radius: .75rem;
  background: var(--surface-bg);
  display: grid;
  gap: 1rem;
}

.proposal-summary-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.proposal-summary-header h4{
  margin: 0 0 .35rem;
}

.proposal-summary-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .85rem 1rem;
  margin: 0;
}

.proposal-summary-item{
  display: grid;
  gap: .2rem;
}

.proposal-summary-item dt,
.proposal-summary-copy-label{
  font-size: .82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.proposal-summary-item dd{
  margin: 0;
}

.proposal-summary-item--source dd{
  font-weight: 600;
}

.proposal-summary-copy{
  display: grid;
  gap: .35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--surface-border);
}

.proposal-summary-copy p{
  margin: 0;
  line-height: 1.5;
}

.proposal-summary-subsection{
  display: grid;
  gap: .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--surface-border);
}

.proposal-summary-subsection-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.proposal-summary-subsection-header h5,
.proposal-summary-subsection-header p{
  margin: 0;
}

.detail-stack{
  display: grid;
  gap: 1rem;
}

.detail-panel{
  padding: 1rem;
  border: 1px solid var(--surface-border);
  border-radius: .75rem;
  background: var(--surface-bg);
  display: grid;
  gap: 1rem;
}

.detail-panel-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.detail-panel-header h3,
.detail-panel-header p,
.detail-panel-copy{
  margin: 0;
}

.detail-kicker{
  margin: 0 0 .35rem;
  font-size: .82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.detail-toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}

.detail-rollup-grid{
  margin-top: 0;
}

.detail-linked-list{
  display: grid;
  gap: .85rem;
}

.detail-linked-item{
  padding: .95rem 1rem;
  border: 1px solid var(--surface-border);
  border-radius: .75rem;
  background: var(--surface-bg);
  display: grid;
  gap: .85rem;
}

.detail-linked-item-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.detail-linked-item-header h4,
.detail-linked-item-header p{
  margin: 0;
}

.detail-inline-meta{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem 1rem;
  margin: 0;
}

.detail-inline-meta dt{
  font-size: .8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.detail-inline-meta dd{
  margin: .15rem 0 0;
}

.detail-empty-state{
  padding: .85rem 1rem;
  border: 1px dashed var(--surface-border);
  border-radius: .75rem;
}

.detail-empty-state p{
  margin: 0;
}

.detail-collapsible{
  margin-top: 1rem;
}

.detail-collapsible-body{
  margin-top: .85rem;
}

.detail-data-table{
  width: 100%;
}

@media (max-width: 720px){
  .estimator-inline-summary-card,
  .estimator-subsection-header,
  .proposal-summary-header,
  .proposal-summary-subsection-header,
  .detail-panel-header,
  .detail-linked-item-header{
    flex-direction: column;
  }
}

/* =========================
   Sidebar Navigation
   ========================= */

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;   /* small consistent spacing */
}

.sidebar-menu{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 44px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar-menu::-webkit-scrollbar{
    width: 0;
    height: 0;
    display: none;
}


/* Section container */
.nav-section {
    margin-top: 1.25rem;   /* space between sections */
    display: flex;
    flex-direction: column;
}
.nav-section + .nav-section {
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 1rem;
}


/* Section title styling */
.nav-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--chrome-muted-text);
    opacity: 1;
    margin-bottom: 0.4rem;
    padding-left: 0.5rem;
}

/* Nav links */
.nav-link {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    text-decoration: none;
    display: block;
}

/* Optional: hover effect */
.nav-link:hover {
    background: var(--accent-dark);
}


/* =========================
   2) Top bar (fixed header spanning available width)
   ========================= */
/* Important: top-bar is a direct child of body in your HTML */
body > .top-bar{
  position: fixed;
  top: 0;
  left: var(--sidebar-w);

  height: var(--topbar-h);
  width: calc(100vw - var(--sidebar-w));

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 24px;

  background-color: var(--brand);
  border-bottom: 1px solid var(--border);

  z-index: 900;
}

/* When sidebar collapses, top-bar shifts and expands */
.sidebar.collapsed ~ .top-bar{
  left: var(--sidebar-collapsed-w);
  width: calc(100vw - var(--sidebar-collapsed-w));
}

.page-heading{
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--chrome-text);
}

/* User info area */
.user-info{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--chrome-text);
}

.user-info form{
  display: inline;
  margin: 0;
}

.user-settings-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-left: 0.35rem;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
}

.user-settings-link:hover,
.user-settings-link:focus-visible{
  background: rgba(255,255,255,.2);
  text-decoration: none;
  outline: none;
}

/* Make logout button not comically large (SimpleCSS can do that) */
.user-info button{
  padding: 8px 12px;
}

/* =========================
   Form Controls: Checkboxes
   ========================= */
input[type="checkbox"]{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none !important;
  accent-color: transparent;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0 0.4rem 0 0;
  border: 1.5px solid rgba(0,0,0,.45);
  border-radius: 4px;
  background: #fff;
  display: inline-grid;
  place-content: center;
  vertical-align: text-bottom;
  cursor: pointer;
}

input[type="checkbox"]::before{
  content: "";
  width: 0.34rem;
  height: 0.62rem;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .08s ease-in-out;
}

input[type="checkbox"]::after{
  content: none !important;
}

input[type="checkbox"]:checked{
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  background-image: none !important;
}

input[type="checkbox"]:checked::before{
  transform: rotate(45deg) scale(1);
}

input[type="checkbox"]:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* =========================
   3) Main content area
   ========================= */
body > main{
  margin-left: var(--sidebar-w);
  width: calc(100vw - var(--sidebar-w));

  padding: 2rem;
  padding-top: calc(var(--topbar-h) + 24px);

  transition: margin-left .3s ease, width .3s ease;
}

/* main is after .top-bar, so we use + selector for collapsed adjustments */
.sidebar.collapsed ~ .top-bar + main{
  margin-left: var(--sidebar-collapsed-w);
  width: calc(100vw - var(--sidebar-collapsed-w));
}

/* =========================
   4) Forms + inputs
   ========================= */
label{
  font-weight: 700;
  margin-bottom: 0;
}

input, select, textarea{
  width: 100%;
  padding: 5px 7px;
  margin-top: 2px;
  margin-bottom: 8px;

  color: var(--surface-text);
  background-color: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: 4px;
}

input::placeholder,
textarea::placeholder{
  color: color-mix(in srgb, var(--surface-text) 55%, transparent);
}

select option,
select optgroup{
  color: var(--surface-text);
  background-color: var(--surface-bg);
}

input:focus,
select:focus,
textarea:focus{
  outline: 2px solid var(--surface-focus);
  outline-offset: 1px;
  border-color: var(--accent);
}

.narrow-input input,
.narrow-input select,
.narrow-input textarea{
  max-width: 300px;
}

button{
  background-color: var(--accent);
  color: #fff;
  padding: 8px 12px;

  border: none;
  border-radius: 4px;

  cursor: pointer;
  transition: background-color .2s ease;
}

button:hover{
  background-color: var(--accent-dark);
}

/* =========================
   5) Cards + badges (used by your task/job partials)
   ========================= */
.card{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  margin: 8px 0;
  box-shadow: var(--card-shadow);
}

.card-body{
  padding: 10px 12px;
}

.badge{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .8rem;
  line-height: 1.4;
  font-weight: 700;
  margin-right: 4px;
}

details{
  margin-top: 8px;
}

details summary{
  padding: 2px 0;
}

.badge-primary{
  background: var(--badge-primary-bg);
  color: var(--badge-primary-color);
  border: 1px solid var(--badge-primary-border);
}

.badge-secondary{
  background: var(--badge-secondary-bg);
  color: var(--badge-secondary-color);
  border: 1px solid var(--badge-secondary-border);
}

.badge-light{
  background: var(--surface-alt-bg);
  color: var(--page-text);
  border: 1px solid var(--surface-border);
}

.badge-warning{
  background: rgba(245, 158, 11, .16);
  color: #8a4b00;
  border: 1px solid rgba(245, 158, 11, .3);
}

.badge-danger{
  background: rgba(220, 38, 38, .14);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, .28);
}

html[data-theme="night"] .badge-warning{
  color: #ffd08a;
  background: rgba(245, 158, 11, .2);
  border-color: rgba(245, 158, 11, .34);
}

html[data-theme="night"] .badge-danger{
  color: #fecaca;
  background: rgba(239, 68, 68, .2);
  border-color: rgba(239, 68, 68, .34);
}

table{
  color: var(--page-text);
  background: var(--surface-bg);
  border-color: var(--border);
}

.list-table{
  min-width: max-content;
}

.list-table td,
.list-table th{
  white-space: nowrap;
  vertical-align: top;
}

.list-table td.wrap{
  white-space: normal;
  min-width: 14rem;
}

thead th{
  background: var(--table-header-bg);
  color: var(--page-text);
}

tbody tr{
  background: var(--surface-bg);
}

tbody tr:nth-child(even){
  background: var(--table-row-alt-bg);
}

th, td{
  color: var(--page-text);
  border-color: var(--border);
}

.status-badge{
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
  border: 1px solid transparent;
}

.status-draft { background: #f2f4f7; color: #344054; border-color: #d0d5dd; }
.status-pending { background: #fff7e6; color: #8a4b00; border-color: #f5d08a; }
.status-awarded { background: #e8f7ec; color: #146c2e; border-color: #9bd3a8; }
.status-completed { background: #e8f2ff; color: #174ea6; border-color: #a7c4f2; }
.status-canceled { background: #fdecec; color: #b42318; border-color: #f0b3af; }
.status-default { background: #f5f5f5; color: #444; border-color: #ddd; }

/* =========================
   6) Messages
   ========================= */
ul.messages{
  list-style: none;
  margin: 0 0 16px 0;
  padding: 10px 12px;

  background: #e0ffe0;
  border: 1px solid #90ee90;
  border-radius: 8px;
  color: #103a10;
}

ul.messages li{
  margin: 0;
}

html[data-theme="night"] ul.messages{
  background: #d9f7d9;
  border-color: #89cf89;
  color: #0d2b0d;
}

/* =========================
   7) <details> project accordion styling (Engineer dashboard)
   ========================= */
details.proj{
  margin-bottom: 8px;
}

details.proj > summary{
  cursor: pointer;
  list-style: none;
}

/* Hide default marker in modern browsers */
details.proj > summary::-webkit-details-marker{ display:none; }

/* Add subtle cue */
details.proj > summary:after{
  content: "▾";
  float: right;
  opacity: .65;
  transform: translateY(2px);
}
details.proj[open] > summary:after{
  content: "▴";
}

/* =========================
   8) Footer (if you ever add it)
   ========================= */
footer{
  margin-top: 3rem;
  text-align: center;
  opacity: .8;
}

/* =========================
   9) Engineer portal layout
   ========================= */
.portal-summary-card{
  margin-bottom: 1px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.portal-summary-grid{
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.portal-filter-card{
  margin-bottom: 6px;
}

.portal-filter-grid{
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  align-items: start;
}

.portal-filter-top{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
}

.portal-filter-search{
  flex: 1 1 360px;
  min-width: 280px;
}

.portal-filter-search input{
  width: 100%;
  max-width: none;
}

/* =========================
   10) Dashboard layouts
   ========================= */
.dashboard-header{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.dashboard-header p{
  margin: 0;
}

.dashboard-section{
  margin-bottom: 1rem;
}

.dashboard-section h3,
.dashboard-table-header h3{
  margin: 0;
}

.dashboard-section h3{
  margin-bottom: .5rem;
}

.dashboard-metric-grid{
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.dashboard-metric-card .card-body{
  display: grid;
  gap: .25rem;
}

.dashboard-metric-card strong{
  font-size: 1.45rem;
  line-height: 1.1;
}

.dashboard-table-grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
  align-items: start;
}

.dashboard-table-card{
  margin: 0;
}

.dashboard-table-header{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  align-items: baseline;
  margin-bottom: .75rem;
}

.dashboard-table th,
.dashboard-table td{
  white-space: nowrap;
}

.portal-filter-sort{
  flex: 0 1 420px;
  min-width: 260px;
}

.portal-filter-actions{
  display: flex;
  align-items: flex-end;
  margin-left: auto;
}

.portal-inline-checkbox{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.portal-inline-checkbox input{
  width: auto;
  margin: 0;
}

.portal-filter-buttons{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* =========================
   11) Project timeline / Gantt
   ========================= */
.project-timeline-panel{
  scroll-margin-top: 1rem;
}

.project-timeline{
  display: grid;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.project-timeline-scale,
.project-timeline-row{
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(520px, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 760px;
}

.project-timeline-scale{
  min-height: 2rem;
  color: var(--muted-color, #64748b);
  font-size: .78rem;
}

.project-timeline-track{
  position: relative;
  min-height: 34px;
  border: 1px solid var(--border-color, #d7dde5);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, .06) 1px, transparent 1px) 0 0 / 14.285% 100%,
    rgba(248, 250, 252, .92);
}

.project-timeline-label{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.project-timeline-label span,
.project-timeline-note,
.project-timeline-empty{
  font-size: .86rem;
}

.project-timeline-label a{
  overflow-wrap: anywhere;
}

.project-timeline-tick{
  position: absolute;
  transform: translateX(-50%);
  left: var(--left);
  top: 0;
  white-space: nowrap;
}

.project-timeline-scale-track{
  position: relative;
  min-height: 2rem;
}

.project-timeline-bar,
.project-timeline-activity-marker{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.project-timeline-bar{
  left: var(--left);
  width: var(--width);
  height: 14px;
  border-radius: 999px;
}

.project-timeline-bar--custom{
  background: #0f766e;
}

.project-timeline-bar--milestone{
  height: 18px;
  background: #2563eb;
}

.project-timeline-bar--task{
  height: 10px;
  background: #94a3b8;
}

.project-timeline-activity-marker{
  left: var(--left);
  width: 8px;
  height: 24px;
  border-radius: 999px;
  background: #f59e0b;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .18);
}

.project-timeline-row--task .project-timeline-label{
  padding-left: 14px;
}

.project-timeline-note,
.project-timeline-empty{
  margin-left: min(300px, 38vw);
}

.project-timeline-editor,
.project-timeline-add{
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-bg) 96%, var(--surface-alt-bg) 4%);
  box-shadow: var(--card-shadow);
}

.project-timeline-editor{
  margin-left: min(300px, 38vw);
}

.project-timeline-panel .project-timeline-editor > summary,
.project-timeline-panel .project-timeline-add > summary{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--page-text);
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}

.project-timeline-panel .project-timeline-editor > summary::marker,
.project-timeline-panel .project-timeline-add > summary::marker{
  color: var(--accent-dark);
}

.project-timeline-panel .project-timeline-editor[open] > summary,
.project-timeline-panel .project-timeline-add[open] > summary{
  margin-bottom: 10px;
}

.project-timeline-form{
  margin-top: 8px;
  max-width: none;
}

.project-timeline-panel .project-timeline-form p{
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
  padding: 0;
}

.project-timeline-panel .project-timeline-form label{
  margin: 0;
  color: var(--page-text);
  font-weight: 650;
  line-height: 1.3;
}

.project-timeline-panel .project-timeline-form input,
.project-timeline-panel .project-timeline-form select,
.project-timeline-panel .project-timeline-form textarea{
  width: min(100%, 520px);
  max-width: 100%;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  background: var(--surface-bg);
  color: var(--surface-text);
  font: inherit;
}

.project-timeline-panel .project-timeline-form textarea{
  min-height: 4.5rem;
  resize: vertical;
}

.project-timeline-panel .project-timeline-form input:focus,
.project-timeline-panel .project-timeline-form select:focus,
.project-timeline-panel .project-timeline-form textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--surface-focus);
  outline: none;
}

.project-timeline-delete-form{
  margin-top: 8px;
}

.project-timeline-panel .project-timeline-form button,
.project-timeline-panel .project-timeline-delete-form button{
  width: auto;
  margin: 0;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: .92rem;
  line-height: 1.2;
}

.button-danger{
  background: #b91c1c;
  border-color: #991b1b;
  color: #fff;
}

@media (max-width: 760px){
  .project-timeline-scale,
  .project-timeline-row{
    grid-template-columns: minmax(180px, 220px) minmax(420px, 1fr);
    min-width: 620px;
  }

  .project-timeline-note,
  .project-timeline-empty,
  .project-timeline-editor{
    margin-left: 0;
  }
}

.portal-more-options-wrap{
  width: 100%;
}

.portal-more-options{
  margin-top: 0;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card-bg);
  padding: 0.5rem 0.75rem;
}

.portal-more-options > summary{
  cursor: pointer;
  font-weight: 600;
  color: var(--page-text);
  background: transparent;
}

.portal-more-options-note{
  margin: 0.35rem 0 0.6rem;
  font-size: 0.9rem;
}

.portal-more-options-grid{
  margin-top: 6px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
  align-items: start;
}

.portal-more-options-grid > div{
  min-width: 0;
}

.portal-more-options-grid .dual-list{
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  width: 100%;
}

.portal-more-options-checkbox{
  display: flex;
  align-items: flex-end;
  min-height: 2.4rem;
}

.portal-weighting-note{
  margin: 0 0 8px;
}

body.engineer-portal-scroll-stable{
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.engineer-portal-page{
  overflow-anchor: none;
}

.engineer-portal-page [data-portal-anchor]{
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}

.portal-job-card{
  margin-bottom: 8px;
}

.portal-job-card-body{
  padding: 10px;
}

.portal-job-header-row{
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.portal-job-actions-col{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.portal-quick-actions{
  position: relative;
  margin-top: 0;
}

.portal-icon-trigger{
  list-style: none;
  cursor: pointer;
  width: 28px;
  text-align: center;
  border: 1px solid var(--surface-border);
  background: var(--surface-bg);
  color: var(--surface-text);
  border-radius: 4px;
  padding: 2px 0;
}

.portal-icon-trigger::-webkit-details-marker{
  display: none;
}

.portal-popover-menu{
  position: absolute;
  left: 0;
  top: 30px;
  background: var(--surface-bg);
  color: var(--surface-text);
  border: 1px solid var(--surface-border);
  border-radius: 4px;
  padding: 5px;
  min-width: 130px;
  z-index: 5;
  box-shadow: var(--card-shadow);
}

.portal-popover-menu a{
  color: inherit;
}

.portal-inline-action-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 24px;
  border: 1px solid var(--surface-border);
  border-radius: 4px;
  padding: 3px 8px;
  text-decoration: none;
  background: var(--surface-bg);
  color: var(--surface-text);
}

.portal-inline-action-link:hover{
  background: var(--surface-alt-bg);
  text-decoration: none;
}

.portal-job-meta{
  margin-top: 4px;
  font-size: .88rem;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.portal-job-section{
  margin-top: 8px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card-bg);
  padding: 0.45rem 0.65rem 0.65rem;
}

.portal-job-section > summary{
  color: var(--page-text);
  background: transparent;
}

/* Theme all nested details panels in Engineer Portal (milestone/task accordions) */
.portal-job-card details:not(.portal-quick-actions):not(.portal-job-section){
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-bg) 94%, var(--surface-alt-bg) 6%);
  padding: 0.35rem 0.5rem 0.5rem;
}

.portal-job-card details:not(.portal-quick-actions):not(.portal-job-section) > summary{
  color: var(--page-text);
  background: transparent;
}

.portal-job-card details:not(.portal-quick-actions) > div{
  background: transparent;
  color: var(--page-text);
}

.portal-more-options-grid .dual-list,
.portal-more-options-grid .dual-list__panel,
.portal-more-options-grid .dual-list__toolbar{
  background-clip: padding-box;
}

/* =========================
   10) Weekly timesheets
   ========================= */
.timesheet-toolbar{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-bg);
}

.timesheet-toolbar h3{
  margin: 0 0 .35rem;
}

.timesheet-toolbar-actions,
.timesheet-status-row{
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

.timesheet-toolbar-actions form{
  margin: 0;
}

.timesheet-nav-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: .45rem .75rem;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  background: var(--surface-bg);
  color: var(--surface-text);
  text-decoration: none;
}

.timesheet-nav-button:hover{
  background: var(--surface-alt-bg);
  text-decoration: none;
}

.timesheet-status{
  display: inline-flex;
  align-items: center;
  padding: .18rem .55rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  border: 1px solid var(--surface-border);
  background: var(--surface-alt-bg);
}

.timesheet-status--submitted{
  background: var(--badge-primary-bg);
  color: var(--badge-primary-color);
  border-color: var(--badge-primary-border);
}

.timesheet-status--approved{
  background: var(--badge-secondary-bg);
  color: var(--badge-secondary-color);
  border-color: var(--badge-secondary-border);
}

.timesheet-status--rejected{
  background: rgba(245, 158, 11, .16);
  color: #8a4b00;
  border-color: rgba(245, 158, 11, .3);
}

html[data-theme="night"] .timesheet-status--rejected{
  color: #ffd08a;
  background: rgba(245, 158, 11, .2);
  border-color: rgba(245, 158, 11, .34);
}

.timesheet-add-project{
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-bg);
  color: var(--surface-text);
}

.timesheet-add-project-row{
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

.timesheet-job-results{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .65rem;
}

.timesheet-job-results a{
  padding: .3rem .55rem;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  background: var(--surface-alt-bg);
  color: var(--surface-text);
  text-decoration: none;
}

.timesheet-toolbar button,
.timesheet-add-project button,
.timesheet-cell-editor button,
.timesheet-entry-editor button{
  border: 1px solid var(--surface-border);
  background: var(--surface-alt-bg);
  color: var(--surface-text);
}

.timesheet-toolbar button:hover,
.timesheet-add-project button:hover,
.timesheet-cell-editor button:hover,
.timesheet-entry-editor button:hover{
  border-color: var(--accent);
  background: var(--table-header-bg);
  color: var(--surface-text);
}

.timesheet-grid-wrap{
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-bg);
}

.timesheet-grid{
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  margin: 0;
}

.timesheet-grid th,
.timesheet-grid td{
  border-color: var(--surface-border);
  color: var(--surface-text);
  vertical-align: top;
}

.timesheet-grid thead th,
.timesheet-grid tfoot th{
  background: var(--table-header-bg);
  color: var(--surface-text);
}

.timesheet-grid tbody tr,
.timesheet-grid tbody tr:nth-child(even){
  background: var(--surface-bg);
}

.timesheet-grid thead th span,
.timesheet-grid thead th small{
  display: block;
}

.timesheet-project-col{
  position: sticky;
  left: 0;
  z-index: 2;
  width: 16rem;
  min-width: 16rem;
  background: var(--surface-bg);
  color: var(--surface-text);
  text-align: left;
}

.timesheet-grid thead .timesheet-project-col,
.timesheet-grid tfoot .timesheet-project-col{
  z-index: 3;
  background: var(--table-header-bg);
}

.timesheet-project-col span,
.timesheet-project-col small{
  display: block;
  margin-top: .15rem;
  color: var(--muted);
  font-weight: 400;
}

.timesheet-cell{
  min-width: 8.5rem;
  background: var(--surface-bg);
}

.timesheet-cell--locked{
  background: color-mix(in srgb, var(--surface-alt-bg) 72%, var(--surface-bg));
}

.timesheet-cell-total,
.timesheet-row-total{
  font-weight: 700;
  text-align: right;
}

.timesheet-row-total{
  background: var(--table-header-bg);
  color: var(--surface-text);
}

.timesheet-cell-flags{
  display: flex;
  gap: .25rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: .25rem;
}

.timesheet-cell-flags span{
  padding: .08rem .35rem;
  border-radius: 999px;
  background: var(--surface-alt-bg);
  border: 1px solid var(--surface-border);
  font-size: .72rem;
}

.timesheet-entry-list{
  display: grid;
  gap: .35rem;
  margin-top: .45rem;
}

.timesheet-entry{
  display: grid;
  gap: .2rem;
  padding: .35rem;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  background: var(--surface-alt-bg);
  font-size: .84rem;
}

.timesheet-entry form{
  margin: 0;
}

.timesheet-delete-button{
  width: 1.6rem;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border-radius: 4px;
  line-height: 1;
}

.timesheet-cell-editor{
  margin-top: .5rem;
  padding: 0;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  background: var(--surface-alt-bg);
  color: var(--surface-text);
}

.timesheet-entry-editor{
  margin-top: .35rem;
  padding: 0;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  background: var(--surface-bg);
  color: var(--surface-text);
}

.timesheet-cell-editor summary,
.timesheet-entry-editor summary{
  cursor: pointer;
  margin: 0;
  padding: .35rem .5rem;
  border-radius: 6px;
  background: transparent;
  color: var(--surface-text);
  font-weight: 700;
}

.timesheet-cell-editor form,
.timesheet-entry-editor form{
  display: grid;
  gap: .45rem;
  margin: .4rem 0 0;
  padding: .5rem;
  border-top: 1px solid var(--surface-border);
  background: var(--surface-bg);
}

.timesheet-cell-editor input,
.timesheet-cell-editor select,
.timesheet-cell-editor textarea,
.timesheet-entry-editor input,
.timesheet-entry-editor select,
.timesheet-entry-editor textarea{
  width: 100%;
  max-width: none;
}

.timesheet-empty{
  text-align: center;
  padding: 1.5rem;
  color: var(--muted);
}

.timesheet-reject-panel{
  margin-top: 1rem;
}

@media (max-width: 860px){
  .timesheet-toolbar{
    flex-direction: column;
  }
}

@media (max-width: 860px){
  .portal-filter-top{
    align-items: stretch;
  }

  .portal-filter-search,
  .portal-filter-sort{
    flex: 1 1 100%;
    min-width: 0;
  }

  .portal-filter-actions{
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .portal-more-options-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================
   10) Shared Form System
   ========================= */
.app-form{
  max-width: 1100px;
}

.app-form--compact{
  max-width: 760px;
}

.app-form--narrow{
  max-width: 560px;
}

.form-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 1rem 1.25rem;
  align-items: start;
}

.form-grid--3{
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.form-field{
  min-width: 0;
}

.app-form--compact .form-grid{
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.app-form--narrow .form-grid{
  grid-template-columns: 1fr;
}

.form-field--full,
.form-field--span-2{
  grid-column: 1 / -1;
}

.form-field label{
  display: inline-block;
  margin-bottom: 0.2rem;
}

.form-field .form-control{
  margin-top: 0;
  margin-bottom: 0;
}

.form-field .form-control{
  max-width: 420px;
}

.form-field textarea.form-control,
.form-field select[multiple].form-control{
  max-width: none;
}

.form-help{
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.form-error{
  color: #b00020;
  margin-top: 0.3rem;
  font-size: 0.92rem;
}

.form-error ul{
  margin: 0;
  padding-left: 1.1rem;
}

.form-error--nonfield{
  margin-bottom: 0.9rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(176, 0, 32, .25);
  border-radius: 8px;
  background: rgba(176, 0, 32, .05);
}

.form-actions{
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.form-section{
  margin-top: 1.25rem;
  padding: 0.9rem;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card-bg);
}

.form-section-title{
  margin: 0 0 0.5rem;
}

.form-section-description{
  margin: 0 0 0.75rem;
}

.settings-section{
  margin-top: 1rem;
}

.settings-section:first-of-type{
  margin-top: 0;
}

.settings-section .form-section{
  max-width: 900px;
}

.form-inline-checkbox{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.form-inline-checkbox .app-checkbox{
  width: auto;
  margin: 0;
}

.form-checkbox-field{
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-checkbox-field__label{
  display: inline-block;
  font-weight: 700;
  margin: 0;
}

.form-checkbox-field__control{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-weight: 600;
}

.form-checkbox-field__control .app-checkbox{
  width: auto;
  margin: 0;
}

.form-checkbox-field--inline{
  gap: 0.2rem;
}

.form-checkbox-field--inline .form-checkbox-field__control{
  min-height: 2.2rem;
}

.formset-table-wrap{
  overflow-x: auto;
}

.formset-table{
  width: 100%;
  border-collapse: collapse;
}

.formset-table th,
.formset-table td{
  border: 1px solid var(--border);
  padding: 0.5rem;
  vertical-align: top;
}

.inline-formset-grid{
  display: grid;
  gap: 0.75rem;
}

.inline-formset-row{
  display: grid;
  grid-template-columns: 1fr 2fr auto auto auto;
  gap: 0.75rem;
  align-items: end;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 0.75rem;
  background: var(--card-bg);
}

.modal-form-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
}

.modal-form-card{
  width: min(680px, 100%);
  max-height: 90vh;
  overflow: auto;
}

.task-description-modal-card{
  width: 100%;
  max-width: 100%;
  padding: 1.25rem 1.25rem 1rem;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--card-border) 82%, rgba(255,255,255,.4) 18%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 94%, #fff 6%), color-mix(in srgb, var(--card-bg) 98%, #f5f8fb 2%));
  box-shadow:
    0 18px 48px rgba(15, 23, 42, .24),
    inset 0 1px 0 rgba(255,255,255,.34);
  box-sizing: border-box;
  overflow-x: hidden;
}

.modal-form-header{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.modal-form{
  margin-top: 12px;
}

.task-description-modal-form{
  margin-top: 1rem;
}

.task-description-modal-field{
  width: 100%;
  max-width: 100%;
  padding: .9rem;
  border: 1px solid color-mix(in srgb, var(--card-border) 80%, rgba(255,255,255,.3) 20%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card-bg) 96%, #f7fafc 4%);
  box-sizing: border-box;
  overflow-x: hidden;
}

.task-description-modal-field textarea{
  width: 100%;
  max-width: 100%;
  min-height: 14rem;
  resize: vertical;
  box-sizing: border-box;
  overflow-x: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.task-description-modal-field .ui-w-xl{
  max-width: 100%;
}

.ui-w-sm{ max-width: 160px; }
.ui-w-md{ max-width: 260px; }
.ui-w-lg{ max-width: 420px; }
.ui-w-xl{ max-width: 620px; }
.ui-w-full{ max-width: none; }

.dual-list-source{
  display: none !important;
}

.dual-list{
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  gap: 1rem;
  align-items: center;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card-bg) 97%, #fff 3%);
  padding: 0.75rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

.dual-list__panel{
  min-width: 0;
  display: grid;
  gap: 0.5rem;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-bg) 92%, #fff 8%);
  padding: 0.65rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.dual-list__panel--available{
  background: color-mix(in srgb, var(--card-bg) 92%, #f5f8fb 8%);
}

.dual-list__panel--selected{
  background: color-mix(in srgb, var(--card-bg) 90%, #eef8f2 10%);
}

.dual-list__title{
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.2rem 0.25rem;
  border-bottom: 1px solid var(--border);
}

.dual-list__search{
  max-width: none;
}

.dual-list__list{
  min-height: 12rem;
  max-width: none;
  margin-bottom: 0;
}

.dual-list__toolbar{
  display: grid;
  gap: 0.4rem;
  align-content: center;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-bg) 96%, #fff 4%);
  padding: 0.5rem;
  position: relative;
}

.dual-list__toolbar::before{
  content: "";
  position: absolute;
  inset: 8px auto 8px -10px;
  width: 1px;
  background: var(--border);
}

.dual-list__toolbar::after{
  content: "";
  position: absolute;
  inset: 8px -10px 8px auto;
  width: 1px;
  background: var(--border);
}

.dual-list__btn{
  min-width: 56px;
  padding: 6px 8px;
}

.filter-form{
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.filter-form__field{
  min-width: 0;
}

.filter-form__field--search input{
  min-width: 220px;
}

.filter-form__actions{
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.auth-form-shell{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 0% 0%, rgba(131,155,179,.18), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(55,68,85,.12), transparent 45%);
}

.auth-bg-art{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.auth-bg-logo-scene{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1400px;
}

.auth-bg-logo-scene::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(13, 39, 66, 0.14), transparent 52%),
    radial-gradient(circle at 50% 58%, rgba(131, 155, 179, 0.08), transparent 68%);
}

.auth-bg-logo-spin{
  position: relative;
  width: clamp(520px, 78vw, 1200px);
  aspect-ratio: 165 / 197;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  animation: authLogoSpin3d 7s linear infinite;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.12));
  opacity: 0.26;
}

.auth-bg-logo-spin::before,
.auth-bg-logo-spin::after{
  content: "";
  position: absolute;
  inset: 10% 10%;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 50%, rgba(131, 155, 179, 0.22), transparent 65%);
  transform: translateZ(-1px) scale(1.06);
  filter: blur(16px);
}

.auth-bg-logo-spin::after{
  inset: auto 6% -10% 6%;
  height: 22%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.18), transparent 72%);
  transform: rotateX(78deg) translateZ(-140px) scale(0.9);
  filter: blur(10px);
}

.auth-bg-logo-crop{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.auth-bg-logo-image{
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: none;
  object-position: left center;
  transform: translateX(0);
  filter:
    drop-shadow(0 0 8px rgba(131, 155, 179, 0.18))
    drop-shadow(0 10px 22px rgba(13, 39, 66, 0.16));
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.auth-form-card{
  width: min(460px, 100%);
  background: color-mix(in srgb, var(--card-bg) 88%, #fff 12%);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow:
    var(--card-shadow),
    0 18px 44px rgba(0, 0, 0, 0.14);
  padding: 1.25rem;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(4px);
}

.auth-form-logo{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 0.75rem;
}

.auth-form-card h2{
  margin-top: 0;
  text-align: center;
}

.auth-form-card .app-form{
  max-width: none;
  margin: 0;
}

.auth-form-card .form-grid{
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.auth-form-card .form-field--span-2{
  grid-column: auto;
}

.auth-form-card input,
.auth-form-card select,
.auth-form-card textarea{
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
}

.auth-form-card .form-actions{
  justify-content: stretch;
}

.auth-form-card .form-actions button{
  width: 100%;
}

@media (max-width: 640px){
  .auth-bg-logo-spin{
    width: clamp(360px, 108vw, 640px);
    opacity: 0.18;
    transform: translateY(-8%);
  }

  .auth-bg-logo-spin::after{
    inset: auto 2% -8% 2%;
    height: 18%;
  }
}

@media (prefers-reduced-motion: reduce){
  .auth-bg-logo-spin{
    animation: none;
    transform: rotateX(12deg) rotateY(-24deg);
  }
}

@keyframes authLogoSpin3d{
  0%{
    transform: rotateX(10deg) rotateY(0deg) rotateZ(-1deg) scale(1);
  }
  25%{
    transform: rotateX(12deg) rotateY(90deg) rotateZ(1deg) scale(1.02);
  }
  50%{
    transform: rotateX(10deg) rotateY(180deg) rotateZ(-1deg) scale(1);
  }
  75%{
    transform: rotateX(12deg) rotateY(270deg) rotateZ(1deg) scale(1.02);
  }
  100%{
    transform: rotateX(10deg) rotateY(360deg) rotateZ(-1deg) scale(1);
  }
}

.modal-form .dual-list{
  gap: 0.75rem;
}

.modal-form .dual-list__panel{
  padding: 0.5rem;
}

.modal-form .dual-list__list{
  min-height: 10rem;
}

@media (max-width: 860px){
  .form-grid,
  .form-grid--3{
    grid-template-columns: 1fr;
  }

  .form-field--span-2{
    grid-column: auto;
  }

  .inline-formset-row{
    grid-template-columns: 1fr;
  }

  .ui-w-sm,
  .ui-w-md,
  .ui-w-lg,
  .ui-w-xl{
    max-width: none;
  }

  .dual-list{
    grid-template-columns: 1fr;
    padding: 0.6rem;
  }

  .dual-list__toolbar{
    grid-template-columns: repeat(4, 1fr);
    align-content: stretch;
    padding: 0.4rem;
  }

  .dual-list__toolbar::before,
  .dual-list__toolbar::after{
    display: none;
  }
}