:root{
  --bg:#0b0d12;
  --card:#121624;
  --text:#e9ecf1;
  --muted:#aab3c5;
  --border: rgba(255,255,255,0.12);
  --ok: rgba(0,200,120,0.25);
  --bad: rgba(255,80,80,0.25);
  --topbar-bg: rgba(11,13,18,0.92);
  --field-bg: rgba(255,255,255,0.04);
  --table-head-bg: rgba(18,22,36,0.95);
  --table-row-index-bg: rgba(17, 24, 39, 0.94);
  --table-row-details-bg: rgba(17, 24, 39, 0.94);
  --cell-bg: rgba(0,0,0,0.12);
  --card-bg: rgba(18,22,36,0.65);
  --sheet-card-bg: rgba(18,22,36,0.45);
  --cell-read-bg: rgba(0,0,0,0.10);
  --details-col-w: 56px;
  --cf-green: rgba(52, 211, 153, 0.2);
  --cf-blue: rgba(59, 130, 246, 0.2);
  --cf-yellow: rgba(251, 191, 36, 0.2);
  --cf-red: rgba(239, 68, 68, 0.2);
  --cf-gray: rgba(107, 114, 128, 0.2);
}

:root[data-theme="light"]{
  --bg: #f4f8ff;
  --card: #ffffff;
  --text: #0f1b2d;
  --muted: #32445f;
  --border: rgba(24,33,51,0.18);
  --ok: rgba(0,160,90,0.18);
  --bad: rgba(210,60,60,0.18);
  --topbar-bg: rgba(246, 250, 255, 0.96);
  --field-bg: rgba(255,255,255,0.92);
  --table-head-bg: rgba(228, 237, 252, 0.96);
  --table-row-index-bg: #e5e7eb;
  --table-row-details-bg: #e5e7eb;
  --cell-bg: rgba(255,255,255,0.94);
  --card-bg: rgba(255,255,255,0.92);
  --sheet-card-bg: rgba(255,255,255,0.9);
  --cell-read-bg: rgba(255,255,255,0.94);
  --cf-green: rgba(52, 211, 153, 0.15);
  --cf-blue: rgba(59, 130, 246, 0.15);
  --cf-yellow: rgba(251, 191, 36, 0.15);
  --cf-red: rgba(239, 68, 68, 0.15);
  --cf-gray: rgba(107, 114, 128, 0.15);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Trebuchet MS","Segoe UI","Tahoma",sans-serif;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,0.12), transparent 18%),
    radial-gradient(circle at 82% 22%, rgba(52, 211, 153, 0.12), transparent 24%),
    linear-gradient(90deg, #5f84ad 0%, #789bc0 20%, #96b5d1 40%, #b3cbe0 60%, #c9daea 78%, #dce7f2 100%);
  color: var(--text);
  background-attachment: fixed;
}
:root[data-theme="light"] body{
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,0.18), transparent 18%),
    radial-gradient(circle at 84% 18%, rgba(52, 211, 153, 0.1), transparent 22%),
    linear-gradient(90deg, #6c92bb 0%, #87abc9 22%, #a5c2da 44%, #c2d7e8 66%, #d8e6f2 84%, #eef5fb 100%);
}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
h1{margin: 0 0 6px 0;}
h2{margin: 0 0 10px 0; font-size: 1.05rem;}
code{background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 8px;}

.container{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px clamp(12px, 2vw, 28px);
}
.topbar{
  position: sticky; top:0;
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 10;
  box-shadow: 0 14px 30px rgba(25, 48, 79, 0.2);
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

/* Default / light mode */
.beta-badge {
  color: #1d4ed8;
  background: rgba(29, 78, 216, 0.10);
  border: 1px solid rgba(29, 78, 216, 0.18);
}

/* Dark mode */
body.dark-mode .beta-badge,
[data-theme="dark"] .beta-badge {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.16);
  border: 1px solid rgba(96, 165, 250, 0.24);
}
.row{display:flex; align-items:center;}
.space-between{justify-content: space-between;}
.gap{gap:10px;}
.stack{display:flex; flex-direction:column; gap:10px;}
.muted{color: var(--muted); font-size:0.95rem}
.sheet-empty-state{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:18px 12px;
  flex-wrap:wrap;
  text-align:center;
}
.sheet-empty-state form{margin:0}
.brand{
  font-family: "Segoe UI Variable Display", "Sora", "Avenir Next", "Montserrat", "Segoe UI", sans-serif;
  font-weight: 900;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0.015em;
  margin-right: 10px;
  color: #3f7fcb;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.5),
    0 0 10px rgba(63,127,203,0.34),
    0 0 14px rgba(22,163,74,0.12);
}
.brand-smarter{
  color: #22c55e;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.45),
    0 0 10px rgba(34,197,94,0.34),
    0 0 18px rgba(134,239,172,0.2);
}
.pill{
  display:inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  font-size:0.85rem;
  color: var(--text);
}
.pill.small{font-size:0.75rem; padding:2px 6px; opacity:0.9;}
.comment-dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:999px;
  background:#ef4444;
  margin-left:4px;
  vertical-align:middle;
  flex: 0 0 auto;
}
.pill-v1{
  display:inline-block;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 800;
  color: #123f86;
  background: transparent;
  border: none;
  line-height: 1;
}
.pill-alpha{
  display:inline-block;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 800;
  color: #123f86;
  background: transparent;
  border: none;
  line-height: 1;
  text-shadow: none;
}
:root:not([data-theme="light"]) .pill-alpha{
  color: #9cb4d8;
  text-shadow: none;
}

.card{
  background: var(--card-bg);
  border:1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin: 14px 0;
}
.inline-disclosure{
  display: inline-block;
  margin-top: 10px;
}
.collapsible-card{
  padding-top: 10px;
}
.collapsible-card[open]{
  height: auto;
  min-height: 0;
}
.disclosure-btn{
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  padding: 9px 12px;
  font-size: 0.98rem;
  user-select: none;
}
.disclosure-btn:hover{
  background: rgba(255,255,255,0.07);
}
details > summary::-webkit-details-marker{
  display: none;
}
.disclosure-panel{
  margin-top: 10px;
  flex-wrap: wrap;
}
#column-tools .disclosure-panel{
  display: block;
  margin-top: 8px;
}
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.directory-nav{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}
.dir-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  padding: 8px 12px;
  font-size: 0.92rem;
}
.dir-pill:hover{text-decoration:none;}
.dir-pill.active{
  color: var(--text);
  background: rgba(83, 167, 255, 0.16);
  border-color: rgba(83, 167, 255, 0.5);
}
.sheet-card{
  display:flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border:1px solid var(--border);
  background: var(--sheet-card-bg);
}
.sheet-card-link{
  display:block;
  flex: 1;
}
.sheet-card-actions{
  display:flex;
  justify-content:flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.directory-table-wrap{
  padding: 0;
  overflow: visible;
}
.directory-sheet-table{
  width: 100%;
  min-width: 100%;
  table-layout: fixed;
  overflow: visible;
}
.directory-sheet-table th,
.directory-sheet-table td{
  padding: 10px 12px;
  overflow: visible;
}
.directory-sheet-table tbody tr:hover{
  background: rgba(83, 167, 255, 0.08);
}
.directory-owner{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.directory-owner-avatar{
  width:30px;
  height:30px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:#fff;
  font-size:0.85rem;
  font-weight:800;
  background:var(--avatar-color, #2563eb);
}
.directory-owner-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.directory-star-col{
  width: 72px;
}
.directory-actions-col{
  width: 160px;
}
.directory-star-cell,
.directory-actions-cell{
  position: relative;
}
.favorite-star-btn{
  min-width: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: #fbbf24;
  font-size: 1.05rem;
  line-height: 1;
}
.directory-sheet-link{
  color: var(--text);
  font-weight: 700;
}
.directory-actions-menu{
  position: relative;
  overflow: visible;
}
.directory-actions-menu summary{
  list-style: none;
}
.directory-actions-menu summary::-webkit-details-marker{
  display:none;
}
.directory-actions-trigger{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.06);
  cursor:pointer;
}
.directory-actions-panel{
  position:absolute;
  bottom: calc(100% + 8px);
  right:0;
  z-index: 60;
  min-width:220px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:14px;
  background: var(--card-bg);
  box-shadow: 0 20px 48px rgba(0,0,0,0.28);
}
.directory-sheet-table tbody,
.directory-sheet-table tr{
  overflow: visible;
}
.directory-action-item{
  display:block;
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  color: var(--text);
  text-decoration:none;
  text-align:left;
}
.directory-action-button{
  background: transparent;
  border: none;
}
.directory-action-divider{
  height:1px;
  margin:8px 4px;
  background: var(--border);
}
.directory-overlay[hidden]{
  display:none;
}
.directory-overlay{
  position:fixed;
  inset:0;
  z-index:1200;
}
.directory-overlay-backdrop{
  position:absolute;
  inset:0;
  background:rgba(8,12,20,0.24);
}
.directory-overlay-panel{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:min(360px, calc(100vw - 32px));
  border:1px solid var(--border);
  border-radius:18px;
  background: var(--card-bg);
  box-shadow: 0 28px 60px rgba(0,0,0,0.32);
  overflow:hidden;
}
.directory-overlay-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.directory-overlay-body{
  padding:12px;
}
.directory-overlay-close{
  background:transparent;
}
.sheet-title{
  font-weight: 750;
  margin-bottom: 6px;
  color: #45d483;
}
.sheet-page-title{
  color: #45d483;
}
input, select, textarea, button, .btn{
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--text);
  padding: 10px 12px;
  font-size: 1rem;
}
select{
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
select option{
  color: #0d1320;
  background: #eef3ff;
}
select option:checked{
  color: #ffffff;
  background: #2a5fb5;
}
textarea{min-height: 92px; resize: vertical;}
button{cursor:pointer;}
button.danger{border-color: rgba(255,80,80,0.35);}
.btn{display:inline-block;}
.theme-toggle{min-width: 102px;}
.alert{
  border:1px solid rgba(255,80,80,0.35);
  background: rgba(255,80,80,0.12);
  padding: 10px 12px;
  border-radius: 12px;
  margin: 10px 0;
  opacity: 1;
}
.alert.ok{
  border-color: rgba(0,200,120,0.35);
  background: rgba(0,200,120,0.12);
}

.table-wrap{overflow:auto; border:1px solid var(--border); border-radius: 16px;}
table{
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
}
table.gridtable th,
table.gridtable td{
  border-right: 2px solid var(--border);
}
table.gridtable th:last-child,
table.gridtable td:last-child{
  border-right: none;
}
th, td{
  border-bottom:2px solid rgba(255,255,255,0.11);
  border-right:2px solid rgba(255,255,255,0.10);
  padding: 6px 8px;
  vertical-align: middle;
}
tbody td{
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.11);
}
th:last-child, td:last-child{border-right: none;}
th{
  position: sticky; top: 0;
  background: var(--table-head-bg);
  text-align:left;
  font-weight: 700;
  position: sticky;
}
.gridtable .resizable-col-header{
  position: sticky;
  padding-right: 16px;
  cursor: default;
}
.col-resize-handle{
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 4;
  pointer-events: auto;
}
.gridtable col.sheet-col{
  width: 220px;
}
.col-resize-handle::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgba(255,255,255,0.22);
}
.is-col-resizing,
.is-col-resizing *{
  cursor: col-resize !important;
  user-select: none !important;
}
.is-row-resizing,
.is-row-resizing *{
  cursor: row-resize !important;
  user-select: none !important;
}
.resizable-col-header:hover .col-resize-handle::after{
  background: rgba(83,167,255,0.7);
}
.row-index{
  width: 56px;
  min-width: 56px;
  text-align: center;
  position: sticky;
  left: 0;
  z-index: 20;
  background: var(--table-row-index-bg);
  overflow: visible;
}
.row-resize-handle{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 12px;
  cursor: row-resize;
  z-index: 4;
  opacity: 0.95;
}
.row-resize-handle::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: rgba(83,167,255,0.85);
}
.row-index:hover .row-resize-handle::after{
  background: rgba(83,167,255,0.95);
}
.row-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  font-size: 0.78rem;
}
.row-details-col{
  width: var(--details-col-w);
  min-width: var(--details-col-w);
}
.row-details{
  width: var(--details-col-w);
  min-width: var(--details-col-w);
  background: var(--table-row-details-bg);
  position: relative;
  overflow: visible;
  z-index: 40;
  isolation: isolate;
}
.row-details.is-sticky,
.row-details-col.is-sticky{
  position: sticky;
  z-index: 45;
}
.row-details-col.is-sticky{
  background: var(--table-row-details-bg);
  z-index: 46;
}
.gridtable .col-hidden{
  display: none;
}
.gridtable .col-frozen{
  position: sticky;
  z-index: 12;
}
.gridtable th.col-frozen{
  z-index: 16;
}
.gridtable td.col-locked > .cell,
.gridtable td.col-locked > .cell-read{
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3);
}
.gridtable td.col-locked > .cell{
  opacity: 0.88;
}
.gridtable th.is-column-target{
  box-shadow: inset 0 0 0 2px rgba(96,165,250,0.6);
}
.gridtable td{
  position: relative;
  z-index: 0;
  overflow: visible;
}
.row-details details{
  position: relative;
}
.row-details details[open]{
  z-index: 300;
}
.row-details.is-open{
  z-index: 320;
}
.row-details.is-open details,
.row-details.is-open details[open]{
  z-index: 321;
}
.row-details.is-open details[open] > .detail-section{
  position: static;
  z-index: auto;
}
body.row-details-modal-open{
  overflow: hidden;
}
.row-details-modal[hidden]{
  display: none;
}
.row-details-modal{
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
}
.row-details-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 18, 0.68);
}
.row-details-modal-panel{
  position: relative;
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 24px 56px rgba(0,0,0,0.5);
  overflow: hidden;
}
.row-details-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}
.row-details-modal-close{
  padding: 7px 10px;
  min-height: 0;
}
.row-details-modal-sections{
  padding: 16px 18px 18px;
  max-height: calc(100vh - 120px);
  overflow: auto;
  display: grid;
  gap: 18px;
}
.row-menu-popout-panel{
  width: min(360px, calc(100vw - 28px)) !important;
  max-width: 360px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(92, 144, 255, 0.55) !important;
  background: #0f1a33 !important;
  box-shadow: 0 28px 80px rgba(4, 10, 24, 0.48) !important;
}
.row-menu-popout-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px !important;
  background: #121d37 !important;
  border-bottom: 1px solid rgba(140, 177, 255, 0.18) !important;
}
.row-menu-popout-header .row-details-modal-title{
  color: #d7e8ff !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
}
.row-menu-popout-header .row-details-modal-close{
  border-radius: 999px !important;
  border: 1px solid rgba(145, 240, 189, 0.55) !important;
  background: #d9f6e4 !important;
  color: #14532d !important;
  padding: 6px 12px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}
.row-menu-popout-sections{
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  background: #eaf2ff !important;
  max-height: calc(100vh - 120px) !important;
  overflow: auto !important;
}
.row-menu-popout-group{
  display: grid;
  gap: 8px;
}
.row-menu-popout-group + .row-menu-popout-group{
  border-top: 1px solid rgba(114, 149, 220, 0.28);
  padding-top: 10px;
}
.row-menu-popout-group-title{
  margin: 0;
  color: #274eb7;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.row-menu-popout-btn{
  display: block;
  width: 100%;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid rgba(131, 175, 255, 0.9);
  background: #d6e6ff;
  color: #2c4ea3;
  font: 500 0.76rem/1.1 "Segoe UI", Arial, sans-serif;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}
.row-menu-popout-btn:hover:not(:disabled){
  background: #c8ddff;
}
.row-menu-popout-btn:disabled{
  color: #8aa2d8;
  border-color: rgba(143, 174, 228, 0.55);
  background: #dde8fb;
}
.row-menu-popout-btn-danger{
  border-color: rgba(245, 145, 145, 0.9);
  background: #ffdede;
  color: #c03b3b;
}
.row-menu-popout-btn-danger:hover:not(:disabled){
  background: #ffd2d2;
}

#rowActionsModal [data-row-modal-action="focus-row"]{
  display: none !important;
}

.row-menu-popout-panel{
  background: #0f1a33 !important;
  color: #d7e8ff !important;
}

.row-menu-popout-header{
  background: #121d37 !important;
  border-bottom-color: rgba(140, 177, 255, 0.18) !important;
}

.row-menu-popout-sections{
  background: #eaf2ff !important;
}

.row-menu-popout-group-title{
  color: #274eb7 !important;
}

.row-menu-popout-btn,
.row-menu-popout-btn:visited{
  background: #d6e6ff !important;
  color: #2c4ea3 !important;
  border-color: rgba(131, 175, 255, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65) !important;
}

.row-menu-popout-btn:hover:not(:disabled){
  background: #c8ddff !important;
  color: #24458e !important;
}

.row-menu-popout-btn:disabled{
  color: #8aa2d8 !important;
  border-color: rgba(143, 174, 228, 0.55) !important;
  background: #dde8fb !important;
}

.row-menu-popout-btn-danger{
  border-color: rgba(245, 145, 145, 0.9) !important;
  background: #ffdede !important;
  color: #c03b3b !important;
}

.row-menu-popout-btn-danger:hover:not(:disabled){
  background: #ffd2d2 !important;
  color: #ad2f2f !important;
}

.row-menu-popout-panel [data-row-menu-action="focus-row"]{
  display: none !important;
}

:root[data-theme="light"] .row-menu-popout-panel,
body.theme-light .row-menu-popout-panel{
  background: #0f1a33 !important;
  color: #d7e8ff !important;
}

:root[data-theme="light"] .row-menu-popout-header,
body.theme-light .row-menu-popout-header{
  background: #121d37 !important;
  border-bottom-color: rgba(140, 177, 255, 0.18) !important;
}

:root[data-theme="light"] .row-menu-popout-sections,
body.theme-light .row-menu-popout-sections{
  background: #eaf2ff !important;
}

:root[data-theme="light"] .row-menu-popout-group-title,
body.theme-light .row-menu-popout-group-title{
  color: #274eb7 !important;
}

:root[data-theme="light"] .row-menu-popout-btn,
:root[data-theme="light"] .row-menu-popout-btn:visited,
body.theme-light .row-menu-popout-btn,
body.theme-light .row-menu-popout-btn:visited{
  background: #d6e6ff !important;
  color: #2c4ea3 !important;
  border-color: rgba(131, 175, 255, 0.9) !important;
}

:root[data-theme="light"] .row-menu-popout-btn:hover:not(:disabled),
body.theme-light .row-menu-popout-btn:hover:not(:disabled){
  background: #c8ddff !important;
  color: #24458e !important;
}

:root[data-theme="light"] .row-menu-popout-btn:disabled,
body.theme-light .row-menu-popout-btn:disabled{
  color: #8aa2d8 !important;
  border-color: rgba(143, 174, 228, 0.55) !important;
  background: #dde8fb !important;
}

:root[data-theme="light"] .row-menu-popout-btn-danger,
body.theme-light .row-menu-popout-btn-danger{
  border-color: rgba(245, 145, 145, 0.9) !important;
  background: #ffdede !important;
  color: #c03b3b !important;
}

:root[data-theme="light"] .row-menu-popout-btn-danger:hover:not(:disabled),
body.theme-light .row-menu-popout-btn-danger:hover:not(:disabled){
  background: #ffd2d2 !important;
  color: #ad2f2f !important;
}

/* light-theme row details modal / popout blue styling */
:root[data-theme="light"] .row-details-modal-panel,
body.theme-light .row-details-modal-panel{
  background: #e5f2ff !important;
  border-color: rgba(102, 159, 255, 0.35) !important;
  box-shadow: 0 20px 42px rgba(30, 70, 150, 0.32) !important;
}
:root[data-theme="light"] .row-details-modal-header,
body.theme-light .row-details-modal-header{
  background: rgba(190, 215, 255, 0.35) !important;
  border-bottom-color: rgba(120, 171, 255, 0.5) !important;
}
:root[data-theme="light"] .row-details-modal-close,
body.theme-light .row-details-modal-close{
  background: #cee3ff !important;
  color: #13354f !important;
  border-color: rgba(108, 162, 243, 0.5) !important;
}
:root[data-theme="light"] .row-menu-popout-panel,
body.theme-light .row-menu-popout-panel{
  background: #f2f7ff !important;
  border-color: rgba(120, 168, 236, 0.6) !important;
  color: #1a3c78 !important;
}
:root[data-theme="light"] .row-menu-popout-header,
body.theme-light .row-menu-popout-header{
  background: #d5e7ff !important;
}
:root[data-theme="light"] .row-menu-popout-sections,
body.theme-light .row-menu-popout-sections{
  background: #f7fbff !important;
}
:root[data-theme="light"] .attach,
body.theme-light .attach {
  background: rgba(211, 233, 255, 0.72) !important;
  color: #10395e !important;
  border-color: rgba(101, 143, 196, 0.7) !important;
}
:root[data-theme="light"] .comment-item,
body.theme-light .comment-item {
  background: rgba(217, 234, 255, 0.82) !important;
  border-color: rgba(132, 170, 227, 0.45) !important;
}

:root[data-theme="dark"] .row-menu-popout-panel,
body.theme-dark .row-menu-popout-panel{
  background: #0c1427 !important;
  color: #dbe7ff !important;
  border-color: rgba(90, 121, 190, 0.52) !important;
  box-shadow: 0 28px 84px rgba(0, 0, 0, 0.58) !important;
}

:root[data-theme="dark"] .row-menu-popout-header,
body.theme-dark .row-menu-popout-header{
  background: #0f1830 !important;
  border-bottom-color: rgba(108, 141, 214, 0.2) !important;
}

:root[data-theme="dark"] .row-menu-popout-header .row-details-modal-title,
body.theme-dark .row-menu-popout-header .row-details-modal-title{
  color: #dbe7ff !important;
}

:root[data-theme="dark"] .row-menu-popout-header .row-details-modal-close,
body.theme-dark .row-menu-popout-header .row-details-modal-close{
  background: #173321 !important;
  color: #c9f4d8 !important;
  border-color: rgba(108, 217, 154, 0.42) !important;
}

:root[data-theme="dark"] .row-menu-popout-sections,
body.theme-dark .row-menu-popout-sections{
  background: #121c33 !important;
}

:root[data-theme="dark"] .row-menu-popout-group + .row-menu-popout-group,
body.theme-dark .row-menu-popout-group + .row-menu-popout-group{
  border-top-color: rgba(85, 114, 177, 0.35) !important;
}

:root[data-theme="dark"] .row-menu-popout-group-title,
body.theme-dark .row-menu-popout-group-title{
  color: #8db0ff !important;
}

:root[data-theme="dark"] .row-menu-popout-btn,
:root[data-theme="dark"] .row-menu-popout-btn:visited,
body.theme-dark .row-menu-popout-btn,
body.theme-dark .row-menu-popout-btn:visited{
  background: #223354 !important;
  color: #edf4ff !important;
  border-color: rgba(102, 138, 214, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

:root[data-theme="dark"] .row-menu-popout-btn:hover:not(:disabled),
body.theme-dark .row-menu-popout-btn:hover:not(:disabled){
  background: #29406a !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] .row-menu-popout-btn:disabled,
body.theme-dark .row-menu-popout-btn:disabled{
  background: #1a2741 !important;
  color: #7d93c2 !important;
  border-color: rgba(74, 99, 150, 0.52) !important;
}

:root[data-theme="dark"] .row-menu-popout-btn-danger,
body.theme-dark .row-menu-popout-btn-danger{
  background: #4a2328 !important;
  color: #ffced2 !important;
  border-color: rgba(214, 104, 118, 0.78) !important;
}

:root[data-theme="dark"] .row-menu-popout-btn-danger:hover:not(:disabled),
body.theme-dark .row-menu-popout-btn-danger:hover:not(:disabled){
  background: #5a2a31 !important;
  color: #ffe4e6 !important;
}
.row-details-modal-sections .detail-section:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.row-details details summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  line-height: 1;
}
.row-details details summary::-webkit-details-marker{
  display: none;
}
.row-details-summary{
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 10px;
}
.details-chip{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  border: none;
  background: transparent;
}
.row-details-summary:hover{
  border-color: rgba(126,182,255,0.38);
  background: rgba(20,49,90,0.28);
}
.row-action-menu-anchor{
  position: relative;
  z-index: 500;
  overflow: visible;
}
.row-menu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  padding: 6px 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(20, 24, 34, 0.98);
  box-shadow: 0 24px 44px rgba(0,0,0,0.42);
  z-index: 5000;
  isolation: isolate;
}
.row-menu[hidden]{
  display: none !important;
}
.row-menu.is-open{
  display: block;
}
.row-menu.row-menu-floating{
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 25000 !important;
}
.row-menu button,
.row-menu a{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.row-menu button:hover,
.row-menu a:hover{
  background: rgba(96, 165, 250, 0.16);
}
:root[data-theme="light"] .row-menu{
  border-color: rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 18px 36px rgba(15,23,42,0.16);
}
.details-icon{
  font-size: 1.2rem;
  line-height: 1;
}
.details-count{
  min-width: 0.6em;
  text-align: center;
}
.detail-section{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.12);
}
.detail-section h4{
  margin: 0 0 8px 0;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
td .cell{
  width: 100%;
  border: 1px solid rgba(255,255,255,0.14);
  background: var(--cell-bg);
  border-radius: 4px;
  padding: 4px 6px;
  min-height: 28px;
  font-size: 0.92rem;
}
.gridtable td[data-col-id]{
  position: relative;
}
.gridtable td[data-col-id] > .cell,
.gridtable td[data-col-id] > .cell-read{
  position: relative;
  z-index: 1;
}
.gridtable td.cell-range-selected::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(147, 197, 253, 0.08);
  z-index: 0;
}
.gridtable td.cell-range-selected::after{
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-color: transparent;
  border-style: solid;
  border-width: 0;
  z-index: 2;
}
.gridtable td.cell-range-top::after{ border-top-width: 2px; }
.gridtable td.cell-range-right::after{ border-right-width: 2px; }
.gridtable td.cell-range-bottom::after{ border-bottom-width: 2px; }
.gridtable td.cell-range-left::after{ border-left-width: 2px; }
.gridtable td.cell-range-top::after,
.gridtable td.cell-range-right::after,
.gridtable td.cell-range-bottom::after,
.gridtable td.cell-range-left::after{
  border-color: #60a5fa;
}
.gridtable td.cell-range-anchor::after{
  background-image: radial-gradient(circle at calc(100% - 3px) calc(100% - 3px), #60a5fa 0 3px, transparent 3.2px);
  background-repeat: no-repeat;
}
body.is-cell-range-selecting,
body.is-cell-range-selecting .gridtable td,
body.is-cell-range-selecting .gridtable td .cell{
  user-select: none;
  -webkit-user-select: none;
}
td textarea.cell-text{
  min-height: 34px;
  max-height: calc(1.25em * 5 + 20px);
  line-height: 1.25;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
  resize: none;
  padding: 4px 6px !important;
  box-sizing: border-box;
}
td .cell-rich{
  min-height: 34px;
  max-height: calc(1.25em * 5 + 24px);
  line-height: 1.25;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
  outline: none;
  padding: 4px 6px !important;
  box-sizing: border-box;
}
body:not(.theme-light) td input.cell[type="date"]{
  color-scheme: dark;
}
body.theme-light td input.cell[type="date"]{
  color-scheme: light;
}
td input.cell-date::-webkit-calendar-picker-indicator{
  opacity: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
td input.cell-date.date-empty{
  color: transparent;
  -webkit-text-fill-color: transparent;
}
td input.cell-date.date-empty::-webkit-datetime-edit{
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0;
}
td input.cell-date.date-empty::-webkit-datetime-edit-fields-wrapper{
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0;
}
td input.cell-date.date-empty:focus{
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}
td input.cell-date.date-empty:focus::-webkit-datetime-edit{
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  opacity: 1;
}
td .cell[data-ok="1"]{ background: var(--ok); }
td .cell[data-ok="0"]{ background: var(--bad); }

.cell-read{
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--cell-read-bg);
  min-height: 28px;
  font-size: 0.92rem;
}
.cell-read-rich ul,
.cell-read-rich ol{
  margin: 0 0 0 18px;
  padding: 0;
}
.cell-read-rich p,
.cell-read-rich div{
  margin: 0;
}

.attach-list{display:flex; flex-direction:column; gap:10px; margin-bottom:14px; max-height:260px; overflow:auto; padding-right:4px;}
.attach{display:block; flex:1; padding: 10px 12px; border:1px solid rgba(255,255,255,0.10); border-radius: 12px; background: rgba(0,0,0,0.08); line-height:1.45; word-break:break-word;}
.attach-form{display:block;}
.attach-uploader{display:grid; gap:12px;}
.attach-upload-controls{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.attach-form input[type=file]{padding: 8px 10px;}
.column-admin{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 0;
}
.column-create-form{
  flex-wrap: wrap;
}
.dropdown-options-wrap{
  width: 100%;
}
.dropdown-options-input{
  width: 100%;
  min-height: 84px;
}
.column-admin-row{
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap:10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.column-admin-row:last-child{
  margin-bottom: 0;
}
.column-admin-row form.row{
  flex: 0 1 560px;
  min-width: 320px;
}
.column-row-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.column-state-btn{
  min-height: 0;
  padding: 7px 10px;
}
.column-state-btn.is-active{
  border-color: rgba(96,165,250,0.56);
  background: rgba(59,130,246,0.16);
}
.column-admin-row.is-hidden{
  opacity: 0.72;
}
.column-admin-row.is-hidden form.row{
  opacity: 0.84;
}
.column-admin-row.is-locked .column-state-btn[data-column-action="lock"],
.column-admin-row.is-frozen .column-state-btn[data-column-action="freeze"],
.column-admin-row.is-hidden .column-state-btn[data-column-action="hide"]{
  border-color: rgba(96,165,250,0.56);
  background: rgba(59,130,246,0.16);
}
.comment-list{display:flex; flex-direction:column; gap:12px; margin-bottom:14px; max-height:320px; overflow:auto; padding-right:4px;}
.comment-item{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
  padding: 12px 14px;
}
.comment-meta{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap:8px;
  font-size: 0.82rem;
  margin-bottom: 5px;
}
.comment-body{
  white-space: pre-wrap;
  line-height: 1.5;
}
.comment-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:10px;}
.comment-action-btn{padding:8px 12px; min-height:0;}
.comment-form{display:grid; gap:12px;}
.comment-form textarea{
  min-height: 140px;
  width:100%;
  resize:vertical;
  padding:14px;
}
.comment-submit-btn{justify-self:start; padding:10px 18px;}
.sheet-nav{
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.sheet-zoom-controls{
  align-items: center;
}
.sheet-zoom-controls .pill{
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sheet-zoom-controls #zoomOutBtn,
.sheet-zoom-controls #zoomInBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  min-width: 28px;
  height: 22px;
  padding: 2px 8px;
  box-sizing: border-box;
}
.sheet-zoom-controls .zoom-glyph{
  display:inline-block;
  transform:scale(1.32);
  transform-origin:center center;
  line-height:1;
}
.fmt-toolbar{
  display:inline-flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
  justify-content:flex-end;
}
.fmt-toolbar .fmt-gap{
  display:inline-block;
  width:20px;
  min-width:20px;
}

  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:11px;
  border:1px solid #1d7f4f;
  background:#103b27;
  color:#88efba;
}
.fmt-toolbar button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.fmt-toolbar button:hover,
.fmt-toolbar .ghost:hover{
  background:#124a32;
}
.fmt-toolbar button:active,
.fmt-toolbar button.is-active{
  background:#0f5c38;
}
.fmt-toolbar .fmt-label{
  font-size:11px;
  opacity:.9;
}
.fmt-toolbar .fmt-highlight-chip{
  display:inline-block;
  background:#fde047;
  color:#1f2937;
  padding:1px 4px;
  border-radius:3px;
  font-weight:700;
}
.fmt-toolbar .fmt-strike-icon{
  position:relative;
  display:inline-block;
  font-size:14px;
  line-height:1;
  letter-spacing:-0.35px;
}
.fmt-toolbar .fmt-strike-icon::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1.2px;
  background:currentColor;
  transform:translateY(-50%);
  opacity:.95;
}
.fmt-toolbar .fmt-align-icon{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  width:14px;
}
.fmt-toolbar .fmt-align-icon span{
  display:block;
  height:2px;
  border-radius:2px;
  background:currentColor;
}
.fmt-toolbar .fmt-align-icon span:nth-child(1){width:14px}
.fmt-toolbar .fmt-align-icon span:nth-child(2){width:10px}
.fmt-toolbar .fmt-align-icon span:nth-child(3){width:7px}
.fmt-toolbar .fmt-align-center{align-items:center}

.fmt-toolbar #fmt-align-left,
.fmt-toolbar #fmt-align-center,
.fmt-toolbar #fmt-align-right{
  min-width:28px;
  padding:3px 6px;
}
.fmt-toolbar #fmt-strike{
  min-width:28px;
  padding:3px 6px;
}
.fmt-toolbar .fmt-align-icon{line-height:0}
.fmt-toolbar .fmt-font-size{
  height:24px;
  padding:1px 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.25);
  font-size:11px;
}
.fmt-toolbar .fmt-color-picker{
  width:34px;
  height:24px;
  padding:1px 3px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.25);
  cursor:pointer;
}
.fmt-toolbar .fmt-color-picker::-webkit-color-swatch-wrapper{padding:0}
.fmt-toolbar .fmt-color-picker::-webkit-color-swatch{border:none;border-radius:999px}
.fmt-toolbar .fmt-color-picker::-moz-color-swatch{border:none;border-radius:999px}
.table-wrap{
  margin-top: 8px;
}

.gridtable td.cf-due-soon{
  background: rgba(255, 220, 90, 0.28);
}

.gridtable td.cf-due-urgent{
  background: rgba(255, 90, 90, 0.30);
}

.gridtable td.cf-status-complete{
  background: rgba(90, 210, 120, 0.28);
}

.gridtable td.cf-needs-attention{
  background: rgba(255, 224, 102, 0.38);
}

.gridtable tr.row-complete td{
  background: rgba(86, 190, 104, 0.24);
}

.gridtable tr.row-complete td.row-index{
  background: rgba(74, 168, 96, 0.40);
}

.gridtable tr.row-complete td .cell,
.gridtable tr.row-complete td .cell-read{
  background: rgba(86, 190, 104, 0.34);
  border-color: rgba(74, 168, 96, 0.55);
}

.gridtable td[data-manual-fill="1"] .cell,
.gridtable td[data-manual-fill="1"] .cell-read,
.gridtable td.cf-due-soon .cell,
.gridtable td.cf-due-soon .cell-read,
.gridtable td.cf-due-urgent .cell,
.gridtable td.cf-due-urgent .cell-read,
.gridtable td.cf-status-complete .cell,
.gridtable td.cf-status-complete .cell-read,
.gridtable td.cf-needs-attention .cell,
.gridtable td.cf-needs-attention .cell-read,
.gridtable tr.row-complete td .cell,
.gridtable tr.row-complete td .cell-read{
  background: inherit !important;
  background-color: inherit !important;
}

