/* Members' Info Portal - web edition.
   A direct translation of STYLESHEET_TEMPLATE in memPort.py. Colours come from
   the theme (set as --c-* variables by app.js). 1rem = 10 design pixels, and
   app.js scales the root size to the screen just like ResponsiveManager did. */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 11.5px; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; }
body {
  color: var(--c-text); font-family: var(--font); font-size: 1.5rem; line-height: 1.35;
  background: linear-gradient(135deg, var(--c-bg1) 0%, var(--c-bg2) 55%, var(--c-bg3) 100%) fixed;
  background-color: var(--c-bg2);
}
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
::selection { background: var(--c-selection); color: var(--c-selection-text); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

/* ---------- layout primitives ---------- */
.row { display: flex; align-items: center; gap: 1rem; }
.col { display: flex; flex-direction: column; gap: 1rem; }
.stretch { flex: 1 1 auto; }
.wrap { flex-wrap: wrap; }
.center { text-align: center; }
.muted, [data-tone="muted"] { color: var(--c-muted); }
[data-tone="success"] { color: var(--c-tone-ok); font-weight: 600; }
[data-tone="error"] { color: var(--c-tone-err); font-weight: 600; }
[data-tone="warning"] { color: var(--c-tone-warn); font-weight: 600; }
.caption { font-size: 1.3rem; color: var(--c-muted); }
.section-title { font-size: 1.8rem; font-weight: 700; color: var(--c-strong); margin: 0; }
.separator { height: 1px; background: var(--c-border); border: 0; margin: 0; }
.status-line { min-height: 2rem; text-align: center; white-space: pre-line; }

/* ---------- app shell ---------- */
#app { height: 100%; display: flex; flex-direction: column; gap: 1.4rem; padding: 1.8rem; }
.header-bar {
  display: flex; align-items: center; gap: 1.2rem; padding: 1rem 1.6rem;
  background: var(--c-header-bg); border: 1px solid var(--c-header-border); border-radius: var(--r-lg);
}
.header-bar .app-icon { width: 4.6rem; height: 4.6rem; object-fit: contain; }
.header-titles { display: flex; flex-direction: column; min-width: 0; }
.app-title { font-size: 2.2rem; font-weight: 700; color: var(--c-header-title); line-height: 1.2; margin: 0; }
.app-subtitle { font-size: 1.3rem; color: var(--c-header-muted); }
.sync-label { font-size: 1.3rem; white-space: nowrap; }
.header-bar [data-tone="muted"] { color: var(--c-header-muted); }
.header-bar [data-tone="success"] { color: var(--c-header-ok); }
.header-bar [data-tone="warning"] { color: var(--c-header-warn); }
.header-bar [data-tone="error"] { color: var(--c-header-err); }
.user-badge {
  background: var(--c-badge-bg); color: var(--c-highlight); border: 1px solid var(--c-badge-border);
  border-radius: 1.1rem; padding: 0.3rem 1rem; font-size: 1.3rem; font-weight: 600; white-space: nowrap;
}
.header-bar .btn-danger { background: var(--c-btn); }
.header-bar .btn-danger:hover { background: var(--c-danger); }

.loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; }
.loading .section-title { text-align: center; }
.busy-bar { width: 42rem; max-width: 80vw; height: 1rem; border-radius: 0.5rem; overflow: hidden;
  background: var(--c-field); border: 1px solid var(--c-border); position: relative; }
.busy-bar::after { content: ""; position: absolute; inset: 0; width: 35%;
  background: linear-gradient(to right, var(--c-selection), var(--c-highlight));
  border-radius: 0.4rem; animation: busy 1.2s ease-in-out infinite; }
@keyframes busy { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }

/* ---------- tabs ---------- */
.tabs { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
#app > * { min-width: 0; }
.tabs.main { flex: 1 1 auto; }
.tabbar { display: flex; flex: none; gap: 0.2rem; overflow-x: auto; scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.tab {
  background: transparent; border: none; border-bottom: 3px solid transparent; border-radius: 0;
  flex: none; min-width: 8rem; padding: 1rem 1.4rem; color: var(--c-muted); font: inherit; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.tab[aria-selected="true"] { color: var(--c-strong); border-bottom-color: var(--c-highlight); }
.tab:hover:not([aria-selected="true"]):not(:disabled) { color: var(--c-strong); border-bottom-color: var(--c-btn-border); }
.tab:disabled { color: var(--c-disabled-text); cursor: not-allowed; }
.tabpane {
  flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--c-border);
  background: var(--c-pane); border-radius: var(--r-lg); margin-top: -1px;
}
.tabs.inner .tabpane { overflow: visible; }
.page { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; min-height: 100%; }

/* ---------- text inputs ---------- */
input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="number"],
textarea, select, .date-edit {
  background-color: var(--c-field-edit); border: 1px solid var(--c-field-border);
  border-radius: var(--r-md); padding: 0.6rem 1rem; color: var(--c-field-text);
  font: inherit; font-size: 1.5rem; min-height: 3.6rem; min-width: 0;
}
textarea { resize: vertical; min-height: 8rem; line-height: 1.4; }
input:hover, textarea:hover, select:hover, .date-edit:hover { border-color: var(--c-hover-border); }
input:focus, textarea:focus, select:focus, .date-edit:focus {
  outline: none; border: 2px solid var(--c-focus); padding: 0.5rem 0.9rem; }
input[readonly], textarea[readonly] {
  background-color: var(--c-field); border-color: var(--c-ro-border); color: var(--c-ro-text); }
input[readonly]:hover, textarea[readonly]:hover { border-color: var(--c-field-border); }
select.locked { background-color: var(--c-field); border-color: var(--c-ro-border); color: var(--c-disabled-text); cursor: default; }
input:disabled, select:disabled, textarea:disabled, .date-edit:disabled {
  background-color: var(--c-field); border-color: var(--c-ro-border); color: var(--c-disabled-text); }
input::placeholder, textarea::placeholder { color: var(--c-disabled-text); opacity: 1; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 2.8rem; min-width: 7rem; cursor: pointer;
  background-image: var(--chevron); background-repeat: no-repeat;
  background-position: right 0.9rem center; background-size: 1rem 0.6rem;
}
select:focus { padding-right: 2.7rem; }
select option { background: var(--c-list-bg); color: var(--c-text); }
.search-input { padding: 1rem 1.4rem; font-size: 1.6rem; border-radius: var(--r-lg); }
.search-input:focus { padding: 0.9rem 1.3rem; }

/* ---------- buttons ---------- */
button { font: inherit; }
.btn {
  background: var(--c-btn); border: 1px solid var(--c-btn-border); border-radius: var(--r-md);
  padding: 0.9rem 1.8rem; color: var(--c-btn-text); font-weight: 600; cursor: pointer;
  white-space: nowrap; min-height: 3.6rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
}
.btn:hover { background: var(--c-btn-hover); border-color: var(--c-hover-border); }
.btn:active { background: var(--c-btn-pressed); }
.btn:disabled { background: var(--c-disabled-bg); color: var(--c-disabled-text); border-color: var(--c-ro-border); cursor: not-allowed; }
.btn-primary { background: linear-gradient(to bottom, var(--c-accent1), var(--c-accent2));
  border-color: var(--c-accent-border); color: var(--c-accent-text); }
.btn-primary:hover { background: linear-gradient(to bottom, var(--c-accent-h1), var(--c-accent-h2)); border-color: var(--c-accent-border); }
.btn-primary:active { background: var(--c-accent2); }
.btn-gold { background: linear-gradient(to bottom, var(--c-gold1), var(--c-gold2)); border-color: var(--c-gold2); color: var(--c-gold-text); }
.btn-gold:hover { background: var(--c-gold1); border-color: var(--c-gold2); }
.btn-success { background: linear-gradient(to bottom, var(--c-success1), var(--c-success2)); border-color: var(--c-success2); color: #fff; }
.btn-success:hover { background: var(--c-success1); border-color: var(--c-success2); }
.btn-danger { background: transparent; border-color: var(--c-danger); color: var(--c-danger-text); }
.btn-danger:hover { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.btn-secondary { background: transparent; border-color: var(--c-btn-border); color: var(--c-btn-text); }
.btn-secondary:hover { background: var(--c-btn-hover); }
.btn-primary:disabled, .btn-gold:disabled, .btn-success:disabled {
  background: var(--c-disabled-bg); color: var(--c-disabled-text); border-color: var(--c-ro-border); }

/* ---------- checkboxes & radios ---------- */
label.check { display: inline-flex; align-items: center; gap: 0.8rem; cursor: pointer; color: var(--c-text); }
label.check:hover { color: var(--c-strong); }
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer;
  width: 1.8rem; height: 1.8rem; border: 0.2rem solid var(--c-check-border); background: var(--c-field-edit);
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"] { border-radius: var(--r-check); }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--c-focus); }
input[type="radio"]:checked { border-color: var(--c-radio-dot);
  background: radial-gradient(circle, var(--c-radio-dot) 0 45%, var(--c-field-edit) 52% 100%); }
input[type="checkbox"]:checked { background: var(--c-check-bg) var(--tick) center / 85% no-repeat; border-color: var(--c-check-on-border); }
input[type="checkbox"]:disabled { border-color: var(--c-ro-border); background-color: var(--c-disabled-bg); }

/* ---------- cards (QGroupBox) ---------- */
fieldset.group {
  margin: 1.6rem 0 0; padding: 1.2rem 1.4rem 1.4rem; min-width: 0;
  border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); font-weight: 600;
}
fieldset.group > legend { padding: 0.2rem 0.8rem; margin-left: 0; color: var(--c-highlight); font-size: 1.4rem; font-weight: 600; }
fieldset.group * { font-weight: normal; }
fieldset.group .btn, fieldset.group .section-title, fieldset.group [data-tone]:not([data-tone="muted"]) { font-weight: 600; }

/* QFormLayout: right-aligned labels */
.form { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 1.2rem 1.2rem; align-items: center; }
.form > label, .form > .form-label { text-align: right; color: var(--c-text); }
.form > .full { grid-column: 1 / -1; }
.form .row > input, .form .row > select { min-width: 0; }
.form textarea { width: 100%; }

/* ---------- lists & tables ---------- */
.listbox {
  background: var(--c-list-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  color: var(--c-text); padding: 0.4rem; overflow: auto; outline: none; margin: 0; list-style: none;
}
.listbox:focus-visible { border-color: var(--c-focus); }
.listbox .item { padding: 0.8rem 1rem; border-radius: var(--r-sm); margin: 0.1rem 0.2rem; cursor: pointer; }
.listbox .item:hover { background: var(--c-item-hover); }
.listbox .item[aria-selected="true"] { background: var(--c-selection); color: var(--c-selection-text); }
.listbox .item.check-item { display: flex; align-items: center; gap: 0.8rem; cursor: default; }
.listbox .item.check-item label { display: flex; align-items: center; gap: 0.8rem; cursor: pointer; flex: 1; }
.empty-note { padding: 1rem; color: var(--c-muted); }

.table-wrap { overflow: auto; background: var(--c-list-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 0.4rem; }
table.grid { border-collapse: collapse; width: 100%; color: var(--c-text); }
table.grid th {
  background: var(--c-hs-bg); color: var(--c-hs-text); padding: 0.8rem; border: none;
  border-bottom: 2px solid var(--c-highlight); font-weight: 700; text-align: left; position: sticky; top: 0; z-index: 1;
}
table.grid td { padding: 0.8rem; border-bottom: 1px solid var(--c-border); vertical-align: top; }
table.grid td.nowrap, table.grid th.nowrap { white-space: nowrap; }
table.grid tbody tr:nth-child(even) td { background: var(--c-list-alt); }
table.grid tbody tr { cursor: default; }
table.grid tbody tr:hover td { background: var(--c-item-hover); }
table.grid tbody tr[aria-selected="true"] td { background: var(--c-selection); color: var(--c-selection-text); }

.progress { height: 1rem; border-radius: 0.5rem; background: var(--c-field); border: 1px solid var(--c-border); overflow: hidden; }
.progress > div { height: 100%; width: 0; border-radius: 0.4rem; transition: width 0.3s;
  background: linear-gradient(to right, var(--c-selection), var(--c-highlight)); }

/* ---------- scrollbars ---------- */
* { scrollbar-color: var(--c-scroll) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 1rem; height: 1rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-scroll); border-radius: 0.4rem; border: 0.2rem solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--c-hover-border); }

/* ---------- menus ---------- */
.menu-anchor { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 50; min-width: 30rem;
  background: var(--c-list-bg); color: var(--c-text); border: 1px solid var(--c-btn-border);
  padding: 0.6rem; border-radius: var(--r-sm); box-shadow: 0 0.8rem 2.4rem rgba(0,0,0,0.35);
}
.menu [role="menuitemradio"] {
  display: flex; gap: 0.8rem; width: 100%; text-align: left; background: none; border: none; color: inherit;
  padding: 0.8rem 2.6rem 0.8rem 1.4rem; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
}
.menu [role="menuitemradio"]:hover, .menu [role="menuitemradio"]:focus { background: var(--c-selection); color: var(--c-selection-text); outline: none; }
.menu .tick { width: 1.4rem; display: inline-block; }
.menu hr { height: 1px; background: var(--c-border); border: 0; margin: 0.6rem 0.8rem; }

/* ---------- dialogs (QMessageBox / QDialog) ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 2rem; background: rgba(0, 0, 0, 0.45); }
.dialog {
  background: linear-gradient(135deg, var(--c-bg1) 0%, var(--c-bg2) 55%, var(--c-bg3) 100%);
  background-color: var(--c-bg2); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: 0 1.6rem 4.8rem rgba(0,0,0,0.45);
  width: min(52rem, 100%); max-height: calc(100vh - 4rem); overflow: auto; padding: 2rem 2.2rem;
  display: flex; flex-direction: column; gap: 1.4rem;
}
.dialog.wide { width: min(80rem, 100%); }
.dialog h2 { margin: 0; font-size: 1.7rem; color: var(--c-strong); }
.msg-body { display: flex; gap: 1.4rem; align-items: flex-start; }
.msg-icon { font-size: 3.2rem; line-height: 1; flex: none; }
.msg-text { white-space: pre-line; padding-top: 0.4rem; overflow-wrap: anywhere; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; }
.preview-frame { width: 100%; height: min(60vh, 56rem); border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-1rem); } 40% { transform: translateX(1rem); }
  60% { transform: translateX(-0.6rem); } 80% { transform: translateX(0.6rem); } }
.shake { animation: shake 0.3s; }

/* ---------- date edit (QDateEdit with calendar popup) ---------- */
.date-edit { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-width: 17rem; cursor: pointer; text-align: left; }
.date-edit::after { content: "▾"; color: var(--c-muted); font-size: 1.2rem; }
.calendar {
  position: absolute; z-index: 60; background: var(--c-list-bg); color: var(--c-text);
  border: 1px solid var(--c-btn-border); border-radius: var(--r-md); padding: 0.8rem; width: 28rem;
  box-shadow: 0 0.8rem 2.4rem rgba(0,0,0,0.35);
}
.calendar .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.calendar .cal-head button { background: transparent; border: none; color: var(--c-text); font-weight: 600; cursor: pointer;
  padding: 0.4rem 0.8rem; border-radius: var(--r-sm); }
.calendar .cal-head button:hover { background: var(--c-item-hover); }
.calendar .cal-title { font-weight: 600; }
.calendar table { width: 100%; border-collapse: collapse; }
.calendar th { font-size: 1.2rem; color: var(--c-muted); font-weight: 600; padding: 0.3rem 0; }
.calendar td { text-align: center; padding: 0.1rem; }
.calendar td button { width: 3.4rem; height: 3.2rem; border: none; background: transparent; color: var(--c-text);
  border-radius: var(--r-sm); cursor: pointer; }
.calendar td button.other { color: var(--c-disabled-text); }
.calendar td button:hover { background: var(--c-item-hover); }
.calendar td button.today { outline: 1px solid var(--c-highlight); }
.calendar td button.selected, .calendar td button:focus { background: var(--c-selection); color: var(--c-selection-text); outline: none; }

/* ---------- Quick Look ---------- */
.quicklook { display: grid; grid-template-columns: minmax(28rem, 1fr) 3fr; gap: 0.5rem 2.5rem; padding: 1rem 2rem; min-height: 100%; }
.ql-left { display: flex; flex-direction: column; gap: 0.8rem; min-height: 0; }
.ql-left .listbox { flex: 1 1 auto; min-height: 24rem; max-height: calc(100vh - 32rem); }
.ql-right { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; }
.ql-right > fieldset.group { width: min(100%, 64rem); min-width: min(100%, 50rem); }
.ql-buttons { width: min(100%, 64rem); }
.ql-right textarea { max-height: 10rem; min-height: 7rem; }
.date-hint { min-width: 13rem; color: var(--c-tone-ok); font-weight: 600; white-space: nowrap; }
.inline-label { white-space: nowrap; }

/* ---------- Add New Member ---------- */
.add-page { padding: 2rem 2.8rem; gap: 1.4rem; }
.add-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; align-items: start; }
.add-cards fieldset.group { margin-top: 0.6rem; }
.add-cards input.short { width: 17rem; }

/* ---------- report ---------- */
.period-row { display: flex; gap: 1.5rem; align-items: flex-end; flex-wrap: wrap; }
.period-row .col { gap: 0.4rem; }
.recipient { width: 32rem; max-width: 100%; }

/* ---------- inbox ---------- */
.inbox-split { display: grid; grid-template-rows: minmax(16rem, 1fr) minmax(20rem, 1.3fr); gap: 0.6rem; min-height: 56rem; }
.inbox-view { width: 100%; height: 100%; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: #fff; }

/* ---------- splash & sign-in ---------- */
.screen-center { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.splash {
  width: 56rem; height: 40rem; max-width: 92vw; max-height: 70vw; border-radius: 2.6rem; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1D47B0 0%, #0F2768 55%, #08102A 100%); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; box-shadow: 0 2rem 6rem rgba(0,0,0,0.4);
}
.splash::before { content: ""; position: absolute; left: -20rem; right: -20rem; bottom: -14rem; height: 26rem;
  border-top: 3px solid rgba(246, 185, 74, 0.78); border-radius: 50%; }
.splash img { width: 13.2rem; height: 13.2rem; object-fit: contain; margin-bottom: 0.8rem; }
.splash .s-title { font-size: 3.2rem; font-weight: 700; }
.splash .s-sub { font-size: 1.6rem; color: #9DB0D6; margin-top: 0.2rem; }
.splash .s-bar { width: 34rem; max-width: 70%; height: 0.8rem; border-radius: 0.4rem; background: rgba(255,255,255,0.16);
  margin-top: 4.4rem; overflow: hidden; }
.splash .s-bar > div { height: 100%; width: 0; background: #F6B94A; border-radius: 0.4rem; transition: width 0.4s ease-out; }

.login-card {
  width: 44rem; max-width: 100%; padding: 3.6rem 4rem 3.2rem; display: flex; flex-direction: column; gap: 1.2rem;
  background: linear-gradient(135deg, var(--c-bg1) 0%, var(--c-bg2) 55%, var(--c-bg3) 100%); background-color: var(--c-bg2);
  border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: 0 1.6rem 4.8rem rgba(0,0,0,0.35);
}
.login-card .app-icon { width: 8.4rem; height: 8.4rem; object-fit: contain; align-self: center; }
.login-title { font-size: 2.4rem; font-weight: 700; color: var(--c-strong); text-align: center; margin: 0; }
.login-sub { font-size: 1.4rem; color: var(--c-muted); text-align: center; margin: 0 0 1rem; }
.login-card input { padding: 0.9rem 1.2rem; }
.login-card input:focus { padding: 0.8rem 1.1rem; }
.login-card .btn { min-height: 4.2rem; }
.login-card .error { min-height: 2rem; text-align: center; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  #app { padding: 1rem; gap: 1rem; height: auto; min-height: 100%; }
  .tabpane { overflow: visible; }
  .header-bar { flex-wrap: wrap; }
  .header-bar .spacer { display: none; }
  .quicklook, .add-cards { grid-template-columns: minmax(0, 1fr); padding-left: 1rem; padding-right: 1rem; }
  .page { padding: 1rem; }
  .ql-left .listbox { max-height: 30rem; }
  .ql-right > fieldset.group, .ql-buttons { min-width: 0; width: 100%; }
  .form { grid-template-columns: 1fr; gap: 0.4rem 0; }
  .form > label, .form > .form-label { text-align: left; margin-top: 0.6rem; }
  .form .row, .ql-buttons { flex-wrap: wrap; }
  .add-page { padding: 1.4rem; }
}

/* ======================= theme extras (the 'extra' CSS of each theme) ======================= */
[data-theme="Sanctuary"] .app-title, [data-theme="Sanctuary"] .login-title, [data-theme="Sanctuary"] .section-title {
  font-family: Georgia, "Times New Roman", serif; }
[data-theme="Sanctuary"] fieldset.group > legend { font-family: Georgia, "Times New Roman", serif; font-style: italic; }
[data-theme="Sanctuary"] .header-bar { border-bottom: 3px solid #C2933A; }

[data-theme="Office 2003"] .btn:not(.btn-primary):not(.btn-gold):not(.btn-success):not(.btn-danger):not(.btn-secondary) { background: linear-gradient(to bottom, #FFFFFF, #DCE6F4); }
[data-theme="Office 2003"] .btn:not(.btn-primary):not(.btn-gold):not(.btn-success):not(.btn-danger):not(.btn-secondary):hover { background: linear-gradient(to bottom, #FFF4CC, #FFD68A); border-color: #C28A2C; }
[data-theme="Office 2003"] .btn:not(.btn-primary):not(.btn-gold):not(.btn-success):not(.btn-danger):not(.btn-secondary):active { background: linear-gradient(to bottom, #FBC56B, #F6A33A); }
[data-theme="Office 2003"] .btn:not(.btn-primary):not(.btn-gold):not(.btn-success):not(.btn-danger):not(.btn-secondary):disabled { background: var(--c-disabled-bg); }
[data-theme="Office 2003"] .tab {
  background: linear-gradient(to bottom, #FFFFFF, #D7E4F6); border: 1px solid #91A7C4; border-bottom: none;
  border-radius: 4px 4px 0 0; color: #15253F; padding: 0.7rem 1.4rem; margin-right: 0.2rem; }
[data-theme="Office 2003"] .tab[aria-selected="true"] { background: #FAFCFF; border-top: 3px solid #F7B733; color: #0B1A33; }
[data-theme="Office 2003"] .tab:hover:not([aria-selected="true"]):not(:disabled) { border-top: 3px solid #FFD68A; color: #0B1A33; }
[data-theme="Office 2003"] table.grid th { background: linear-gradient(to bottom, #FFFFFF, #D9E5F5);
  border-right: 1px solid #9DB9E0; border-bottom: 1px solid #7F9DB9; }
[data-theme="Office 2003"] .header-bar .user-badge { background: rgba(255,255,255,0.18); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.5); }

[data-theme="Classic 98"] .btn {
  background: #C0C0C0; color: #000000; border-style: solid; border-width: 2px;
  border-color: #FFFFFF #404040 #404040 #FFFFFF; border-radius: 0; }
[data-theme="Classic 98"] .btn:hover { background: #C8C8C8; }
[data-theme="Classic 98"] .btn:active { background: #B8B8B8; border-color: #404040 #FFFFFF #FFFFFF #404040; }
[data-theme="Classic 98"] .btn-primary { font-weight: 700; }
[data-theme="Classic 98"] .btn-success { color: #006400; font-weight: 700; }
[data-theme="Classic 98"] .btn-danger, [data-theme="Classic 98"] .btn-danger:hover { color: #800000; }
[data-theme="Classic 98"] .btn:disabled { color: #808080; border-color: #FFFFFF #808080 #808080 #FFFFFF; }
[data-theme="Classic 98"] input[type="text"], [data-theme="Classic 98"] input[type="password"],
[data-theme="Classic 98"] textarea, [data-theme="Classic 98"] select, [data-theme="Classic 98"] .date-edit,
[data-theme="Classic 98"] .listbox, [data-theme="Classic 98"] .table-wrap {
  border-style: solid; border-width: 2px; border-color: #808080 #FFFFFF #FFFFFF #808080; }
[data-theme="Classic 98"] input:focus, [data-theme="Classic 98"] textarea:focus, [data-theme="Classic 98"] select:focus,
[data-theme="Classic 98"] .date-edit:focus { border-width: 2px; border-color: #404040 #DFDFDF #DFDFDF #404040; padding: 0.6rem 1rem; }
[data-theme="Classic 98"] fieldset.group { border: 2px groove #FFFFFF; }
[data-theme="Classic 98"] fieldset.group > legend { color: #000080; font-weight: 700; }
[data-theme="Classic 98"] .tabpane { border-style: solid; border-width: 2px; border-color: #FFFFFF #404040 #404040 #FFFFFF; }
[data-theme="Classic 98"] .tab {
  background: #C0C0C0; color: #000000; padding: 0.6rem 1.2rem; margin-right: 0.2rem;
  border-style: solid; border-width: 2px; border-bottom: none; border-color: #FFFFFF #404040 #C0C0C0 #FFFFFF; }
[data-theme="Classic 98"] .tab[aria-selected="true"] { font-weight: 700; color: #000000; margin-top: -2px; }
[data-theme="Classic 98"] .tab:hover:not([aria-selected="true"]) { color: #000080; }
[data-theme="Classic 98"] table.grid th { background: #C0C0C0; color: #000000; border-style: solid; border-width: 2px;
  border-color: #FFFFFF #404040 #404040 #FFFFFF; }
[data-theme="Classic 98"] .progress { border-style: solid; border-width: 2px; border-color: #808080 #FFFFFF #FFFFFF #808080; background: #FFFFFF; }
[data-theme="Classic 98"] .progress > div, [data-theme="Classic 98"] .busy-bar::after { background: #000080; }
[data-theme="Classic 98"] .header-bar { border: none; }
[data-theme="Classic 98"] .header-bar .user-badge { background: transparent; color: #FFFFFF; border: 1px solid #FFFFFF; border-radius: 0; }
[data-theme="Classic 98"] .header-bar .btn-danger { color: #800000; background: #C0C0C0; }
[data-theme="Classic 98"] ::-webkit-scrollbar { width: 16px; height: 16px; background: #DFDFDF; }
[data-theme="Classic 98"] ::-webkit-scrollbar-thumb { background: #C0C0C0; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; border-radius: 0; }