.gridtable td[data-manual-fill="1"] .cell,
.gridtable td.cf-due-soon .cell,
.gridtable td.cf-due-urgent .cell,
.gridtable td.cf-status-complete .cell,
.gridtable td.cf-needs-attention .cell,
.gridtable tr.row-complete td .cell{
  border-color: rgba(255,255,255,0.24) !important;
}

:root[data-theme="light"] .gridtable td.cf-due-soon{
  background: rgba(255, 211, 76, 0.48);
}

:root[data-theme="light"] .gridtable td.cf-due-urgent{
  background: rgba(248, 101, 101, 0.42);
}

:root[data-theme="light"] .gridtable td.cf-status-complete{
  background: rgba(121, 214, 128, 0.45);
}

:root[data-theme="light"] .gridtable td.cf-needs-attention{
  background: rgba(255, 214, 92, 0.58);
}
:root[data-theme="light"] .gridtable td.cell-range-selected::before{
  background: rgba(96, 165, 250, 0.06);
}

:root[data-theme="light"] .gridtable tr.row-complete td{
  background: rgba(102, 198, 120, 0.35);
}

:root[data-theme="light"] .gridtable tr.row-complete td.row-index{
  background: rgba(82, 180, 104, 0.45);
}

:root[data-theme="light"] .gridtable tr.row-complete td .cell,
:root[data-theme="light"] .gridtable tr.row-complete td .cell-read{
  background: inherit !important;
  background-color: inherit !important;
  border-color: rgba(82, 180, 104, 0.62);
}

:root[data-theme="light"] .gridtable td[data-manual-fill="1"] .cell,
:root[data-theme="light"] .gridtable td.cf-due-soon .cell,
:root[data-theme="light"] .gridtable td.cf-due-urgent .cell,
:root[data-theme="light"] .gridtable td.cf-status-complete .cell,
:root[data-theme="light"] .gridtable td.cf-needs-attention .cell,
:root[data-theme="light"] .gridtable tr.row-complete td .cell{
  border-color: rgba(24,33,51,0.22) !important;
}

table.simple{min-width: unset;}
table.simple th{position: static;}
table.simple td, table.simple th{padding: 9px 10px;}

:root[data-theme="light"] .pill{
  background: rgba(24,33,51,0.06);
  border-color: rgba(24,33,51,0.16);
}

:root[data-theme="light"] code{
  background: rgba(24,33,51,0.08);
}

:root[data-theme="light"] th,
:root[data-theme="light"] td{
  border-bottom: 1px solid rgba(24,33,51,0.12);
  border-right: 1px solid rgba(24,33,51,0.11);
}
:root[data-theme="light"] tbody td{
  box-shadow: inset 0 -1px 0 rgba(24,33,51,0.12);
}

:root[data-theme="light"] .row-number{
  border-color: rgba(24,33,51,0.16);
  background: rgba(24,33,51,0.06);
}

:root[data-theme="light"] td .cell{
  border-color: rgba(24,33,51,0.22);
}

:root[data-theme="light"] td input.cell[type="date"]{
  color-scheme: light;
}
:root[data-theme="light"] td input.cell-date.date-empty:focus{
  color: #182133;
  -webkit-text-fill-color: #182133;
}
:root[data-theme="light"] td input.cell-date.date-empty:focus::-webkit-datetime-edit{
  color: #182133;
  -webkit-text-fill-color: #182133;
  opacity: 1;
}
/* Keep empty date inputs blank in light theme despite later generic cell color rules. */
:root[data-theme="light"] td input.cell-date.date-empty{
  color: transparent;
  -webkit-text-fill-color: transparent;
}
:root[data-theme="light"] td input.cell-date.date-empty::-webkit-datetime-edit{
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0;
}
:root[data-theme="light"] td input.cell-date.date-empty::-webkit-datetime-edit-fields-wrapper{
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0;
}
body.theme-light td input.cell-date.date-empty{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
body.theme-light td input.cell-date.date-empty::-webkit-datetime-edit{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 0;
}
body.theme-light td input.cell-date.date-empty::-webkit-datetime-edit-fields-wrapper{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 0;
}
body.theme-light td input.cell-date.date-empty:focus{
  color: #182133 !important;
  -webkit-text-fill-color: #182133 !important;
}
body.theme-light td input.cell-date.date-empty:focus::-webkit-datetime-edit{
  color: #182133 !important;
  -webkit-text-fill-color: #182133 !important;
  opacity: 1;
}
body.theme-light td input.cell-date::-webkit-calendar-picker-indicator{
  opacity: 1;
}
body.theme-light .gridtable tbody td input.cell.cell-date::-webkit-calendar-picker-indicator{
  opacity: 0 !important;
}
body.theme-light td input.cell[type="date"]{
  background-image: none;
  padding-right: 10px;
}
:root[data-theme="light"] .fmt-toolbar button,
:root[data-theme="light"] .fmt-toolbar .ghost{
  border-color:#1e3a8a;
  background:#dbeafe;
  color:#1e3a8a;
}
:root[data-theme="light"] .fmt-toolbar button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
:root[data-theme="light"] .fmt-toolbar .menu-panel button.menu-item{
  display:flex;
  justify-content:flex-start;
  background:transparent;
  color:#182133;
  border-color:transparent;
  box-shadow:none;
}
.fmt-toolbar button:hover,
:root[data-theme="light"] .fmt-toolbar .ghost:hover{
  background:#bfdbfe;
}
:root[data-theme="light"] .fmt-toolbar .menu-panel button.menu-item:hover{
  background:rgba(83,167,255,0.14);
  color:#182133;
  border-color:transparent;
}
:root[data-theme="light"] .fmt-toolbar .menu-panel button.menu-item:active,
:root[data-theme="light"] .fmt-toolbar .menu-panel button.menu-item.is-active{
  background:rgba(83,167,255,0.18);
  color:#182133;
  border-color:transparent;
}
:root[data-theme="light"] .fmt-toolbar #fmt-undo,
:root[data-theme="light"] .fmt-toolbar #fmt-redo{
  color:#1e3a8a;
  border-color:#1e3a8a;
  background:#dbeafe;
  box-shadow:none;
}
:root[data-theme="light"] .fmt-toolbar #fmt-undo:hover,
:root[data-theme="light"] .fmt-toolbar #fmt-redo:hover{
  background:#bfdbfe;
  border-color:#1e40af;
  color:#1e3a8a;
  box-shadow:none;
}
:root[data-theme="light"] .attach{
  border-color: rgba(24,33,51,0.15);
  background: rgba(255,255,255,0.9);
}

:root[data-theme="light"] .comment-item{
  border-color: rgba(24,33,51,0.15);
  background: rgba(255,255,255,0.9);
}

:root[data-theme="light"] .detail-section{
  border-top-color: rgba(24,33,51,0.18);
}

body.theme-light{
  color: #182133;
  background:
    radial-gradient(circle at 8% -28%, rgba(62, 112, 188, 0.5), transparent 52%),
    radial-gradient(circle at 92% -24%, rgba(34, 152, 112, 0.34), transparent 45%),
    linear-gradient(180deg, #d2dff4, #bfd2ee);
}

body.theme-light .topbar{background: rgba(246, 250, 255, 0.96);}
body.theme-light .card{background: rgba(255,255,255,0.92);}
body.theme-light .sheet-card{background: rgba(255,255,255,0.9);}
body.theme-light .directory-sheet-table th,
body.theme-light .directory-sheet-table td{
  border-bottom-color: rgba(30,58,138,0.18);
}
body.theme-light input,
body.theme-light select,
body.theme-light textarea,
body.theme-light button,
body.theme-light .btn{
  color: #182133;
  background: rgba(255,255,255,0.92);
  border-color: rgba(24,33,51,0.18);
}
body.theme-light th{background: rgba(228, 237, 252, 0.96);}
body.theme-light .row-index{background: var(--table-row-index-bg) !important;}
body.theme-light .row-details{background: var(--table-row-details-bg) !important;}
body.theme-light .details-chip{
  background: transparent;
  border-color: transparent;
}
body.theme-light .row-details-summary{
  background: transparent;
  border-color: transparent;
  color: inherit;
  box-shadow: none;
  filter: none;
}
body.theme-light .row-details-summary:hover{
  border-color: rgba(30,58,138,0.35);
  background: rgba(219,234,254,0.45);
}
body.theme-light .cell-read,
body.theme-light td .cell{background: rgba(255,255,255,0.94);}
tbody td input.cell.cell-date[type="date"]{
  background-color: transparent !important;
}
body.theme-light tbody td input.cell.cell-date[type="date"]{
  background-image: none !important;
  padding-right: 10px !important;
}
.gridtable tbody td select.cell,
.gridtable tbody td input.cell.cell-date{
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
.gridtable tbody td select.cell{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none !important;
  padding-right: 10px !important;
}
body:not(.theme-light) .gridtable tbody td select.cell option{
  color: #ebedf0 !important;
  background-color: #0d1117 !important;
  -webkit-text-fill-color: #ebedf0;
}
.gridtable tbody td input.cell.cell-date{
  background-image: none !important;
  padding-right: 10px !important;
}
body:not(.theme-light) .gridtable tbody td input.cell.cell-date{
  color-scheme: dark;
  color: #ebedf0 !important;
  -webkit-text-fill-color: #ebedf0;
}
body.theme-light .gridtable tbody td input.cell.cell-date{
  color-scheme: light;
  color: #112338 !important;
  -webkit-text-fill-color: #112338;
}
.gridtable tbody td input.cell.cell-date::-webkit-calendar-picker-indicator{
  opacity: 0 !important;
  width: 18px !important;
  min-width: 18px !important;
  cursor: pointer;
}
.gridtable tbody td select.cell:focus{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23ffffff'%3E%3Cpath d='M2.2 4.2 6 8l3.8-3.8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 12px 12px !important;
  padding-right: 26px !important;
}
.gridtable tbody td input.cell.cell-date:focus{
  padding-right: 30px !important;
}
body:not(.theme-light) .gridtable tbody td input.cell.cell-date:focus{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 16px 16px !important;
}
body.theme-light .gridtable tbody td select.cell:focus{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23182333'%3E%3Cpath d='M2.2 4.2 6 8l3.8-3.8'/%3E%3C/svg%3E") !important;
}
body.theme-light .gridtable tbody td input.cell.cell-date:focus{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 16px 16px !important;
}
body.theme-light .sheet-page-title{color: #0e4f9c;}
body.theme-light .sheet-title{color: #0e4f9c;}
body.theme-light .sheet-role-copy{color:#1e2f46;}

/* Sheet header toolbar refresh */
.sheet-top{
  padding: 12px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sheet-top-main{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
}
.sheet-top-copy{
  min-width: 0;
  flex: 0 1 auto;
}
.sheet-top-copy-inline{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}
.sheet-top-copy-inline .btn,
.sheet-top-copy-inline .sheet-page-title,
.sheet-top-copy-inline .sheet-role-copy{
  flex: 0 0 auto;
}
.sheet-top-copy-inline .sheet-back-link{
  font-size: 0.78rem;
  padding: 5px 9px;
  line-height: 1;
}
.sheet-top-copy-inline .sheet-page-title{
  margin: 0;
}
.sheet-top-copy-inline .sheet-role-copy{
  min-width: 0;
  white-space: nowrap;
}
body.theme-light .sheet-top-copy-inline .btn{
  background: transparent;
}
body.theme-light .sheet-top-copy-inline .sheet-back-link{
  color: #123b67;
  border-color: rgba(18, 59, 103, 0.28);
}
.sheet-top-actions{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
}
.sheet-control-row{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}
.sheet-menubar{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
}
.sheet-menubar-main{
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
  white-space: nowrap;
}
.sheet-control-row .sheet-tool-toggles{
  flex: 0 0 auto;
}
.sheet-menu{
  position: relative;
}
.sheet-tool-toggles{
  display: flex;
  align-items: flex-start;
  gap: 5px;
  flex: 0 0 auto;
}
.sheet-tool-toggles .tool-panel{
  margin: 0;
}
.sheet-tool-toggles .tool-panel > summary{
  list-style: none;
  cursor: pointer;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.sheet-tool-toggles .tool-panel > summary::-webkit-details-marker{
  display: none;
}
.sheet-tool-toggles .tool-panel[open] > summary{
  background: transparent;
  border-color: rgba(83,167,255,0.4);
}
.sheet-tool-toggles .tool-panel > .disclosure-panel{
  margin-top: 8px;
}
.menu-trigger,
.solo-trigger{
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  line-height: 1;
}
.menu-trigger:hover,
.solo-trigger:hover{
  background: transparent;
}
.menu-trigger.is-open,
.solo-trigger.is-open{
  background: transparent;
  border-color: rgba(83,167,255,0.4);
}
.menu-trigger-icon{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.menu-trigger-caret{
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  flex: 0 0 auto;
  opacity: 0.88;
}
.menu-panel{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1000;
  min-width: 230px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 24px 50px rgba(0,0,0,0.35);
}
.menu-panel[hidden]{
  display: none;
}
.menu-panel-right{
  left: auto;
  right: 0;
}
.menu-panel-wide{
  min-width: 200px;
}
.menu-panel-functions{
  min-width: 190px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: normal;
}
.menu-panel-functions .menu-item-function{
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  white-space: normal;
}
.menu-group-label{
  padding: 4px 10px 8px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.menu-item{
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 26px;
  padding: 4px 10px;
  border: none;
  background: transparent;
  border-radius: 9px;
  text-align: left;
  color: inherit;
}
.fmt-toolbar .menu-item{
  display: flex;
  width: 100%;
  justify-content: flex-start;
}
.fmt-toolbar .menu-panel button.menu-item{
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  white-space: normal;
  text-align: left;
}
.menu-item:hover{
  text-decoration: none;
  background: rgba(83,167,255,0.14);
}
.menu-item-center{
  justify-content: center;
}
.menu-item.is-disabled,
.menu-item:disabled{
  opacity: 0.46;
  cursor: not-allowed;
}
.menu-item.is-active{
  background: rgba(83,167,255,0.18);
  font-weight: 700;
}
.menu-separator{
  height: 1px;
  margin: 8px 4px;
  background: var(--border);
}
.sheet-format-shell{
  padding-top: 2px;
}
.fmt-toolbar{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.fmt-toolbar-main{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
  white-space: nowrap;
}
.fmt-tool-item{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.fmt-icon-btn{
  min-width: 28px;
  padding: 2px 5px;
}
.fmt-history-icon{
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.fmt-tool-divider{
  width: 1px;
  align-self: stretch;
  min-height: 30px;
  background: var(--border);
  margin: 0 2px;
}
.fmt-toolbar button,
.fmt-toolbar .ghost,
.fmt-select{
  min-height: 24px;
  height: 24px;
  padding: 2px 6px;
  border-radius: 8px;
}
.fmt-toolbar button,
.fmt-toolbar .ghost{
  background: rgba(255,255,255,0.06);
}
.fmt-toolbar button:hover,
.fmt-toolbar .ghost:hover{
  background: rgba(255,255,255,0.12);
}
.fmt-toolbar button:active,
.fmt-toolbar button.is-active{
  background: rgba(83,167,255,0.2);
  border-color: rgba(83,167,255,0.48);
}
.fmt-select{
  min-width: 46px;
  background: rgba(255,255,255,0.08);
}
.fmt-font-family{
  min-width: 84px;
}
.fmt-font-size{
  min-width: 40px;
}
.inline-menu .menu-panel{
  top: calc(100% + 10px);
}
.color-trigger{
  position: relative;
  min-width: 34px;
  width: 34px;
  padding-left: 5px;
  padding-right: 5px;
}
.color-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 1.2rem;
  line-height: 1;
  flex: 0 0 auto;
}
.color-icon-svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.color-swatch-bar{
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  height: 3px;
  border-radius: 999px;
}
.color-menu{
  min-width: 172px;
}
.color-grid{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 4px;
}
.color-chip{
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.15);
  background: var(--chip-color);
}
.fmt-toolbar .color-chip{
  background: var(--chip-color);
}
.fmt-toolbar .color-chip:hover,
.fmt-toolbar .color-chip:active,
.fmt-toolbar .color-chip.is-active{
  background: var(--chip-color);
}
:root[data-theme="light"] .fmt-toolbar .color-chip{
  background: var(--chip-color);
}
:root[data-theme="light"] .fmt-toolbar .color-chip:hover,
:root[data-theme="light"] .fmt-toolbar .color-chip:active,
:root[data-theme="light"] .fmt-toolbar .color-chip.is-active{
  background: var(--chip-color);
}
.fmt-function-mark{
  font-weight: 700;
  letter-spacing: -0.02em;
}
.toolbar-overflow{
  position: relative;
  flex: 0 0 auto;
}
.overflow-trigger{
  min-width: 26px;
  min-height: 22px;
  padding: 2px 6px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.sheet-zoom-controls{
  gap: 4px;
  align-items: center;
}
.sheet-zoom-controls .muted{
  font-size: 0.82rem;
}
.sheet-zoom-controls #zoomOutBtn,
.sheet-zoom-controls #zoomInBtn{
  min-height: 22px;
  height: 22px;
  padding: 2px 8px;
  border-radius: 8px;
  line-height: 1;
  font-size: 0.86rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.sheet-zoom-controls #zoomPct{
  padding: 0 3px;
  line-height: 1;
  font-size: 0.78rem;
}
.sheet-modal[hidden]{
  display: none;
}
.sheet-modal{
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: grid;
  place-items: center;
}
.sheet-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(7,10,18,0.66);
}
.sheet-modal-panel{
  position: relative;
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(14,20,33,0.98);
  box-shadow: 0 28px 60px rgba(0,0,0,0.42);
  overflow: hidden;
}
.sheet-modal-panel-narrow{
  width: min(460px, calc(100vw - 28px));
}
.sheet-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.sheet-modal-body{
  padding: 14px;
  max-height: calc(100vh - 132px);
  overflow: auto;
}
.sheet-modal-close{
  min-height: 0;
  padding: 8px 10px;
}
.sheet-docs-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sheet-doc-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(24,34,54,0.96);
}
.sheet-doc-item:hover{
  text-decoration: none;
  background: rgba(83,167,255,0.14);
}
.sheet-doc-name{
  font-weight: 700;
}
.sheet-doc-meta{
  color: var(--muted);
  font-size: 0.88rem;
}
.sheet-properties-grid{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px 14px;
}
.sheet-prop-label{
  color: var(--muted);
  font-weight: 700;
}
.sheet-focus-exit{
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 13000;
}
.sheet-focus-exit[hidden]{
  display: none;
}
.fmt-cell-fill{
  transition: background-color 0.14s ease;
}
.fmt-painter-armed{
  cursor: copy !important;
}
.fmt-painter-source{
  outline: 2px solid rgba(83,167,255,0.7);
  outline-offset: 2px;
}
.range-context-menu{
  position: fixed;
  z-index: 14000;
  display: flex;
  flex-direction: column;
  min-width: 128px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.98);
  box-shadow: 0 16px 32px rgba(0,0,0,0.35);
}
.range-context-menu[hidden]{
  display: none;
}
.range-context-menu button{
  min-height: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
}
.range-context-menu button:hover{
  background: rgba(83,167,255,0.14);
}
:root[data-theme="light"] .range-context-menu{
  background: rgba(255,255,255,0.98);
  color: #182133;
  border-color: rgba(24,33,51,0.16);
}
.column-context-menu{
  position: fixed;
  z-index: 14010;
  display: flex;
  flex-direction: column;
  min-width: 176px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.98);
  box-shadow: 0 16px 32px rgba(0,0,0,0.35);
}
.column-context-menu[hidden]{
  display: none;
}
.column-context-menu-header{
  padding: 6px 8px 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}
.column-context-menu button{
  min-height: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
}
.column-context-menu button:hover{
  background: rgba(83,167,255,0.14);
}
:root[data-theme="light"] .column-context-menu{
  background: rgba(255,255,255,0.98);
  color: #182133;
  border-color: rgba(24,33,51,0.16);
}
.share-page-card{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.share-status{
  padding:10px 12px;
  border:1px solid rgba(69,212,131,0.32);
  border-radius:12px;
  background:rgba(30,120,68,0.16);
  color:#bdf5d2;
}
.share-invite-form,
.invite-accept-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.invite-accept-form{
  flex-direction:column;
  align-items:stretch;
  max-width:420px;
}
.invite-accept-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:700;
}
.share-section{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.share-access-list,
.share-directory{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.share-person-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,0.04);
}
.share-person-card-owner{
  background:rgba(83,167,255,0.08);
}
.share-person-card-pending{
  background:rgba(250,204,21,0.08);
}
.share-person-main{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1 1 auto;
}
.share-person-label{
  font-weight:700;
  word-break:break-word;
}
.share-invite-link{
  font-size:0.85rem;
  word-break:break-all;
}
.share-avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:800;
  background:var(--avatar-color, #2563eb);
  flex:0 0 auto;
}
.share-directory-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,0.04);
  color:inherit;
  cursor:pointer;
  text-align:left;
}
.invite-card{
  max-width:560px;
}

:root[data-theme="light"] .menu-panel{
  background: #ffffff;
  box-shadow: 0 24px 50px rgba(29,41,57,0.16);
}
:root[data-theme="light"] .sheet-modal-panel{
  background: #f8fbff;
}
:root[data-theme="light"] .menu-trigger,
:root[data-theme="light"] .solo-trigger{
  background: transparent;
  border-color: rgba(24,33,51,0.16);
  color: #182133;
}
:root[data-theme="light"] .menu-trigger:hover,
:root[data-theme="light"] .solo-trigger:hover{
  background: transparent;
}
:root[data-theme="light"] .sheet-doc-item{
  background: #eef4fb;
}
:root[data-theme="light"] .share-person-card,
:root[data-theme="light"] .share-directory-chip{
  background:#eef4fb;
}
:root[data-theme="light"] .share-person-card-owner{
  background:#ddeaff;
}
:root[data-theme="light"] .share-person-card-pending{
  background:#fff6d7;
}
:root[data-theme="light"] .share-status{
  background:#ecfdf3;
  color:#166534;
}
body.sheet-focus-mode .topbar,
body.sheet-focus-mode .sheet-nav,
body.sheet-focus-mode .sheet-control-row,
body.sheet-focus-mode .alert,
body.sheet-focus-mode .sheet-properties-card{
  display: none !important;
}
body.sheet-focus-mode main.container{
  max-width: none;
  width: 100%;
  padding: 10px 12px 12px;
}
body.sheet-focus-mode .table-wrap{
  margin-top: 0;
}

@media (max-width: 920px){
  .sheet-top-copy-inline{
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

@media (max-width: 720px){
  .sheet-nav{
    gap: 8px;
  }
  .sheet-top{
    padding: 12px;
  }
  .sheet-top-copy{
    min-width: 0;
  }
  .fmt-toolbar{
    align-items: flex-start;
  }
}

/* Final grid control overrides: keep date/dropdown cells visually flat until active. */
.gridtable tbody td input.cell.cell-date,
.gridtable tbody td select.cell[data-type="dropdown"]{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
.gridtable tbody td select.cell[data-type="dropdown"]{
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  padding-right: 8px !important;
}
.gridtable tbody td select.cell[data-type="dropdown"]::-ms-expand{
  display: none;
}
.gridtable tbody td input.cell.cell-date{
  background-image: none !important;
  padding-right: 8px !important;
}
.gridtable tbody td select.cell[data-type="dropdown"]:focus{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23ffffff'%3E%3Cpath d='M2.2 4.2 6 8l3.8-3.8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 12px 12px !important;
  padding-right: 24px !important;
}
.gridtable tbody td input.cell.cell-date:focus{
  padding-right: 28px !important;
}
body.theme-light .gridtable tbody td select.cell[data-type="dropdown"]:focus{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23182333'%3E%3Cpath d='M2.2 4.2 6 8l3.8-3.8'/%3E%3C/svg%3E") !important;
}
body.theme-light .gridtable tbody td input.cell.cell-date:focus{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 16px 16px !important;
}


/* ===== Workspace layout parity pass ===== */
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.topbar{
  z-index:50;
}

.topbar-inner{
  min-height:60px;
  gap:14px;
  flex-wrap:wrap;
}

.topbar-actions{
  flex-wrap:wrap;
  justify-content:flex-end;
}

.app-main{
  flex:1 1 auto;
  min-height:0;
}

.app-footer{
  border-top:1px solid var(--border);
  background:rgba(8,11,18,0.94);
  backdrop-filter:blur(10px);
  position:relative;
  z-index:35;
}

body.theme-light .app-footer{
  background:rgba(246,250,255,0.97);
}

.app-footer-inner{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-top:10px;
  padding-bottom:10px;
}

.app-footer-copy,
.app-footer-links a{
  color:var(--muted);
}

.app-footer-links{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.app-footer-links a:hover{
  color:var(--text);
}

:root{
  --app-topbar-h: 64px;
  --app-footer-h: 56px;
  --sheet-top-h: 140px;
  --sheet-format-h: 64px;
}

body.sheet-workspace-active{
  overflow:hidden;
}

body.sheet-workspace-active .app-main{
  height:calc(100vh - var(--app-topbar-h) - var(--app-footer-h));
  padding-top:4px;
  padding-bottom:4px;
  overflow:hidden;
}

body.sheet-workspace-active .container{
  padding: 0 !important;
}

body.sheet-workspace-active .app-footer{
  flex:0 0 var(--app-footer-h);
}

.sheet-workspace-shell{
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

body.sheet-workspace-active .sheet-workspace-shell{
  margin: 0 14px 0 !important;
  padding: 6px 0 0 !important;
}

body.sheet-workspace-active .sheet-workspace-shell{
  overflow:hidden;
}

body.sheet-workspace-active .sheet-top,
body.sheet-workspace-active .sheet-format-shell{
  flex:0 0 auto;
}

body.sheet-workspace-active .sheet-top{
  position:sticky;
  top:0;
  z-index:28;
}

body.sheet-workspace-active .sheet-format-shell{
  position:sticky;
  top:calc(var(--sheet-top-h) + 10px);
  z-index:27;
}

body.sheet-workspace-active .table-wrap{
  flex:1 1 auto;
  min-height:0;
  height:auto;
  max-height:none;
  overflow:auto;
  overscroll-behavior:contain;
  position:relative;
  margin-top:0;
  border-radius:16px;
}

body.sheet-workspace-active .gridtable thead th{
  position:sticky;
  top:0;
  z-index:14;
}

body.sheet-workspace-active .gridtable thead th.row-index,
body.sheet-workspace-active .gridtable thead th.row-details-col{
  z-index:18;
}

body.sheet-workspace-active .sheet-focus-exit{
  bottom:calc(var(--app-footer-h) + 16px);
}

body.sheet-workspace-active .sheet-modal,
body.sheet-workspace-active .row-details-modal{
  z-index:90;
}

@media (max-width: 920px){
  .topbar-inner{
    align-items:flex-start;
  }

  body.sheet-workspace-active .app-main{
    padding-top:8px;
    padding-bottom:8px;
  }

  body.sheet-workspace-active .sheet-format-shell{
    top:calc(var(--sheet-top-h) + 8px);
  }
}

@media (max-width: 720px){
  .app-footer-inner,
  .topbar-inner,
  .topbar-actions{
    align-items:flex-start;
  }

  body.sheet-workspace-active .sheet-workspace-shell{
    gap:8px;
  }

  body.sheet-workspace-active .sheet-format-shell{
    top:calc(var(--sheet-top-h) + 6px);
  }
}


/* ===== Theme foundation cleanup: top navbar + sheet chrome ===== */
:root{
  --chrome-dark-page: linear-gradient(180deg, #05070a 0%, #06090d 100%);
  --chrome-dark-surface: linear-gradient(180deg, rgba(10,12,16,0.985) 0%, rgba(6,8,11,0.975) 100%);
  --chrome-dark-surface-2: linear-gradient(180deg, rgba(14,17,22,0.975) 0%, rgba(8,10,14,0.965) 100%);
  --chrome-dark-pill: rgba(255,255,255,0.06);
  --chrome-dark-pill-hover: rgba(255,255,255,0.12);
  --chrome-dark-pill-border: rgba(255,255,255,0.12);
  --chrome-dark-text: #eef3fb;
  --chrome-dark-muted: #b9c4d7;

  --chrome-light-page: linear-gradient(180deg, #dde9f5 0%, #cfdeee 100%);
  --chrome-light-surface: linear-gradient(180deg, rgba(205,224,241,0.98) 0%, rgba(190,213,233,0.98) 100%);
  --chrome-light-surface-2: linear-gradient(180deg, rgba(198,219,239,0.98) 0%, rgba(184,208,230,0.98) 100%);
  --chrome-light-pill: rgba(244,249,255,0.96);
  --chrome-light-pill-hover: rgba(233,242,251,0.98);
  --chrome-light-pill-border: rgba(95,124,154,0.28);
  --chrome-light-text: #1d2c40;
  --chrome-light-muted: #50627b;
}

body{
  background:
    radial-gradient(circle at 12% -24%, rgba(12, 16, 23, 0.22), transparent 44%),
    radial-gradient(circle at 92% -28%, rgba(12, 18, 26, 0.12), transparent 38%),
    var(--chrome-dark-page);
}

:root[data-theme="light"] body,
body.theme-light{
  background:
    radial-gradient(circle at 10% -30%, rgba(118, 156, 197, 0.22), transparent 48%),
    radial-gradient(circle at 92% -28%, rgba(138, 177, 208, 0.14), transparent 40%),
    var(--chrome-light-page);
}

.topbar{
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: none;
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width: calc(100% - 32px);
  margin: 10px 16px;
  padding: 8px 16px;
  min-height: 56px;
  gap: 12px;
  border-radius: 28px;
  background: var(--chrome-dark-surface);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 28px rgba(0,0,0,0.34);
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.topbar .brand,
.topbar .user-label,
.topbar .topbar-actions,
.topbar .topbar-actions a,
.topbar .topbar-actions button,
.topbar .topbar-actions .btn{
  color: var(--chrome-dark-text);
}

.topbar .user-label{
  color: var(--chrome-dark-muted);
}

.topbar .btn,
.topbar .pill,
.topbar-actions a,
.topbar-actions button,
.topbar-actions .btn{
  min-height: 36px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--chrome-dark-pill-border);
  background: var(--chrome-dark-pill);
  color: var(--chrome-dark-text);
  font-weight: 700;
  box-shadow: none;
}

.topbar .btn:hover,
.topbar .pill:hover,
.topbar-actions a:hover,
.topbar-actions button:hover,
.topbar-actions .btn:hover{
  text-decoration:none;
  background: var(--chrome-dark-pill-hover);
  border-color: rgba(255,255,255,0.18);
}

.sheet-top{
  background: var(--chrome-dark-surface-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.24);
}

.sheet-menubar .menu-trigger,
.sheet-menubar .solo-trigger,
.sheet-menubar button,
.sheet-menubar .btn,
.sheet-top .btn,
.sheet-top button{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  color: var(--chrome-dark-text);
}

.sheet-menubar .menu-trigger:hover,
.sheet-menubar .solo-trigger:hover,
.sheet-menubar button:hover,
.sheet-menubar .btn:hover,
.sheet-top .btn:hover,
.sheet-top button:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}

.fmt-toolbar button,
.fmt-toolbar .ghost,
.fmt-select{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  color: var(--chrome-dark-text);
}

.fmt-toolbar button:hover,
.fmt-toolbar .ghost:hover,
.fmt-select:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}

.sheet-page-title,
.sheet-title,
.sheet-role-copy,
.sheet-top-copy-inline .sheet-back-link,
.sheet-top .muted,
.sheet-top .menu-trigger,
.sheet-top .solo-trigger,
.sheet-top .btn,
.sheet-top button,
.fmt-toolbar,
.fmt-toolbar .fmt-label{
  color: var(--chrome-dark-text);
}

.sheet-role-copy,
.sheet-top .muted{
  color: var(--chrome-dark-muted);
}

:root[data-theme="light"] .topbar,
body.theme-light .topbar{
  background: transparent;
  border-bottom-color: rgba(85,108,133,0.10);
}

:root[data-theme="light"] .topbar-inner,
body.theme-light .topbar-inner{
  background: var(--chrome-light-surface);
  border-color: rgba(144,164,184,0.32);
  box-shadow: 0 10px 22px rgba(141, 163, 184, 0.20);
}

:root[data-theme="light"] .topbar .brand,
:root[data-theme="light"] .topbar .topbar-actions,
:root[data-theme="light"] .topbar .topbar-actions a,
:root[data-theme="light"] .topbar .topbar-actions button,
:root[data-theme="light"] .topbar .topbar-actions .btn,
body.theme-light .topbar .brand,
body.theme-light .topbar .topbar-actions,
body.theme-light .topbar .topbar-actions a,
body.theme-light .topbar .topbar-actions button,
body.theme-light .topbar .topbar-actions .btn{
  color: var(--chrome-light-text);
}

:root[data-theme="light"] .topbar .user-label,
body.theme-light .topbar .user-label{
  color: var(--chrome-light-muted);
}

:root[data-theme="light"] .topbar .btn,
:root[data-theme="light"] .topbar .pill,
:root[data-theme="light"] .topbar-actions a,
:root[data-theme="light"] .topbar-actions button,
:root[data-theme="light"] .topbar-actions .btn,
body.theme-light .topbar .btn,
body.theme-light .topbar .pill,
body.theme-light .topbar-actions a,
body.theme-light .topbar-actions button,
body.theme-light .topbar-actions .btn{
  background: var(--chrome-light-pill);
  border-color: var(--chrome-light-pill-border);
  color: var(--chrome-light-text);
}

:root[data-theme="light"] .topbar .btn:hover,
:root[data-theme="light"] .topbar .pill:hover,
:root[data-theme="light"] .topbar-actions a:hover,
:root[data-theme="light"] .topbar-actions button:hover,
:root[data-theme="light"] .topbar-actions .btn:hover,
body.theme-light .topbar .btn:hover,
body.theme-light .topbar .pill:hover,
body.theme-light .topbar-actions a:hover,
body.theme-light .topbar-actions button:hover,
body.theme-light .topbar-actions .btn:hover{
  background: var(--chrome-light-pill-hover);
  border-color: rgba(118,140,162,0.38);
}

:root[data-theme="light"] .sheet-top,
body.theme-light .sheet-top{
  background: var(--chrome-light-surface-2);
  border-color: rgba(152,170,189,0.26);
  box-shadow: 0 10px 22px rgba(153, 172, 191, 0.16);
}

:root[data-theme="light"] .sheet-menubar .menu-trigger,
:root[data-theme="light"] .sheet-menubar .solo-trigger,
:root[data-theme="light"] .sheet-menubar button,
:root[data-theme="light"] .sheet-menubar .btn,
:root[data-theme="light"] .sheet-top .btn,
:root[data-theme="light"] .sheet-top button,
:root[data-theme="light"] .fmt-toolbar button,
:root[data-theme="light"] .fmt-toolbar .ghost,
:root[data-theme="light"] .fmt-select,
body.theme-light .sheet-menubar .menu-trigger,
body.theme-light .sheet-menubar .solo-trigger,
body.theme-light .sheet-menubar button,
body.theme-light .sheet-menubar .btn,
body.theme-light .sheet-top .btn,
body.theme-light .sheet-top button,
body.theme-light .fmt-toolbar button,
body.theme-light .fmt-toolbar .ghost,
body.theme-light .fmt-select{
  background: rgba(255,255,255,0.96);
  border-color: rgba(129,149,170,0.26);
  color: var(--chrome-light-text);
}

:root[data-theme="light"] .sheet-menubar .menu-trigger:hover,
:root[data-theme="light"] .sheet-menubar .solo-trigger:hover,
:root[data-theme="light"] .sheet-menubar button:hover,
:root[data-theme="light"] .sheet-menubar .btn:hover,
:root[data-theme="light"] .sheet-top .btn:hover,
:root[data-theme="light"] .sheet-top button:hover,
:root[data-theme="light"] .fmt-toolbar button:hover,
:root[data-theme="light"] .fmt-toolbar .ghost:hover,
:root[data-theme="light"] .fmt-select:hover,
body.theme-light .sheet-menubar .menu-trigger:hover,
body.theme-light .sheet-menubar .solo-trigger:hover,
body.theme-light .sheet-menubar button:hover,
body.theme-light .sheet-menubar .btn:hover,
body.theme-light .sheet-top .btn:hover,
body.theme-light .sheet-top button:hover,
body.theme-light .fmt-toolbar button:hover,
body.theme-light .fmt-toolbar .ghost:hover,
body.theme-light .fmt-select:hover{
  background: #f4f8fc;
  border-color: rgba(115,139,162,0.36);
}

:root[data-theme="light"] .sheet-page-title,
:root[data-theme="light"] .sheet-title,
:root[data-theme="light"] .sheet-role-copy,
:root[data-theme="light"] .sheet-top-copy-inline .sheet-back-link,
:root[data-theme="light"] .sheet-top .muted,
:root[data-theme="light"] .sheet-top .menu-trigger,
:root[data-theme="light"] .sheet-top .solo-trigger,
:root[data-theme="light"] .sheet-top .btn,
:root[data-theme="light"] .sheet-top button,
:root[data-theme="light"] .fmt-toolbar,
:root[data-theme="light"] .fmt-toolbar .fmt-label,
body.theme-light .sheet-page-title,
body.theme-light .sheet-title,
body.theme-light .sheet-role-copy,
body.theme-light .sheet-top-copy-inline .sheet-back-link,
body.theme-light .sheet-top .muted,
body.theme-light .sheet-top .menu-trigger,
body.theme-light .sheet-top .solo-trigger,
body.theme-light .sheet-top .btn,
body.theme-light .sheet-top button,
body.theme-light .fmt-toolbar,
body.theme-light .fmt-toolbar .fmt-label{
  color: var(--chrome-light-text);
}

:root[data-theme="light"] .sheet-role-copy,
:root[data-theme="light"] .sheet-top .muted,
body.theme-light .sheet-role-copy,
body.theme-light .sheet-top .muted{
  color: var(--chrome-light-muted);
}

/* HOTFIX 17: restore production header structure and true black/white chrome */
.topbar-inner{
  width: calc(100% - 32px);
  margin: 10px 16px;
  padding: 0;
  min-height: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.topbar-shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  min-height:54px;
  padding:8px 18px;
  border-radius:28px;
  background:#0a0a0c;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
}

.topbar-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand-mark{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 36px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:#7fb0ff;
}

.brand-mark svg{
  width:20px;
  height:20px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
}

.brand-lockup{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
}

.brand-wordmark{
  font-family:"Segoe UI Variable Display","Sora","Avenir Next","Montserrat","Segoe UI",sans-serif;
  font-size:1.15rem;
  font-weight:900;
  line-height:1;
  letter-spacing:0.01em;
  white-space:nowrap;
  color:#e9eef8;
}

.brand-meta{
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1;
}

.topbar-form{ margin:0; }

.topbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}

.topbar .btn,
.topbar .pill,
.topbar-actions a,
.topbar-actions button,
.topbar-actions .btn,
.topbar-btn{
  min-height:36px;
  padding:5px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:#f4f7fc;
  font-weight:700;
}

.topbar .user-label{ color:rgba(231,237,247,0.82); }
.topbar .user-label strong{ color:#ffffff; }

.topbar .btn:hover,
.topbar .pill:hover,
.topbar-actions a:hover,
.topbar-actions button:hover,
.topbar-actions .btn:hover,
.topbar-btn:hover{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.22);
}

.sheet-top{
  background:#121316;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 10px 24px rgba(0,0,0,0.24);
}

.sheet-menubar .menu-trigger,
.sheet-menubar .solo-trigger,
.sheet-menubar button,
.sheet-menubar .btn,
.sheet-top .btn,
.sheet-top button,
.fmt-toolbar button,
.fmt-toolbar .ghost,
.fmt-select{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.10);
  color:#f2f5fa;
}

.sheet-page-title,
.sheet-title,
.sheet-role-copy,
.sheet-top-copy-inline .sheet-back-link,
.sheet-top .muted,
.sheet-top .menu-trigger,
.sheet-top .solo-trigger,
.sheet-top .btn,
.sheet-top button,
.fmt-toolbar,
.fmt-toolbar .fmt-label{ color:#f2f5fa; }
.sheet-role-copy,
.sheet-top .muted{ color:rgba(232,238,247,0.78); }

:root[data-theme="light"] .topbar-shell,
body.theme-light .topbar-shell{
  background: linear-gradient(180deg, rgba(191,212,231,0.98) 0%, rgba(177,201,223,0.98) 100%);
  border-color:rgba(84,112,140,0.28);
  box-shadow:0 10px 24px rgba(93,118,145,0.18);
}

:root[data-theme="light"] .brand-mark,
body.theme-light .brand-mark{
  background:rgba(38,95,191,0.08);
  border-color:rgba(38,95,191,0.20);
  color:#3f7fcb;
}

:root[data-theme="light"] .brand-wordmark,
body.theme-light .brand-wordmark{ color:#18335d; }

:root[data-theme="light"] .topbar .btn,
:root[data-theme="light"] .topbar .pill,
:root[data-theme="light"] .topbar-actions a,
:root[data-theme="light"] .topbar-actions button,
:root[data-theme="light"] .topbar-actions .btn,
:root[data-theme="light"] .topbar-btn,
body.theme-light .topbar .btn,
body.theme-light .topbar .pill,
body.theme-light .topbar-actions a,
body.theme-light .topbar-actions button,
body.theme-light .topbar-actions .btn,
body.theme-light .topbar-btn{
  background: linear-gradient(180deg, rgba(238,245,252,0.98) 0%, rgba(227,237,248,0.98) 100%);
  border-color:rgba(51,74,106,0.18);
  color:#20395f;
}

:root[data-theme="light"] .topbar .user-label,
body.theme-light .topbar .user-label{ color:#4b607e; }
:root[data-theme="light"] .topbar .user-label strong,
body.theme-light .topbar .user-label strong{ color:#18335d; }

:root[data-theme="light"] .sheet-top,
body.theme-light .sheet-top{
  background: linear-gradient(180deg, rgba(195,215,233,0.98) 0%, rgba(181,203,224,0.98) 100%);
  border-color:rgba(51,74,106,0.16);
  box-shadow:0 8px 18px rgba(80,101,124,0.10);
}

:root[data-theme="light"] .sheet-menubar .menu-trigger,
:root[data-theme="light"] .sheet-menubar .solo-trigger,
:root[data-theme="light"] .sheet-menubar button,
:root[data-theme="light"] .sheet-menubar .btn,
:root[data-theme="light"] .sheet-top .btn,
:root[data-theme="light"] .sheet-top button,
:root[data-theme="light"] .fmt-toolbar button,
:root[data-theme="light"] .fmt-toolbar .ghost,
:root[data-theme="light"] .fmt-select,
body.theme-light .sheet-menubar .menu-trigger,
body.theme-light .sheet-menubar .solo-trigger,
body.theme-light .sheet-menubar button,
body.theme-light .sheet-menubar .btn,
body.theme-light .sheet-top .btn,
body.theme-light .sheet-top button,
body.theme-light .fmt-toolbar button,
body.theme-light .fmt-toolbar .ghost,
body.theme-light .fmt-select{
  background: linear-gradient(180deg, rgba(238,245,252,0.98) 0%, rgba(227,237,248,0.98) 100%);
  border-color:rgba(51,74,106,0.18);
  color:#20395f;
}

:root[data-theme="light"] .sheet-page-title,
:root[data-theme="light"] .sheet-title,
:root[data-theme="light"] .sheet-role-copy,
:root[data-theme="light"] .sheet-top-copy-inline .sheet-back-link,
:root[data-theme="light"] .sheet-top .muted,
:root[data-theme="light"] .sheet-top .menu-trigger,
:root[data-theme="light"] .sheet-top .solo-trigger,
:root[data-theme="light"] .sheet-top .btn,
:root[data-theme="light"] .sheet-top button,
:root[data-theme="light"] .fmt-toolbar,
:root[data-theme="light"] .fmt-toolbar .fmt-label,
body.theme-light .sheet-page-title,
body.theme-light .sheet-title,
body.theme-light .sheet-role-copy,
body.theme-light .sheet-top-copy-inline .sheet-back-link,
body.theme-light .sheet-top .muted,
body.theme-light .sheet-top .menu-trigger,
body.theme-light .sheet-top .solo-trigger,
body.theme-light .sheet-top .btn,
body.theme-light .sheet-top button,
body.theme-light .fmt-toolbar,
body.theme-light .fmt-toolbar .fmt-label{ color:#213a62; }

/* ===== Batch 18: tighten top-to-toolbar gap and match shell margins ===== */
.topbar-inner{
  margin: 10px 16px 6px;
}

.app-main{
  padding-top: 0;
}

.sheet-workspace-shell{
  padding: 0 16px 12px;
  gap: 6px;
}

.sheet-top{
  margin: 0;
}

.table-wrap{
  margin: 0;
}

body.sheet-workspace-active .app-main{
  padding-top: 4px;
  padding-bottom: 10px;
}

body.sheet-workspace-active .sheet-workspace-shell{
  gap: 6px;
  padding: 0 16px 10px;
}

body.sheet-workspace-active .sheet-format-shell{
  top: calc(var(--sheet-top-h) + 6px);
}

@media (max-width: 920px){
  .topbar-inner{
    margin: 8px 12px 4px;
  }

  .sheet-workspace-shell{
    padding: 0 12px 10px;
    gap: 5px;
  }

  body.sheet-workspace-active .app-main{
    padding-top: 3px;
    padding-bottom: 8px;
  }

  body.sheet-workspace-active .sheet-workspace-shell{
    padding: 0 12px 8px;
    gap: 5px;
  }

  body.sheet-workspace-active .sheet-format-shell{
    top: calc(var(--sheet-top-h) + 5px);
  }
}

@media (max-width: 720px){
  .sheet-workspace-shell{
    padding: 0 10px 8px;
    gap: 4px;
  }

  body.sheet-workspace-active .sheet-workspace-shell{
    padding: 0 10px 8px;
    gap: 4px;
  }

  body.sheet-workspace-active .sheet-format-shell{
    top: calc(var(--sheet-top-h) + 4px);
  }
}


/* ===== Batch 19: improve light-mode contrast and slim title row ===== */
:root[data-theme="light"] .sheet-page-title,
body.theme-light .sheet-page-title{
  font-size: clamp(2.05rem, 2.6vw, 2.85rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

:root[data-theme="light"] .sheet-top-copy-inline,
body.theme-light .sheet-top-copy-inline{
  gap: 8px;
}

:root[data-theme="light"] .sheet-top-copy,
body.theme-light .sheet-top-copy{
  gap: 6px;
}


/* ===== Batch 20: tighter chrome, stronger light-mode contrast, aligned role copy ===== */
.topbar-inner{
  margin: 8px 16px 4px;
}

.topbar-shell{
  min-height: 42px;
  padding: 5px 16px;
  border-radius: 24px;
  gap: 12px;
}

.topbar-brand{
  gap: 10px;
}

.brand-mark{
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.brand-mark svg{
  width: 17px;
  height: 17px;
}

.brand-lockup{
  gap: 7px;
}

.brand-wordmark{
  font-size: 1rem;
}

.brand-meta{
  gap: 6px;
}

.topbar .btn,
.topbar .pill,
.topbar-actions a,
.topbar-actions button,
.topbar-actions .btn,
.topbar-btn{
  min-height: 28px;
  padding: 3px 11px;
  font-size: 0.85rem;
  line-height: 1.05;
}

.topbar-actions{
  gap: 8px;
}

.sheet-workspace-shell{
  gap: 3px;
}

.sheet-top{
  padding: 8px 14px 8px;
  gap: 7px;
  border-radius: 22px;
}

.sheet-top-main{
  gap: 4px;
}

.sheet-control-row{
  gap: 5px;
}

.sheet-top-copy-inline{
  gap: 8px;
}

.sheet-page-title,
.sheet-title{
  font-size: clamp(2.0rem, 2.35vw, 2.55rem);
  line-height: 1;
  letter-spacing: -0.022em;
}

.sheet-top-copy-inline .sheet-back-link{
  font-size: 0.74rem;
  padding: 4px 9px;
}

.sheet-top-copy-inline .sheet-role-copy{
  margin-left: auto;
  text-align: right;
}

.sheet-menubar .menu-trigger,
.sheet-menubar .solo-trigger,
.sheet-menubar button,
.sheet-menubar .btn,
.sheet-top .btn,
.sheet-top button,
.fmt-toolbar button,
.fmt-toolbar .ghost,
.fmt-select{
  min-height: 27px;
  padding: 3px 11px;
  font-size: 0.84rem;
  line-height: 1.05;
  border-radius: 12px;
}

.sheet-menubar .menu-button-row > .btn,
.sheet-menubar .menu-button-row > button,
.sheet-top-actions > .btn,
.sheet-top-actions > button{
  min-height: 27px;
  padding: 3px 11px;
}

/* Save through Workflows should match the smaller chrome buttons */
.sheet-menubar > .btn,
.sheet-menubar > button,
.sheet-menubar .solo-trigger,
.sheet-menubar .menu-trigger{
  min-height: 27px;
  padding: 3px 11px;
}

.fmt-toolbar{
  gap: 5px;
}

:root[data-theme="light"] body,
body.theme-light{
  background:
    radial-gradient(circle at 8% -26%, rgba(67, 118, 190, 0.30), transparent 52%),
    radial-gradient(circle at 92% -24%, rgba(38, 151, 115, 0.17), transparent 45%),
    linear-gradient(180deg, #c2d3e4, #9eb7cf);
}

:root[data-theme="light"] .topbar-shell,
body.theme-light .topbar-shell{
  background: linear-gradient(180deg, rgba(183,206,228,0.98) 0%, rgba(166,192,217,0.98) 100%);
  border-color: rgba(74, 100, 128, 0.30);
  box-shadow: 0 8px 18px rgba(83, 108, 135, 0.18);
}

:root[data-theme="light"] .sheet-top,
body.theme-light .sheet-top{
  background: linear-gradient(180deg, rgba(176,199,222,0.98) 0%, rgba(163,189,215,0.98) 100%);
  border-color: rgba(63, 90, 120, 0.22);
  box-shadow: 0 7px 16px rgba(78, 100, 122, 0.12);
}

:root[data-theme="light"] .topbar .btn,
:root[data-theme="light"] .topbar .pill,
:root[data-theme="light"] .topbar-actions a,
:root[data-theme="light"] .topbar-actions button,
:root[data-theme="light"] .topbar-actions .btn,
:root[data-theme="light"] .topbar-btn,
body.theme-light .topbar .btn,
body.theme-light .topbar .pill,
body.theme-light .topbar-actions a,
body.theme-light .topbar-actions button,
body.theme-light .topbar-actions .btn,
body.theme-light .topbar-btn,
:root[data-theme="light"] .sheet-menubar .menu-trigger,
:root[data-theme="light"] .sheet-menubar .solo-trigger,
:root[data-theme="light"] .sheet-menubar button,
:root[data-theme="light"] .sheet-menubar .btn,
:root[data-theme="light"] .sheet-top .btn,
:root[data-theme="light"] .sheet-top button,
:root[data-theme="light"] .fmt-toolbar button,
:root[data-theme="light"] .fmt-toolbar .ghost,
:root[data-theme="light"] .fmt-select,
body.theme-light .sheet-menubar .menu-trigger,
body.theme-light .sheet-menubar .solo-trigger,
body.theme-light .sheet-menubar button,
body.theme-light .sheet-menubar .btn,
body.theme-light .sheet-top .btn,
body.theme-light .sheet-top button,
body.theme-light .fmt-toolbar button,
body.theme-light .fmt-toolbar .ghost,
body.theme-light .fmt-select{
  background: linear-gradient(180deg, rgba(242,247,252,0.98) 0%, rgba(230,239,248,0.98) 100%);
  border-color: rgba(51, 74, 106, 0.20);
}

:root[data-theme="light"] .topbar .btn:hover,
:root[data-theme="light"] .topbar .pill:hover,
:root[data-theme="light"] .topbar-actions a:hover,
:root[data-theme="light"] .topbar-actions button:hover,
:root[data-theme="light"] .topbar-actions .btn:hover,
:root[data-theme="light"] .topbar-btn:hover,
body.theme-light .topbar .btn:hover,
body.theme-light .topbar .pill:hover,
body.theme-light .topbar-actions a:hover,
body.theme-light .topbar-actions button:hover,
body.theme-light .topbar-actions .btn:hover,
body.theme-light .topbar-btn:hover,
:root[data-theme="light"] .sheet-menubar .menu-trigger:hover,
:root[data-theme="light"] .sheet-menubar .solo-trigger:hover,
:root[data-theme="light"] .sheet-menubar button:hover,
:root[data-theme="light"] .sheet-menubar .btn:hover,
:root[data-theme="light"] .sheet-top .btn:hover,
:root[data-theme="light"] .sheet-top button:hover,
:root[data-theme="light"] .fmt-toolbar button:hover,
:root[data-theme="light"] .fmt-toolbar .ghost:hover,
body.theme-light .sheet-menubar .menu-trigger:hover,
body.theme-light .sheet-menubar .solo-trigger:hover,
body.theme-light .sheet-menubar button:hover,
body.theme-light .sheet-menubar .btn:hover,
body.theme-light .sheet-top .btn:hover,
body.theme-light .sheet-top button:hover,
body.theme-light .fmt-toolbar button:hover,
body.theme-light .fmt-toolbar .ghost:hover{
  background: linear-gradient(180deg, rgba(248,251,255,1) 0%, rgba(236,244,251,1) 100%);
}

@media (max-width: 920px){
  .topbar-inner{ margin: 7px 12px 4px; }
  .topbar-shell{ padding: 5px 12px; min-height: 40px; }
  .brand-wordmark{ font-size: 0.94rem; }
  .topbar .btn,
  .topbar .pill,
  .topbar-actions a,
  .topbar-actions button,
  .topbar-actions .btn,
  .topbar-btn{ min-height: 26px; padding: 2px 10px; }
  .sheet-top{ padding: 7px 12px 7px; }
  .sheet-page-title,
  .sheet-title{ font-size: clamp(1.7rem, 4vw, 2.1rem); }
}


/* ===== Final grouped-shell repair: top navbar fill + grouped footer ===== */

/* Top navbar should sit as a single full-width pill inside the top zone */
.topbar{
  background: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  padding-top: 10px !important;
  padding-bottom: 8px !important;
}

.topbar .container.topbar-inner,
.topbar-inner{
  margin: 0 18px 4px !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
}

.topbar-shell{
  width: 100% !important;
  margin: 0 !important;
}

/* Make the lower workspace and footer read as one grouped rounded section */
.sheet-workspace-shell{
  margin: 0 18px 0 !important;
  padding: 12px 14px 0 !important;
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
  border-radius: 28px 28px 0 0 !important;
  overflow: hidden !important;
  gap: 6px !important;
  background: rgba(18,22,36,0.70) !important;
}

body.theme-light .sheet-workspace-shell,
:root[data-theme="light"] .sheet-workspace-shell{
  background: rgba(184,205,226,0.96) !important;
}

.sheet-top{
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 10px 12px 8px !important;
  border-radius: 0 !important;
}

.sheet-format-shell{
  margin-top: 0 !important;
  padding-top: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.table-wrap{
  margin-top: 0 !important;
  border-radius: 14px 14px 0 0 !important;
}

.app-main{
  padding-bottom: 0 !important;
}

.app-footer{
  margin: 0 18px 12px !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-radius: 0 0 28px 28px !important;
  background: rgba(18,22,36,0.70) !important;
  backdrop-filter: none !important;
}

body.theme-light .app-footer,
:root[data-theme="light"] .app-footer{
  background: rgba(184,205,226,0.96) !important;
}

.app-footer-inner{
  min-height: 44px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

@media (max-width: 980px){
  .topbar .container.topbar-inner,
  .topbar-inner{
    margin: 0 12px 4px !important;
  }

  .sheet-workspace-shell{
    margin: 0 12px 0 !important;
    padding: 10px 12px 0 !important;
  }

  .app-footer{
    margin: 0 12px 10px !important;
  }
}


/* ===== Safe polish overrides from last known good version ===== */
/* Goal: darker light-mode gradient across page/chrome + smaller sheet title.
   Layout containers are intentionally untouched to avoid header regressions. */

/* Smaller sheet/file title */
.sheet-page-title,
.sheet-title{
  font-size: clamp(1.18rem, 1.75vw, 1.48rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

/* Darker page gradient in light mode */
:root[data-theme="light"] body,
body.theme-light{
  background:
    radial-gradient(circle at 10% -30%, rgba(58, 109, 182, 0.34), transparent 54%),
    radial-gradient(circle at 92% -24%, rgba(32, 137, 104, 0.20), transparent 46%),
    linear-gradient(180deg, #9fb7d1 0%, #7f9fbe 48%, #678aad 100%) !important;
}

/* Darker grouped chrome surfaces in light mode so they contrast against the page */
:root[data-theme="light"] .topbar-shell,
body.theme-light .topbar-shell{
  background:
    linear-gradient(180deg,
      rgba(200, 216, 232, 0.98) 0%,
      rgba(185, 204, 224, 0.98) 100%) !important;
  border-color: rgba(74, 100, 128, 0.30) !important;
  box-shadow: 0 10px 24px rgba(83, 108, 135, 0.18) !important;
}

:root[data-theme="light"] .sheet-workspace-shell,
body.theme-light .sheet-workspace-shell{
  background:
    linear-gradient(180deg,
      rgba(205, 220, 236, 0.98) 0%,
      rgba(190, 208, 228, 0.98) 100%) !important;
}

:root[data-theme="light"] .app-footer,
body.theme-light .app-footer{
  background:
    linear-gradient(180deg,
      rgba(150, 176, 203, 0.98) 0%,
      rgba(134, 161, 190, 0.98) 100%) !important;
}

/* Keep toolbar shell transparent so grouped workspace gradient reads through */
:root[data-theme="light"] .sheet-top,
body.theme-light .sheet-top{
  background: transparent !important;
}

/* Stronger green for SmarterSheet brand */
.brand-smarter,
.logo-smarter,
.app-brand .smarter,
.brand .smarter{
    color:#15803d !important;
    font-weight:700;
}

/* Increase SmarterSheet brand size slightly to fill header vertically */
.app-brand,
.brand,
.logo-text{
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
}

.brand-smarter,
.logo-smarter,
.app-brand .smarter,
.brand .smarter{
    font-size: 1.28rem !important;
    font-weight: 700 !important;
}

/* Brand text normalization: Smarter + Sheet same size, remove highlight/shadow */
.app-brand,
.brand,
.logo-text,
.app-brand .smarter,
.app-brand .sheet,
.brand .smarter,
.brand .sheet{
    font-size: 1.28rem !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Ensure SmarterSheet brand words are identical size and slightly larger */
.app-brand,
.brand,
.logo-text,
.app-brand span,
.brand span{
    font-size: 1.36rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em !important;
    text-shadow: none !important;
}

/* Force Smarter + Sheet identical font sizing */
.smarter,
.sheet,
.app-brand .smarter,
.app-brand .sheet,
.brand .smarter,
.brand .sheet {
    font-size: 1.36rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

/* Ensure no nested span overrides shrink 'Sheet' */
.app-brand span,
.brand span {
    font-size: inherit !important;
}


/* ===== Final brand wordmark equalization =====
   base.html renders:
   <div class="brand-wordmark"><span class="brand-smarter">Smarter</span>Sheet</div>
   So "Sheet" inherits from .brand-wordmark while "Smarter" used its own class.
   Force BOTH to exactly the same size/weight by styling the parent and making
   .brand-smarter inherit those values.
================================================ */

.brand-wordmark{
  font-size: 1.42rem !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.01em !important;
  text-shadow: none !important;
  filter: none !important;
}

.brand-smarter{
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-shadow: none !important;
  filter: none !important;
  color: #15803d !important;
}

/* Catch any older alternate brand structures without changing layout */
.brand,
.app-brand,
.logo-text{
  text-shadow: none !important;
}
.brand .brand-smarter,
.app-brand .brand-smarter,
.logo-text .brand-smarter,
.brand .smarter,
.app-brand .smarter,
.logo-text .smarter{
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Dark mode: make 'Sheet' lighter blue instead of white */
:root[data-theme="dark"] .brand-wordmark,
body.theme-dark .brand-wordmark{
    color: #7fb3ff !important; /* lighter blue */
}

:root[data-theme="dark"] .brand-smarter,
body.theme-dark .brand-smarter{
    color: #22c55e !important; /* keep greener Smarter in dark mode */
}

/* Fix vertical centering for top-right pill buttons (Users / Audit / Logout etc.) */
.topbar-shell .pill,
.topbar-shell .btn,
.topbar-shell button,
.topbar-shell .nav-pill{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Smaller top navbar pill buttons + unbold text to match production */
.topbar-shell .pill,
.topbar-shell .btn,
.topbar-shell button,
.topbar-shell .nav-pill{
    font-size: 0.85rem !important;
    font-weight: 500 !important; /* remove bold look */
    padding: 4px 10px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Further reduce top navbar pill buttons to match production scale */
.topbar-shell .pill,
.topbar-shell .btn,
.topbar-shell button,
.topbar-shell .nav-pill{
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
}


/* ===== Mobile topbar stacking fix =====
   Prevent overlap between brand, signed-in text, and action pills.
   Stack into clean rows on narrow screens.
*/
@media (max-width: 820px){
  .topbar-shell{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .topbar-brand{
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .brand-lockup{
    min-width: 0 !important;
  }

  .brand-wordmark{
    white-space: nowrap !important;
  }

  .brand-meta{
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .topbar-actions{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .user-label{
    order: 2 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  #themeToggle,
  .theme-toggle{
    order: 1 !important;
  }

  .topbar-form{
    display: inline-flex !important;
  }

  .topbar-actions .btn,
  .topbar-actions .pill,
  .topbar-actions button,
  .topbar-actions a{
    order: 3 !important;
  }
}

@media (max-width: 560px){
  .topbar-shell{
    gap: 8px !important;
  }

  .topbar{
    padding-top: 8px !important;
    padding-bottom: 6px !important;
  }

  .topbar .container.topbar-inner,
  .topbar-inner{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .topbar-shell{
    padding: 10px 12px !important;
  }

  .brand-wordmark{
    font-size: 1.2rem !important;
    line-height: 1.05 !important;
  }

  .brand-smarter{
    font-size: inherit !important;
  }

  .topbar-actions{
    gap: 6px !important;
  }

  .topbar-shell .pill,
  .topbar-shell .btn,
  .topbar-shell button,
  .topbar-shell .nav-pill{
    font-size: 0.76rem !important;
    padding: 4px 8px !important;
  }
}


/* ===== Safe hover polish for top navbar action buttons and light-mode buttons ===== */

/* Smooth transitions */
.btn,
button,
.pill,
.topbar-shell .btn,
.topbar-shell button,
.topbar-shell .pill,
.topbar-shell .nav-pill{
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease;
}

/* LIGHT MODE
   - top-right navbar buttons: green fill + soft glow on hover
   - same hover language for buttons generally in light mode
*/
:root[data-theme="light"] .topbar-shell .btn:hover,
:root[data-theme="light"] .topbar-shell button:hover,
:root[data-theme="light"] .topbar-shell .pill:hover,
:root[data-theme="light"] .topbar-shell .nav-pill:hover,
body.theme-light .topbar-shell .btn:hover,
body.theme-light .topbar-shell button:hover,
body.theme-light .topbar-shell .pill:hover,
body.theme-light .topbar-shell .nav-pill:hover{
  background: linear-gradient(180deg, #d8f7df 0%, #c2efcd 100%) !important;
  border-color: rgba(21, 128, 61, 0.42) !important;
  color: #166534 !important;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.18),
    0 0 14px rgba(74, 222, 128, 0.28) !important;
}

/* Light mode: same hover family for regular buttons across the app */
:root[data-theme="light"] .btn:hover,
:root[data-theme="light"] button:hover,
:root[data-theme="light"] .pill:hover,
body.theme-light .btn:hover,
body.theme-light button:hover,
body.theme-light .pill:hover{
  background: linear-gradient(180deg, #dff7e5 0%, #caf0d3 100%);
  border-color: rgba(21, 128, 61, 0.28);
  color: #166534;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.16);
}

/* Keep disabled buttons from glowing */
.btn:disabled,
button:disabled{
  box-shadow: none !important;
  transform: none !important;
}

/* DARK MODE
   - top-right navbar buttons: darker blue fill + bright border glow on hover
   - production-inspired brighter hover ring
*/
:root[data-theme="dark"] .topbar-shell .btn:hover,
:root[data-theme="dark"] .topbar-shell button:hover,
:root[data-theme="dark"] .topbar-shell .pill:hover,
:root[data-theme="dark"] .topbar-shell .nav-pill:hover,
body.theme-dark .topbar-shell .btn:hover,
body.theme-dark .topbar-shell button:hover,
body.theme-dark .topbar-shell .pill:hover,
body.theme-dark .topbar-shell .nav-pill:hover{
  background: linear-gradient(180deg, rgba(37, 73, 125, 0.92) 0%, rgba(26, 56, 102, 0.92) 100%) !important;
  border-color: rgba(96, 165, 250, 0.92) !important;
  color: #eaf2ff !important;
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.42),
    0 0 16px rgba(96, 165, 250, 0.34),
    0 0 28px rgba(59, 130, 246, 0.18) !important;
}

/* Dark mode: same hover family for buttons generally */
:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] .pill:hover,
body.theme-dark .btn:hover,
body.theme-dark button:hover,
body.theme-dark .pill:hover{
  background: linear-gradient(180deg, rgba(31, 63, 112, 0.88) 0%, rgba(23, 49, 90, 0.88) 100%);
  border-color: rgba(96, 165, 250, 0.54);
  color: #eef4ff;
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.22),
    0 0 10px rgba(59, 130, 246, 0.16);
}

/* Tiny tactile feel without moving layout around */
.topbar-shell .btn:hover,
.topbar-shell button:hover,
.topbar-shell .pill:hover,
.topbar-shell .nav-pill:hover{
  transform: translateY(-1px);
}

/* ===== Light mode: make ALL pill-style buttons use the same green hover ===== */
:root[data-theme="light"] .pill:hover,
:root[data-theme="light"] .btn:hover,
:root[data-theme="light"] button:hover,
:root[data-theme="light"] .nav-pill:hover,
body.theme-light .pill:hover,
body.theme-light .btn:hover,
body.theme-light button:hover,
body.theme-light .nav-pill:hover{
  background: linear-gradient(180deg, #d8f7df 0%, #c2efcd 100%) !important;
  border-color: rgba(21, 128, 61, 0.42) !important;
  color: #166534 !important;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.18),
    0 0 14px rgba(74, 222, 128, 0.28) !important;
  transform: translateY(-1px);
}

/* ===== Toolbar button alignment + remove underline hover ===== */
.sheet-top .btn,
.sheet-top .pill,
.sheet-top button,
.sheet-top a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

/* Prevent underline on hover for toolbar links/buttons */
.sheet-top a:hover,
.sheet-top .btn:hover,
.sheet-top .pill:hover,
.sheet-top button:hover{
    text-decoration: none !important;
}

/* ===== Dark mode: muted darker blue button fill before hover ===== */
:root[data-theme="dark"] .pill,
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] button,
:root[data-theme="dark"] .nav-pill,
body.theme-dark .pill,
body.theme-dark .btn,
body.theme-dark button,
body.theme-dark .nav-pill{
  background: linear-gradient(180deg, rgba(30,55,95,0.85) 0%, rgba(22,44,80,0.85) 100%) !important;
  border-color: rgba(96,165,250,0.28) !important;
  color: #eaf2ff !important;
}

/* ===== Dark mode button base + hover consistency ===== */

/* darker muted blue base (non-hover) */
:root[data-theme="dark"] .pill,
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] button,
:root[data-theme="dark"] .nav-pill,
body.theme-dark .pill,
body.theme-dark .btn,
body.theme-dark button,
body.theme-dark .nav-pill{
  background: linear-gradient(180deg, rgba(18,38,70,0.88) 0%, rgba(14,30,58,0.88) 100%) !important;
  border-color: rgba(96,165,250,0.18) !important;
  color: #eaf2ff !important;
}

/* ensure hover works for toolbar buttons as well */
:root[data-theme="dark"] .pill:hover,
:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] .nav-pill:hover,
body.theme-dark .pill:hover,
body.theme-dark .btn:hover,
body.theme-dark button:hover,
body.theme-dark .nav-pill:hover,
:root[data-theme="dark"] .sheet-top .pill:hover,
:root[data-theme="dark"] .sheet-top .btn:hover,
:root[data-theme="dark"] .sheet-top button:hover,
body.theme-dark .sheet-top .pill:hover,
body.theme-dark .sheet-top .btn:hover,
body.theme-dark .sheet-top button:hover{
  background: linear-gradient(180deg, rgba(37,73,125,0.92) 0%, rgba(26,56,102,0.92) 100%) !important;
  border-color: rgba(96,165,250,0.92) !important;
  color: #eef4ff !important;
  box-shadow:
    0 0 0 1px rgba(96,165,250,0.42),
    0 0 16px rgba(96,165,250,0.34),
    0 0 28px rgba(59,130,246,0.18) !important;
}


/* ===== Admin Users page refresh ===== */
.admin-users-page{
  padding: 20px 20px 24px;
}

.admin-page-head{
  align-items: flex-start;
  margin-bottom: 14px;
}

.admin-page-head h1{
  margin: 6px 0 2px;
}

.admin-kicker{
  display: inline-flex;
  align-items: center;
}

.admin-users-shell{
  background: linear-gradient(180deg, rgba(228, 236, 245, 0.92) 0%, rgba(214, 226, 239, 0.92) 100%);
  border: 1px solid rgba(103, 128, 156, 0.28);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(27, 53, 83, 0.08);
}

body.theme-dark .admin-users-shell,
:root[data-theme="dark"] .admin-users-shell{
  background: linear-gradient(180deg, rgba(32, 43, 59, 0.88) 0%, rgba(24, 34, 48, 0.9) 100%);
  border-color: rgba(103, 149, 212, 0.18);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.admin-section{
  background: rgba(255, 255, 255, 0.46);
  border: 1px solid rgba(120, 144, 169, 0.18);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}

body.theme-dark .admin-section,
:root[data-theme="dark"] .admin-section{
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(120, 144, 169, 0.14);
}

.admin-section h2{
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.admin-user-row-form{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr 1.2fr 0.8fr auto;
  gap: 10px;
  align-items: center;
}

.admin-user-row-form input,
.admin-user-row-form select{
  min-width: 0;
}

.directory-snapshot-row{
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 10px;
}

.snapshot-chip{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(120, 144, 169, 0.22);
}

body.theme-dark .snapshot-chip,
:root[data-theme="dark"] .snapshot-chip{
  background: rgba(255,255,255,0.06);
  border-color: rgba(120, 144, 169, 0.18);
}

.snapshot-chip span{
  font-size: 0.84rem;
  color: var(--muted);
}

.snapshot-chip strong{
  font-size: 1.05rem;
}

.admin-users-list-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.admin-user-card-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-user-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(120, 144, 169, 0.18);
}

body.theme-dark .admin-user-card,
:root[data-theme="dark"] .admin-user-card{
  background: rgba(255,255,255,0.075);
  border-color: rgba(120, 144, 169, 0.18);
}

.admin-user-card-main{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.admin-user-avatar{
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.01em;
}

.admin-user-copy{
  min-width: 0;
}

.admin-user-name{
  font-weight: 700;
  line-height: 1.1;
}

.admin-user-email{
  color: var(--muted);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.admin-user-meta{
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 2px;
}

.admin-user-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.status-pill,
.mini-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.84rem;
  line-height: 1;
  border: 1px solid transparent;
}

.status-pill.is-active{
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.18);
  color: #166534;
}

.status-pill.is-inactive{
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.16);
  color: #b91c1c;
}

.mini-pill{
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
}

body.theme-dark .status-pill.is-active,
:root[data-theme="dark"] .status-pill.is-active{
  color: #9ae6b4;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.16);
}

body.theme-dark .status-pill.is-inactive,
:root[data-theme="dark"] .status-pill.is-inactive{
  color: #fca5a5;
}

body.theme-dark .mini-pill,
:root[data-theme="dark"] .mini-pill{
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.10);
  border-color: rgba(59, 130, 246, 0.18);
}

.danger-outline{
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #b91c1c !important;
  background: rgba(255,255,255,0.65) !important;
}

body.theme-dark .danger-outline,
:root[data-theme="dark"] .danger-outline{
  color: #fca5a5 !important;
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(248, 113, 113, 0.35) !important;
}

@media (max-width: 1180px){
  .admin-user-row-form{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px){
  .admin-users-page{
    padding: 16px 14px 20px;
  }

  .directory-snapshot-row{
    grid-template-columns: repeat(3, minmax(110px, 1fr));
  }

  .admin-user-card{
    flex-direction: column;
    align-items: stretch;
  }

  .admin-user-actions{
    justify-content: flex-start;
  }
}

@media (max-width: 640px){
  .admin-user-row-form{
    grid-template-columns: 1fr;
  }

  .directory-snapshot-row{
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }
}


/* ===== Users + Audit page parity repair ===== */

/* shared page padding / side margins */
.admin-users-page,
.audit-page,
.audit-log-page,
.admin-audit-page{
  padding: 20px 20px 24px !important;
}

@media (max-width: 860px){
  .admin-users-page,
  .audit-page,
  .audit-log-page,
  .admin-audit-page{
    padding: 16px 14px 20px !important;
  }
}

/* OUTER SHELLS: blue gradient in light mode */
:root[data-theme="light"] .admin-users-shell,
body.theme-light .admin-users-shell,
:root[data-theme="light"] .audit-shell,
body.theme-light .audit-shell{
  background: linear-gradient(
    180deg,
    rgba(186, 207, 227, 0.96) 0%,
    rgba(168, 192, 217, 0.96) 100%
  ) !important;
  border: 1px solid rgba(90, 116, 144, 0.24) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 24px rgba(69, 92, 118, 0.10) !important;
}

/* INNER SECTIONS: slightly lighter blue than shell */
:root[data-theme="light"] .admin-section,
body.theme-light .admin-section,
:root[data-theme="light"] .audit-page .card,
:root[data-theme="light"] .audit-log-page .card,
:root[data-theme="light"] .admin-audit-page .card,
body.theme-light .audit-page .card,
body.theme-light .audit-log-page .card,
body.theme-light .admin-audit-page .card{
  background: linear-gradient(
    180deg,
    rgba(214, 226, 239, 0.82) 0%,
    rgba(201, 216, 233, 0.82) 100%
  ) !important;
  border-color: rgba(113, 137, 162, 0.18) !important;
}

/* WHITE inner controls/cards */
:root[data-theme="light"] .snapshot-chip,
body.theme-light .snapshot-chip,
:root[data-theme="light"] .admin-user-card,
body.theme-light .admin-user-card,
:root[data-theme="light"] .admin-user-row-form input,
body.theme-light .admin-user-row-form input,
:root[data-theme="light"] .admin-user-row-form select,
body.theme-light .admin-user-row-form select,
:root[data-theme="light"] .admin-user-row-form button,
body.theme-light .admin-user-row-form button,
:root[data-theme="light"] .audit-log-page table.simple,
body.theme-light .audit-log-page table.simple,
:root[data-theme="light"] .audit-log-page .table-wrap,
body.theme-light .audit-log-page .table-wrap{
  background: #ffffff !important;
}

:root[data-theme="light"] .snapshot-chip,
body.theme-light .snapshot-chip,
:root[data-theme="light"] .admin-user-card,
body.theme-light .admin-user-card,
:root[data-theme="light"] .audit-log-page table.simple,
body.theme-light .audit-log-page table.simple,
:root[data-theme="light"] .audit-log-page .table-wrap,
body.theme-light .audit-log-page .table-wrap{
  border-color: rgba(120, 144, 169, 0.20) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset !important;
}

/* audit table frame should read like a white inner panel */
:root[data-theme="light"] .audit-log-page .table-wrap,
body.theme-light .audit-log-page .table-wrap{
  border-radius: 14px !important;
  overflow: auto !important;
}

/* make sure last users section doesn't create extra gap before footer */
.admin-users-shell{
  padding-bottom: 8px !important;
}
.admin-users-shell > .admin-section:last-child{
  margin-bottom: 0 !important;
}


/* ===== CLEAN FOOTER + AUDIT PAGE SIDE MARGINS (controlled pass) ===== */

/* 1) Footer: make it a simple transparent strip in both modes */
.app-footer,
:root[data-theme="light"] .app-footer,
body.theme-light .app-footer,
:root[data-theme="dark"] .app-footer,
body.theme-dark .app-footer{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}

.app-footer-inner,
:root[data-theme="light"] .app-footer-inner,
body.theme-light .app-footer-inner,
:root[data-theme="dark"] .app-footer-inner,
body.theme-dark .app-footer-inner{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: 26px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* kill decorative pseudo elements / inherited footer panel styling */
.app-footer::before,
.app-footer::after,
.app-footer-inner::before,
.app-footer-inner::after{
  display: none !important;
  content: none !important;
}

/* footer text spacing */
.app-footer-links{
  gap: 28px !important;
}
.app-footer-copy,
.app-footer-links a{
  color: var(--muted) !important;
}

.app-footer,
:root[data-theme="light"] .app-footer,
body.theme-light .app-footer,
:root[data-theme="dark"] .app-footer,
body.theme-dark .app-footer{
  background: transparent !important;
  margin: 10px 0 14px !important;
  padding: 0 0 12px !important;
}

.app-footer-inner,
:root[data-theme="light"] .app-footer-inner,
body.theme-light .app-footer-inner,
:root[data-theme="dark"] .app-footer-inner,
body.theme-dark .app-footer-inner{
  min-height: 44px !important;
  padding: 10px 18px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(113, 137, 162, 0.22) !important;
  background: linear-gradient(180deg, rgba(214, 226, 239, 0.72) 0%, rgba(199, 216, 233, 0.72) 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

:root[data-theme="dark"] .app-footer-inner,
body.theme-dark .app-footer-inner{
  border-color: rgba(95, 114, 140, 0.28) !important;
  background: linear-gradient(180deg, rgba(36, 43, 54, 0.92) 0%, rgba(28, 34, 44, 0.92) 100%) !important;
}

.app-footer-copy,
.app-footer-links a{
  font-size: 0.92rem !important;
}

.app-footer-links{
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
}

/* tighten last section gap before footer on admin/users/audit */
.admin-users-shell,
.audit-shell{
  padding-bottom: 8px !important;
}
.admin-users-shell > .admin-section:last-child,
.audit-shell > .card:last-child,
.audit-shell > .admin-section:last-child{
  margin-bottom: 0 !important;
}

/* 2) Audit page margins/padding like Users page */
.audit-page,
.audit-log-page,
.admin-audit-page{
  padding: 20px 20px 24px !important;
}

@media (max-width: 860px){
  .audit-page,
  .audit-log-page,
  .admin-audit-page{
    padding: 16px 14px 20px !important;
  }
}

/* 3) Audit page light mode panels/cards */
:root[data-theme="light"] .audit-shell,
body.theme-light .audit-shell{
  background: linear-gradient(
    180deg,
    rgba(186, 207, 227, 0.96) 0%,
    rgba(168, 192, 217, 0.96) 100%
  ) !important;
  border: 1px solid rgba(90, 116, 144, 0.24) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 24px rgba(69, 92, 118, 0.10) !important;
}

:root[data-theme="light"] .audit-page .card,
:root[data-theme="light"] .audit-log-page .card,
:root[data-theme="light"] .admin-audit-page .card,
body.theme-light .audit-page .card,
body.theme-light .audit-log-page .card,
body.theme-light .admin-audit-page .card{
  background: linear-gradient(
    180deg,
    rgba(214, 226, 239, 0.82) 0%,
    rgba(201, 216, 233, 0.82) 100%
  ) !important;
  border-color: rgba(113, 137, 162, 0.18) !important;
}

/* white inner audit table area */
:root[data-theme="light"] .audit-log-page .table-wrap,
:root[data-theme="light"] .audit-log-page table.simple,
body.theme-light .audit-log-page .table-wrap,
body.theme-light .audit-log-page table.simple{
  background: #ffffff !important;
  border-color: rgba(120, 144, 169, 0.20) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset !important;
  border-radius: 14px !important;
}

/* 4) Re-assert Users page light mode colors */
:root[data-theme="light"] .admin-users-shell,
body.theme-light .admin-users-shell{
  background: linear-gradient(
    180deg,
    rgba(186, 207, 227, 0.96) 0%,
    rgba(168, 192, 217, 0.96) 100%
  ) !important;
  border-color: rgba(90, 116, 144, 0.24) !important;
  box-shadow: 0 10px 24px rgba(69, 92, 118, 0.10) !important;
}

:root[data-theme="light"] .admin-section,
body.theme-light .admin-section{
  background: linear-gradient(
    180deg,
    rgba(214, 226, 239, 0.82) 0%,
    rgba(201, 216, 233, 0.82) 100%
  ) !important;
  border-color: rgba(113, 137, 162, 0.18) !important;
}

:root[data-theme="light"] .snapshot-chip,
body.theme-light .snapshot-chip,
:root[data-theme="light"] .admin-user-card,
body.theme-light .admin-user-card,
:root[data-theme="light"] .admin-user-row-form input,
body.theme-light .admin-user-row-form input,
:root[data-theme="light"] .admin-user-row-form select,
body.theme-light .admin-user-row-form select,
:root[data-theme="light"] .admin-user-row-form button,
body.theme-light .admin-user-row-form button{
  background: #ffffff !important;
}

:root[data-theme="light"] .snapshot-chip,
body.theme-light .snapshot-chip,
:root[data-theme="light"] .admin-user-card,
body.theme-light .admin-user-card{
  border-color: rgba(120, 144, 169, 0.20) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset !important;
}


/* ===== Page margin + shell parity fix for Audit / All Sheets / Login / Legal pages ===== */
/* CSS only. Does not touch footer/colors already working elsewhere. */

/* shared page gutters so content stops hugging the viewport edges */
.directory-page-shell,
.auth-shell,
.legal-page,
.audit-shell,
.admin-page-head{
  margin-left: clamp(16px, 2.4vw, 28px) !important;
  margin-right: clamp(16px, 2.4vw, 28px) !important;
}

/* keep header row aligned with shell width */
.admin-page-head{
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

/* light-mode shell treatment to match Users page */
:root[data-theme="light"] .directory-page-shell,
body.theme-light .directory-page-shell,
:root[data-theme="light"] .auth-shell,
body.theme-light .auth-shell,
:root[data-theme="light"] .audit-shell,
body.theme-light .audit-shell{
  background: linear-gradient(
    180deg,
    rgba(186, 207, 227, 0.96) 0%,
    rgba(168, 192, 217, 0.96) 100%
  ) !important;
  border: 1px solid rgba(90, 116, 144, 0.24) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 24px rgba(69, 92, 118, 0.10) !important;
  padding: 14px !important;
}

/* lighter inner cards/windows in light mode */
:root[data-theme="light"] .directory-page-shell > .card,
body.theme-light .directory-page-shell > .card,
:root[data-theme="light"] .auth-card,
body.theme-light .auth-card,
:root[data-theme="light"] .audit-shell > .card,
body.theme-light .audit-shell > .card,
:root[data-theme="light"] .legal-page,
body.theme-light .legal-page{
  background: linear-gradient(
    180deg,
    rgba(214, 226, 239, 0.82) 0%,
    rgba(201, 216, 233, 0.82) 100%
  ) !important;
  border-color: rgba(113, 137, 162, 0.18) !important;
}

/* white inner controls/surfaces for light mode */
:root[data-theme="light"] .directory-page-shell input,
body.theme-light .directory-page-shell input,
:root[data-theme="light"] .directory-page-shell select,
body.theme-light .directory-page-shell select,
:root[data-theme="light"] .directory-page-shell button,
body.theme-light .directory-page-shell button,
:root[data-theme="light"] .auth-card input,
body.theme-light .auth-card input,
:root[data-theme="light"] .auth-card select,
body.theme-light .auth-card select,
:root[data-theme="light"] .auth-card button,
body.theme-light .auth-card button,
:root[data-theme="light"] .sheet-card,
body.theme-light .sheet-card,
:root[data-theme="light"] .directory-table-wrap,
body.theme-light .directory-table-wrap,
:root[data-theme="light"] .audit-table,
body.theme-light .audit-table,
:root[data-theme="light"] .legal-section-card,
body.theme-light .legal-section-card{
  background: #ffffff !important;
}

:root[data-theme="light"] .sheet-card,
body.theme-light .sheet-card,
:root[data-theme="light"] .directory-table-wrap,
body.theme-light .directory-table-wrap,
:root[data-theme="light"] .audit-table,
body.theme-light .audit-table,
:root[data-theme="light"] .legal-section-card,
body.theme-light .legal-section-card,
:root[data-theme="light"] .auth-card input,
body.theme-light .auth-card input,
:root[data-theme="light"] .auth-card select,
body.theme-light .auth-card select,
:root[data-theme="light"] .auth-card button,
body.theme-light .auth-card button,
:root[data-theme="light"] .directory-page-shell input,
body.theme-light .directory-page-shell input,
:root[data-theme="light"] .directory-page-shell select,
body.theme-light .directory-page-shell select,
:root[data-theme="light"] .directory-page-shell button,
body.theme-light .directory-page-shell button{
  border-color: rgba(120, 144, 169, 0.20) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset !important;
}

/* make audit table sit inside a framed white surface */
:root[data-theme="light"] .audit-table,
body.theme-light .audit-table{
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* keep login form compact and readable */
.auth-form{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
}
.auth-form label{
  min-width: min(320px, 100%);
}

/* security / terms should also breathe from the sides */
.legal-page{
  padding: 22px !important;
}

/* dark mode: margins only, no color changes */
:root[data-theme="dark"] .directory-page-shell,
body.theme-dark .directory-page-shell,
:root[data-theme="dark"] .auth-shell,
body.theme-dark .auth-shell,
:root[data-theme="dark"] .audit-shell,
body.theme-dark .audit-shell,
:root[data-theme="dark"] .legal-page,
body.theme-dark .legal-page{
  margin-left: clamp(16px, 2.4vw, 28px) !important;
  margin-right: clamp(16px, 2.4vw, 28px) !important;
}

@media (max-width: 860px){
  .directory-page-shell,
  .auth-shell,
  .legal-page,
  .audit-shell,
  .admin-page-head{
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  :root[data-theme="light"] .directory-page-shell,
  body.theme-light .directory-page-shell,
  :root[data-theme="light"] .auth-shell,
  body.theme-light .auth-shell,
  :root[data-theme="light"] .audit-shell,
  body.theme-light .audit-shell{
    padding: 12px !important;
  }

  .auth-form{
    flex-direction: column;
    align-items: stretch;
  }

  .auth-form label{
    min-width: 100%;
  }
}


/* ===== File / Views / All Sheet Docs production-style popup refresh ===== */

/* File menu + generic popup menu */
#fileMenu.menu-panel,
.menu-panel.menu-panel-views{
  min-width: 316px;
  padding: 10px 10px 12px;
  border-radius: 22px;
  box-shadow: 0 22px 48px rgba(0,0,0,0.34);
}

#fileMenu .menu-item,
.menu-panel.menu-panel-views .menu-item{
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 0.98rem;
  font-weight: 500;
  justify-content: flex-start;
  text-align: left;
}

#fileMenu .menu-group-label,
.menu-panel.menu-panel-views .menu-group-label{
  padding: 8px 16px 10px;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  font-weight: 800;
}

#fileMenu .menu-separator,
.menu-panel.menu-panel-views .menu-separator{
  margin: 10px 6px;
}

.menu-panel.menu-panel-views{
  min-width: 330px;
}

.menu-panel.menu-panel-views .menu-item-view.is-active{
  font-weight: 700;
}

/* Dark mode popup styling */
:root:not([data-theme="light"]) #fileMenu.menu-panel,
:root:not([data-theme="light"]) .menu-panel.menu-panel-views,
body.theme-dark #fileMenu.menu-panel,
body.theme-dark .menu-panel.menu-panel-views{
  background: linear-gradient(180deg, rgba(18,24,35,0.985) 0%, rgba(13,18,28,0.98) 100%);
  border-color: rgba(104,140,191,0.18);
}

:root:not([data-theme="light"]) #fileMenu .menu-item,
:root:not([data-theme="light"]) .menu-panel.menu-panel-views .menu-item,
body.theme-dark #fileMenu .menu-item,
body.theme-dark .menu-panel.menu-panel-views .menu-item{
  color: #8fb7ff;
  background: transparent;
}

:root:not([data-theme="light"]) #fileMenu .menu-item:hover:not(.is-disabled):not(:disabled),
:root:not([data-theme="light"]) .menu-panel.menu-panel-views .menu-item:hover:not(.is-disabled):not(:disabled),
body.theme-dark #fileMenu .menu-item:hover:not(.is-disabled):not(:disabled),
body.theme-dark .menu-panel.menu-panel-views .menu-item:hover:not(.is-disabled):not(:disabled){
  color: #d7ffe5;
  background: linear-gradient(180deg, rgba(43,114,77,0.42) 0%, rgba(33,94,64,0.42) 100%);
  border-color: rgba(74, 222, 128, 0.30);
  text-decoration: none;
}

:root:not([data-theme="light"]) #fileMenu .menu-item.is-disabled,
:root:not([data-theme="light"]) #fileMenu .menu-item:disabled,
:root:not([data-theme="light"]) .menu-panel.menu-panel-views .menu-item.is-disabled,
:root:not([data-theme="light"]) .menu-panel.menu-panel-views .menu-item:disabled,
body.theme-dark #fileMenu .menu-item.is-disabled,
body.theme-dark #fileMenu .menu-item:disabled,
body.theme-dark .menu-panel.menu-panel-views .menu-item.is-disabled,
body.theme-dark .menu-panel.menu-panel-views .menu-item:disabled{
  color: rgba(143,183,255,0.34);
  background: rgba(255,255,255,0.04);
}

/* Light mode popup styling */
:root[data-theme="light"] #fileMenu.menu-panel,
:root[data-theme="light"] .menu-panel.menu-panel-views,
body.theme-light #fileMenu.menu-panel,
body.theme-light .menu-panel.menu-panel-views{
  background: linear-gradient(180deg, rgba(255,255,255,0.985) 0%, rgba(246,250,255,0.98) 100%);
  border-color: rgba(109,138,167,0.24);
  box-shadow: 0 24px 48px rgba(64,91,123,0.18);
}

:root[data-theme="light"] #fileMenu .menu-item,
:root[data-theme="light"] .menu-panel.menu-panel-views .menu-item,
body.theme-light #fileMenu .menu-item,
body.theme-light .menu-panel.menu-panel-views .menu-item{
  color: #2c64aa;
  background: transparent;
}

:root[data-theme="light"] #fileMenu .menu-item:hover:not(.is-disabled):not(:disabled),
:root[data-theme="light"] .menu-panel.menu-panel-views .menu-item:hover:not(.is-disabled):not(:disabled),
body.theme-light #fileMenu .menu-item:hover:not(.is-disabled):not(:disabled),
body.theme-light .menu-panel.menu-panel-views .menu-item:hover:not(.is-disabled):not(:disabled){
  color: #155f3b;
  background: linear-gradient(180deg, rgba(203,231,216,0.92) 0%, rgba(188,223,204,0.92) 100%);
  border-color: rgba(57, 161, 105, 0.26);
  text-decoration: none;
}

:root[data-theme="light"] #fileMenu .menu-item.is-disabled,
:root[data-theme="light"] #fileMenu .menu-item:disabled,
:root[data-theme="light"] .menu-panel.menu-panel-views .menu-item.is-disabled,
:root[data-theme="light"] .menu-panel.menu-panel-views .menu-item:disabled,
body.theme-light #fileMenu .menu-item.is-disabled,
body.theme-light #fileMenu .menu-item:disabled,
body.theme-light .menu-panel.menu-panel-views .menu-item.is-disabled,
body.theme-light .menu-panel.menu-panel-views .menu-item:disabled{
  color: rgba(114, 140, 182, 0.42);
  background: rgba(210, 232, 219, 0.58);
}

/* Keep links in menus from underlining */
#fileMenu .menu-item:hover,
.menu-panel.menu-panel-views .menu-item:hover{
  text-decoration: none !important;
}

/* All Sheet Docs modal production-style refresh */
.sheet-modal-panel.sheet-modal-panel-docs{
  width: min(1140px, calc(100vw - 28px));
  background: linear-gradient(180deg, rgba(251,253,255,0.99) 0%, rgba(242,247,252,0.99) 100%);
  border-color: rgba(108, 136, 164, 0.28);
  box-shadow: 0 26px 54px rgba(58, 85, 116, 0.22);
}

.sheet-docs-header{
  padding: 18px 22px;
}

.sheet-docs-header strong{
  font-size: 1.15rem;
}

.sheet-docs-body{
  padding: 0 0 18px;
}

.sheet-docs-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px 16px;
  border-top: 1px solid rgba(108,136,164,0.22);
  border-bottom: 1px solid rgba(108,136,164,0.22);
}

.sheet-docs-toolbar-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sheet-docs-action{
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 16px;
  font-size: 0.98rem;
  border: 1px solid rgba(57, 161, 105, 0.72);
  background: linear-gradient(180deg, rgba(203,231,216,0.96) 0%, rgba(188,223,204,0.96) 100%);
  color: #155f3b;
}

.sheet-docs-action:hover:not(:disabled){
  background: linear-gradient(180deg, rgba(190,223,205,0.98) 0%, rgba(174,214,192,0.98) 100%);
}

.sheet-docs-action:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.sheet-docs-selected-copy{
  font-size: 0.98rem;
  color: #20395f;
  white-space: nowrap;
}

.sheet-docs-list-selectable{
  padding: 14px 22px 0;
  gap: 14px;
}

.sheet-doc-item.sheet-doc-item-selectable{
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  border-radius: 20px;
  border: 1px solid rgba(108,136,164,0.48);
  background: linear-gradient(180deg, rgba(246,250,255,0.98) 0%, rgba(237,244,251,0.98) 100%);
  color: #7ca5ea;
}

.sheet-doc-item.sheet-doc-item-selectable:hover{
  text-decoration: none;
  border-color: rgba(57, 161, 105, 0.42);
  background: linear-gradient(180deg, rgba(240,247,252,0.98) 0%, rgba(228,239,249,0.98) 100%);
}

.sheet-doc-check{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sheet-doc-checkbox{
  width: 24px;
  height: 24px;
  accent-color: #63b482;
}

.sheet-doc-item.sheet-doc-item-selectable .sheet-doc-name{
  color: #7ca5ea;
  font-size: 0.96rem;
  font-weight: 700;
}

.sheet-doc-item.sheet-doc-item-selectable .sheet-doc-meta{
  color: #314862;
  font-size: 0.96rem;
}

/* Dark mode docs modal keeps darker shell but same structure */
:root:not([data-theme="light"]) .sheet-modal-panel.sheet-modal-panel-docs,
body.theme-dark .sheet-modal-panel.sheet-modal-panel-docs{
  background: linear-gradient(180deg, rgba(16,20,31,0.99) 0%, rgba(12,16,26,0.99) 100%);
  border-color: rgba(104,140,191,0.22);
  box-shadow: 0 28px 58px rgba(0,0,0,0.42);
}

:root:not([data-theme="light"]) .sheet-docs-toolbar,
body.theme-dark .sheet-docs-toolbar{
  border-top-color: rgba(104,140,191,0.16);
  border-bottom-color: rgba(104,140,191,0.16);
}

:root:not([data-theme="light"]) .sheet-docs-action,
body.theme-dark .sheet-docs-action{
  border-color: rgba(57, 161, 105, 0.58);
  background: linear-gradient(180deg, rgba(24,65,47,0.96) 0%, rgba(18,53,39,0.96) 100%);
  color: #bbf0cb;
}

:root:not([data-theme="light"]) .sheet-docs-action:hover:not(:disabled),
body.theme-dark .sheet-docs-action:hover:not(:disabled){
  background: linear-gradient(180deg, rgba(30,83,59,0.98) 0%, rgba(23,68,49,0.98) 100%);
}

:root:not([data-theme="light"]) .sheet-docs-selected-copy,
body.theme-dark .sheet-docs-selected-copy{
  color: var(--muted);
}

:root:not([data-theme="light"]) .sheet-doc-item.sheet-doc-item-selectable,
body.theme-dark .sheet-doc-item.sheet-doc-item-selectable{
  border-color: rgba(104,140,191,0.22);
  background: linear-gradient(180deg, rgba(20,27,40,0.96) 0%, rgba(16,22,34,0.96) 100%);
}

:root:not([data-theme="light"]) .sheet-doc-item.sheet-doc-item-selectable .sheet-doc-name,
body.theme-dark .sheet-doc-item.sheet-doc-item-selectable .sheet-doc-name{
  color: #8fb7ff;
}

:root:not([data-theme="light"]) .sheet-doc-item.sheet-doc-item-selectable .sheet-doc-meta,
body.theme-dark .sheet-doc-item.sheet-doc-item-selectable .sheet-doc-meta{
  color: #d2dde9;
}

/* Responsive behavior */
@media (max-width: 780px){
  #fileMenu.menu-panel,
  .menu-panel.menu-panel-views{
    min-width: 284px;
  }

  .sheet-modal-panel.sheet-modal-panel-docs{
    width: min(96vw, 96vw);
  }

  .sheet-docs-toolbar{
    flex-direction: column;
    align-items: stretch;
  }

  .sheet-docs-selected-copy{
    white-space: normal;
  }

  .sheet-doc-item.sheet-doc-item-selectable{
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .sheet-doc-item.sheet-doc-item-selectable .sheet-doc-meta{
    grid-column: 2;
  }
}


/* === ROW LAYOUT ALIGNMENT FIX START === */

/* Keep the selector column narrow and centered */
.gridtable th.row-select-col,
.gridtable td.row-select{
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  padding: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.gridtable td.row-select{
  background: var(--table-row-index-bg, #d8dde6) !important;
}

.gridtable td.row-select [data-row-select-toggle]{
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 4px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Make the Row ID column wide enough for number + 3-dot button side-by-side */
.gridtable th.row-index,
.gridtable td.row-index{
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
}

.gridtable td.row-index{
  padding: 8px 6px !important;
  text-align: left !important;
  vertical-align: middle !important;
}

/* Force the number and menu trigger into a horizontal row */
/* If there is no wrapper, still align direct children horizontally */
.gridtable td.row-index .row-number{
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  border-radius: 999px !important;
  margin: 0 !important;
  flex: 0 0 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Shrink the 3-dot trigger so it sits beside the number instead of underneath it */
.gridtable td.row-index [data-row-menu-trigger],
.gridtable td.row-index .row-menu-trigger,
.gridtable td.row-index .row-action-trigger,
.gridtable td.row-index .row-action-btn{
  width: 32px !important;
  height: 40px !important;
  min-width: 32px !important;
  min-height: 40px !important;
  max-width: 32px !important;
  max-height: 40px !important;
  border-radius: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 1px 2px rgba(15,23,42,0.08) !important;
}

/* Keep Details column independent and not stealing width from Row ID */
.gridtable th.row-details-col,
.gridtable td.row-details{
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
}

/* === ROW LAYOUT ALIGNMENT FIX END === */


/* === ROW-ID / DETAILS FINAL LAYOUT FIX START === */

/* Compact selector column */
.gridtable th.row-select-col,
.gridtable td.row-select{
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
}

.gridtable td.row-select .row-select-toggle,
.gridtable td.row-select [data-row-select-toggle]{
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Row ID column width and centering */
.gridtable th.row-index,
.gridtable td.row-index{
  max-width: none !important;
}

.gridtable td.row-index{
  padding: 0 8px !important;
  vertical-align: middle !important;
  position: relative !important;
  overflow: visible !important;
}

.gridtable td.row-index .row-index-shell{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 52px !important;
  background: transparent !important;
}

.gridtable td.row-index .row-index-controls{
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.gridtable td.row-index .row-number{
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 26px !important;
}

.gridtable td.row-index .row-action-menu-anchor{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

.gridtable td.row-index .row-menu-trigger,
.gridtable td.row-index [data-row-menu-trigger],
.gridtable td.row-index .row-action-btn{
  width: 32px !important;
  height: 40px !important;
  min-width: 32px !important;
  min-height: 40px !important;
  max-width: 32px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 32px !important;
}

/* Keep the row resize handle active */
.gridtable td.row-index .row-resize-handle{
  display: block !important;
  z-index: 5 !important;
}

/* Give Details a bit more room for unread red dots */
.gridtable th.row-details-col,
.gridtable td.row-details{
  width: var(--details-col-w) !important;
  min-width: var(--details-col-w) !important;
  max-width: none !important;
}

.gridtable td.row-details .row-details-summary{
  width: 100% !important;
}

.gridtable td.row-details .details-chip{
  justify-content: flex-start !important;
  gap: 4px !important;
}

/* === ROW-ID / DETAILS FINAL LAYOUT FIX END === */


/* ===== Cell surface + active click stabilization ===== */

/* Light mode data cells should be white */
:root[data-theme="light"] .gridtable td,
body.theme-light .gridtable td{
  background: #ffffff !important;
}

/* Keep the frozen control columns using their intended chrome */
:root[data-theme="light"] .gridtable td.row-select,
:root[data-theme="light"] .gridtable td.row-index,
body.theme-light .gridtable td.row-select,
body.theme-light .gridtable td.row-index{
  background: var(--table-row-index-bg) !important;
}
:root[data-theme="light"] .gridtable td.row-details,
body.theme-light .gridtable td.row-details{
  background: var(--table-row-details-bg) !important;
}

/* Re-apply conditional formatting after the white-cell override */
:root[data-theme="light"] .gridtable td.cf-due-soon,
body.theme-light .gridtable td.cf-due-soon{
  background: rgba(255, 211, 76, 0.48) !important;
}
:root[data-theme="light"] .gridtable td.cf-due-urgent,
body.theme-light .gridtable td.cf-due-urgent{
  background: rgba(248, 101, 101, 0.42) !important;
}
:root[data-theme="light"] .gridtable td.cf-status-complete,
body.theme-light .gridtable td.cf-status-complete{
  background: rgba(121, 214, 128, 0.45) !important;
}
:root[data-theme="light"] .gridtable td.cf-needs-attention,
body.theme-light .gridtable td.cf-needs-attention{
  background: rgba(255, 214, 92, 0.58) !important;
}
:root[data-theme="light"] .gridtable tr.row-complete td,
body.theme-light .gridtable tr.row-complete td{
  background: rgba(102, 198, 120, 0.35) !important;
}
:root[data-theme="light"] .gridtable tr.row-complete td.row-index,
body.theme-light .gridtable tr.row-complete td.row-index{
  background: rgba(82, 180, 104, 0.45) !important;
}

/* Flatten the inner editor surface so it matches the cell surface */
.gridtable td .cell,
.gridtable td .cell-read,
.gridtable td textarea.cell-text,
.gridtable td .cell-rich,
.gridtable tbody td select.cell,
.gridtable tbody td input.cell.cell-date{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

/* Normal click should not tint the whole cell */
.gridtable td.cell-active,
.gridtable td.cell-range-selected,
.gridtable td.cell-range-anchor,
.gridtable td:focus-within{
  background: inherit !important;
  background-color: inherit !important;
}

/* Use an outline only for focus/active state */
.gridtable td.cell-active,
.gridtable td:focus-within{
  outline: 2px solid #60a5fa !important;
  outline-offset: -2px !important;
}
:root[data-theme="light"] .gridtable td.cell-active,
:root[data-theme="light"] .gridtable td:focus-within,
body.theme-light .gridtable td.cell-active,
body.theme-light .gridtable td:focus-within{
  outline: 2px solid #4f8cff !important;
  outline-offset: -2px !important;
}

/* Make text/editor fill the expanded cell height instead of staying a small scrollable box */
.gridtable td[data-col-id]{
  vertical-align: middle !important;
}
.gridtable td[data-col-id] > .cell,
.gridtable td[data-col-id] > .cell-read{
  width: 100% !important;
  height: 100% !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: stretch !important;
}
.gridtable td[data-col-id] > .cell{
  overflow: visible !important;
}
.gridtable td textarea.cell-text,
.gridtable td .cell-rich{
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;
  max-height: none !important;
  overflow-y: visible !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  align-self: stretch !important;
  resize: none !important;
}

.gridtable td[data-col-id] > input.cell,
.gridtable td[data-col-id] > select.cell{
  height: 100% !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  background: inherit !important;
  background-color: inherit !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.gridtable td[data-col-id] > .cell,
.gridtable td[data-col-id] > .cell-read,
.gridtable td[data-col-id] > textarea.cell-text,
.gridtable td[data-col-id] > .cell-rich{
  background: inherit !important;
  background-color: inherit !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}

.gridtable td[data-col-id] > .cell-rich > *,
.gridtable td[data-col-id] > .cell-read-rich > *{
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* Override auto margins for scrollable text columns to align content to top */
.gridtable td[data-col-type="text"] > .cell-rich > *,
.gridtable td[data-col-type="text"] > .cell-read-rich > *{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.gridtable td .cell-rich{
  white-space: pre-wrap !important;
}
.gridtable td .cell-read{
  overflow: visible !important;
}
.gridtable td .cell-read-rich{
  width: 100% !important;
}
.gridtable td .cell-read-rich,
.gridtable td .cell-rich{
  line-height: 1.3 !important;
}
.gridtable td .cell-rich > *:not(span),
.gridtable td .cell-read-rich > *:not(span){
  width: 100%;
}
.gridtable td .cell-rich p,
.gridtable td .cell-read-rich p,
.gridtable td .cell-rich div,
.gridtable td .cell-read-rich div{
  margin: 0 !important;
}

/* Keep long text cells expanding to fill the cell - no scrolling needed */
.gridtable td[data-col-type="text"]{
  vertical-align: top !important;
}

.gridtable td[data-col-type="text"] > .cell-rich,
.gridtable td[data-col-type="text"] > .cell-read-rich{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 34px !important;
  overflow: visible !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  padding: 4px 6px !important;
}
}

/* Darker borders requested */
.gridtable th,
.gridtable td{
  border-right: 1px solid rgba(24,33,51,0.24) !important;
  border-bottom: 1px solid rgba(24,33,51,0.24) !important;
}
.gridtable tbody td{
  box-shadow: inset 0 -1px 0 rgba(24,33,51,0.18) !important;
}
:root[data-theme="dark"] .gridtable th,
:root[data-theme="dark"] .gridtable td,
body.theme-dark .gridtable th,
body.theme-dark .gridtable td{
  border-right: 1px solid rgba(255,255,255,0.20) !important;
  border-bottom: 1px solid rgba(255,255,255,0.20) !important;
}
:root[data-theme="dark"] .gridtable tbody td,
body.theme-dark .gridtable tbody td{
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.14) !important;
}



/* === Row subsystem migration pass: selector state + centered actions modal === */
.gridtable tr.is-row-selected > td{
  box-shadow: inset 0 0 0 9999px rgba(84, 132, 255, 0.12);
}

.gridtable tr.is-row-selected > td.row-select,
.gridtable tr.is-row-selected > td.row-index,
.gridtable tr.is-row-selected > td.row-details{
  box-shadow: inset 0 0 0 9999px rgba(84, 132, 255, 0.18);
}

.gridtable td.row-select .row-select-toggle,
.gridtable td.row-select [data-row-select-toggle]{
  border: 1px solid rgba(127, 143, 168, 0.72) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

.gridtable tr.is-row-selected td.row-select .row-select-toggle,
.gridtable tr.is-row-selected td.row-select [data-row-select-toggle]{
  border-color: transparent !important;
  background: rgba(63, 124, 255, 0.22) !important;
}

.gridtable tr.is-row-selected .row-select-box{
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent;
  display: block;
}

body.row-actions-modal-open{
  overflow: hidden;
}

.row-actions-modal-panel{
  width: min(720px, calc(100vw - 40px));
  max-width: 720px;
}

.row-actions-modal-header{
  align-items: flex-start;
  padding: 16px 20px 10px !important;
}

.row-actions-subtitle{
  margin-top: 4px;
}

.row-actions-modal-body{
  padding: 14px 20px 20px !important;
}

.row-actions-groups{
  display: grid;
  gap: 18px;
}

.row-actions-group{
  border: 1px solid rgba(120, 139, 163, 0.24);
  border-radius: 18px;
  padding: 16px;
  background: rgba(17, 24, 39, 0.22);
}

.row-actions-group h4{
  margin: 0 0 12px;
  font-size: 0.95rem;
}

.row-actions-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.row-actions-btn{
  min-height: 44px;
  justify-content: flex-start;
  text-align: left;
  border-radius: 14px;
}

.is-special-row > td{
  background: transparent !important;
}

.special-row-cell{
  padding: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

.special-row-cell-header,
.special-row-cell-divider{
  background: transparent !important;
}

.special-row-title{
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.special-row-divider-line{
  height: 52px;
  position: relative;
}

.special-row-divider-line::before{
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  border-top: 1px solid rgba(148, 163, 184, 0.5);
}

:root[data-theme="light"] .gridtable tr.is-row-selected > td,
body.theme-light .gridtable tr.is-row-selected > td{
  box-shadow: inset 0 0 0 9999px rgba(59, 130, 246, 0.09);
}

:root[data-theme="light"] .gridtable tr.is-row-selected > td.row-select,
:root[data-theme="light"] .gridtable tr.is-row-selected > td.row-index,
:root[data-theme="light"] .gridtable tr.is-row-selected > td.row-details,
body.theme-light .gridtable tr.is-row-selected > td.row-select,
body.theme-light .gridtable tr.is-row-selected > td.row-index,
body.theme-light .gridtable tr.is-row-selected > td.row-details{
  box-shadow: inset 0 0 0 9999px rgba(59, 130, 246, 0.15);
}

:root[data-theme="light"] .row-actions-group,
body.theme-light .row-actions-group{
  background: #f8fbff;
  border-color: rgba(148, 163, 184, 0.3);
}

:root[data-theme="light"] .special-row-title,
body.theme-light .special-row-title{
  color: #0f172a;
}

@media (max-width: 720px){
  .row-actions-grid{
    grid-template-columns: 1fr;
  }
}


/* ===== Locked top-row + toolbar corrections ===== */
/* Keep File through Full Screen text-like, not pill buttons */
.sheet-menubar .menu-trigger,
.sheet-menubar .solo-trigger{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  min-height: 24px !important;
  padding: 2px 6px !important;
}

.sheet-menubar .menu-trigger:hover,
.sheet-menubar .solo-trigger:hover,
.sheet-menubar .menu-trigger:focus-visible,
.sheet-menubar .solo-trigger:focus-visible,
.sheet-menubar .menu-trigger.is-open,
.sheet-menubar .solo-trigger.is-open{
  background: rgba(34,197,94,0.16) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .sheet-menubar .menu-trigger,
:root[data-theme="light"] .sheet-menubar .solo-trigger,
body.theme-light .sheet-menubar .menu-trigger,
body.theme-light .sheet-menubar .solo-trigger{
  background: transparent !important;
  border-color: transparent !important;
}

:root[data-theme="light"] .sheet-menubar .menu-trigger:hover,
:root[data-theme="light"] .sheet-menubar .solo-trigger:hover,
:root[data-theme="light"] .sheet-menubar .menu-trigger:focus-visible,
:root[data-theme="light"] .sheet-menubar .solo-trigger:focus-visible,
:root[data-theme="light"] .sheet-menubar .menu-trigger.is-open,
:root[data-theme="light"] .sheet-menubar .solo-trigger.is-open,
body.theme-light .sheet-menubar .menu-trigger:hover,
body.theme-light .sheet-menubar .solo-trigger:hover,
body.theme-light .sheet-menubar .menu-trigger:focus-visible,
body.theme-light .sheet-menubar .solo-trigger:focus-visible,
body.theme-light .sheet-menubar .menu-trigger.is-open,
body.theme-light .sheet-menubar .solo-trigger.is-open{
  background: rgba(34,197,94,0.18) !important;
  border-color: transparent !important;
}

/* Save through Workflows should use the same green hover */
.sheet-menubar .btn,
.sheet-menubar > button:not(.menu-trigger):not(.solo-trigger),
.sheet-menubar > a.btn,
#saveSheetBtn{
  transition: background-color .12s ease, border-color .12s ease;
}

.sheet-menubar .btn:hover,
.sheet-menubar > button:not(.menu-trigger):not(.solo-trigger):hover,
.sheet-menubar > a.btn:hover,
#saveSheetBtn:hover{
  background: rgba(34,197,94,0.16) !important;
  border-color: rgba(34,197,94,0.28) !important;
}

:root[data-theme="light"] .sheet-menubar .btn:hover,
:root[data-theme="light"] .sheet-menubar > button:not(.menu-trigger):not(.solo-trigger):hover,
:root[data-theme="light"] .sheet-menubar > a.btn:hover,
:root[data-theme="light"] #saveSheetBtn:hover,
body.theme-light .sheet-menubar .btn:hover,
body.theme-light .sheet-menubar > button:not(.menu-trigger):not(.solo-trigger):hover,
body.theme-light .sheet-menubar > a.btn:hover,
body.theme-light #saveSheetBtn:hover{
  background: rgba(34,197,94,0.18) !important;
  border-color: rgba(34,197,94,0.28) !important;
}

/* Borders dropdown content layout */
.fmt-group-panel{
  min-width: 260px;
}

.fmt-group-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.fmt-group-row-buttons{
  justify-content: flex-start;
}

.border-btn{
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.border-icon{
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.border-icon::before,
.border-icon::after{
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}
.border-top::before{left: 1px; right: 1px; top: 1px; height: 2px;}
.border-bottom::before{left: 1px; right: 1px; bottom: 1px; height: 2px;}
.border-left::before{top: 1px; bottom: 1px; left: 1px; width: 2px;}
.border-right::before{top: 1px; bottom: 1px; right: 1px; width: 2px;}
.border-all::before{inset: 1px; border: 1.5px solid currentColor; background: transparent;}
.border-thick-top::before{left: 0; right: 0; top: 0; height: 4px;}
.border-thick-bottom::before{left: 0; right: 0; bottom: 0; height: 4px;}

/* tighten dropdown appearance */
#borderToolsMenu{
  min-width: 316px;
}

/* ===== Phase 1 lock: final menu / header visual cleanup ===== */
/* Visual-only pass. No sheet interaction behavior changes. */

.sheet-top{
  padding: 8px 12px 6px !important;
  gap: 5px !important;
}

.sheet-top-main{
  gap: 2px !important;
}

.sheet-top-copy,
.sheet-top-copy-inline,
.sheet-control-row,
.sheet-format-shell,
.fmt-toolbar{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.sheet-control-row{
  gap: 4px !important;
  min-height: 28px;
}

.sheet-menubar{
  gap: 4px !important;
}

.sheet-menubar-main{
  align-items: center !important;
  gap: 2px !important;
}

/* Top-row controls should read like compact text controls, not mixed pills */
.sheet-menubar .menu-trigger,
.sheet-menubar .solo-trigger{
  min-height: 24px !important;
  height: 24px !important;
  padding: 2px 7px !important;
  border-radius: 7px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.sheet-menubar .menu-trigger-icon{
  gap: 4px !important;
}

.sheet-menubar .menu-trigger-caret{
  width: 7px !important;
  height: 7px !important;
  margin-left: 1px !important;
}

/* Save through Workflows align as one compact action group */
#saveSheetBtn,
.sheet-menubar > a.btn,
.sheet-menubar > button:not(.menu-trigger):not(.solo-trigger),
.sheet-menubar-main > a.btn,
.sheet-menubar-main > button:not(.menu-trigger):not(.solo-trigger){
  min-height: 24px !important;
  height: 24px !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

#saveStatus{
  font-size: 0.76rem !important;
  line-height: 1 !important;
  margin: 0 2px 0 1px !important;
  white-space: nowrap;
}

/* Production-like group dividers without changing template structure */
#fullscreenToggleBtn,
#sheetZoomControls,
#saveSheetBtn{
  position: relative;
  margin-left: 7px !important;
  padding-left: 10px !important;
}

#fullscreenToggleBtn::before,
#sheetZoomControls::before,
#saveSheetBtn::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 18px;
  transform: translateY(-50%);
  background: rgba(148, 163, 184, 0.30);
  pointer-events: none;
}

:root[data-theme="light"] #fullscreenToggleBtn::before,
:root[data-theme="light"] #sheetZoomControls::before,
:root[data-theme="light"] #saveSheetBtn::before,
body.theme-light #fullscreenToggleBtn::before,
body.theme-light #sheetZoomControls::before,
body.theme-light #saveSheetBtn::before{
  background: rgba(71, 85, 105, 0.20);
}

/* Full Screen should stay text-like and visually aligned with File / Grid */
#fullscreenToggleBtn{
  border-radius: 7px !important;
}

/* Zoom cluster cleanup */
.sheet-zoom-controls{
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  min-height: 24px !important;
}

.sheet-zoom-controls .muted{
  font-size: 0.76rem !important;
  line-height: 1 !important;
  margin-right: 2px !important;
  opacity: 0.9;
}

.sheet-zoom-controls #zoomOutBtn,
.sheet-zoom-controls #zoomInBtn{
  min-width: 22px !important;
  width: 22px !important;
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  font-size: 0.82rem !important;
}

.sheet-zoom-controls #zoomPct{
  min-width: 34px;
  text-align: center;
  padding: 0 1px !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.sheet-zoom-controls .zoom-glyph{
  line-height: 1 !important;
  font-size: 0.96rem !important;
}

/* Keep title row tucked tightly under the menu row */
.sheet-top-copy-inline{
  gap: 8px !important;
  align-items: center !important;
  min-height: 30px;
}

.sheet-top-copy-inline .sheet-back-link{
  padding: 3px 8px !important;
  min-height: 23px !important;
  font-size: 0.73rem !important;
}

.sheet-page-title,
.sheet-title{
  line-height: 0.98 !important;
}

.sheet-top-copy-inline .sheet-role-copy{
  font-size: 0.78rem !important;
  line-height: 1.1 !important;
}

.sheet-format-shell{
  margin-top: -1px !important;
}

.fmt-toolbar{
  min-height: 30px;
  padding-top: 0 !important;
}

/* Hover behavior parity across the top row */
.sheet-menubar .menu-trigger,
.sheet-menubar .solo-trigger,
#saveSheetBtn,
.sheet-menubar > a.btn,
.sheet-menubar-main > a.btn,
.sheet-zoom-controls #zoomOutBtn,
.sheet-zoom-controls #zoomInBtn{
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease !important;
}

:root:not([data-theme="light"]) .sheet-menubar .menu-trigger:hover,
:root:not([data-theme="light"]) .sheet-menubar .solo-trigger:hover,
:root:not([data-theme="light"]) #saveSheetBtn:hover,
:root:not([data-theme="light"]) .sheet-menubar > a.btn:hover,
:root:not([data-theme="light"]) .sheet-menubar-main > a.btn:hover,
:root:not([data-theme="light"]) .sheet-zoom-controls #zoomOutBtn:hover,
:root:not([data-theme="light"]) .sheet-zoom-controls #zoomInBtn:hover,
body.theme-dark .sheet-menubar .menu-trigger:hover,
body.theme-dark .sheet-menubar .solo-trigger:hover,
body.theme-dark #saveSheetBtn:hover,
body.theme-dark .sheet-menubar > a.btn:hover,
body.theme-dark .sheet-menubar-main > a.btn:hover,
body.theme-dark .sheet-zoom-controls #zoomOutBtn:hover,
body.theme-dark .sheet-zoom-controls #zoomInBtn:hover{
  background: rgba(34, 197, 94, 0.16) !important;
  border-color: rgba(34, 197, 94, 0.26) !important;
  box-shadow: none !important;
  transform: none !important;
}

:root[data-theme="light"] .sheet-menubar .menu-trigger:hover,
:root[data-theme="light"] .sheet-menubar .solo-trigger:hover,
:root[data-theme="light"] #saveSheetBtn:hover,
:root[data-theme="light"] .sheet-menubar > a.btn:hover,
:root[data-theme="light"] .sheet-menubar-main > a.btn:hover,
:root[data-theme="light"] .sheet-zoom-controls #zoomOutBtn:hover,
:root[data-theme="light"] .sheet-zoom-controls #zoomInBtn:hover,
body.theme-light .sheet-menubar .menu-trigger:hover,
body.theme-light .sheet-menubar .solo-trigger:hover,
body.theme-light #saveSheetBtn:hover,
body.theme-light .sheet-menubar > a.btn:hover,
body.theme-light .sheet-menubar-main > a.btn:hover,
body.theme-light .sheet-zoom-controls #zoomOutBtn:hover,
body.theme-light .sheet-zoom-controls #zoomInBtn:hover{
  background: rgba(34, 197, 94, 0.18) !important;
  border-color: rgba(34, 197, 94, 0.30) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Keep header compact and stable on narrower widths */
@media (max-width: 1180px){
  .sheet-menubar-main{
    gap: 1px !important;
  }

  #fullscreenToggleBtn,
  #sheetZoomControls,
  #saveSheetBtn{
    margin-left: 5px !important;
    padding-left: 8px !important;
  }

  .sheet-menubar .menu-trigger,
  .sheet-menubar .solo-trigger,
  #saveSheetBtn,
  .sheet-menubar > a.btn,
  .sheet-menubar-main > a.btn{
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}

/* ===== Narrow correction pass: restore sheet spacing + window parity ===== */

body.sheet-workspace-active .app-main{
  padding-top: 14px !important;
  padding-bottom: 10px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

body.sheet-workspace-active .sheet-workspace-shell{
  gap: 12px !important;
}

body.sheet-workspace-active .sheet-top{
  padding: 12px 16px 10px !important;
  gap: 8px !important;
  border-radius: 18px !important;
}

body.sheet-workspace-active .sheet-control-row,
body.sheet-workspace-active .sheet-top-copy,
body.sheet-workspace-active .sheet-top-copy-inline,
body.sheet-workspace-active .sheet-format-shell{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.sheet-workspace-active .sheet-top-copy-inline{
  gap: 10px !important;
  min-height: 32px !important;
}

body.sheet-workspace-active .sheet-format-shell{
  margin-top: 0 !important;
}

body.sheet-workspace-active .table-wrap{
  border-radius: 18px !important;
}

/* Menus should render as compact windows. */
.sheet-menubar .sheet-menu{
  position: relative;
}

.sheet-menubar .menu-panel{
  min-width: 344px !important;
  max-width: 380px !important;
  padding: 12px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(91, 133, 190, 0.45) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18) !important;
  overflow: hidden;
}

.sheet-menubar #viewMenu{
  min-width: 236px !important;
  max-width: 236px !important;
}

.sheet-menubar .menu-group-label{
  padding: 6px 12px 10px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
}

.sheet-menubar .menu-item,
.sheet-menubar .menu-panel a.menu-item,
.sheet-menubar .menu-panel button.menu-item{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.sheet-menubar .menu-item.is-disabled,
.sheet-menubar .menu-panel button.menu-item.is-disabled:disabled{
  opacity: 0.42 !important;
  cursor: not-allowed !important;
}

.sheet-menubar .menu-separator{
  margin: 8px 10px !important;
}

:root[data-theme="light"] .sheet-menubar .menu-panel,
body.theme-light .sheet-menubar .menu-panel{
  background: #f4f7fb !important;
  color: #1f2c3d !important;
  border-color: rgba(103, 139, 189, 0.55) !important;
  box-shadow: 0 18px 38px rgba(36, 60, 92, 0.18) !important;
}

:root[data-theme="light"] .sheet-menubar .menu-group-label,
body.theme-light .sheet-menubar .menu-group-label{
  color: #3d5679 !important;
}

:root[data-theme="light"] .sheet-menubar .menu-item,
:root[data-theme="light"] .sheet-menubar .menu-panel a.menu-item,
:root[data-theme="light"] .sheet-menubar .menu-panel button.menu-item,
body.theme-light .sheet-menubar .menu-item,
body.theme-light .sheet-menubar .menu-panel a.menu-item,
body.theme-light .sheet-menubar .menu-panel button.menu-item{
  color: #263446 !important;
}

:root[data-theme="light"] .sheet-menubar .menu-item:hover:not(.is-disabled),
:root[data-theme="light"] .sheet-menubar .menu-panel a.menu-item:hover,
:root[data-theme="light"] .sheet-menubar .menu-panel button.menu-item:hover:not(:disabled),
body.theme-light .sheet-menubar .menu-item:hover:not(.is-disabled),
body.theme-light .sheet-menubar .menu-panel a.menu-item:hover,
body.theme-light .sheet-menubar .menu-panel button.menu-item:hover:not(:disabled){
  background: #c7d5e7 !important;
  color: #185a37 !important;
  border-color: transparent !important;
}

:root[data-theme="light"] .sheet-menubar .menu-item.is-active,
body.theme-light .sheet-menubar .menu-item.is-active{
  background: #c7d5e7 !important;
  color: #185a37 !important;
}

:root:not([data-theme="light"]) .sheet-menubar .menu-panel,
body.theme-dark .sheet-menubar .menu-panel{
  background: #203247 !important;
  color: #eef6ff !important;
  border-color: rgba(123, 165, 216, 0.42) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42) !important;
}

:root:not([data-theme="light"]) .sheet-menubar .menu-group-label,
body.theme-dark .sheet-menubar .menu-group-label{
  color: #bcd3ef !important;
}

:root:not([data-theme="light"]) .sheet-menubar .menu-item,
:root:not([data-theme="light"]) .sheet-menubar .menu-panel a.menu-item,
:root:not([data-theme="light"]) .sheet-menubar .menu-panel button.menu-item,
body.theme-dark .sheet-menubar .menu-item,
body.theme-dark .sheet-menubar .menu-panel a.menu-item,
body.theme-dark .sheet-menubar .menu-panel button.menu-item{
  color: #eef6ff !important;
}

:root:not([data-theme="light"]) .sheet-menubar .menu-item:hover:not(.is-disabled),
:root:not([data-theme="light"]) .sheet-menubar .menu-panel a.menu-item:hover,
:root:not([data-theme="light"]) .sheet-menubar .menu-panel button.menu-item:hover:not(:disabled),
body.theme-dark .sheet-menubar .menu-item:hover:not(.is-disabled),
body.theme-dark .sheet-menubar .menu-panel a.menu-item:hover,
body.theme-dark .sheet-menubar .menu-panel button.menu-item:hover:not(:disabled){
  background: rgba(145, 190, 228, 0.18) !important;
  color: #b7f1c8 !important;
  border-color: transparent !important;
}

:root:not([data-theme="light"]) .sheet-menubar .menu-item.is-active,
body.theme-dark .sheet-menubar .menu-item.is-active{
  background: rgba(145, 190, 228, 0.18) !important;
  color: #b7f1c8 !important;
}

/* Generic window shell for Share / Automations / Workflows / Audit. */
.ui-window-shell{
  max-width: 1180px !important;
  margin: 14px auto 18px !important;
  padding: 0 14px 20px !important;
}

.ui-window-hero,
.ui-window-card,
.audit-window-card,
.audit-window-head{
  border-radius: 18px !important;
}

:root[data-theme="light"] .ui-window-shell,
body.theme-light .ui-window-shell{
  color: #203044 !important;
}

:root[data-theme="light"] .ui-window-hero,
:root[data-theme="light"] .ui-window-card,
:root[data-theme="light"] .audit-window-card,
:root[data-theme="light"] .audit-window-head,
body.theme-light .ui-window-hero,
body.theme-light .ui-window-card,
body.theme-light .audit-window-card,
body.theme-light .audit-window-head{
  background: #dfe7f1 !important;
  border: 1px solid rgba(111, 147, 194, 0.55) !important;
  box-shadow: none !important;
  color: #203044 !important;
}

:root[data-theme="light"] .ui-window-shell .muted,
body.theme-light .ui-window-shell .muted{
  color: #516b8d !important;
}

:root[data-theme="light"] .ui-window-shell input,
:root[data-theme="light"] .ui-window-shell select,
:root[data-theme="light"] .ui-window-shell textarea,
:root[data-theme="light"] .ui-window-shell button,
:root[data-theme="light"] .ui-window-shell .btn,
body.theme-light .ui-window-shell input,
body.theme-light .ui-window-shell select,
body.theme-light .ui-window-shell textarea,
body.theme-light .ui-window-shell button,
body.theme-light .ui-window-shell .btn{
  background: #cfd9e6 !important;
  color: #243345 !important;
  border-color: rgba(111, 147, 194, 0.55) !important;
  box-shadow: none !important;
}

:root:not([data-theme="light"]) .ui-window-hero,
:root:not([data-theme="light"]) .ui-window-card,
:root:not([data-theme="light"]) .audit-window-card,
:root:not([data-theme="light"]) .audit-window-head,
body.theme-dark .ui-window-hero,
body.theme-dark .ui-window-card,
body.theme-dark .audit-window-card,
body.theme-dark .audit-window-head{
  background: #203247 !important;
  border: 1px solid rgba(123, 165, 216, 0.38) !important;
  color: #eef6ff !important;
}

:root:not([data-theme="light"]) .ui-window-shell .muted,
body.theme-dark .ui-window-shell .muted{
  color: #b7cbe3 !important;
}

:root:not([data-theme="light"]) .ui-window-shell input,
:root:not([data-theme="light"]) .ui-window-shell select,
:root:not([data-theme="light"]) .ui-window-shell textarea,
:root:not([data-theme="light"]) .ui-window-shell button,
:root:not([data-theme="light"]) .ui-window-shell .btn,
body.theme-dark .ui-window-shell input,
body.theme-dark .ui-window-shell select,
body.theme-dark .ui-window-shell textarea,
body.theme-dark .ui-window-shell button,
body.theme-dark .ui-window-shell .btn{
  background: #2b4056 !important;
  color: #eef6ff !important;
  border-color: rgba(123, 165, 216, 0.42) !important;
  box-shadow: none !important;
}

/* Manage Columns should use the darker user-window treatment instead of the brighter sheet palette. */
#manageColumnsModal .sheet-modal-panel{
  border-radius: 24px !important;
  overflow: hidden !important;
}

:root[data-theme="light"] #manageColumnsModal .sheet-modal-panel,
body.theme-light #manageColumnsModal .sheet-modal-panel{
  background: #dfe7f1 !important;
  border: 1px solid rgba(111, 147, 194, 0.62) !important;
  color: #203044 !important;
  box-shadow: 0 22px 44px rgba(43, 66, 97, 0.22) !important;
}

:root[data-theme="light"] #manageColumnsModal .sheet-modal-header,
:root[data-theme="light"] #manageColumnsModal .manage-columns-help-card,
:root[data-theme="light"] #manageColumnsModal .manage-column-card,
body.theme-light #manageColumnsModal .sheet-modal-header,
body.theme-light #manageColumnsModal .manage-columns-help-card,
body.theme-light #manageColumnsModal .manage-column-card{
  background: #dfe7f1 !important;
  color: #203044 !important;
  border-color: rgba(111, 147, 194, 0.62) !important;
}

:root[data-theme="light"] #manageColumnsModal input,
:root[data-theme="light"] #manageColumnsModal select,
:root[data-theme="light"] #manageColumnsModal textarea,
:root[data-theme="light"] #manageColumnsModal button,
body.theme-light #manageColumnsModal input,
body.theme-light #manageColumnsModal select,
body.theme-light #manageColumnsModal textarea,
body.theme-light #manageColumnsModal button{
  background: #cfd9e6 !important;
  color: #203044 !important;
  border-color: rgba(111, 147, 194, 0.62) !important;
}

:root:not([data-theme="light"]) #manageColumnsModal .sheet-modal-panel,
body.theme-dark #manageColumnsModal .sheet-modal-panel{
  background: #203247 !important;
  border: 1px solid rgba(123, 165, 216, 0.48) !important;
  color: #eef6ff !important;
  box-shadow: 0 26px 52px rgba(0, 0, 0, 0.48) !important;
}

:root:not([data-theme="light"]) #manageColumnsModal .sheet-modal-header,
:root:not([data-theme="light"]) #manageColumnsModal .manage-columns-help-card,
:root:not([data-theme="light"]) #manageColumnsModal .manage-column-card,
body.theme-dark #manageColumnsModal .sheet-modal-header,
body.theme-dark #manageColumnsModal .manage-columns-help-card,
body.theme-dark #manageColumnsModal .manage-column-card{
  background: #203247 !important;
  color: #eef6ff !important;
  border-color: rgba(123, 165, 216, 0.48) !important;
}

:root:not([data-theme="light"]) #manageColumnsModal input,
:root:not([data-theme="light"]) #manageColumnsModal select,
:root:not([data-theme="light"]) #manageColumnsModal textarea,
:root:not([data-theme="light"]) #manageColumnsModal button,
body.theme-dark #manageColumnsModal input,
body.theme-dark #manageColumnsModal select,
body.theme-dark #manageColumnsModal textarea,
body.theme-dark #manageColumnsModal button{
  background: #2b4056 !important;
  color: #eef6ff !important;
  border-color: rgba(123, 165, 216, 0.48) !important;
}

/* ===== Narrow lock restore: sheet spacing + manage columns parity + favorite star ===== */

/* Restore the original tighter sheet-page chrome. */
body.sheet-workspace-active .app-main{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

body.sheet-workspace-active .sheet-workspace-shell{
  gap: 8px !important;
}

body.sheet-workspace-active .sheet-top{
  padding: 6px 8px 6px !important;
  gap: 6px !important;
  border-radius: 16px !important;
}

body.sheet-workspace-active .sheet-top-main{
  gap: 4px !important;
}

body.sheet-workspace-active .sheet-top-copy-inline{
  gap: 8px !important;
  min-height: 28px !important;
}

body.sheet-workspace-active .sheet-top-copy-inline .sheet-back-link{
  padding: 4px 8px !important;
}

body.sheet-workspace-active .sheet-control-row{
  gap: 5px !important;
}

body.sheet-workspace-active .sheet-format-shell{
  margin-top: 0 !important;
  padding: 6px 8px !important;
  border-radius: 16px !important;
}

body.sheet-workspace-active .table-wrap{
  border-radius: 16px !important;
}

/* Favorited sheet star should stay visibly yellow, not inherit title color. */
.sheet-page-title .sheet-favorite-star{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 8px !important;
  color: #f4c430 !important;
  -webkit-text-fill-color: #f4c430 !important;
  text-shadow: 0 0 1px rgba(121, 82, 0, 0.28) !important;
  font-size: 0.9em !important;
  line-height: 1 !important;
}

/* Make Manage Columns match the denser production-style window spacing/color treatment. */
#manageColumnsModal .sheet-modal-panel{
  width: min(1140px, calc(100vw - 24px)) !important;
  max-width: 1140px !important;
  border-radius: 24px !important;
}

#manageColumnsModal .sheet-modal-header{
  padding: 18px 20px !important;
  border-bottom-width: 1px !important;
}

#manageColumnsModal .sheet-modal-body.manage-columns-modal-body{
  padding: 24px 28px 34px !important;
  gap: 28px !important;
}

#manageColumnsModal .manage-columns-help-card{
  padding: 16px 18px !important;
  border-radius: 16px !important;
  margin-bottom: 0 !important;
}

#manageColumnsModal .manage-columns-help-card h3{
  margin: 0 0 10px !important;
  font-size: 1rem !important;
}

#manageColumnsModal .manage-columns-help-card ul{
  margin: 0 !important;
  padding-left: 22px !important;
}

#manageColumnsModal .manage-columns-list{
  gap: 42px !important;
}

#manageColumnsModal .manage-column-card{
  padding: 18px 18px 20px !important;
  border-radius: 18px !important;
}

:root[data-theme="light"] #manageColumnsModal .sheet-modal-body.manage-columns-modal-body,
body.theme-light #manageColumnsModal .sheet-modal-body.manage-columns-modal-body{
  background: linear-gradient(180deg, rgba(196, 212, 231, 0.92) 0%, rgba(184, 202, 224, 0.92) 100%) !important;
}

:root[data-theme="dark"] #manageColumnsModal .sheet-modal-body.manage-columns-modal-body,
body.theme-dark #manageColumnsModal .sheet-modal-body.manage-columns-modal-body{
  padding: 24px 28px 34px !important;
}

:root[data-theme="dark"] #manageColumnsModal .manage-column-rename-form input,
body.theme-dark #manageColumnsModal .manage-column-rename-form input{
  background: #5f8f6d !important;
  color: #eef9f1 !important;
  border-color: rgba(125, 194, 143, 0.72) !important;
}

:root[data-theme="dark"] .topbar-shell,
body.theme-dark .topbar-shell{
  background: linear-gradient(180deg, rgba(36, 43, 54, 0.92) 0%, rgba(28, 34, 44, 0.92) 100%) !important;
  border-color: rgba(95, 114, 140, 0.28) !important;
}

.app-footer,
:root[data-theme="light"] .app-footer,
body.theme-light .app-footer,
:root[data-theme="dark"] .app-footer,
body.theme-dark .app-footer{
  margin: 8px 0 0 !important;
  padding: 0 14px 14px !important;
}

#manageColumnsModal .manage-column-card-head{
  margin-bottom: 14px !important;
  padding-bottom: 0 !important;
}

#manageColumnsModal .manage-column-label{
  margin-bottom: 2px !important;
}

#manageColumnsModal .manage-column-card h3{
  margin: 0 !important;
  font-size: 1.05rem !important;
}

#manageColumnsModal .manage-column-form-grid{
  gap: 14px !important;
  margin-bottom: 14px !important;
}

#manageColumnsModal .manage-column-inline-row{
  gap: 12px !important;
}

#manageColumnsModal .manage-column-inline-row input,
#manageColumnsModal .manage-column-inline-row select,
#manageColumnsModal .manage-column-inline-row button{
  min-height: 36px !important;
  border-radius: 14px !important;
}

#manageColumnsModal .manage-column-actions-block{
  margin-top: 4px !important;
}

/* Styling for the Add Column card in Manage Columns modal */
#manageColumnsModal .manage-column-card-add{
  background: rgba(196, 212, 231, 0.45) !important;
}

:root[data-theme="light"] #manageColumnsModal .manage-column-card-add,
body.theme-light #manageColumnsModal .manage-column-card-add{
  background: rgba(196, 212, 231, 0.45) !important;
  border: 2px dashed rgba(111, 147, 194, 0.5) !important;
}

:root:not([data-theme="light"]) #manageColumnsModal .manage-column-card-add,
body.theme-dark #manageColumnsModal .manage-column-card-add{
  background: rgba(75, 115, 165, 0.25) !important;
  border: 2px dashed rgba(123, 165, 216, 0.4) !important;
}

#manageColumnsModal .manage-column-add-form{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

#manageColumnsModal .manage-column-add-form label{
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  opacity: 0.75 !important;
  margin-bottom: 0 !important;
}

#manageColumnsModal .manage-column-add-form input[name="column_name"]{
  min-height: 36px !important;
  border-radius: 14px !important;
}

#manageColumnsModal .manage-column-add-submit{
  min-height: 36px !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
}

#manageColumnsModal .manage-column-actions-grid{
  gap: 10px !important;
  margin-top: 8px !important;
}

#manageColumnsModal .manage-column-actions-grid button,
#manageColumnsModal .manage-column-actions-grid .column-state-btn{
  min-height: 34px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
}

#manageColumnsModal .manage-column-conditional-block{
  margin-top: 16px !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
}

#manageColumnsModal .manage-column-conditional-head{
  margin-bottom: 10px !important;
}

#manageColumnsModal .manage-column-conditional-form{
  gap: 12px !important;
}

#manageColumnsModal .manage-column-conditional-form input,
#manageColumnsModal .manage-column-conditional-form select,
#manageColumnsModal .manage-column-conditional-form button{
  min-height: 38px !important;
  border-radius: 14px !important;
}

/* Light mode should use the cooler, darker user-window palette rather than the washed-out bright panel. */
:root[data-theme="light"] #manageColumnsModal .sheet-modal-panel,
body.theme-light #manageColumnsModal .sheet-modal-panel{
  background: #eef3f8 !important;
  border: 1px solid rgba(110, 145, 190, 0.72) !important;
  color: #1f3146 !important;
  box-shadow: 0 24px 50px rgba(41, 60, 90, 0.24) !important;
}

:root[data-theme="light"] #manageColumnsModal .sheet-modal-header,
:root[data-theme="light"] #manageColumnsModal .manage-columns-help-card,
:root[data-theme="light"] #manageColumnsModal .manage-column-card,
:root[data-theme="light"] #manageColumnsModal .manage-column-conditional-block,
body.theme-light #manageColumnsModal .sheet-modal-header,
body.theme-light #manageColumnsModal .manage-columns-help-card,
body.theme-light #manageColumnsModal .manage-column-card,
body.theme-light #manageColumnsModal .manage-column-conditional-block{
  background: #eef3f8 !important;
  color: #1f3146 !important;
  border: 1px solid rgba(110, 145, 190, 0.60) !important;
}

:root[data-theme="light"] #manageColumnsModal .sheet-modal-close,
:root[data-theme="light"] #manageColumnsModal input,
:root[data-theme="light"] #manageColumnsModal select,
:root[data-theme="light"] #manageColumnsModal textarea,
:root[data-theme="light"] #manageColumnsModal button,
body.theme-light #manageColumnsModal .sheet-modal-close,
body.theme-light #manageColumnsModal input,
body.theme-light #manageColumnsModal select,
body.theme-light #manageColumnsModal textarea,
body.theme-light #manageColumnsModal button{
  background: #d7e2ee !important;
  color: #1f3146 !important;
  border: 1px solid rgba(108, 143, 190, 0.72) !important;
  box-shadow: none !important;
}

:root[data-theme="light"] #manageColumnsModal .manage-column-rename-form input,
body.theme-light #manageColumnsModal .manage-column-rename-form input{
  background: #bdddc7 !important;
  color: #1f4e36 !important;
  border-color: rgba(80, 154, 113, 0.75) !important;
}

:root[data-theme="light"] #manageColumnsModal .manage-column-type-pill,
body.theme-light #manageColumnsModal .manage-column-type-pill{
  background: #e8eef6 !important;
  color: #5a7394 !important;
  border: 1px solid rgba(110, 145, 190, 0.42) !important;
}

/* Keep dark mode aligned to the same denser structure. */
:root:not([data-theme="light"]) #manageColumnsModal .sheet-modal-panel,
body.theme-dark #manageColumnsModal .sheet-modal-panel{
  background: #203247 !important;
  border: 1px solid rgba(123, 165, 216, 0.50) !important;
}

:root:not([data-theme="light"]) #manageColumnsModal .sheet-modal-header,
:root:not([data-theme="light"]) #manageColumnsModal .manage-columns-help-card,
:root:not([data-theme="light"]) #manageColumnsModal .manage-column-card,
:root:not([data-theme="light"]) #manageColumnsModal .manage-column-conditional-block,
body.theme-dark #manageColumnsModal .sheet-modal-header,
body.theme-dark #manageColumnsModal .manage-columns-help-card,
body.theme-dark #manageColumnsModal .manage-column-card,
body.theme-dark #manageColumnsModal .manage-column-conditional-block{
  background: #203247 !important;
}

/* ===== Header compaction pass: reopen locked area by request ===== */

body.sheet-workspace-active .app-main{
  padding-top: 6px !important;
  padding-bottom: 8px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

body.sheet-workspace-active .sheet-top{
  padding: 4px 6px 5px !important;
  gap: 5px !important;
  border-radius: 14px !important;
}

body.sheet-workspace-active .sheet-control-row{
  gap: 4px !important;
}

body.sheet-workspace-active .sheet-menubar,
body.sheet-workspace-active .sheet-menubar-main{
  gap: 4px !important;
}

body.sheet-workspace-active .menu-trigger,
body.sheet-workspace-active .solo-trigger,
body.sheet-workspace-active .sheet-menubar .btn,
body.sheet-workspace-active .sheet-tool-btn{
  min-height: 30px !important;
  height: 30px !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-size: 0.92rem !important;
}

body.sheet-workspace-active .toolbar-divider{
  width: 1px;
  height: 22px;
  margin: 0 4px 0 2px;
  background: rgba(102, 135, 181, 0.48);
  border-radius: 999px;
  flex: 0 0 auto;
}

body.sheet-workspace-active .sheet-zoom-controls{
  gap: 4px !important;
}

body.sheet-workspace-active .sheet-zoom-controls #zoomOutBtn,
body.sheet-workspace-active .sheet-zoom-controls #zoomInBtn{
  min-width: 26px !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border-radius: 999px !important;
}

body.sheet-workspace-active .sheet-zoom-controls #zoomPct{
  min-width: 46px !important;
  text-align: center;
  font-size: 0.88rem !important;
}

body.sheet-workspace-active .sheet-top-main{
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

body.sheet-workspace-active .sheet-top-copy-inline{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 30px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.sheet-workspace-active .sheet-top-copy-inline .sheet-back-link{
  padding: 4px 8px !important;
  font-size: 0.76rem !important;
}

body.sheet-workspace-active .sheet-title-block{
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

body.sheet-workspace-active .sheet-page-title{
  margin: 0 !important;
  font-size: 1.28rem !important;
  line-height: 1.05 !important;
}

body.sheet-workspace-active .sheet-role-copy.sheet-role-copy-inline{
  font-size: 0.78rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

body.sheet-workspace-active .sheet-top-actions{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  min-width: 0 !important;
}

body.sheet-workspace-active .sheet-tool-toggles{
  gap: 6px !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

body.sheet-workspace-active .sheet-format-shell{
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 1 auto !important;
}

body.sheet-workspace-active .fmt-toolbar{
  justify-content: flex-end !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
}

body.sheet-workspace-active .fmt-toolbar-main{
  gap: 4px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

body.sheet-workspace-active .fmt-tool-divider{
  min-height: 26px !important;
  margin: 0 1px !important;
}

body.sheet-workspace-active .fmt-toolbar button,
body.sheet-workspace-active .fmt-toolbar .ghost,
body.sheet-workspace-active .fmt-select,
body.sheet-workspace-active .fmt-group-trigger-btn{
  min-height: 30px !important;
  height: 30px !important;
  padding: 4px 9px !important;
  font-size: 0.92rem !important;
  border-radius: 12px !important;
}

body.sheet-workspace-active .fmt-icon-btn{
  min-width: 30px !important;
  width: 30px !important;
  padding: 0 !important;
}

body.sheet-workspace-active .fmt-history-icon{
  width: 16px !important;
  height: 16px !important;
}

body.sheet-workspace-active .fmt-save-item{
  gap: 4px;
}

body.sheet-workspace-active .fmt-save-btn{
  min-width: 48px !important;
  padding: 4px 10px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
}

body.sheet-workspace-active .fmt-save-status{
  font-size: 0.72rem !important;
  white-space: nowrap !important;
}

@media (max-width: 1500px){
  body.sheet-workspace-active .sheet-top-main{
    flex-wrap: wrap !important;
  }
  body.sheet-workspace-active .sheet-top-actions{
    width: 100% !important;
    justify-content: flex-end !important;
  }
}

/* ===== Two-row header alignment pass ===== */
body.sheet-workspace-active .sheet-control-row{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body.sheet-workspace-active .sheet-top-row{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
}

body.sheet-workspace-active .sheet-top-row-left,
body.sheet-workspace-active .sheet-top-row-right{
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

body.sheet-workspace-active .sheet-top-menu-left{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.sheet-workspace-active .sheet-top-tools-right{
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

body.sheet-workspace-active .sheet-menubar{
  width: 100% !important;
}

body.sheet-workspace-active .sheet-menubar-main{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

body.sheet-workspace-active .sheet-top-row-secondary{
  align-items: center !important;
}

body.sheet-workspace-active .sheet-top-row-secondary .sheet-top-copy-inline{
  flex: 1 1 auto !important;
}

body.sheet-workspace-active .sheet-top-row-secondary .sheet-top-actions{
  flex: 0 0 auto !important;
  margin-left: auto !important;
  justify-content: flex-end !important;
}

body.sheet-workspace-active .sheet-title-block{
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

body.sheet-workspace-active .sheet-page-title,
body.sheet-workspace-active .sheet-role-copy.sheet-role-copy-inline{
  white-space: nowrap !important;
}

body.sheet-workspace-active .sheet-format-shell{
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.sheet-workspace-active .fmt-toolbar{
  justify-content: flex-end !important;
}

@media (max-width: 1400px){
  body.sheet-workspace-active .sheet-top-row{
    flex-wrap: wrap !important;
  }
  body.sheet-workspace-active .sheet-top-row-right{
    width: 100% !important;
    justify-content: flex-end !important;
  }
}

/* ===== Micro-compaction pass ===== */
body.sheet-workspace-active .sheet-back-link{
  padding-inline: 7px !important;
  min-width: auto !important;
}

body.sheet-workspace-active .sheet-role-copy.sheet-role-copy-inline{
  font-size: 0.59rem !important;
  letter-spacing: 0.01em !important;
}

body.sheet-workspace-active .sheet-tool-toggles{
  gap: 0 !important;
}

body.sheet-workspace-active .sheet-tool-toggles .sheet-tool-btn{
  min-width: auto !important;
  padding-inline: 12px !important;
}

body.sheet-workspace-active .fmt-toolbar-main{
  gap: 2px !important;
}

body.sheet-workspace-active .fmt-save-item{
  gap: 2px !important;
}

body.sheet-workspace-active .fmt-tool-item{
  margin: 0 !important;
}

body.sheet-workspace-active .fmt-tool-divider{
  margin: 0 1px !important;
}

body.sheet-workspace-active .sheet-zoom-controls{
  gap: 1px !important;
}

body.sheet-workspace-active .sheet-zoom-controls #zoomPct{
  min-width: 38px !important;
}

body.sheet-workspace-active .sheet-zoom-controls #zoomOutBtn,
body.sheet-workspace-active .sheet-zoom-controls #zoomInBtn{
  margin: 0 !important;
}


/* ===== Share Button (mode-specific emphasis) ===== */
body.sheet-workspace-active .sheet-top-tools-right{
  display:flex;
  align-items:center;
  gap:6px;
}

/* Light mode: use prior hover tone as base, then darken + glow on hover */
:root[data-theme="light"] body.sheet-workspace-active .sheet-share-btn,
body.theme-light.sheet-workspace-active .sheet-share-btn,
body.sheet-workspace-active.theme-light .sheet-share-btn{
  background:#cfeedd;
  color:#245c3f !important;
  padding:6px 14px;
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
  border:1px solid #8fd1ae;
  transition:background .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}

:root[data-theme="light"] body.sheet-workspace-active .sheet-share-btn:hover,
body.theme-light.sheet-workspace-active .sheet-share-btn:hover,
body.sheet-workspace-active.theme-light .sheet-share-btn:hover{
  background:#b8e3cb;
  border-color:#67ba8d;
  color:#1f5338 !important;
  box-shadow:0 0 10px rgba(60,160,100,0.38);
}

/* Dark mode: blue filled button with light-blue outline feel and stronger glow on hover */
:root:not([data-theme="light"]) body.sheet-workspace-active .sheet-share-btn,
body.theme-dark.sheet-workspace-active .sheet-share-btn,
body.sheet-workspace-active.theme-dark .sheet-share-btn{
  background:#2f5f96;
  color:#ffffff !important;
  padding:6px 14px;
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
  border:1px solid #8fc4ff;
  box-shadow:0 0 0 1px rgba(143,196,255,0.45);
  transition:background .15s ease, box-shadow .15s ease, border-color .15s ease;
}

:root:not([data-theme="light"]) body.sheet-workspace-active .sheet-share-btn:hover,
body.theme-dark.sheet-workspace-active .sheet-share-btn:hover,
body.sheet-workspace-active.theme-dark .sheet-share-btn:hover{
  background:#3b73b4;
  border-color:#b7dcff;
  box-shadow:0 0 0 1px rgba(183,220,255,0.72), 0 0 12px rgba(104,170,255,0.42);
}


/* ===== Functions dropdown edge fix ===== */
#functionsMenu{
  right:0 !important;
  left:auto !important;
  transform-origin: top right;
}

.fmt-toolbar-group-trigger .menu-panel{
  max-width: calc(100vw - 40px);
}


/* ===== Numbers dropdown edge fix ===== */
#numbersMenu{
  right:0 !important;
  left:auto !important;
  transform-origin: top right;
}

/* ===== Phase 2E: row color consistency + toolbar responsive cleanup ===== */

/* Keep row-wide conditional formatting visually uniform across selector, row id, details, and inner editors. */
.gridtable tr.row-complete > td,
:root[data-theme="light"] .gridtable tr.row-complete > td,
body.theme-light .gridtable tr.row-complete > td{
  background: rgba(102, 198, 120, 0.35) !important;
}

.gridtable tr.row-complete > td .cell,
.gridtable tr.row-complete > td .cell-read,
.gridtable tr.row-complete > td textarea.cell-text,
.gridtable tr.row-complete > td .cell-rich,
.gridtable tr.row-complete > td select.cell,
.gridtable tr.row-complete > td input.cell.cell-date,
:root[data-theme="light"] .gridtable tr.row-complete > td .cell,
:root[data-theme="light"] .gridtable tr.row-complete > td .cell-read,
:root[data-theme="light"] .gridtable tr.row-complete > td textarea.cell-text,
:root[data-theme="light"] .gridtable tr.row-complete > td .cell-rich,
:root[data-theme="light"] .gridtable tr.row-complete > td select.cell,
:root[data-theme="light"] .gridtable tr.row-complete > td input.cell.cell-date,
body.theme-light .gridtable tr.row-complete > td .cell,
body.theme-light .gridtable tr.row-complete > td .cell-read,
body.theme-light .gridtable tr.row-complete > td textarea.cell-text,
body.theme-light .gridtable tr.row-complete > td .cell-rich,
body.theme-light .gridtable tr.row-complete > td select.cell,
body.theme-light .gridtable tr.row-complete > td input.cell.cell-date{
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Match Row / Details header fill to their body columns. */
.gridtable thead th.row-index,
.gridtable thead th.row-select-col,
.gridtable thead th.row-merged-header,
:root[data-theme="light"] .gridtable thead th.row-index,
:root[data-theme="light"] .gridtable thead th.row-select-col,
:root[data-theme="light"] .gridtable thead th.row-merged-header,
body.theme-light .gridtable thead th.row-index,
body.theme-light .gridtable thead th.row-select-col,
body.theme-light .gridtable thead th.row-merged-header{
  background: var(--table-row-index-bg) !important;
}

.gridtable thead th.row-details-col,
:root[data-theme="light"] .gridtable thead th.row-details-col,
body.theme-light .gridtable thead th.row-details-col{
  background: var(--table-row-details-bg) !important;
}

/* Make undo / redo icons read clearly without changing button size. */
.fmt-history-icon,
body.sheet-workspace-active .fmt-history-icon{
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.5;
}

body.sheet-workspace-active .fmt-icon-btn{
  min-width: 30px !important;
  width: 30px !important;
  padding: 0 !important;
}

/* Keep toolbar rows in a single line longer; let overflow menus do their job before wrapping. */
@media (max-width: 1500px){
  body.sheet-workspace-active .sheet-top-main{
    flex-wrap: nowrap !important;
  }
  body.sheet-workspace-active .sheet-top-actions{
    width: auto !important;
  }
}

@media (max-width: 1400px){
  body.sheet-workspace-active .sheet-top-row{
    flex-wrap: nowrap !important;
  }
  body.sheet-workspace-active .sheet-top-row-right{
    width: auto !important;
    justify-content: flex-end !important;
  }
}

body.sheet-workspace-active .sheet-top-row,
body.sheet-workspace-active .sheet-top-row-left,
body.sheet-workspace-active .sheet-top-row-right,
body.sheet-workspace-active .sheet-top-row-secondary .sheet-top-copy-inline,
body.sheet-workspace-active .sheet-title-block,
body.sheet-workspace-active .sheet-format-shell,
body.sheet-workspace-active .fmt-toolbar,
body.sheet-workspace-active .fmt-toolbar-main{
  min-width: 0 !important;
}

body.sheet-workspace-active .sheet-top-row-primary,
body.sheet-workspace-active .sheet-top-row-secondary{
  flex-wrap: nowrap !important;
}

body.sheet-workspace-active .sheet-top-row-secondary .sheet-top-actions,
body.sheet-workspace-active .sheet-top-row-primary .sheet-top-tools-right{
  flex: 0 1 auto !important;
}

body.sheet-workspace-active .fmt-toolbar{
  max-width: 100% !important;
  overflow: hidden !important;
}

body.sheet-workspace-active .fmt-toolbar-main{
  flex: 1 1 auto !important;
}

/* Only stack once the row is genuinely out of room. */
@media (max-width: 1180px){
  body.sheet-workspace-active .sheet-top-row{
    flex-wrap: wrap !important;
  }
  body.sheet-workspace-active .sheet-top-row-right{
    width: 100% !important;
  }
}

/* On narrow/mobile widths, preserve undo/save/redo and let later items overflow first. */
@media (max-width: 860px){
  body.sheet-workspace-active .sheet-top-row-secondary{
    align-items: flex-start !important;
  }
  body.sheet-workspace-active .sheet-top-row-secondary .sheet-top-copy-inline,
  body.sheet-workspace-active .sheet-top-row-secondary .sheet-top-actions{
    width: 100% !important;
  }
  body.sheet-workspace-active .sheet-top-row-secondary .sheet-top-actions{
    justify-content: flex-start !important;
  }
  body.sheet-workspace-active .fmt-toolbar{
    width: 100% !important;
  }
}

/* ===== Restore top formatting dropdown menus ===== */
/* Let toolbar dropdown panels render above the sheet instead of being clipped. */
body.sheet-workspace-active .fmt-toolbar,
body.sheet-workspace-active .fmt-toolbar-main,
body.sheet-workspace-active .sheet-format-shell,
body.sheet-workspace-active .sheet-top-row-secondary,
body.sheet-workspace-active .sheet-top-row-right{
  overflow: visible !important;
}

.sheet-format-shell,
.fmt-toolbar,
.fmt-toolbar-main,
.fmt-tool-item,
.inline-menu,
.sheet-menu{
  position: relative;
}

.menu-panel{
  z-index: 12000 !important;
}

.fmt-toolbar .menu-panel,
.inline-menu .menu-panel,
.sheet-menubar .menu-panel{
  display: block;
  visibility: visible;
  pointer-events: auto;
}

.menu-panel[hidden]{
  display: none !important;
}

/* ===== Row area cleanup: plain row numbers, hover-only resize bar, matched header fill ===== */

/* Keep the merged Row header fill aligned with the row area below. */
.gridtable thead th.row-index,
.gridtable thead th.row-index *,
body.sheet-workspace-active .gridtable thead th.row-index,
body.sheet-workspace-active .gridtable thead th.row-index *{
  background: var(--table-row-index-bg) !important;
  background-color: var(--table-row-index-bg) !important;
}

/* Plain row numbers: remove pill/circle treatment and keep them visually simple. */
.row-number,
.gridtable .row-number,
.gridtable td.row-index .row-number,
body.sheet-workspace-active .gridtable td.row-index .row-number{
  display: inline-block !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  line-height: 1.1 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}

/* Hide the row resize blue line until hover, mirroring column resize behavior. */
.row-resize-handle,
.gridtable .row-resize-handle,
.gridtable td.row-index .row-resize-handle{
  display: block !important;
  opacity: 0 !important;
  background: transparent !important;
  pointer-events: auto !important;
}

.row-resize-handle::after,
.gridtable .row-resize-handle::after,
.gridtable td.row-index .row-resize-handle::after{
  background: rgba(83,167,255,0) !important;
  opacity: 0 !important;
  transition: opacity .12s ease, background-color .12s ease !important;
}

.row-index:hover .row-resize-handle,
.gridtable td.row-index:hover .row-resize-handle,
.gridtable td.row-index:focus-within .row-resize-handle{
  opacity: 1 !important;
}

.row-index:hover .row-resize-handle::after,
.gridtable td.row-index:hover .row-resize-handle::after,
.gridtable td.row-index:focus-within .row-resize-handle::after{
  opacity: 1 !important;
  background: rgba(83,167,255,0.85) !important;
}

/* Keep the resize bar visible while actively dragging rows. */
.row-resize-handle.active,
.gridtable .row-resize-handle.active,
.gridtable td.row-index .row-resize-handle.active{
  opacity: 1 !important;
}

.row-resize-handle.active::after,
.gridtable .row-resize-handle.active::after,
.gridtable td.row-index .row-resize-handle.active::after{
  opacity: 1 !important;
  background: rgba(83,167,255,0.9) !important;
}

/* ===== Row header color + dynamic row-number width fix ===== */

/* Make Row header match Details header fill instead of the older row-area tint. */
.gridtable thead th.row-index,
.gridtable thead th.row-index *,
body.sheet-workspace-active .gridtable thead th.row-index,
body.sheet-workspace-active .gridtable thead th.row-index *{
  background: var(--table-head-bg) !important;
  background-color: var(--table-head-bg) !important;
}

/* Start the row-number column at a tight 2-digit width. */
:root{
  --row-num-ch: 2ch;
}

.gridtable td.row-index,
.gridtable th.row-index,
body.sheet-workspace-active .gridtable td.row-index,
body.sheet-workspace-active .gridtable th.row-index{
  width: calc(var(--row-num-ch) + 2.4rem) !important;
  min-width: calc(var(--row-num-ch) + 2.4rem) !important;
}

/* Auto-expand width as row counts grow. */
.gridtable[data-row-digits="3"] td.row-index,
.gridtable[data-row-digits="3"] th.row-index,
body.sheet-workspace-active .gridtable[data-row-digits="3"] td.row-index,
body.sheet-workspace-active .gridtable[data-row-digits="3"] th.row-index{
  width: calc(3ch + 2.4rem) !important;
  min-width: calc(3ch + 2.4rem) !important;
}

.gridtable[data-row-digits="4"] td.row-index,
.gridtable[data-row-digits="4"] th.row-index,
body.sheet-workspace-active .gridtable[data-row-digits="4"] td.row-index,
body.sheet-workspace-active .gridtable[data-row-digits="4"] th.row-index{
  width: calc(4ch + 2.4rem) !important;
  min-width: calc(4ch + 2.4rem) !important;
}

.gridtable[data-row-digits="5"] td.row-index,
.gridtable[data-row-digits="5"] th.row-index,
body.sheet-workspace-active .gridtable[data-row-digits="5"] td.row-index,
body.sheet-workspace-active .gridtable[data-row-digits="5"] th.row-index{
  width: calc(5ch + 2.4rem) !important;
  min-width: calc(5ch + 2.4rem) !important;
}

/* Phase 4A hotfix: color popovers for toolbar buttons */
.fmt-group-row-buttons{
  position: relative;
}
.fmt-color-popover{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: repeat(6, 28px);
  gap: 8px;
  padding: 10px;
  min-width: 220px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}
.fmt-color-popover[hidden]{
  display: none !important;
}
.fmt-color-popover .color-chip{
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.15);
  background: var(--chip-color);
}
.fmt-color-popover .color-chip:hover,
.fmt-color-popover .color-chip:focus-visible{
  transform: scale(1.05);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.22);
}
.fmt-color-popover .fmt-color-clear-btn{
  grid-column: 1 / -1;
  justify-self: stretch;
  min-height: 32px;
}
body:not(.theme-light) .fmt-color-popover,
:root:not([data-theme="light"]) .fmt-color-popover{
  background: rgba(22, 28, 45, 0.98);
  border-color: rgba(96, 165, 250, 0.2);
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.5);
}


/* ===== Interaction hotfix: durable manual borders ===== */
.gridtable tbody td[data-col-id]{
  --manual-border-color: #d1d5db;
  --manual-border-top-size: 0px;
  --manual-border-right-size: 0px;
  --manual-border-bottom-size: 0px;
  --manual-border-left-size: 0px;
}
:root[data-theme="light"] .gridtable tbody td[data-col-id],
body.theme-light .gridtable tbody td[data-col-id]{
  --manual-border-color: #000000;
}
.gridtable tbody td[data-col-id].manual-border-top{ --manual-border-top-size: 2px; }
.gridtable tbody td[data-col-id].manual-border-right{ --manual-border-right-size: 2px; }
.gridtable tbody td[data-col-id].manual-border-bottom{ --manual-border-bottom-size: 2px; }
.gridtable tbody td[data-col-id].manual-border-left{ --manual-border-left-size: 2px; }
.gridtable tbody td[data-col-id].manual-border-thick-top{ --manual-border-top-size: 4px; }
.gridtable tbody td[data-col-id].manual-border-thick-bottom{ --manual-border-bottom-size: 4px; }
.gridtable tbody td[data-col-id].manual-border-top,
.gridtable tbody td[data-col-id].manual-border-right,
.gridtable tbody td[data-col-id].manual-border-bottom,
.gridtable tbody td[data-col-id].manual-border-left,
.gridtable tbody td[data-col-id].manual-border-thick-top,
.gridtable tbody td[data-col-id].manual-border-thick-bottom{
  position: relative;
  box-shadow:
    inset 0 var(--manual-border-top-size) 0 0 var(--manual-border-color),
    inset calc(-1 * var(--manual-border-right-size)) 0 0 0 var(--manual-border-color),
    inset 0 calc(-1 * var(--manual-border-bottom-size)) 0 0 var(--manual-border-color),
    inset var(--manual-border-left-size) 0 0 0 var(--manual-border-color) !important;
}
.gridtable tbody td[data-col-id].manual-border-top::before,
.gridtable tbody td[data-col-id].manual-border-bottom::after,
.gridtable tbody td[data-col-id].manual-border-left > .cell::before,
.gridtable tbody td[data-col-id].manual-border-right > .cell::after,
.gridtable tbody td[data-col-id].manual-border-thick-top::before,
.gridtable tbody td[data-col-id].manual-border-thick-bottom::after{
  content: none !important;
}

/* ===== Interaction hotfix: rich text should not mouse-select unless editing ===== */
.gridtable td .cell-rich{
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
.gridtable td .cell-rich.cell-editing,
.gridtable td .cell-rich[data-cell-editing="1"]{
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

.gridtable td.cell-wrap > .cell,
.gridtable td.cell-wrap > .cell-read,
.gridtable td.cell-wrap .cell-rich,
.gridtable td.cell-wrap input.cell{
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Fill visibility hotfix: keep inner editors transparent so td background shows in both themes. */
body.theme-light .gridtable td[data-manual-fill="1"],
:root[data-theme="light"] .gridtable td[data-manual-fill="1"]{
  background-clip: padding-box;
}

body.theme-light .gridtable td[data-manual-fill="1"] .cell,
body.theme-light .gridtable td[data-manual-fill="1"] .cell-read,
body.theme-light .gridtable td[data-manual-fill="1"] input.cell,
body.theme-light .gridtable td[data-manual-fill="1"] select.cell,
:root[data-theme="light"] .gridtable td[data-manual-fill="1"] .cell,
:root[data-theme="light"] .gridtable td[data-manual-fill="1"] .cell-read,
:root[data-theme="light"] .gridtable td[data-manual-fill="1"] input.cell,
:root[data-theme="light"] .gridtable td[data-manual-fill="1"] select.cell,
body:not(.theme-light) .gridtable td[data-manual-fill="1"] .cell,
body:not(.theme-light) .gridtable td[data-manual-fill="1"] .cell-read,
body:not(.theme-light) .gridtable td[data-manual-fill="1"] input.cell,
body:not(.theme-light) .gridtable td[data-manual-fill="1"] select.cell{
  background: transparent !important;
  background-color: transparent !important;
}

body.theme-light .fmt-color-popover[data-kind="fill"] .color-chip,
:root[data-theme="light"] .fmt-color-popover[data-kind="fill"] .color-chip{
  box-shadow: inset 0 0 0 1px rgba(24, 33, 51, 0.18);
}

body:not(.theme-light) .fmt-color-popover[data-kind="fill"] .color-chip{
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}


/* Fill visibility + palette reliability hotfix */
.fmt-color-popover .color-chip,
body.theme-light .fmt-color-popover .color-chip,
:root[data-theme="light"] .fmt-color-popover .color-chip,
body:not(.theme-light) .fmt-color-popover .color-chip,
:root:not([data-theme="light"]) .fmt-color-popover .color-chip{
  background-image: none !important;
  background-color: var(--chip-color, transparent) !important;
  opacity: 1 !important;
}

body:not(.theme-light) .fmt-color-popover[data-kind="fill"] .color-chip,
:root:not([data-theme="light"]) .fmt-color-popover[data-kind="fill"] .color-chip{
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10) !important;
}

body.theme-light .fmt-color-popover[data-kind="fill"] .color-chip,
:root[data-theme="light"] .fmt-color-popover[data-kind="fill"] .color-chip{
  border-color: rgba(24,33,51,0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(24,33,51,0.08) !important;
}

.gridtable td[data-manual-fill="1"]{
  background-color: var(--manual-fill-color) !important;
}

.gridtable td[data-manual-fill="1"] > .cell,
.gridtable td[data-manual-fill="1"] > .cell-read,
.gridtable td[data-manual-fill="1"] textarea.cell-text,
.gridtable td[data-manual-fill="1"] .cell-rich,
.gridtable td[data-manual-fill="1"] input.cell,
.gridtable td[data-manual-fill="1"] select.cell{
  background-color: var(--manual-fill-color) !important;
  background-image: none !important;
}

.gridtable td[data-manual-fill="1"].cell-active,
.gridtable td[data-manual-fill="1"].cell-range-selected,
.gridtable td[data-manual-fill="1"].cell-range-anchor,
.gridtable td[data-manual-fill="1"]:focus-within{
  background-color: var(--manual-fill-color) !important;
}


/* Batched toolbar/edit stabilization */
#fmtToolbar .fmt-color-popover{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 12500;
}
#fmtToolbar .fmt-group-row{ position: relative; }

.gridtable td .cell-rich.cell-editing,
.gridtable td .cell-rich[data-cell-editing="1"]{
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

.gridtable td.cell-active > .cell,
.gridtable td.cell-active > .cell-read{
  outline: 2px solid rgba(96,165,250,0.55);
  outline-offset: -2px;
}

:root[data-theme="light"] .gridtable tbody td[data-col-id]{
  --manual-border-color: #000000;
}
:root:not([data-theme="light"]) .gridtable tbody td[data-col-id]{
  --manual-border-color: #d1d5db;
}


/* Recovery overrides: restore stable toolbar/layout/borders/conditional formatting */
.sheet-top{padding:12px 16px 10px !important;display:flex !important;flex-direction:column !important;gap:10px !important;}
.sheet-control-row{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:10px !important;min-width:0 !important;}
.sheet-top-row{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;flex-wrap:wrap !important;min-width:0 !important;}
.sheet-top-row-left,.sheet-top-row-right{display:flex !important;align-items:center !important;gap:8px !important;flex-wrap:wrap !important;min-width:0 !important;}
.sheet-title-block{min-width:0 !important;}
.sheet-page-title{margin:0 !important;}
.fmt-toolbar{display:flex !important;align-items:center !important;gap:8px !important;flex-wrap:wrap !important;justify-content:flex-start !important;width:auto !important;}
.fmt-toolbar-main{display:flex !important;align-items:center !important;gap:6px !important;flex-wrap:wrap !important;white-space:normal !important;}
#fmt-wrap{opacity:.5 !important;cursor:not-allowed !important;pointer-events:none !important;}
.gridtable td.cf-due-soon,.gridtable td.cf-due-urgent,.gridtable td.cf-status-complete,.gridtable td.cf-needs-attention,.gridtable tr.row-complete td{background-clip:padding-box !important;}
.gridtable td.cf-due-soon .cell,.gridtable td.cf-due-urgent .cell,.gridtable td.cf-status-complete .cell,.gridtable td.cf-needs-attention .cell,.gridtable tr.row-complete td .cell,.gridtable td.cf-due-soon .cell-read,.gridtable td.cf-due-urgent .cell-read,.gridtable td.cf-status-complete .cell-read,.gridtable td.cf-needs-attention .cell-read,.gridtable tr.row-complete td .cell-read{background:inherit !important;background-color:inherit !important;}
.gridtable td[data-manual-border="1"]::before,.gridtable td[data-manual-border="1"]::after{display:none !important;}
.gridtable td[data-manual-border="1"]{box-shadow:none !important;}
.gridtable td[data-manual-border="1"][data-border-top="1"]{box-shadow:inset 0 2px 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-manual-border="1"][data-border-bottom="1"]{box-shadow:inset 0 -2px 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-manual-border="1"][data-border-left="1"]{box-shadow:inset 2px 0 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-manual-border="1"][data-border-right="1"]{box-shadow:inset -2px 0 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-manual-border="1"][data-border-top="1"][data-border-bottom="1"]{box-shadow:inset 0 2px 0 var(--sheet-border-color,#d1d5db), inset 0 -2px 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-manual-border="1"][data-border-left="1"][data-border-right="1"]{box-shadow:inset 2px 0 0 var(--sheet-border-color,#d1d5db), inset -2px 0 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-manual-border="1"][data-border-top="1"][data-border-left="1"]{box-shadow:inset 0 2px 0 var(--sheet-border-color,#d1d5db), inset 2px 0 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-manual-border="1"][data-border-top="1"][data-border-right="1"]{box-shadow:inset 0 2px 0 var(--sheet-border-color,#d1d5db), inset -2px 0 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-manual-border="1"][data-border-bottom="1"][data-border-left="1"]{box-shadow:inset 0 -2px 0 var(--sheet-border-color,#d1d5db), inset 2px 0 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-manual-border="1"][data-border-bottom="1"][data-border-right="1"]{box-shadow:inset 0 -2px 0 var(--sheet-border-color,#d1d5db), inset -2px 0 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-manual-border="1"][data-border-top="1"][data-border-bottom="1"][data-border-left="1"]{box-shadow:inset 0 2px 0 var(--sheet-border-color,#d1d5db), inset 0 -2px 0 var(--sheet-border-color,#d1d5db), inset 2px 0 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-manual-border="1"][data-border-top="1"][data-border-bottom="1"][data-border-right="1"]{box-shadow:inset 0 2px 0 var(--sheet-border-color,#d1d5db), inset 0 -2px 0 var(--sheet-border-color,#d1d5db), inset -2px 0 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-manual-border="1"][data-border-left="1"][data-border-right="1"][data-border-top="1"]{box-shadow:inset 2px 0 0 var(--sheet-border-color,#d1d5db), inset -2px 0 0 var(--sheet-border-color,#d1d5db), inset 0 2px 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-manual-border="1"][data-border-left="1"][data-border-right="1"][data-border-bottom="1"]{box-shadow:inset 2px 0 0 var(--sheet-border-color,#d1d5db), inset -2px 0 0 var(--sheet-border-color,#d1d5db), inset 0 -2px 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-manual-border="1"][data-border-top="1"][data-border-bottom="1"][data-border-left="1"][data-border-right="1"]{box-shadow:inset 0 2px 0 var(--sheet-border-color,#d1d5db), inset 0 -2px 0 var(--sheet-border-color,#d1d5db), inset 2px 0 0 var(--sheet-border-color,#d1d5db), inset -2px 0 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-border-thick-top="1"]{box-shadow:inset 0 4px 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-border-thick-bottom="1"]{box-shadow:inset 0 -4px 0 var(--sheet-border-color,#d1d5db) !important;}
.gridtable td[data-manual-border="1"] > .cell,.gridtable td[data-manual-border="1"] > .cell-read{box-shadow:none !important;border-color:transparent !important;}
:root[data-theme="light"]{--sheet-border-color:#000000 !important;}
:root:not([data-theme="light"]){--sheet-border-color:#d1d5db !important;}


/* ===== Phase 4 targeted stabilization: sticky grid, modal stacking, overflow layout ===== */
.table-wrap,
body.sheet-workspace-active .table-wrap{
  position: relative !important;
  isolation: isolate !important;
  min-width: 0 !important;
  overscroll-behavior: contain !important;
}

.gridtable{
  border-collapse: separate;
  border-spacing: 0;
}

/* Keep sticky headers and frozen columns painted above scrolling cells without tearing. */
.gridtable thead th,
.gridtable thead th.col-frozen,
.gridtable td.col-frozen,
.gridtable th.col-frozen,
.gridtable td.row-index,
.gridtable th.row-index,
.gridtable td.row-details,
.gridtable th.row-details-col{
  background-clip: padding-box;
}

.gridtable td.col-frozen,
.gridtable th.col-frozen{
  position: sticky !important;
  z-index: 11 !important;
  background: var(--frozen-bg, inherit) !important;
  background-color: var(--frozen-bg, inherit) !important;
  background-image: none !important;
  box-shadow: inset -1px 0 0 rgba(120, 139, 163, 0.22);
}

.gridtable thead th.col-frozen{
  z-index: 28 !important;
}

.gridtable td.col-frozen{
  overflow: hidden !important;
}

.gridtable tr.row-complete td.col-frozen > .cell,
.gridtable tr.row-complete td.col-frozen > .cell-read,
.gridtable tr.row-complete td.col-frozen > textarea.cell-text,
.gridtable tr.row-complete td.col-frozen > .cell-rich,
.gridtable tr.row-complete td.col-frozen > input.cell,
.gridtable tr.row-complete td.col-frozen > select.cell,
:root[data-theme="light"] .gridtable tr.row-complete td.col-frozen > .cell,
:root[data-theme="light"] .gridtable tr.row-complete td.col-frozen > .cell-read,
:root[data-theme="light"] .gridtable tr.row-complete td.col-frozen > textarea.cell-text,
:root[data-theme="light"] .gridtable tr.row-complete td.col-frozen > .cell-rich,
:root[data-theme="light"] .gridtable tr.row-complete td.col-frozen > input.cell,
:root[data-theme="light"] .gridtable tr.row-complete td.col-frozen > select.cell,
body.theme-light .gridtable tr.row-complete td.col-frozen > .cell,
body.theme-light .gridtable tr.row-complete td.col-frozen > .cell-read,
body.theme-light .gridtable tr.row-complete td.col-frozen > textarea.cell-text,
body.theme-light .gridtable tr.row-complete td.col-frozen > .cell-rich,
body.theme-light .gridtable tr.row-complete td.col-frozen > input.cell,
body.theme-light .gridtable tr.row-complete td.col-frozen > select.cell{
  background: var(--frozen-bg) !important;
  background-color: var(--frozen-bg) !important;
}

.gridtable tr.row-complete td.col-frozen,
:root[data-theme="light"] .gridtable tr.row-complete td.col-frozen,
body.theme-light .gridtable tr.row-complete td.col-frozen{
  background: rgb(194, 231, 208) !important;
  background-color: rgb(194, 231, 208) !important;
  --frozen-bg: rgb(194, 231, 208) !important;
}

:root[data-theme="dark"] .gridtable td.col-frozen,
body.theme-dark .gridtable td.col-frozen{
  background: #293240 !important;
  background-color: #293240 !important;
  --frozen-bg: #293240 !important;
}

:root[data-theme="dark"] .gridtable tr.row-complete td.col-frozen,
body.theme-dark .gridtable tr.row-complete td.col-frozen{
  background: #466e57 !important;
  background-color: #466e57 !important;
  --frozen-bg: #466e57 !important;
}

body.sheet-workspace-active .gridtable thead th.row-index,
body.sheet-workspace-active .gridtable thead th.row-details-col{
  z-index: 24 !important;
}

body.sheet-workspace-active .gridtable td.row-index,
body.sheet-workspace-active .gridtable td.row-details,
body.sheet-workspace-active .gridtable td.col-frozen{
  z-index: 12 !important;
}

/* Menus should stay clipped only by themselves, not by their flex parents. */
.sheet-menubar,
.sheet-menubar-main,
.sheet-format-shell,
.fmt-toolbar,
.fmt-toolbar-main,
.toolbar-overflow{
  min-width: 0;
}

body.sheet-workspace-active .sheet-menubar-main,
body.sheet-workspace-active .fmt-toolbar-main{
  overflow: hidden !important;
}

body.sheet-workspace-active .toolbar-overflow{
  margin-left: auto;
}

.toolbar-overflow .menu-panel,
.menu-panel.menu-panel-right{
  max-width: min(380px, calc(100vw - 24px));
}

/* Modal and popover stacking order: menus above sheet, dialogs above menus, row actions/details above both. */
.menu-panel{
  z-index: 12000 !important;
}

.sheet-modal{
  z-index: 12100 !important;
}

.row-details-modal,
.row-actions-modal,
body.sheet-workspace-active .sheet-modal,
body.sheet-workspace-active .row-details-modal,
body.sheet-workspace-active .row-actions-modal{
  z-index: 12200 !important;
}

.sheet-modal-backdrop,
.row-details-modal-backdrop{
  pointer-events: auto;
}

.sheet-modal-panel,
.row-details-modal-panel,
.row-actions-modal-panel,
.sheet-modal-panel.sheet-modal-panel-docs{
  position: relative;
  z-index: 1;
}

/* ===== Milestone pass: compact top chrome + stable menu visibility ===== */
body.sheet-workspace-active .sheet-top{
  padding: 10px 14px 8px !important;
  gap: 8px !important;
  border-radius: 14px !important;
}

body.sheet-workspace-active .sheet-control-row{
  gap: 6px !important;
}

body.sheet-workspace-active .sheet-top-row{
  align-items: center !important;
  gap: 8px !important;
}

body.sheet-workspace-active .sheet-top-row-primary{
  min-height: 32px;
}

body.sheet-workspace-active .sheet-top-row-secondary{
  min-height: 34px;
}

body.sheet-workspace-active .sheet-top-row-left,
body.sheet-workspace-active .sheet-top-row-right,
body.sheet-workspace-active .sheet-menubar,
body.sheet-workspace-active .sheet-menubar-main{
  gap: 6px !important;
}

body.sheet-workspace-active .sheet-menubar{
  width: 100%;
  justify-content: space-between;
}

body.sheet-workspace-active .sheet-menubar-main{
  flex: 1 1 auto;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

body.sheet-workspace-active .sheet-top-tools-right{
  display: none !important;
}

body.sheet-workspace-active .sheet-menubar .toolbar-divider{
  height: 18px !important;
  margin: 0 2px !important;
  opacity: 0.5;
}

body.sheet-workspace-active .sheet-menubar .menu-trigger,
body.sheet-workspace-active .sheet-menubar .solo-trigger,
body.sheet-workspace-active .sheet-menubar .btn,
body.sheet-workspace-active .sheet-menubar button,
body.sheet-workspace-active .sheet-save-btn{
  min-height: 28px !important;
  height: 28px !important;
  padding: 4px 9px !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  line-height: 1 !important;
}

body.sheet-workspace-active .sheet-save-btn{
  font-weight: 700 !important;
}

body.sheet-workspace-active .sheet-save-status{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 4px 0 0 !important;
  font-size: 0.76rem !important;
  white-space: nowrap;
}

body.sheet-workspace-active .sheet-top-copy-inline{
  width: auto;
  justify-content: flex-start;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  min-width: 0;
}

body.sheet-workspace-active .sheet-title-block{
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 0 1 auto;
}

.sheet-title-line{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: nowrap;
}

body.sheet-workspace-active .sheet-page-title{
  margin: 0 !important;
  font-size: clamp(1.05rem, 1.3vw, 1.35rem) !important;
  line-height: 1.05 !important;
  white-space: nowrap;
}

body.sheet-workspace-active .sheet-role-copy.sheet-role-copy-inline{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem !important;
  line-height: 1.1 !important;
}

.sheet-role-pill{
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.12);
  text-transform: capitalize;
  font-weight: 700;
}

.sheet-role-status{
  opacity: 0.9;
}

body.sheet-workspace-active .sheet-back-link{
  min-height: 28px !important;
  padding: 4px 9px !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
}

body.sheet-workspace-active .sheet-format-shell{
  margin-top: 0 !important;
}

body.sheet-workspace-active .fmt-toolbar{
  min-height: 34px !important;
  padding: 0 !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

body.sheet-workspace-active .fmt-toolbar-main{
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

body.sheet-workspace-active .fmt-toolbar .fmt-tool-item,
body.sheet-workspace-active .fmt-toolbar .sheet-menu{
  flex: 0 0 auto;
}

body.sheet-workspace-active .fmt-toolbar button,
body.sheet-workspace-active .fmt-toolbar .ghost{
  min-height: 28px !important;
  height: 28px !important;
  padding: 4px 9px !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
}

body.sheet-workspace-active .fmt-toolbar .fmt-group-panel{
  top: calc(100% + 6px);
}

body.sheet-workspace-active .sheet-menubar,
body.sheet-workspace-active .sheet-menubar-main,
body.sheet-workspace-active .sheet-top-row,
body.sheet-workspace-active .sheet-top-row-left,
body.sheet-workspace-active .sheet-top-row-right,
body.sheet-workspace-active .sheet-format-shell,
body.sheet-workspace-active .fmt-toolbar,
body.sheet-workspace-active .fmt-toolbar-main{
  overflow: visible !important;
}

body.sheet-workspace-active .menu-panel,
body.sheet-workspace-active .fmt-toolbar .menu-panel,
body.sheet-workspace-active .sheet-menubar .menu-panel{
  overflow: visible !important;
  max-height: min(70vh, 560px);
  z-index: 12300 !important;
}

@media (max-width: 1180px){
  body.sheet-workspace-active .sheet-top-copy-inline{
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  body.sheet-workspace-active .fmt-toolbar,
  body.sheet-workspace-active .fmt-toolbar-main{
    flex-wrap: wrap !important;
  }
}

/* ===== Single-row sheet chrome refinement ===== */
body.sheet-workspace-active .sheet-top{
  padding: 5px 6px 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

body.sheet-workspace-active .sheet-control-row{
  gap: 0 !important;
}

body.sheet-workspace-active .sheet-top-row-primary{
  align-items: center !important;
  gap: 6px !important;
  min-height: 28px;
}

body.sheet-workspace-active .sheet-top-menu-left{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.sheet-workspace-active .sheet-top-tools-right{
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin-left: auto !important;
  justify-content: flex-end !important;
}

body.sheet-workspace-active .sheet-nav-cluster{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(97, 127, 170, 0.52) !important;
  background: rgba(226, 236, 249, 0.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 0 0 1px rgba(164, 186, 220, 0.28) !important;
  min-width: 0 !important;
}

body.sheet-workspace-active .sheet-format-shell{
  margin-left: 10px !important;
  padding-left: 10px !important;
  border-left: 1px solid rgba(120, 146, 182, 0.34);
}

body.sheet-workspace-active .sheet-menubar{
  width: auto !important;
  min-width: 0 !important;
}

body.sheet-workspace-active .sheet-menubar-main{
  gap: 2px !important;
  flex-wrap: nowrap !important;
}

body.sheet-workspace-active .toolbar-divider{
  display: none !important;
}

body.sheet-workspace-active .sheet-zoom-controls + .toolbar-divider{
  display: block !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 18px !important;
  margin: 0 6px !important;
  background: rgba(120, 146, 182, 0.34) !important;
  border-radius: 999px !important;
  flex: 0 0 1px !important;
}

body.sheet-workspace-active .sheet-menubar .menu-trigger,
body.sheet-workspace-active .sheet-menubar .solo-trigger,
body.sheet-workspace-active .sheet-menubar .btn,
body.sheet-workspace-active .sheet-menubar button,
body.sheet-workspace-active .sheet-save-btn{
  min-height: 24px !important;
  height: 24px !important;
  padding: 2px 7px !important;
  border-radius: 7px !important;
  font-size: 0.76rem !important;
}

body.sheet-workspace-active .sheet-zoom-controls{
  gap: 2px !important;
  min-height: 24px !important;
  margin: 0 1px !important;
}

body.sheet-workspace-active .sheet-zoom-controls #zoomOutBtn,
body.sheet-workspace-active .sheet-zoom-controls #zoomInBtn{
  min-width: 22px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
}

body.sheet-workspace-active .sheet-zoom-controls #zoomPct{
  min-width: 34px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
}

body.sheet-workspace-active .sheet-save-status{
  min-height: 24px !important;
  font-size: 0.68rem !important;
}

body.sheet-workspace-active .sheet-back-link{
  min-height: 24px !important;
  height: 24px !important;
  padding: 2px 7px !important;
  font-size: 0.74rem !important;
}

body.sheet-workspace-active .sheet-title-block{
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

body.sheet-workspace-active .sheet-title-line{
  gap: 5px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

body.sheet-workspace-active .sheet-page-title{
  font-size: clamp(0.92rem, 1vw, 1.08rem) !important;
  white-space: nowrap !important;
}

body.sheet-workspace-active .sheet-favorite-star{
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  margin: 0 !important;
}

body.sheet-workspace-active .sheet-role-pill{
  padding: 1px 6px !important;
  font-size: 0.72rem !important;
}

body.sheet-workspace-active .sheet-role-status{
  font-size: 0.72rem !important;
  white-space: nowrap !important;
}

body.sheet-workspace-active .sheet-format-shell{
  margin-left: 0 !important;
  flex: 0 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
}

body.sheet-workspace-active .fmt-toolbar{
  min-height: 24px !important;
  gap: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.sheet-workspace-active .fmt-toolbar-main{
  gap: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.sheet-workspace-active .fmt-toolbar button,
body.sheet-workspace-active .fmt-toolbar .ghost,
body.sheet-workspace-active .fmt-select,
body.sheet-workspace-active .fmt-group-trigger-btn{
  min-height: 24px !important;
  height: 24px !important;
  padding: 2px 7px !important;
  border-radius: 7px !important;
  font-size: 0.76rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

body.sheet-workspace-active .fmt-icon-btn{
  min-width: 34px !important;
  width: 34px !important;
  padding: 0 !important;
}

body.sheet-workspace-active .fmt-history-icon{
  width: 18px !important;
  height: 18px !important;
}

body.sheet-workspace-active .fmt-tool-divider{
  display: none !important;
}

body.sheet-workspace-active .fmt-group-trigger-btn{
  font-weight: 600 !important;
  align-self: center !important;
}

body.sheet-workspace-active .fmt-toolbar .fmt-tool-item,
body.sheet-workspace-active .fmt-toolbar .sheet-menu,
body.sheet-workspace-active .fmt-toolbar-group-trigger{
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
}

body.sheet-workspace-active .fmt-group-panel-unified{
  min-width: 420px !important;
  max-width: min(560px, calc(100vw - 24px)) !important;
  padding: 10px !important;
  left: auto !important;
  right: 0 !important;
}

body.sheet-workspace-active .fmt-group-panel-unified .fmt-group-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.sheet-workspace-active .fmt-group-panel-unified .fmt-group-row-buttons .ghost,
body.sheet-workspace-active .fmt-group-panel-unified .fmt-group-row-buttons button{
  min-height: 28px !important;
  height: auto !important;
}

body.sheet-workspace-active .sheet-menubar .menu-panel,
body.sheet-workspace-active .fmt-toolbar .menu-panel{
  border-radius: 12px !important;
}

body.sheet-workspace-active .table-wrap{
  margin-top: 0 !important;
  margin-left: 12px !important;
  margin-right: 12px !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

body.sheet-workspace-active .gridtable th.row-select-col,
body.sheet-workspace-active .gridtable td.row-select{
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
}

body.sheet-workspace-active .gridtable td.row-select{
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  overflow: hidden !important;
  z-index: 13 !important;
  cursor: pointer !important;
  background: var(--table-row-index-bg) !important;
}

body.sheet-workspace-active .gridtable td.row-select::before{
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 0;
}

body.sheet-workspace-active .gridtable td.row-select .row-select-toggle,
body.sheet-workspace-active .gridtable td.row-select [data-row-select-toggle]{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 40px !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 2 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

body.sheet-workspace-active .gridtable td.row-select .row-select-box{
  display: none !important;
}

body.sheet-workspace-active .gridtable tr.is-row-selected td.row-select{
  background: rgba(47, 108, 255, 0.82) !important;
  box-shadow: inset 0 0 0 9999px rgba(47, 108, 255, 0.82) !important;
}

body.sheet-workspace-active .gridtable tr.is-row-selected td.row-select::before{
  background: rgba(47, 108, 255, 0.82) !important;
}

body.sheet-workspace-active .gridtable tr.is-row-selected td.row-select .row-select-toggle,
body.sheet-workspace-active .gridtable tr.is-row-selected td.row-select [data-row-select-toggle]{
  background: transparent !important;
}

body.sheet-workspace-active .gridtable tr.is-row-selected td.row-select .row-select-toggle,
body.sheet-workspace-active .gridtable tr.is-row-selected td.row-select [data-row-select-toggle]{
  background: rgba(63, 124, 255, 0.72) !important;
  background-color: rgba(63, 124, 255, 0.72) !important;
}

body.sheet-workspace-active .gridtable tr.is-row-selected .row-select-box{
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.sheet-workspace-active .gridtable td.row-index,
body.sheet-workspace-active .gridtable th.row-index{
  max-width: none !important;
}

body.sheet-workspace-active .gridtable td.row-index,
body.sheet-workspace-active .gridtable th.row-index{
  width: calc(2ch + 0.8rem) !important;
  min-width: calc(2ch + 0.8rem) !important;
}

body.sheet-workspace-active .gridtable[data-row-digits="3"] td.row-index,
body.sheet-workspace-active .gridtable[data-row-digits="3"] th.row-index{
  width: calc(3ch + 0.8rem) !important;
  min-width: calc(3ch + 0.8rem) !important;
}

body.sheet-workspace-active .gridtable[data-row-digits="4"] td.row-index,
body.sheet-workspace-active .gridtable[data-row-digits="4"] th.row-index{
  width: calc(4ch + 0.8rem) !important;
  min-width: calc(4ch + 0.8rem) !important;
}

body.sheet-workspace-active .gridtable[data-row-digits="5"] td.row-index,
body.sheet-workspace-active .gridtable[data-row-digits="5"] th.row-index{
  width: calc(5ch + 0.8rem) !important;
  min-width: calc(5ch + 0.8rem) !important;
}

body.sheet-workspace-active .gridtable td.row-index{
  padding: 0 6px !important;
  left: 0 !important;
  z-index: 30 !important;
  pointer-events: auto !important;
}


body.sheet-workspace-active .gridtable td.row-index .row-index-controls{
  gap: 0 !important;
  justify-content: center !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
  z-index: 12 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  pointer-events: auto !important;
}

body.sheet-workspace-active .gridtable td.row-index .row-number{
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  text-align: center !important;
  pointer-events: auto !important;
  font-size: 20px !important;
  font-weight: 400 !important;
}

:root[data-theme="dark"] body.sheet-workspace-active .fmt-select,
:root[data-theme="dark"] .fmt-select,
body.theme-dark.sheet-workspace-active .fmt-select,
body.theme-dark .fmt-select{
  background: linear-gradient(180deg, rgba(52, 63, 80, 0.98) 0%, rgba(41, 51, 66, 0.98) 100%) !important;
  background-color: rgba(41, 51, 66, 0.98) !important;
  border-color: rgba(111, 136, 173, 0.34) !important;
  color: #eef4ff !important;
}

:root[data-theme="dark"] body.sheet-workspace-active .fmt-select:hover,
:root[data-theme="dark"] body.sheet-workspace-active .fmt-select:focus,
body.theme-dark.sheet-workspace-active .fmt-select:hover,
body.theme-dark.sheet-workspace-active .fmt-select:focus{
  background: linear-gradient(180deg, rgba(58, 72, 92, 1) 0%, rgba(47, 59, 77, 1) 100%) !important;
  border-color: rgba(135, 164, 206, 0.46) !important;
  color: #f8fbff !important;
}

body.sheet-workspace-active .gridtable td.row-index{
  overflow: visible !important;
  position: relative !important;
  pointer-events: auto !important;
  z-index: 18 !important;
  isolation: isolate !important;
}

body.sheet-workspace-active .gridtable td.row-index .row-index-controls{
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  position: absolute !important;
  inset: 0 !important;
  overflow: visible !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  pointer-events: auto !important;
  margin: 0 !important;
}

body.sheet-workspace-active .gridtable tbody tr:hover > td.row-index .row-resize-handle,
body.sheet-workspace-active .gridtable tbody tr:hover > td.row-index .row-resize-handle::after{
  opacity: 1 !important;
}

body.sheet-workspace-active .gridtable td.row-index .row-resize-handle{
  left: 0 !important;
  right: 0 !important;
  bottom: -4px !important;
  height: 8px !important;
  z-index: 25 !important;
  pointer-events: auto !important;
}

body.sheet-workspace-active .gridtable td.row-index .row-resize-handle::after{
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 2px !important;
  transform: translateY(-50%) !important;
  background: rgba(83,167,255,0.92) !important;
}

body.sheet-workspace-active .gridtable td.row-index .row-menu{
  position: absolute !important;
  top: 0 !important;
  left: calc(100% + 6px) !important;
  right: auto !important;
  transform: none !important;
  min-width: 220px !important;
  max-width: min(280px, calc(100vw - 24px)) !important;
  z-index: 15000 !important;
  overflow: visible !important;
}

body.sheet-workspace-active .gridtable td.row-index .row-menu[hidden]{
  display: none !important;
}

body.sheet-workspace-active .gridtable td.row-index .row-menu.is-open{
  display: block !important;
}

body.sheet-workspace-active .gridtable td.row-index .row-menu.row-menu-floating{
  position: fixed !important;
  left: var(--row-menu-left, calc(100% + 6px)) !important;
  top: var(--row-menu-top, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 25000 !important;
}

body.sheet-workspace-active .gridtable th.row-details-col,
body.sheet-workspace-active .gridtable td.row-details{
  width: var(--details-col-w) !important;
  min-width: var(--details-col-w) !important;
  max-width: none !important;
}

body.sheet-workspace-active .gridtable td.row-details .row-details-summary{
  padding: 4px 6px !important;
  justify-content: center !important;
  gap: 6px !important;
  font-weight: 300 !important;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

body.sheet-workspace-active .gridtable td.row-details .details-chip{
  min-width: 0 !important;
  gap: 2px !important;
  font-weight: 300 !important;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

body.sheet-workspace-active .gridtable td.row-details .details-count{
  min-width: 1.2ch !important;
  text-align: right !important;
  font-weight: 300 !important;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

body.sheet-workspace-active .gridtable td.row-details .details-chip{
  font-weight: 300 !important;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

body.sheet-workspace-active .gridtable td.row-index .row-number{
  font-weight: 600 !important;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

body.sheet-workspace-active .gridtable td.row-details .comment-dot{
  margin-left: 2px !important;
}

body.sheet-workspace-active .gridtable tr.is-row-selected > td{
  box-shadow:
    inset 0 2px 0 rgba(44, 103, 255, 0.88),
    inset 0 -2px 0 rgba(44, 103, 255, 0.88),
    inset 0 0 0 9999px rgba(84, 132, 255, 0.14) !important;
  background-color: rgba(84, 132, 255, 0.14) !important;
}

body.sheet-workspace-active .gridtable tr.is-row-selected > td.row-select,
body.sheet-workspace-active .gridtable tr.is-row-selected > td.row-index,
body.sheet-workspace-active .gridtable tr.is-row-selected > td.row-details{
  box-shadow:
    inset 0 2px 0 rgba(44, 103, 255, 0.92),
    inset 0 -2px 0 rgba(44, 103, 255, 0.92),
    inset 0 0 0 9999px rgba(84, 132, 255, 0.2) !important;
  background-color: rgba(84, 132, 255, 0.2) !important;
}

:root[data-theme="dark"] .sheet-nav-cluster,
body.theme-dark.sheet-workspace-active .sheet-nav-cluster{
  border: 1px solid rgba(118, 137, 168, 0.68) !important;
  background: linear-gradient(180deg, rgba(61, 72, 92, 0.96) 0%, rgba(47, 57, 75, 0.96) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(236, 243, 255, 0.14),
    0 0 0 1px rgba(148, 168, 198, 0.18) !important;
}

:root[data-theme="dark"] .sheet-workspace-shell,
body.theme-dark.sheet-workspace-active .sheet-workspace-shell{
  background: linear-gradient(180deg, rgba(22, 26, 34, 0.995) 0%, rgba(16, 20, 28, 0.995) 100%) !important;
  border-color: rgba(92, 107, 130, 0.68) !important;
}

:root[data-theme="dark"] .sheet-top,
body.theme-dark.sheet-workspace-active .sheet-top{
  background: linear-gradient(180deg, rgba(34, 40, 50, 0.92) 0%, rgba(27, 32, 41, 0.86) 100%) !important;
}

:root[data-theme="dark"] .table-wrap,
body.theme-dark.sheet-workspace-active .table-wrap{
  background: #232c39 !important;
  border-color: rgba(95, 116, 145, 0.44) !important;
}

:root[data-theme="dark"] .gridtable th,
body.theme-dark.sheet-workspace-active .gridtable th{
  background-color: #232c39 !important;
}

:root[data-theme="dark"] .gridtable thead th,
body.theme-dark.sheet-workspace-active .gridtable thead th{
  background-color: #2b3442 !important;
}

:root[data-theme="dark"] .gridtable thead th.row-merged-header,
:root[data-theme="dark"] .gridtable thead th.row-select-col,
:root[data-theme="dark"] .gridtable thead th.row-index,
body.theme-dark.sheet-workspace-active .gridtable thead th.row-merged-header,
body.theme-dark.sheet-workspace-active .gridtable thead th.row-select-col,
body.theme-dark.sheet-workspace-active .gridtable thead th.row-index{
  background-color: #313b4a !important;
}

:root[data-theme="dark"] .gridtable thead th.row-details-col,
body.theme-dark.sheet-workspace-active .gridtable thead th.row-details-col{
  background-color: #2f3948 !important;
}

:root[data-theme="dark"] .gridtable td.row-select,
:root[data-theme="dark"] .gridtable td.row-index,
body.theme-dark.sheet-workspace-active .gridtable td.row-select,
body.theme-dark.sheet-workspace-active .gridtable td.row-index{
  background-color: #2b3442 !important;
}

:root[data-theme="dark"] .gridtable td.row-details,
body.theme-dark.sheet-workspace-active .gridtable td.row-details{
  background-color: #293240 !important;
}

/* ===== Window system standardization pass ===== */

.ui-window-shell,
.share-window-shell,
.workflow-window-shell,
.audit-window-shell{
  max-width: 1240px !important;
  margin: 16px auto 22px !important;
  padding: 0 16px 24px !important;
}

.ui-window-hero,
.audit-window-head,
.legal-page-head,
.share-page-head{
  padding: 18px 22px !important;
  border-radius: 22px !important;
}

.ui-window-card,
.audit-window-card,
.share-page-card,
.legal-section-card{
  border-radius: 20px !important;
  padding: 18px 20px !important;
}

.ui-window-card > :first-child,
.audit-window-card > :first-child,
.share-page-card > :first-child,
.legal-section-card > :first-child{
  margin-top: 0 !important;
}

.ui-window-card > :last-child,
.audit-window-card > :last-child,
.share-page-card > :last-child,
.legal-section-card > :last-child{
  margin-bottom: 0 !important;
}

.audit-window-head .btn,
.ui-window-hero .btn,
.share-page-head .btn,
.legal-page-head .btn{
  align-self: center !important;
}

.menu-panel,
.sheet-modal-panel,
.range-context-menu{
  border-radius: 18px !important;
  border-width: 1px !important;
  box-shadow: 0 22px 48px rgba(8, 12, 20, 0.24) !important;
}

.menu-panel{
  padding: 10px !important;
}

#fileMenu.menu-panel,
body.sheet-workspace-active #fileMenu.menu-panel{
  min-width: 252px !important;
  max-height: min(86vh, 720px) !important;
  overflow-y: auto !important;
  padding: 8px !important;
}

.menu-item{
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 11px !important;
}

#fileMenu .menu-item,
body.sheet-workspace-active #fileMenu .menu-item{
  min-height: 28px !important;
  padding: 5px 10px !important;
}

.menu-group-label{
  padding: 6px 12px 8px !important;
}

#cellFormattingMenu .menu-group-label,
body.sheet-workspace-active #cellFormattingMenu .menu-group-label{
  font-size: 0.94rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: inherit !important;
  opacity: 0.96 !important;
}

.sheet-modal-header{
  padding: 16px 20px !important;
}

.sheet-modal-body{
  padding: 18px 20px !important;
}

.sheet-doc-item{
  border-radius: 16px !important;
  padding: 14px 16px !important;
}

.sheet-docs-toolbar,
.audit-filter-bar,
.share-invite-form{
  gap: 12px !important;
}

.audit-window-head h1,
.legal-page-head h1,
.share-page-head h1,
.ui-window-hero h1{
  margin: 6px 0 8px !important;
}

.audit-window-head .muted,
.legal-page-head .muted,
.share-page-head .muted,
.ui-window-hero .muted{
  display: block !important;
  margin-top: 0 !important;
}

:root[data-theme="light"] .ui-window-hero,
:root[data-theme="light"] .ui-window-card,
:root[data-theme="light"] .audit-window-card,
:root[data-theme="light"] .audit-window-head,
:root[data-theme="light"] .legal-page,
:root[data-theme="light"] .legal-section-card,
:root[data-theme="light"] .share-page-card,
:root[data-theme="light"] .sheet-modal-panel,
:root[data-theme="light"] .menu-panel,
:root[data-theme="light"] .range-context-menu,
body.theme-light .ui-window-hero,
body.theme-light .ui-window-card,
body.theme-light .audit-window-card,
body.theme-light .audit-window-head,
body.theme-light .legal-page,
body.theme-light .legal-section-card,
body.theme-light .share-page-card,
body.theme-light .sheet-modal-panel,
body.theme-light .menu-panel,
body.theme-light .range-context-menu{
  background: linear-gradient(180deg, rgba(229, 237, 247, 0.98) 0%, rgba(214, 226, 239, 0.98) 100%) !important;
  border-color: rgba(116, 141, 170, 0.32) !important;
  color: #21344c !important;
}

:root[data-theme="light"] .ui-window-card,
:root[data-theme="light"] .audit-window-card,
:root[data-theme="light"] .legal-section-card,
:root[data-theme="light"] .share-page-card,
:root[data-theme="light"] .sheet-doc-item,
body.theme-light .ui-window-card,
body.theme-light .audit-window-card,
body.theme-light .legal-section-card,
body.theme-light .share-page-card,
body.theme-light .sheet-doc-item{
  background: linear-gradient(180deg, rgba(240, 245, 252, 0.98) 0%, rgba(229, 237, 247, 0.98) 100%) !important;
}

:root[data-theme="light"] .sheet-modal-header,
body.theme-light .sheet-modal-header{
  background: linear-gradient(180deg, rgba(235, 242, 251, 0.98) 0%, rgba(226, 236, 248, 0.98) 100%) !important;
  border-bottom-color: rgba(116, 141, 170, 0.24) !important;
}

:root[data-theme="light"] .menu-item:hover,
:root[data-theme="light"] .sheet-doc-item:hover,
body.theme-light .menu-item:hover,
body.theme-light .sheet-doc-item:hover{
  background: rgba(125, 166, 221, 0.14) !important;
}

:root[data-theme="dark"] .ui-window-hero,
:root[data-theme="dark"] .ui-window-card,
:root[data-theme="dark"] .audit-window-card,
:root[data-theme="dark"] .audit-window-head,
:root[data-theme="dark"] .legal-page,
:root[data-theme="dark"] .legal-section-card,
:root[data-theme="dark"] .share-page-card,
:root[data-theme="dark"] .sheet-modal-panel,
:root[data-theme="dark"] .menu-panel,
:root[data-theme="dark"] .range-context-menu,
body.theme-dark .ui-window-hero,
body.theme-dark .ui-window-card,
body.theme-dark .audit-window-card,
body.theme-dark .audit-window-head,
body.theme-dark .legal-page,
body.theme-dark .legal-section-card,
body.theme-dark .share-page-card,
body.theme-dark .sheet-modal-panel,
body.theme-dark .menu-panel,
body.theme-dark .range-context-menu{
  background: linear-gradient(180deg, rgba(38, 46, 58, 0.98) 0%, rgba(30, 37, 48, 0.98) 100%) !important;
  border-color: rgba(95, 114, 140, 0.34) !important;
  color: #eef4fd !important;
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.34) !important;
}

:root[data-theme="dark"] .ui-window-card,
:root[data-theme="dark"] .audit-window-card,
:root[data-theme="dark"] .legal-section-card,
:root[data-theme="dark"] .share-page-card,
:root[data-theme="dark"] .sheet-doc-item,
body.theme-dark .ui-window-card,
body.theme-dark .audit-window-card,
body.theme-dark .legal-section-card,
body.theme-dark .share-page-card,
body.theme-dark .sheet-doc-item{
  background: linear-gradient(180deg, rgba(46, 55, 69, 0.88) 0%, rgba(37, 45, 58, 0.88) 100%) !important;
}

:root[data-theme="dark"] .sheet-modal-header,
body.theme-dark .sheet-modal-header{
  background: linear-gradient(180deg, rgba(44, 53, 67, 0.98) 0%, rgba(35, 43, 56, 0.98) 100%) !important;
  border-bottom-color: rgba(95, 114, 140, 0.24) !important;
}

:root[data-theme="dark"] .menu-item:hover,
:root[data-theme="dark"] .sheet-doc-item:hover,
body.theme-dark .menu-item:hover,
body.theme-dark .sheet-doc-item:hover{
  background: rgba(88, 120, 173, 0.18) !important;
}

:root[data-theme="dark"] .menu-group-label,
:root[data-theme="dark"] .ui-window-shell .muted,
:root[data-theme="dark"] .share-page-card .muted,
body.theme-dark .menu-group-label,
body.theme-dark .ui-window-shell .muted,
body.theme-dark .share-page-card .muted{
  color: #b8c7da !important;
}

:root[data-theme="dark"] mark,
:root[data-theme="dark"] .cell-read-rich mark,
:root[data-theme="dark"] .cell-rich mark,
body.theme-dark mark,
body.theme-dark .cell-read-rich mark,
body.theme-dark .cell-rich mark{
  color: #111827 !important;
}

:root[data-theme="dark"] ::selection,
body.theme-dark ::selection{
  color: #111827 !important;
  background: #fff29a !important;
}

:root[data-theme="dark"] ::-moz-selection,
body.theme-dark ::-moz-selection{
  color: #111827 !important;
  background: #fff29a !important;
}

:root[data-theme="dark"] .gridtable td[data-col-id] *,
body.theme-dark .gridtable td[data-col-id] *{
  caret-color: currentColor;
}

:root[data-theme="dark"] .gridtable td[data-col-id] .cell-read-rich::selection,
:root[data-theme="dark"] .gridtable td[data-col-id] .cell-rich::selection,
:root[data-theme="dark"] .gridtable td[data-col-id] .cell::selection,
:root[data-theme="dark"] .gridtable td[data-col-id] .cell-read::selection,
body.theme-dark .gridtable td[data-col-id] .cell-read-rich::selection,
body.theme-dark .gridtable td[data-col-id] .cell-rich::selection,
body.theme-dark .gridtable td[data-col-id] .cell::selection,
body.theme-dark .gridtable td[data-col-id] .cell-read::selection{
  color: #111827 !important;
  background: #fff29a !important;
}

:root[data-theme="dark"] .gridtable td[data-col-id] .cell-read-rich::-moz-selection,
:root[data-theme="dark"] .gridtable td[data-col-id] .cell-rich::-moz-selection,
:root[data-theme="dark"] .gridtable td[data-col-id] .cell::-moz-selection,
:root[data-theme="dark"] .gridtable td[data-col-id] .cell-read::-moz-selection,
body.theme-dark .gridtable td[data-col-id] .cell-read-rich::-moz-selection,
body.theme-dark .gridtable td[data-col-id] .cell-rich::-moz-selection,
body.theme-dark .gridtable td[data-col-id] .cell::-moz-selection,
body.theme-dark .gridtable td[data-col-id] .cell-read::-moz-selection{
  color: #111827 !important;
  background: #fff29a !important;
}

:root[data-theme="dark"] .gridtable td[data-col-id] .cell-read-rich [style*="background-color"],
:root[data-theme="dark"] .gridtable td[data-col-id] .cell-rich [style*="background-color"],
body.theme-dark .gridtable td[data-col-id] .cell-read-rich [style*="background-color"],
body.theme-dark .gridtable td[data-col-id] .cell-rich [style*="background-color"]{
  color: #111827 !important;
}

body.sheet-workspace-active .sheet-favorite-star{
  color: #f4c542 !important;
}

.gridtable td.cf-due-soon > .cell,
.gridtable td.cf-due-soon > .cell-read,
.gridtable td.cf-due-soon > textarea.cell-text,
.gridtable td.cf-due-soon > .cell-rich,
.gridtable td.cf-due-soon > input.cell,
.gridtable td.cf-due-soon > select.cell,
.gridtable td.cf-due-urgent > .cell,
.gridtable td.cf-due-urgent > .cell-read,
.gridtable td.cf-due-urgent > textarea.cell-text,
.gridtable td.cf-due-urgent > .cell-rich,
.gridtable td.cf-due-urgent > input.cell,
.gridtable td.cf-due-urgent > select.cell,
.gridtable td.cf-status-complete > .cell,
.gridtable td.cf-status-complete > .cell-read,
.gridtable td.cf-status-complete > textarea.cell-text,
.gridtable td.cf-status-complete > .cell-rich,
.gridtable td.cf-status-complete > input.cell,
.gridtable td.cf-status-complete > select.cell,
.gridtable td.cf-needs-attention > .cell,
.gridtable td.cf-needs-attention > .cell-read,
.gridtable td.cf-needs-attention > textarea.cell-text,
.gridtable td.cf-needs-attention > .cell-rich,
.gridtable td.cf-needs-attention > input.cell,
.gridtable td.cf-needs-attention > select.cell,
.gridtable tr.row-complete td > .cell,
.gridtable tr.row-complete td > .cell-read,
.gridtable tr.row-complete td > textarea.cell-text,
.gridtable tr.row-complete td > .cell-rich,
.gridtable tr.row-complete td > input.cell,
.gridtable tr.row-complete td > select.cell{
  background: inherit !important;
  background-color: inherit !important;
  box-shadow: none !important;
  background-image: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
}

.gridtable td.cf-due-soon > .cell-read,
.gridtable td.cf-due-urgent > .cell-read,
.gridtable td.cf-status-complete > .cell-read,
.gridtable td.cf-needs-attention > .cell-read,
.gridtable tr.row-complete td > .cell-read{
  padding: 0 !important;
}

.gridtable td.cf-due-soon > .cell-read,
.gridtable td.cf-due-urgent > .cell-read,
.gridtable td.cf-status-complete > .cell-read,
.gridtable td.cf-needs-attention > .cell-read,
.gridtable tr.row-complete td > .cell-read{
  width: calc(100% + 16px) !important;
  margin: -6px -8px !important;
  min-height: calc(100% + 12px) !important;
  padding: 6px 8px !important;
  box-sizing: border-box !important;
}

.gridtable td.cf-due-soon,
.gridtable td.cf-due-urgent,
.gridtable td.cf-status-complete,
.gridtable td.cf-needs-attention,
.gridtable tr.row-complete td{
  overflow: hidden !important;
}

.gridtable td[data-col-id] > .cell,
.gridtable td[data-col-id] > .cell-read,
.gridtable td[data-col-id] > textarea.cell-text,
.gridtable td[data-col-id] > .cell-rich,
.gridtable td[data-col-id] > input.cell,
.gridtable td[data-col-id] > select.cell{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body.sheet-workspace-active .gridtable td[data-col-id]{
  vertical-align: middle !important;
}

body.sheet-workspace-active .gridtable td[data-col-id] > .cell,
body.sheet-workspace-active .gridtable td[data-col-id] > .cell-read,
body.sheet-workspace-active .gridtable td[data-col-id] > input.cell{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: stretch !important;
  height: 100% !important;
  min-height: 28px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}

body.sheet-workspace-active .gridtable td[data-col-id] > input.cell,
body.sheet-workspace-active .gridtable td[data-col-id] > select.cell{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}

body.sheet-workspace-active .gridtable td[data-col-id] > select.cell{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 28px !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  line-height: normal !important;
  text-indent: 0 !important;
  writing-mode: horizontal-tb !important;
  background-image: none !important;
}

body.sheet-workspace-active .gridtable td[data-col-id] > select.cell:focus,
body.sheet-workspace-active .gridtable td[data-col-id] > select.cell:active,
body.sheet-workspace-active .gridtable td[data-col-id] > select.cell:hover{
  background-image: none !important;
  box-shadow: none !important;
}

body.sheet-workspace-active .gridtable td[data-col-id] > select.cell::-ms-expand{
  display: none !important;
}

body.sheet-workspace-active .gridtable td[data-col-id] > input.cell.cell-date,
body.sheet-workspace-active .gridtable td[data-col-id] > input.cell.cell-date:focus,
body.sheet-workspace-active .gridtable td[data-col-id] > input.cell.cell-date:active{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  box-sizing: border-box !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

body.sheet-workspace-active .gridtable td[data-col-id] > input.cell.cell-date::-webkit-calendar-picker-indicator{
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.sheet-workspace-active .gridtable th.resizable-col-header[data-col-type="date"],
body.sheet-workspace-active .gridtable td[data-col-type="date"]{
  min-width: 150px !important;
}


body.sheet-workspace-active .gridtable td[data-col-id] > textarea.cell-text,
body.sheet-workspace-active .gridtable td[data-col-id] > .cell-rich,
body.sheet-workspace-active .gridtable td[data-col-id] > .cell-read-rich{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  align-self: stretch !important;
  height: 100% !important;
  min-height: 28px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}

body.sheet-workspace-active .gridtable td[data-col-id] > .cell-rich > *,
body.sheet-workspace-active .gridtable td[data-col-id] > .cell-read-rich > *{
  margin-top: auto !important;
  margin-bottom: auto !important;
}

:root[data-theme="dark"] .gridtable td[data-col-id] mark,
:root[data-theme="dark"] .gridtable td[data-col-id] span[style*="background-color"],
:root[data-theme="dark"] .gridtable td[data-col-id] [style*="background-color:"],
body.theme-dark .gridtable td[data-col-id] mark,
body.theme-dark .gridtable td[data-col-id] span[style*="background-color"],
body.theme-dark .gridtable td[data-col-id] [style*="background-color:"]{
  color: #111827 !important;
}

#rowActionsModal:not([hidden]),
body.row-actions-modal-open #rowActionsModal{
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  inset: 0 !important;
  padding: 20px !important;
  z-index: 20000 !important;
}

#rowActionsModal .sheet-modal-backdrop{
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(11, 16, 25, 0.42) !important;
}

#rowActionsModal .row-actions-modal-panel{
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  width: min(420px, calc(100vw - 24px)) !important;
  max-width: min(420px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 24px) !important;
  overflow: auto !important;
}

.app-footer,
:root[data-theme="light"] .app-footer,
body.theme-light .app-footer,
:root[data-theme="dark"] .app-footer,
body.theme-dark .app-footer{
  margin: 8px 0 0 !important;
  padding: 0 18px 10px !important;
}

.app-footer-inner,
:root[data-theme="light"] .app-footer-inner,
body.theme-light .app-footer-inner,
:root[data-theme="dark"] .app-footer-inner,
body.theme-dark .app-footer-inner{
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 7px 16px 9px !important;
}

footer.app-footer > .container.app-footer-inner{
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 7px 16px 9px !important;
}

.app-footer-copy{
  font-size: 0.82rem !important;
  color: rgba(150, 164, 186, 0.92) !important;
}

.app-footer-links a{
  font-size: 0.82rem !important;
  color: rgba(150, 164, 186, 0.88) !important;
}

.legal-callout{
  margin: 0 0 16px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
}

.legal-callout h2{
  margin: 0 0 8px;
}

.legal-callout p{
  margin: 0;
}

.legal-callout-promise{
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.45);
}

.legal-callout-neutral{
  background: rgba(59, 130, 246, 0.10);
  border-color: rgba(96, 165, 250, 0.34);
}

.legal-x-list{
  list-style: none;
  padding-left: 0;
}

.legal-x-list li{
  margin: 0 0 8px;
}

.legal-x-list li::before{
  content: "X ";
  color: #ef4444;
  font-weight: 700;
}

.legal-compare-wrap{
  overflow-x: auto;
  margin: 12px 0 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.legal-compare-table{
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.legal-compare-table th,
.legal-compare-table td{
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.legal-compare-table th{
  background: rgba(255,255,255,0.06);
  font-weight: 700;
}

.legal-compare-table tbody tr:last-child td{
  border-bottom: none;
}

.trust-card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.trust-card{
  display: block;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  text-decoration: none;
  color: inherit;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}

.trust-card:hover{
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(27, 42, 66, 0.14);
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(84, 132, 255, 0.08);
}

.trust-card-icon{
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.trust-card h2{
  margin: 0 0 8px;
}

.trust-card p{
  margin: 0 0 12px;
}

.trust-card-link{
  font-weight: 700;
  color: #60a5fa;
}

:root[data-theme="light"] .trust-card,
body.theme-light .trust-card{
  background: rgba(255,255,255,0.48);
  border-color: rgba(95, 124, 157, 0.20);
}

:root[data-theme="light"] .trust-card:hover,
body.theme-light .trust-card:hover{
  background: rgba(255,255,255,0.68);
  border-color: rgba(82, 128, 194, 0.30);
  box-shadow: 0 12px 24px rgba(80, 108, 142, 0.12);
}

.app-footer-trust-link{
  font-weight: 700 !important;
}

:root[data-theme="light"] .app-footer-copy,
body.theme-light .app-footer-copy{
  color: rgba(62, 78, 102, 0.96) !important;
}

:root[data-theme="light"] .app-footer-links a,
body.theme-light .app-footer-links a{
  color: rgba(62, 78, 102, 0.92) !important;
}

:root[data-theme="light"] .topbar,
body.theme-light .topbar,
:root[data-theme="light"] .app-main,
body.theme-light .app-main{
  background: transparent !important;
}

:root[data-theme="light"] .topbar-shell,
body.theme-light .topbar-shell,
:root[data-theme="light"] .sheet-top,
body.theme-light .sheet-top{
  background: rgba(236, 244, 252, 0.42) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
  border-color: rgba(95, 124, 157, 0.22) !important;
  box-shadow: 0 10px 24px rgba(76, 104, 136, 0.12) !important;
}

body.sheet-workspace-active .gridtable thead th.row-index,
body.sheet-workspace-active .gridtable thead th.row-details-col,
body.sheet-workspace-active .gridtable thead th.row-merged-header{
  z-index: 40 !important;
}

body.sheet-workspace-active .gridtable tbody td.row-index,
body.sheet-workspace-active .gridtable tbody td.row-details{
  z-index: 16 !important;
}

.fmt-color-popover .color-menu-actions{
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}

.fmt-color-popover .color-menu-reset{
  border: 1px solid rgba(119, 144, 173, 0.34);
  background: rgba(226, 236, 247, 0.78);
  color: #28415f;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

:root[data-theme="dark"] .fmt-color-popover .color-menu-reset,
body.theme-dark .fmt-color-popover .color-menu-reset{
  background: rgba(48, 62, 84, 0.92);
  color: #e8eef8;
  border-color: rgba(101, 127, 160, 0.42);
}

#manageColumnsModal .manage-columns-help-card,
#manageColumnsModal .manage-column-card,
#manageColumnsModal .manage-column-conditional-card{
  border-radius: 18px !important;
}

:root[data-theme="light"] #manageColumnsModal .manage-columns-help-card,
:root[data-theme="light"] #manageColumnsModal .manage-column-card,
:root[data-theme="light"] #manageColumnsModal .manage-column-conditional-card,
body.theme-light #manageColumnsModal .manage-columns-help-card,
body.theme-light #manageColumnsModal .manage-column-card,
body.theme-light #manageColumnsModal .manage-column-conditional-card{
  background: linear-gradient(180deg, rgba(239, 245, 252, 0.98) 0%, rgba(228, 237, 248, 0.98) 100%) !important;
  border: 1px solid rgba(132, 159, 191, 0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55) !important;
}

:root[data-theme="light"] #manageColumnsModal button,
:root[data-theme="light"] #manageColumnsModal .btn,
body.theme-light #manageColumnsModal button,
body.theme-light #manageColumnsModal .btn{
  background: linear-gradient(180deg, rgba(220, 232, 246, 0.98) 0%, rgba(205, 220, 238, 0.98) 100%) !important;
  border-color: rgba(125, 157, 196, 0.58) !important;
  color: #23364d !important;
}

:root[data-theme="dark"] #manageColumnsModal .manage-columns-help-card,
:root[data-theme="dark"] #manageColumnsModal .manage-column-card,
:root[data-theme="dark"] #manageColumnsModal .manage-column-conditional-card,
body.theme-dark #manageColumnsModal .manage-columns-help-card,
body.theme-dark #manageColumnsModal .manage-column-card,
body.theme-dark #manageColumnsModal .manage-column-conditional-card{
  background: linear-gradient(180deg, rgba(50, 60, 75, 0.94) 0%, rgba(40, 49, 63, 0.94) 100%) !important;
  border: 1px solid rgba(102, 123, 152, 0.44) !important;
  box-shadow: inset 0 1px 0 rgba(236, 244, 255, 0.08) !important;
}

:root[data-theme="dark"] #manageColumnsModal button,
:root[data-theme="dark"] #manageColumnsModal .btn,
body.theme-dark #manageColumnsModal button,
body.theme-dark #manageColumnsModal .btn{
  background: linear-gradient(180deg, rgba(57, 76, 103, 0.92) 0%, rgba(42, 60, 85, 0.92) 100%) !important;
  border-color: rgba(106, 140, 187, 0.48) !important;
  color: #eef4fd !important;
}

/* Conditional formatting rule items and form */
#manageColumnsModal .manage-column-conditional-rules{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

#manageColumnsModal .manage-column-conditional-rule-item{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

:root[data-theme="light"] #manageColumnsModal .manage-column-conditional-rule-item,
body.theme-light #manageColumnsModal .manage-column-conditional-rule-item{
  background: rgba(100, 150, 200, 0.08) !important;
}

:root[data-theme="dark"] #manageColumnsModal .manage-column-conditional-rule-item,
body.theme-dark #manageColumnsModal .manage-column-conditional-rule-item{
  background: rgba(100, 150, 200, 0.12) !important;
}

#manageColumnsModal .cf-rule-values{
  flex: 1 !important;
  font-size: 0.9rem !important;
}

#manageColumnsModal .cf-rule-color{
  min-width: 60px !important;
  text-align: center !important;
}

#manageColumnsModal .cf-rule-delete-btn{
  padding: 4px 10px !important;
  font-size: 0.8rem !important;
  background: rgba(255, 100, 100, 0.2) !important;
  border-color: rgba(255, 100, 100, 0.4) !important;
  color: #c84444 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  min-height: auto !important;
}

:root[data-theme="dark"] #manageColumnsModal .cf-rule-delete-btn,
body.theme-dark #manageColumnsModal .cf-rule-delete-btn{
  background: rgba(255, 100, 100, 0.15) !important;
  border-color: rgba(255, 100, 100, 0.35) !important;
  color: #ff8888 !important;
}

#manageColumnsModal .manage-column-conditional-form-section{
  padding-top: 12px !important;
  border-top: 1px solid rgba(100, 150, 200, 0.2) !important;
}

#manageColumnsModal .manage-column-conditional-form-section h5{
  margin: 0 0 10px 0 !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  opacity: 0.8 !important;
}

#manageColumnsModal .manage-column-conditional-form{
  display: flex !important;
  gap: 8px !important;
}

#manageColumnsModal .manage-column-conditional-row{
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
}

#manageColumnsModal .manage-column-conditional-row input,
#manageColumnsModal .manage-column-conditional-row select{
  flex: 1 !important;
  min-height: 32px !important;
  border-radius: 10px !important;
}

body.sheet-workspace-active .sheet-workspace-shell{
  border-radius: 28px !important;
  overflow: hidden !important;
}

body.sheet-workspace-active .table-wrap{
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

@media (max-width: 980px){
  body.sheet-workspace-active .sheet-workspace-shell{
    margin: 0 10px 0 !important;
    padding: 5px 0 0 !important;
  }
}

@media (max-width: 1240px){
  body.sheet-workspace-active .sheet-top-row-primary{
    flex-wrap: wrap !important;
  }

  body.sheet-workspace-active .sheet-top-tools-right{
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 920px){
  body.sheet-workspace-active .sheet-top-tools-right{
    flex-wrap: wrap !important;
  }

  body.sheet-workspace-active .fmt-group-panel-unified{
    min-width: min(560px, calc(100vw - 24px)) !important;
  }
}

body.sheet-workspace-active .fmt-group-panel-unified{
  min-width: min(560px, calc(100vw - 24px)) !important;
}

.gridtable td.task-hierarchy-cell{
  position: relative;
}

.gridtable td.task-hierarchy-cell > .cell,
.gridtable td.task-hierarchy-cell > .cell-read,
.gridtable td.task-hierarchy-cell > .cell-rich,
.gridtable td.task-hierarchy-cell > textarea.cell-text{
  padding-left: calc(4px + (var(--task-indent-level, 0) * 18px) + 10px) !important;
}

.gridtable td.task-hierarchy-cell .task-tree-toggle{
  position: absolute;
  left: calc(8px + (var(--task-indent-level, 0) * 18px));
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(34, 197, 94, 0.6);
  background: rgba(74, 222, 128, 0.92);
  color: #1b4332;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.15s, border-color 0.15s;
}

.gridtable td.task-hierarchy-cell .task-tree-toggle:hover{
  background: rgba(34, 197, 94, 0.95);
  border-color: rgba(34, 197, 94, 0.8);
}

:root[data-theme="dark"] .gridtable td.task-hierarchy-cell .task-tree-toggle,
body.theme-dark .gridtable td.task-hierarchy-cell .task-tree-toggle{
  background: rgba(74, 222, 128, 0.85);
  border-color: rgba(74, 222, 128, 0.7);
  color: #0f3b1a;
}

:root[data-theme="dark"] .gridtable td.task-hierarchy-cell .task-tree-toggle:hover,
body.theme-dark .gridtable td.task-hierarchy-cell .task-tree-toggle:hover{
  background: rgba(34, 197, 94, 0.95);
  border-color: rgba(34, 197, 94, 0.8);
}

.app-footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.app-footer-copy{
  flex: 1 1 220px;
}

.app-footer-links{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:24px;
  flex: 1 1 auto;
  padding-right: 310px;
}

.assistant-launcher-shell{
  position: fixed;
  right: 16px;
  bottom: 14px;
  z-index: 1200;
}

.assistant-launcher-btn{
  min-width: 196px;
  min-height: 42px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid #d9921d;
  background:
    linear-gradient(180deg, rgba(255, 208, 112, 0.12) 0%, rgba(120, 68, 8, 0.18) 100%),
    linear-gradient(180deg, #6a4206 0%, #4c2d03 100%);
  color: #fff2cf;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(63, 34, 0, 0.35);
  box-shadow:
    0 0 0 1px rgba(255, 215, 120, 0.18) inset,
    0 0 18px rgba(230, 168, 53, 0.22),
    0 10px 22px rgba(14, 24, 40, 0.24);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, background 140ms ease;
}

.assistant-launcher-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(255, 225, 150, 0.22) inset,
    0 0 24px rgba(241, 181, 62, 0.34),
    0 14px 26px rgba(14, 24, 40, 0.28);
}

.assistant-launcher-btn:focus-visible{
  outline: 3px solid rgba(72, 132, 255, 0.45);
  outline-offset: 2px;
}

.app-footer-link-divider{
  opacity: 0.48;
  user-select: none;
}

:root[data-theme="light"] .assistant-launcher-btn,
body.theme-light .assistant-launcher-btn{
  border-color: #e0922d;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,243,220,0.96) 100%),
    linear-gradient(180deg, #fff8ec 0%, #ffeecf 100%);
  color: #8a4418;
  text-shadow: none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.65) inset,
    0 0 18px rgba(233, 182, 87, 0.18),
    0 10px 22px rgba(14, 24, 40, 0.16);
}

:root[data-theme="light"] .assistant-launcher-btn:hover,
body.theme-light .assistant-launcher-btn:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.8) inset,
    0 0 22px rgba(236, 186, 92, 0.24),
    0 14px 26px rgba(14, 24, 40, 0.18);
}

.ask-bot-panel{
  position: fixed;
  right: 16px;
  bottom: 64px;
  width: min(380px, calc(100vw - 20px));
  max-height: min(560px, calc(100vh - 120px));
  display: none;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(101, 127, 160, 0.28);
  background: linear-gradient(180deg, rgba(39, 50, 70, 0.98) 0%, rgba(27, 36, 52, 0.98) 100%);
  box-shadow: 0 24px 52px rgba(8, 12, 22, 0.38);
  z-index: 1800;
}

.ask-bot-panel.open{
  display: flex;
}

.ask-bot-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(118, 143, 176, 0.22);
  background: linear-gradient(180deg, rgba(48, 61, 84, 0.98) 0%, rgba(38, 49, 69, 0.98) 100%);
}

.ask-bot-close{
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 10px;
  border: 1px solid rgba(103, 131, 168, 0.3);
  background: rgba(22, 34, 56, 0.92);
  color: #eef4fd;
  cursor: pointer;
}

.ask-bot-log{
  flex: 1 1 auto;
  min-height: 220px;
  max-height: 330px;
  overflow:auto;
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background: rgba(23, 31, 46, 0.96);
}

.ask-msg{
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 14px;
  line-height: 1.35;
  white-space: pre-wrap;
}

.ask-msg.user{
  align-self: flex-end;
  background: rgba(76, 128, 236, 0.2);
  border: 1px solid rgba(94, 144, 244, 0.28);
}

.ask-msg.bot{
  align-self: flex-start;
  background: rgba(96, 112, 138, 0.16);
  border: 1px solid rgba(120, 138, 164, 0.22);
}

.ask-bot-form{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: 12px;
  border-top:1px solid rgba(118, 143, 176, 0.22);
  background: rgba(31, 40, 57, 0.98);
}

.ask-bot-input{
  width:100%;
  min-height: 78px;
  resize: vertical;
  background: rgba(15, 22, 34, 0.94);
  border: 1px solid rgba(102, 127, 160, 0.26);
  color: #eef4fd;
}

.ask-bot-form-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ask-bot-hint{
  font-size: 0.82rem;
  opacity: 0.74;
}

.ask-bot-send{
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(93, 132, 228, 0.3);
  background: linear-gradient(180deg, #2e63d7 0%, #224fb2 100%);
  color: #fff;
  cursor: pointer;
}

:root[data-theme="light"] .ask-bot-panel,
body.theme-light .ask-bot-panel{
  border-color: rgba(99, 129, 168, 0.28);
  background: linear-gradient(180deg, rgba(207, 224, 243, 0.98) 0%, rgba(191, 212, 236, 0.98) 100%);
  box-shadow: 0 20px 44px rgba(25, 38, 58, 0.2);
}

:root[data-theme="light"] .ask-bot-header,
body.theme-light .ask-bot-header{
  border-bottom-color: rgba(108, 136, 173, 0.22);
  background: linear-gradient(180deg, rgba(218, 232, 248, 0.99) 0%, rgba(200, 219, 241, 0.99) 100%);
}

:root[data-theme="light"] .ask-bot-close,
body.theme-light .ask-bot-close{
  border-color: rgba(113, 142, 179, 0.28);
  background: rgba(236, 244, 252, 0.96);
  color: #22324a;
}

:root[data-theme="light"] .ask-bot-log,
body.theme-light .ask-bot-log{
  background: rgba(202, 219, 239, 0.95);
}

:root[data-theme="light"] .ask-msg.user,
body.theme-light .ask-msg.user{
  background: rgba(132, 168, 241, 0.22);
  border-color: rgba(111, 150, 237, 0.28);
}

:root[data-theme="light"] .ask-msg.bot,
body.theme-light .ask-msg.bot{
  background: rgba(214, 227, 243, 0.98);
  border-color: rgba(145, 169, 198, 0.34);
}

:root[data-theme="light"] .ask-bot-form,
body.theme-light .ask-bot-form{
  border-top-color: rgba(108, 136, 173, 0.22);
  background: rgba(211, 226, 244, 0.98);
}

:root[data-theme="light"] .ask-bot-input,
body.theme-light .ask-bot-input{
  background: rgba(232, 241, 250, 0.98);
  border-color: rgba(113, 142, 179, 0.28);
  color: #22324a;
}

@media (max-width: 720px){
  .assistant-launcher-shell{
    right: 10px;
    left: 10px;
    bottom: 10px;
  }

  .app-footer-inner{
    align-items:stretch;
  }

  .app-footer-links{
    width: 100%;
    justify-content:flex-start;
    padding-right: 0;
  }

  .assistant-launcher-btn{
    width: 100%;
    min-width: 0;
  }

  .ask-bot-panel{
    right: 10px;
    left: 10px;
    bottom: 56px;
    width: auto;
    max-height: min(72vh, 680px);
  }
}


/* SheetFlow navbar brand logos */
.topbar-brand{
  min-width:0;
}

.brand-logo{
  display:block;
  width:auto;
  max-width:min(44vw, 320px);
  height:34px;
  object-fit:contain;
}

.brand-logo-light{
  display:none;
}

:root[data-theme="light"] .brand-logo-dark,
body.theme-light .brand-logo-dark{
  display:none;
}

:root[data-theme="light"] .brand-logo-light,
body.theme-light .brand-logo-light{
  display:block;
}

@media (max-width: 760px){
  .brand-logo{
    height:28px;
    max-width:min(50vw, 240px);
  }
}
/* =========================
   SHEETFLOW SPLASH SCREEN
   ========================= */

body.splash-active {
  overflow: hidden;
}

.sheetflow-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms ease, visibility 420ms ease;
  background:
    radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.18), transparent 38%),
    radial-gradient(circle at 78% 18%, rgba(16, 185, 129, 0.14), transparent 34%),
    linear-gradient(160deg, #f7fbff 0%, #edf5ff 46%, #e6eef9 100%);
}

.sheetflow-splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sheetflow-splash-grid,
.sheetflow-splash-streams,
.sheetflow-splash-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sheetflow-splash-grid {
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(14, 79, 156, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 79, 156, 0.07) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black 42%, transparent 92%);
  -webkit-mask-image: radial-gradient(circle at center, black 42%, transparent 92%);
  animation: sheetflowGridDrift 18s linear infinite;
}

.sheetflow-splash-glow::before,
.sheetflow-splash-glow::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(28px);
  opacity: 0.55;
}

.sheetflow-splash-glow::before {
  width: 280px;
  height: 280px;
  top: 10%;
  left: 12%;
  background: rgba(59, 130, 246, 0.20);
}

.sheetflow-splash-glow::after {
  width: 240px;
  height: 240px;
  right: 10%;
  bottom: 12%;
  background: rgba(16, 185, 129, 0.18);
}

.sheetflow-splash-stream {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(37, 99, 235, 0),
    rgba(37, 99, 235, 0.88),
    rgba(16, 185, 129, 0.92),
    rgba(37, 99, 235, 0)
  );
  box-shadow: 0 0 18px rgba(37, 99, 235, 0.22);
  opacity: 0;
}

.sheetflow-splash-stream::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.95);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.45);
}

.sheetflow-splash-stream.stream-a {
  width: 38vw;
  min-width: 220px;
  max-width: 520px;
  top: 30%;
  left: -8%;
  animation: sheetflowStreamA 2.8s ease-in-out infinite;
}

.sheetflow-splash-stream.stream-b {
  width: 34vw;
  min-width: 200px;
  max-width: 420px;
  top: 60%;
  right: -10%;
  animation: sheetflowStreamB 3.2s ease-in-out infinite 0.35s;
}

.sheetflow-splash-stream.stream-c {
  width: 20vw;
  min-width: 140px;
  max-width: 260px;
  left: 50%;
  top: 18%;
  transform: rotate(90deg);
  animation: sheetflowStreamC 2.6s ease-in-out infinite 0.18s;
}

.sheetflow-splash-panel {
  position: relative;
  z-index: 2;
  width: min(92vw, 680px);
  padding: 34px 28px;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 26px 80px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  text-align: center;
}

.sheetflow-splash-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  margin-bottom: 18px;
  animation: sheetflowSplashRise 560ms ease-out both;
}

.sheetflow-splash-brand img {
  width: min(320px, 72vw);
  max-width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 30px rgba(37, 99, 235, 0.10));
}

.sheetflow-splash-kicker {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0e4f9c;
}

.sheetflow-splash-title {
  margin: 0;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1.05;
  color: #0f172a;
  letter-spacing: -0.03em;
}

.sheetflow-splash-copy {
  max-width: 460px;
  margin: 14px auto 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #334155;
}

.sheetflow-splash-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.92);
  border: 1px solid rgba(59, 130, 246, 0.16);
  color: #0f3d75;
  font-size: 0.92rem;
  font-weight: 600;
}

.sheetflow-splash-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #10b981);
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35);
  animation: sheetflowPulse 1.6s ease-out infinite;
}

.sheetflow-splash-progress {
  width: min(280px, 72vw);
  height: 6px;
  margin: 18px auto 0;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.22);
}

.sheetflow-splash-progress-bar {
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb 0%, #14b8a6 100%);
  animation: sheetflowProgress 1.9s ease-in-out infinite;
}

@keyframes sheetflowGridDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 34px, 0); }
}

@keyframes sheetflowStreamA {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  18% { opacity: 1; }
  58% { opacity: 1; }
  100% { transform: translate3d(64vw, 0, 0); opacity: 0; }
}

@keyframes sheetflowStreamB {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15% { opacity: 1; }
  62% { opacity: 1; }
  100% { transform: translate3d(-58vw, 0, 0); opacity: 0; }
}

@keyframes sheetflowStreamC {
  0% { transform: rotate(90deg) translate3d(0, 0, 0); opacity: 0; }
  20% { opacity: 1; }
  64% { opacity: 1; }
  100% { transform: rotate(90deg) translate3d(38vh, 0, 0); opacity: 0; }
}

@keyframes sheetflowSplashRise {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sheetflowPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.32); }
  70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

@keyframes sheetflowProgress {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
  .sheetflow-splash,
  .sheetflow-splash * {
    animation: none !important;
    transition: none !important;
  }
}

:root[data-theme="dark"] .sheetflow-splash {
  background:
    radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.18), transparent 38%),
    radial-gradient(circle at 80% 18%, rgba(16, 185, 129, 0.14), transparent 32%),
    linear-gradient(155deg, #06111f 0%, #071629 48%, #020617 100%);
}

:root[data-theme="dark"] .sheetflow-splash-grid {
  opacity: 0.26;
  background-image:
    linear-gradient(rgba(96, 165, 250, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, 0.12) 1px, transparent 1px);
}

:root[data-theme="dark"] .sheetflow-splash-panel {
  background: rgba(8, 15, 29, 0.78);
  border-color: rgba(96, 165, 250, 0.18);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .sheetflow-splash-kicker { color: #93c5fd; }
:root[data-theme="dark"] .sheetflow-splash-title { color: #f8fafc; }
:root[data-theme="dark"] .sheetflow-splash-copy { color: #cbd5e1; }

:root[data-theme="dark"] .sheetflow-splash-status {
  background: rgba(15, 23, 42, 0.86);
  border-color: rgba(96, 165, 250, 0.18);
  color: #dbeafe;
}

@media (max-width: 640px) {
  .sheetflow-splash-panel {
    padding: 26px 20px;
    border-radius: 24px;
  }

  .sheetflow-splash-copy {
    font-size: 0.95rem;
  }
}

.detail-section{display:grid; gap:14px;}
.detail-section h4{margin:0; font-size:1.05rem;}
.attach-toolbar, .comment-format-toolbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:4px;}
.attach-action-btn, .comment-format-btn{padding:10px 14px; min-height:0;}
.attach-item{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:8px; line-height:1.45; border-bottom:1px solid rgba(148,163,184,0.2); padding:4px 0;}
.attach-item:last-child{border-bottom:none;}
.attach-select-checkbox{margin:0; align-self:center;}
.attach-filename{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.attach-preview-btn, .attach-download-btn{border:1px solid rgba(96,165,250,0.35); background:rgba(255,255,255,0.95); cursor:pointer; font-size:0.8rem; padding:4px 8px; line-height:1.3; border-radius:8px; color:inherit;}
.attach-preview-btn:hover, .attach-download-btn:hover{background:rgba(59,130,246,0.15);}
.attach-drag-drop{border:2px dashed rgba(126, 163, 255, 0.45); border-radius:14px; padding:18px 16px; min-height:72px; display:flex; align-items:center; background:rgba(255,255,255,0.03); cursor:pointer; line-height:1.5;}

.attach-drag-drop.is-dragover{border-color:rgba(96,165,250,0.95); background:rgba(59,130,246,0.12);}
.attach-file-input{max-width:100%;}
.attach-file-preview{line-height:1.45; word-break:break-word;}

.row-details-debug-banner{font-size:12px;line-height:1.4;padding:6px 10px;border:1px dashed rgba(96,165,250,0.65);border-radius:10px;background:rgba(59,130,246,0.08);color:inherit;}
.row-details-modal-debug{font-size:12px;line-height:1.3;margin-top:4px;opacity:.8;}

/* ===== Attachment preview must sit above Row Details ===== */
#attachmentPreviewModal,
body.sheet-workspace-active #attachmentPreviewModal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 50000 !important;
  isolation: isolate !important;
}

#attachmentPreviewModal .sheet-modal-backdrop,
body.sheet-workspace-active #attachmentPreviewModal .sheet-modal-backdrop{
  z-index: 0 !important;
}

#attachmentPreviewModal .sheet-modal-panel,
#attachmentPreviewModal .sheet-modal-panel.sheet-modal-panel-attachment-preview,
body.sheet-workspace-active #attachmentPreviewModal .sheet-modal-panel,
body.sheet-workspace-active #attachmentPreviewModal .sheet-modal-panel.sheet-modal-panel-attachment-preview{
  position: relative !important;
  z-index: 1 !important;
}