/* Royal Estate portal shell, 2026-08-23. Page-specific business UI stays intact. */
:root {
  --pp-nav-font: "Sora", "Inter", system-ui, sans-serif;
  --pp-radius: 8px;
  --pp-metal-edge: #56636a;
  --pp-metal-top: #3d484e;
  --pp-metal-mid: #252e33;
  --pp-metal-low: #12181c;
  --pp-metal-shine: rgba(242, 248, 249, .12);
  --pp-metal-surface:
    linear-gradient(110deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.028) 22%, rgba(255,255,255,.09) 42%, transparent 62%),
    linear-gradient(180deg, #3d484e 0%, #252e33 9%, #1b2327 54%, #11171b 100%);
  --pp-metal-shadow:
    inset 0 2px rgba(255,255,255,.13),
    inset 0 -2px rgba(0,0,0,.78),
    inset 1px 0 rgba(255,255,255,.035),
    inset -1px 0 rgba(0,0,0,.24),
    0 2px 2px rgba(0,0,0,.82),
    0 16px 35px rgba(0,0,0,.30);
  --pp-metal-inset:
    linear-gradient(112deg, rgba(255,255,255,.075), transparent 38%),
    linear-gradient(180deg, rgba(53,64,70,.78), rgba(18,25,29,.88));
}

* { letter-spacing: 0; }

body.portal-customer,
body.portal-login {
  --bg1: #101821;
  --bg2: #080d13;
  --panel: #1a2025;
  --panel2: #232b31;
  --inp: #0e1419;
  --glass: rgba(15, 21, 27, .94);
  --silver: #f4f6f4;
  --txt: #d8ddda;
  --mut: #aab4b1;
  --line: rgba(160, 176, 181, .22);
  --line2: rgba(160, 176, 181, .13);
  --gold: #c8a75e;
  --gold-b: #e2c681;
  --gold-d: #8f6928;
  --maxw: 1240px;
  --r-card: var(--pp-radius);
  --fs-body: clamp(16px, .16vw + 15.4px, 17.5px);
  color: var(--txt);
  font-family: "Inter", system-ui, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  background:
    linear-gradient(112deg, rgba(113,139,155,.12) 0%, transparent 24%, rgba(255,255,255,.025) 45%, transparent 68%, rgba(47,73,93,.12) 100%),
    linear-gradient(180deg, #142231 0%, #0a121b 48%, #0e1923 100%);
}

body.portal-customer::before,
body.portal-login::before,
body.portal-admin::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(116deg, transparent 0 27%, rgba(224,237,242,.025) 34%, rgba(224,237,242,.07) 42%, transparent 53%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 28%, rgba(0,0,0,.15) 100%);
  opacity: 1;
}

:root[data-theme="light"] body.portal-customer,
:root[data-theme="light"] body.portal-login {
  --bg1: #f2f4f1;
  --bg2: #e8ece7;
  --panel: #fff;
  --panel2: #f0f3ef;
  --inp: #fff;
  --glass: rgba(250, 252, 249, .95);
  --silver: #111914;
  --txt: #26322b;
  --mut: #4d5c53;
  --line: rgba(52, 72, 60, .22);
  --line2: rgba(52, 72, 60, .13);
  --gold: #8d681b;
  --gold-b: #bd9340;
  --gold-d: #6c4d11;
  color: var(--txt);
  background:
    linear-gradient(112deg, rgba(255,255,255,.74) 0%, transparent 28%, rgba(125,145,132,.08) 62%, transparent 86%),
    linear-gradient(180deg, #f7f9f6, #e8ece8);
}

:root[data-theme="light"] body.portal-customer::before,
:root[data-theme="light"] body.portal-login::before {
  background:
    linear-gradient(116deg, transparent 0 31%, rgba(255,255,255,.72) 39%, transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.30), transparent 34%, rgba(61,78,67,.045));
}

.portal-customer .customer-topbar {
  min-height: 72px;
  border-bottom-color: rgba(144, 160, 165, .48);
  background:
    linear-gradient(108deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.035) 20%, rgba(255,255,255,.09) 37%, transparent 54%),
    linear-gradient(180deg, #414c51 0%, #2b3439 9%, #1b2226 54%, #10161a 100%);
  box-shadow: inset 0 2px rgba(255,255,255,.14), inset 0 -2px rgba(0,0,0,.78), 0 10px 27px rgba(0,0,0,.31);
}

:root[data-theme="light"] .portal-customer .customer-topbar {
  border-bottom-color: #bcc6be;
  background:
    linear-gradient(108deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.18) 31%, transparent 59%),
    linear-gradient(180deg, #ffffff, #e5eae6);
  box-shadow: inset 0 2px rgba(255,255,255,.96), inset 0 -1px rgba(72,88,77,.18), 0 8px 24px rgba(34,48,39,.10);
}

.portal-customer .tbin {
  gap: 19px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.portal-customer .topbar .brand-img {
  width: 108px;
  height: 48px;
  object-fit: cover;
  object-position: center;
}

.portal-customer .pills {
  justify-content: center;
  gap: 5px;
  flex-wrap: nowrap;
  min-width: 0;
}

.portal-customer .pills a {
  gap: 8px;
  min-height: 42px;
  padding: 0 13px;
  border-radius: 7px;
  font-family: var(--pp-nav-font);
  font-size: 13.5px;
  font-weight: 600;
  text-transform: none;
  color: #b4bfbc;
}

.portal-customer .pills a svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.8;
}

.portal-customer .pills a:hover {
  border-color: #424c51;
  color: #f4f6f4;
  background: linear-gradient(180deg, #30373b, #1d2327);
  box-shadow: inset 0 1px rgba(255,255,255,.07), inset 0 -1px rgba(0,0,0,.6);
}

.portal-customer .pills a.on {
  border: 1px solid rgba(226,198,129,.58);
  color: #f2dda7;
  background:
    linear-gradient(180deg, rgba(229,202,137,.30), rgba(143,103,34,.18)),
    linear-gradient(180deg, #302b20, #1d1b17);
  box-shadow: inset 0 1px rgba(255,244,207,.20), inset 0 -2px #c8a75e, 0 5px 14px rgba(167,119,34,.2);
  text-shadow: 0 1px rgba(0,0,0,.72);
}

:root[data-theme="light"] .portal-customer .pills a { color: #526058; }
:root[data-theme="light"] .portal-customer .pills a:hover { color: #172019; background: #edf1ec; border-color: #ccd4cd; box-shadow: none; }
:root[data-theme="light"] .portal-customer .pills a.on {
  color: #513906;
  border-color: #d5bd83;
  background: linear-gradient(180deg, #fff7df, #ecd7a6);
  box-shadow: inset 0 -2px #a67c28, 0 5px 14px rgba(127,91,21,.13);
  text-shadow: none;
}

.portal-customer .topright,
.portal-customer .topright .who,
.portal-customer .topright .navbtn { font-size: 13.5px; }

.portal-customer .tgl,
.portal-admin .admin-theme-btn,
.portal-admin .admin-menu-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid #465055;
  border-radius: 7px;
  color: #d8ddda;
  background: linear-gradient(180deg, #30373b, #1b2024);
  box-shadow: inset 0 1px rgba(255,255,255,.09), inset 0 -1px rgba(0,0,0,.7), 0 2px 5px rgba(0,0,0,.28);
}

.portal-customer .tgl svg,
.portal-admin .admin-theme-btn svg,
.portal-admin .admin-menu-btn svg { width: 18px; height: 18px; }

.portal-customer .wrap { padding-top: 34px; }

.portal-customer .card,
.portal-customer .tablewrap,
.portal-customer .txlist,
.portal-login .lbox {
  border-color: #5a676d;
  border-radius: var(--pp-radius);
  background: var(--pp-metal-surface);
  outline: 1px solid rgba(0,0,0,.78);
  outline-offset: 1px;
  box-shadow: var(--pp-metal-shadow);
}

:root[data-theme="light"] .portal-customer .card,
:root[data-theme="light"] .portal-customer .tablewrap,
:root[data-theme="light"] .portal-customer .txlist,
:root[data-theme="light"] .portal-login .lbox {
  border-color: #cbd3cc;
  background:
    linear-gradient(110deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.28) 29%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f3f6f3 10%, #e9eeea 100%);
  outline: 0;
  box-shadow: inset 0 2px #fff, inset 0 -1px rgba(70,88,75,.14), 0 9px 28px rgba(31,45,36,.11);
}

.portal-customer tbody tr:nth-child(even) td,
.portal-customer .tx:nth-child(even) { background: rgba(129,154,165,.06); }
:root[data-theme="light"] .portal-customer tbody tr:nth-child(even) td,
:root[data-theme="light"] .portal-customer .tx:nth-child(even) { background: #f2f5f1; }

.portal-customer table,
.portal-customer input,
.portal-customer select,
.portal-customer button { font-size: 14.5px; }

.portal-customer input,
.portal-customer select {
  color: var(--silver);
  border: 1px solid #3b454a;
  border-radius: 7px;
  background: linear-gradient(180deg, #0e1317, #151b1f);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.62), 0 1px rgba(255,255,255,.035);
}

.portal-customer select { padding: 11px 34px 11px 12px; }

:root[data-theme="light"] .portal-customer input,
:root[data-theme="light"] .portal-customer select {
  color: #111914;
  border-color: #bec8c0;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(25,45,32,.07);
}

.portal-customer .narrow.reminder-schedule-card,
.portal-customer .narrow.discord-settings-card,
.portal-customer .reminder-visibility-grid { max-width: 920px; }

.reminder-schedule-card { overflow: visible !important; }
.schedule-current {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:
    linear-gradient(112deg, rgba(255,255,255,.07), transparent 35%),
    linear-gradient(180deg, #20292e, #12191d);
  box-shadow: inset 0 1px rgba(255,255,255,.07), inset 0 -1px rgba(0,0,0,.62);
}

:root[data-theme="light"] .schedule-current { background: #f3f6f2; }
.reminder-slot-form { margin-top: 19px; }
.reminder-entry-list { display: grid; gap: 8px; }
.reminder-entry-row {
  display: grid;
  grid-template-columns: 30px 106px minmax(150px, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(69,81,87,.42), rgba(22,29,33,.48));
  box-shadow: inset 0 1px rgba(255,255,255,.045), inset 0 -1px rgba(0,0,0,.42);
}
.reminder-entry-row:nth-child(even) { background: linear-gradient(180deg, rgba(82,97,104,.50), rgba(28,36,40,.54)); }
.reminder-entry-row.is-empty { border-style: dashed; background: transparent; }
.reminder-slot-index {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: var(--txt);
  font: 700 12px var(--pp-nav-font);
  background: var(--panel2);
}
.reminder-entry-row input,
.reminder-entry-row select { width: 100%; min-height: 40px; margin: 0; }
.reminder-entry-row .reminder-row-action {
  gap: 7px;
  min-height: 40px;
  white-space: nowrap;
}
.reminder-entry-row .reminder-row-action svg { width: 16px; height: 16px; }
.schedule-hint { margin: 9px 0 0; }
.schedule-actions { justify-content: flex-end; }

.discord-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 17px calc(clamp(20px,1.7vw,30px) * -1) calc(clamp(20px,1.7vw,30px) * -1);
  border-top: 1px solid var(--line);
}
.discord-channel { min-width: 0; padding: 20px; }
.discord-channel + .discord-channel { border-left: 1px solid var(--line); }
.discord-channel-head { display: flex; align-items: flex-start; gap: 11px; min-height: 56px; }
.discord-channel-head h3 { margin: 0 0 7px; color: var(--silver); font: 600 15px var(--pp-nav-font); }
.channel-icon,
.recipient-icon,
.delivery-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid #3c464a;
  border-radius: 7px;
  color: var(--gold-b);
  background: linear-gradient(180deg, #30383c, #1b2125);
  box-shadow: inset 0 1px rgba(255,255,255,.07), inset 0 -1px rgba(0,0,0,.58);
}
.channel-icon svg,
.recipient-icon svg,
.delivery-icon svg { width: 17px; height: 17px; }
.discord-channel > p { min-height: 62px; }
.discord-channel label { min-height: 30px; }
.discord-off-form { margin-top: 9px; }

.reminder-visibility-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.reminder-visibility-card { padding-bottom: 10px !important; }
.recipient-list,
.delivery-list { margin: 13px calc(clamp(20px,1.7vw,30px) * -1) -10px; }
.recipient-row,
.delivery-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px clamp(20px,1.7vw,30px);
  border-top: 1px solid var(--line2);
}
.recipient-row:nth-child(even),
.delivery-row:nth-child(even) { background: rgba(129,154,165,.055); }
.recipient-row strong,
.recipient-row small,
.delivery-row strong,
.delivery-row small { display: block; }
.recipient-row strong,
.delivery-row strong { overflow: hidden; color: var(--silver); text-overflow: ellipsis; white-space: nowrap; }
.recipient-row small,
.delivery-row small,
.delivery-row time { color: var(--mut); font-size: 12px; }
.delivery-row time { white-space: nowrap; }
.empty-copy { margin: 15px 0 4px; }

:root[data-theme="light"] .channel-icon,
:root[data-theme="light"] .recipient-icon,
:root[data-theme="light"] .delivery-icon {
  border-color: #c8d0ca;
  color: #765717;
  background: linear-gradient(180deg, #fff, #e9eee9);
}
:root[data-theme="light"] .recipient-row:nth-child(even),
:root[data-theme="light"] .delivery-row:nth-child(even) { background: #f2f5f1; }

/* Login keeps every language visible and makes password recovery prominent. */
.portal-login .login { padding: 28px; }
.portal-login .lbox { max-width: clamp(430px, 35vw, 590px); border-radius: var(--pp-radius); }
.portal-login .lbox .tag { color: var(--txt); font-size: 16px; }
.portal-login .lbox label { font: 650 12px var(--pp-nav-font); }
.portal-login .help { color: var(--txt); font-size: 14.5px; line-height: 1.72; }
.portal-login .help .lnk { font-weight: 700; }
.portal-login .langbar { gap: 7px; }
.portal-login .langbar a { min-height: 34px; padding: 9px 12px; font: 600 12px var(--pp-nav-font); }

/* Admin shell. Existing page forms and tables remain untouched inside main. */
body.portal-admin {
  min-width: 320px;
  color: #d9dfdc;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15.5px;
  background:
    linear-gradient(112deg, rgba(107,135,153,.12) 0%, transparent 25%, rgba(255,255,255,.02) 47%, transparent 69%, rgba(42,68,87,.12) 100%),
    linear-gradient(180deg, #142230, #09111a 58%, #0d1821);
}
.portal-admin .admin-shell { display: grid; grid-template-columns: 282px minmax(0,1fr); min-height: 100vh; }
.portal-admin .admin-rail {
  /* 🔴 2026-08-24: `sticky` + `100dvh` idi. `vh`/`dvh` YATAY KAYDIRMA CUBUGUNU
     da iceren alani olcer; ray gorunur alandan birkac piksel UZUN kalinca
     sticky `top:0`da sabitlenemiyor ve sayfa sonunda YUKARI ITILIYOR (sahip
     ekran goruntusuyle bildirdi: marka ustten kirpiliyordu).
     `fixed` + `top:0; bottom:0` -> yukseklik viewport'a KILITLI, birim YOK. */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 282px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px;
  overflow: hidden;
  overscroll-behavior: contain;
  color: #e8ece9;
  border-right: 1px solid #536068;
  background:
    linear-gradient(106deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.025) 20%, rgba(255,255,255,.07) 38%, transparent 58%),
    linear-gradient(180deg, #354046 0%, #20282d 8%, #11171b 54%, #080c0f 100%);
  box-shadow: inset 2px 0 rgba(255,255,255,.08), inset -2px 0 rgba(0,0,0,.86), 9px 0 29px rgba(0,0,0,.28);
}
.portal-admin .admin-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  min-height: 62px;
  padding: 0 8px 17px;
  color: #f1f3f0;
  text-decoration: none;
  border-bottom: 1px solid #343e43;
}
.portal-admin .admin-brand img { width: 88px; height: 42px; object-fit: cover; object-position: center; }
.portal-admin .admin-brand strong,
.portal-admin .admin-brand small { display: block; }
.portal-admin .admin-brand strong { font-family: "Playfair Display", serif; font-size: 16px; }
.portal-admin .admin-brand small { margin-top: 2px; color: #99a5a1; font-size: 10.5px; }
.portal-admin .admin-rail > nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.portal-admin .rail-group { margin-top: 18px; }
.portal-admin .rail-label {
  margin: 0 9px 8px;
  color: #929d99;
  font: 700 12px var(--pp-nav-font);
  text-transform: uppercase;
}
.portal-admin .rail-nav {
  display: grid;
  overflow: hidden;
  border: 1px solid #536068;
  border-radius: 7px;
  background:
    linear-gradient(110deg, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(180deg, #2c353a, #12181c);
  box-shadow: inset 0 2px rgba(255,255,255,.085), inset 0 -2px rgba(0,0,0,.68), 0 4px 12px rgba(0,0,0,.34);
}
.portal-admin .rail-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 45px;
  padding: 0 12px;
  color: #bec7c3;
  font: 600 14.5px var(--pp-nav-font);
  text-decoration: none;
  border-bottom: 1px solid rgba(151,163,157,.15);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.075));
  box-shadow: inset 0 1px rgba(255,255,255,.04), inset 0 -1px rgba(0,0,0,.34);
}
.portal-admin .rail-nav a:nth-child(even):not(.on) { background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(0,0,0,.035)); }
.portal-admin .rail-nav a:last-child { border-bottom: 0; }
.portal-admin .rail-nav a:hover { color: #fff; background: linear-gradient(90deg, #293136, #181e22); }
.portal-admin .rail-nav a.on {
  color: #fff;
  background:
    linear-gradient(110deg, rgba(255,255,255,.12), transparent 42%),
    linear-gradient(90deg, #48555c, #293238 74%);
  box-shadow: inset 3px 0 #e0c479, inset 0 2px rgba(255,255,255,.12), inset 0 -2px rgba(0,0,0,.66), 0 4px 10px rgba(0,0,0,.38);
}
.portal-admin .nav-icon { display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 auto; color: #8d9994; }
.portal-admin .nav-icon svg { width: 19px; height: 19px; stroke-width: 1.8; }
.portal-admin .rail-nav a.on .nav-icon { color: #dfc37d; }
.portal-admin .admin-profile {
  display: flex;
  align-items: flex-start;
  flex: 0 0 auto;
  gap: 10px;
  margin-top: auto;
  padding: 15px 7px 0;
  border-top: 1px solid #343e43;
}
.portal-admin .admin-avatar {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #ddc27c;
  font: 700 12px var(--pp-nav-font);
  background: #343d39;
}
.portal-admin .admin-profile-copy { min-width: 0; }
.portal-admin .admin-profile-copy > span {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: wrap;
  gap: 6px !important;
  margin: 0 !important;
  color: #c9d0cd !important;
  font-size: 12px !important;
}
.portal-admin .admin-profile-copy form { flex-basis: 100%; }
.portal-admin .admin-profile-copy button { min-height: 28px; color: #aab4b0 !important; }
/* 🔴 `grid-column: 2` SART: ray `position: fixed` oldugu icin GRID OGESI DEGIL;
   otomatik yerlesim bu blogu 1. sutuna (ray izine) koyar ve icerik gorunmez olur.
   24 Agu'da tam bu yasandi. */
.portal-admin .admin-workspace { grid-column: 2; min-width: 0; }
.portal-admin .admin-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 0 26px;
  border-bottom: 1px solid #59666c;
  background:
    linear-gradient(108deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.035) 20%, rgba(255,255,255,.09) 38%, transparent 56%),
    linear-gradient(180deg, rgba(64,75,81,.98) 0%, rgba(39,48,53,.98) 12%, rgba(16,22,26,.98) 100%);
  box-shadow: inset 0 2px rgba(255,255,255,.13), inset 0 -2px rgba(0,0,0,.76), 0 9px 25px rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
}
.portal-admin .admin-menu-btn { display: none; }
.portal-admin .admin-context span,
.portal-admin .admin-context strong { display: block; }
.portal-admin .admin-context span { color: #98a5a0; font-size: 10.5px; text-transform: uppercase; }
.portal-admin .admin-context strong { color: #f0f3f1; font: 600 14px var(--pp-nav-font); }
.portal-admin .admin-top-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.portal-admin .admin-top-actions .langform { margin: 0; }
.portal-admin .admin-top-actions .langsel {
  color: #f4f7f5;
  -webkit-text-fill-color: #f4f7f5;
  background-color: #12181c;
  color-scheme: dark;
}
.portal-admin .admin-top-actions .langsel option {
  color: #f4f7f5;
  background-color: #12181c;
}
.portal-admin .admin-main {
  width: min(1480px, calc(100% - 52px));
  max-width: none;
  margin: 0 auto;
  padding: 28px 0 86px;
}
.portal-admin .admin-main > h1 { margin-top: 0; font-size: clamp(29px,2.2vw,38px); }
.portal-admin .card,
.portal-admin .tablewrap,
.portal-admin .topup,
.portal-admin .form,
.portal-admin .permcard {
  border-color: #5a676d;
  border-radius: var(--pp-radius);
  background: var(--pp-metal-surface);
  outline: 1px solid rgba(0,0,0,.78);
  outline-offset: 1px;
  box-shadow: var(--pp-metal-shadow);
}
.portal-admin .cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.portal-admin .cards .card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  max-width: none;
  min-height: 96px;
  margin: 0;
}
.portal-admin .cards .card strong {
  color: #f3f6f4;
  font: 700 26px var(--pp-nav-font);
  font-variant-numeric: tabular-nums;
}
.portal-admin .tablewrap th {
  color: #d7dfdc;
  border-bottom-color: #536168;
  background:
    linear-gradient(108deg, rgba(255,255,255,.09), transparent 38%),
    linear-gradient(180deg, #354148, #192126);
  box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -1px rgba(0,0,0,.58);
}
.portal-admin table tbody tr:nth-child(even) td { background: rgba(151,173,181,.08); }
.portal-admin table tbody tr:hover td { background: rgba(113,145,161,.14); }
.portal-admin input,
.portal-admin select,
.portal-admin textarea {
  color: #f1f4f2;
  border-color: #49565d;
  background: linear-gradient(180deg, #0d1317, #171e22);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.68), 0 1px rgba(255,255,255,.04);
}
.portal-admin .chip {
  border-color: #48555b;
  background: linear-gradient(180deg, #303a3f, #1b2226);
  box-shadow: inset 0 1px rgba(255,255,255,.07), inset 0 -1px rgba(0,0,0,.55);
}
.portal-admin .admin-rail-scrim { display: none; }

:root[data-theme="light"] body.portal-admin {
  --panel: #ffffff;
  --panel2: #edf1ed;
  --line: #c4cdc6;
  --line2: #d2d9d3;
  --ink: #172019;
  --mut: #48574e;
  --mut2: #59675e;
  color: var(--ink);
  background:
    linear-gradient(112deg, rgba(255,255,255,.78), transparent 29%, rgba(101,124,108,.07) 62%, transparent 88%),
    linear-gradient(180deg, #f6f8f5, #e8ece8);
}
:root[data-theme="light"] body.portal-admin::before {
  background: linear-gradient(116deg, transparent 0 31%, rgba(255,255,255,.75) 40%, transparent 53%);
}
:root[data-theme="light"] .portal-admin .admin-rail {
  color: #26322b;
  border-right-color: #b9c3bb;
  background:
    linear-gradient(108deg, rgba(255,255,255,.96), rgba(255,255,255,.16) 35%, transparent 61%),
    linear-gradient(180deg, #f8faf8, #dce2dd);
  box-shadow: inset -1px 0 rgba(70,86,75,.18), 7px 0 24px rgba(39,53,44,.10);
}
:root[data-theme="light"] .portal-admin .admin-brand,
:root[data-theme="light"] .portal-admin .admin-brand strong { color: #172019; }
:root[data-theme="light"] .portal-admin .admin-brand,
:root[data-theme="light"] .portal-admin .admin-profile { border-color: #bdc7bf; }
:root[data-theme="light"] .portal-admin .admin-brand small,
:root[data-theme="light"] .portal-admin .rail-label,
:root[data-theme="light"] .portal-admin .admin-profile-copy > span { color: #526058 !important; }
:root[data-theme="light"] .portal-admin .rail-nav {
  border-color: #bbc5bd;
  background: linear-gradient(180deg, #ffffff, #dfe5e0);
  box-shadow: inset 0 2px #fff, inset 0 -1px rgba(73,89,78,.18), 0 4px 12px rgba(42,58,47,.09);
}
:root[data-theme="light"] .portal-admin .rail-nav a {
  color: #35443a;
  border-bottom-color: #cad2cb;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(224,230,225,.82));
}
:root[data-theme="light"] .portal-admin .rail-nav a:nth-child(even):not(.on) { background: linear-gradient(180deg, #edf1ed, #dfe5e0); }
:root[data-theme="light"] .portal-admin .rail-nav a:hover { color: #111914; background: linear-gradient(180deg, #fff, #e7ece8); }
:root[data-theme="light"] .portal-admin .rail-nav a.on {
  color: #332508;
  background: linear-gradient(180deg, #fff6dc, #e6cf98);
  box-shadow: inset 3px 0 #a77d28, inset 0 2px #fff, inset 0 -1px rgba(92,67,16,.22), 0 3px 9px rgba(82,61,20,.12);
}
:root[data-theme="light"] .portal-admin .admin-topbar {
  border-bottom-color: #b8c2ba;
  background:
    linear-gradient(108deg, rgba(255,255,255,.98), rgba(255,255,255,.18) 36%, transparent 61%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(226,232,227,.98));
  box-shadow: inset 0 2px #fff, inset 0 -1px rgba(62,79,67,.16), 0 7px 20px rgba(37,51,42,.09);
}
:root[data-theme="light"] .portal-admin .admin-context strong { color: #172019; }
:root[data-theme="light"] .portal-admin .admin-context span { color: #56655b; }
:root[data-theme="light"] .portal-admin .cards .card strong { color: #172019; }
:root[data-theme="light"] .portal-admin .card,
:root[data-theme="light"] .portal-admin .tablewrap,
:root[data-theme="light"] .portal-admin .topup,
:root[data-theme="light"] .portal-admin .form,
:root[data-theme="light"] .portal-admin .permcard {
  border-color: #bdc7bf;
  background:
    linear-gradient(110deg, rgba(255,255,255,.98), rgba(255,255,255,.25) 30%, transparent 56%),
    linear-gradient(180deg, #ffffff 0%, #f1f4f1 11%, #e5eae6 100%);
  outline: 0;
  box-shadow: inset 0 2px #fff, inset 0 -1px rgba(70,87,75,.15), 0 9px 28px rgba(31,45,36,.11);
}
:root[data-theme="light"] .portal-admin .tablewrap th {
  color: #334139;
  border-bottom-color: #bdc7bf;
  background: linear-gradient(180deg, #f7f9f7, #dce3dd);
  box-shadow: inset 0 1px #fff, inset 0 -1px rgba(62,78,67,.14);
}
:root[data-theme="light"] .portal-admin table tbody tr:nth-child(even) td { background: rgba(76,102,84,.055); }
:root[data-theme="light"] .portal-admin table tbody tr:hover td { background: rgba(76,112,87,.10); }
:root[data-theme="light"] .portal-admin input,
:root[data-theme="light"] .portal-admin select,
:root[data-theme="light"] .portal-admin textarea {
  color: #111914;
  border-color: #b9c4bb;
  background: #fff;
  box-shadow: inset 0 1px 3px rgba(32,49,37,.09);
}
:root[data-theme="light"] .portal-admin .admin-top-actions .langsel {
  color: #111914;
  -webkit-text-fill-color: #111914;
  background-color: #fff;
  color-scheme: light;
}
:root[data-theme="light"] .portal-admin .admin-top-actions .langsel option {
  color: #111914;
  background-color: #fff;
}
:root[data-theme="light"] .portal-admin .chip {
  border-color: #c4cdc6;
  background: linear-gradient(180deg, #fff, #e9eee9);
  box-shadow: inset 0 1px #fff, inset 0 -1px rgba(58,74,63,.12);
}

/* Shared dimensional surfaces: Box Detail's polished metal language across the portal. */
.portal-admin .permcard {
  max-width: 1000px;
  border-width: 1px;
}

.portal-admin .capbox,
.portal-admin .tb-res,
.portal-customer .schedule-current,
.portal-customer .reminder-entry-row:not(.is-empty) {
  border: 1px solid #46545a;
  border-radius: 7px;
  background: var(--pp-metal-inset);
  box-shadow: inset 0 1px rgba(255,255,255,.075), inset 0 -2px rgba(0,0,0,.58), 0 2px 5px rgba(0,0,0,.20);
}

.portal-admin .capbox:nth-child(even),
.portal-customer .reminder-entry-row:nth-child(even):not(.is-empty) {
  background:
    linear-gradient(112deg, rgba(255,255,255,.09), transparent 38%),
    linear-gradient(180deg, rgba(63,76,82,.82), rgba(23,31,35,.90));
}

.portal-admin .capbox:hover {
  border-color: #718087;
  background:
    linear-gradient(112deg, rgba(255,255,255,.11), transparent 42%),
    linear-gradient(180deg, rgba(67,80,86,.88), rgba(25,33,37,.94));
}

.portal-admin .tb-res {
  padding: 7px 10px;
}

.portal-admin .tb-res li {
  padding: 7px 5px;
  border-bottom-color: rgba(151,166,172,.18);
}

.portal-admin .tb-res li:nth-child(even) { background: rgba(151,173,181,.055); }

.portal-admin .warnbox,
.portal-admin .plw {
  border-color: #8c6e31;
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(255,227,151,.12), transparent 44%),
    linear-gradient(180deg, #473a1d 0%, #2b2414 14%, #17140d 100%);
  outline: 1px solid rgba(0,0,0,.68);
  outline-offset: 1px;
  box-shadow: inset 0 2px rgba(255,239,188,.11), inset 0 -2px rgba(0,0,0,.62), 0 9px 22px rgba(0,0,0,.23);
}

.portal-admin .cred,
.portal-admin .ok,
.portal-admin .err {
  border-radius: 8px;
  box-shadow: inset 0 1px rgba(255,255,255,.07), inset 0 -1px rgba(0,0,0,.42), 0 7px 18px rgba(0,0,0,.18);
}

.portal-admin .admin-main button:not(.box-action),
.portal-admin .admin-main .btn,
.portal-customer .wrap button,
.portal-login button {
  border: 1px solid rgba(174,190,197,.30);
  box-shadow: inset 0 2px rgba(255,255,255,.10), inset 0 -2px rgba(0,0,0,.52), 0 3px 8px rgba(0,0,0,.24);
}

.portal-admin .admin-main button.g,
.portal-admin .admin-main button.amber,
.portal-admin .admin-main button.b,
.portal-admin .admin-main button.danger {
  border-color: rgba(255,255,255,.20);
}

:root[data-theme="light"] .portal-admin .capbox,
:root[data-theme="light"] .portal-admin .tb-res,
:root[data-theme="light"] .portal-customer .schedule-current,
:root[data-theme="light"] .portal-customer .reminder-entry-row:not(.is-empty) {
  border-color: #c2ccc4;
  background: linear-gradient(180deg, #f8faf8, #e5ebe6);
  box-shadow: inset 0 1px #fff, inset 0 -1px rgba(68,85,73,.13), 0 2px 5px rgba(41,58,46,.08);
}

:root[data-theme="light"] .portal-admin .capbox:nth-child(even),
:root[data-theme="light"] .portal-customer .reminder-entry-row:nth-child(even):not(.is-empty) {
  background: linear-gradient(180deg, #f1f5f1, #e1e7e2);
}

:root[data-theme="light"] .portal-admin .warnbox,
:root[data-theme="light"] .portal-admin .plw {
  color: #4d390d;
  border-color: #d4bd7f;
  background: linear-gradient(180deg, #fff9e8, #f1e3bd);
  outline: 0;
  box-shadow: inset 0 1px #fff, inset 0 -1px rgba(101,75,17,.16), 0 7px 18px rgba(58,46,20,.10);
}

:root[data-theme="light"] .portal-admin .admin-main button:not(.box-action),
:root[data-theme="light"] .portal-admin .admin-main .btn,
:root[data-theme="light"] .portal-customer .wrap button,
:root[data-theme="light"] .portal-login button {
  border-color: rgba(65,82,70,.22);
  box-shadow: inset 0 1px rgba(255,255,255,.82), inset 0 -1px rgba(57,75,62,.15), 0 3px 8px rgba(38,54,43,.10);
}

/* Admin search is a real GET route into Box Monitor, not a decorative field. */
.portal-admin .admin-global-search {
  position: relative;
  width: min(620px, 48vw);
  margin: 0;
}
.portal-admin .admin-global-search input {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 15px 0 43px;
  border: 1px solid #48545a;
  border-radius: 7px;
  color: #eef2ef;
  font: 500 14px var(--pp-nav-font);
  background: linear-gradient(105deg, rgba(255,255,255,.06), transparent 40%), linear-gradient(180deg, #151c20, #090e11);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.74), inset 0 -1px rgba(255,255,255,.04), 0 1px rgba(255,255,255,.035);
}
.portal-admin .admin-global-search input::placeholder { color: #8f9a96; opacity: 1; }
.portal-admin .admin-search-icon { position: absolute; z-index: 1; top: 50%; left: 14px; display: grid; color: #9aa6a1; transform: translateY(-50%); pointer-events: none; }
.portal-admin .admin-search-icon svg { width: 18px; height: 18px; }
:root[data-theme="light"] .portal-admin .admin-global-search input { color: #172019; border-color: #b8c3ba; background: #fff; box-shadow: inset 0 1px 3px rgba(32,49,37,.10); }
:root[data-theme="light"] .portal-admin .admin-global-search input::placeholder,
:root[data-theme="light"] .portal-admin .admin-search-icon { color: #66746b; }

/* Box detail: the static design is now a real-data operational surface. */
.box-detail-view { width: 100%; }
.box-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 8px 0 28px; }
.box-heading-copy { min-width: 0; overflow-wrap: anywhere; }
.box-eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; color: #d8ba70; font: 700 12px var(--pp-nav-font); text-transform: uppercase; }
.box-eyebrow a { color: inherit; text-decoration: none; }
.box-eyebrow a:hover { color: #ffe4a2; }
.box-eyebrow span { color: #737f7b; }
.box-page-heading h1 { margin: 0; color: #f6f7f5; font: 700 40px/1.08 "Playfair Display", serif; }
.box-page-heading p:last-child { max-width: 720px; margin: 10px 0 0; color: #aeb8b4; font-size: 16px; }
.box-map-link { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 16px; flex: 0 0 auto; border: 1px solid #56636a; border-radius: 7px; color: #f2f4f2; font: 650 14px var(--pp-nav-font); text-decoration: none; background: linear-gradient(108deg, rgba(255,255,255,.11), transparent 40%), linear-gradient(180deg, #3b464b, #1a2125); box-shadow: inset 0 2px rgba(255,255,255,.10), inset 0 -2px rgba(0,0,0,.65), 0 5px 14px rgba(0,0,0,.26); }
.box-map-link:hover { color: #fff; border-color: #d7b767; }
.box-map-link svg { width: 18px; height: 18px; }

.box-summary-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid #5a676d; border-radius: 8px; background: linear-gradient(110deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.025) 22%, rgba(255,255,255,.09) 42%, transparent 62%), linear-gradient(180deg, #3d484e 0%, #252e33 9%, #1b2327 54%, #11171b 100%); outline: 1px solid rgba(0,0,0,.78); outline-offset: 1px; box-shadow: inset 0 2px rgba(255,255,255,.13), inset 0 -2px rgba(0,0,0,.78), 0 2px 2px rgba(0,0,0,.82), 0 16px 35px rgba(0,0,0,.30); }
.box-metric { min-width: 0; min-height: 150px; padding: 21px 24px; border-right: 1px solid rgba(145,158,164,.28); }
.box-metric:last-child { border-right: 0; }
.box-metric-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #b3bdb9; font-size: 14px; }
.box-metric-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid #526067; border-radius: 7px; color: #dce2df; background: linear-gradient(180deg, #39444a, #20272b); box-shadow: inset 0 1px rgba(255,255,255,.09), inset 0 -1px rgba(0,0,0,.64); }
.box-metric-icon svg { width: 18px; height: 18px; }
.box-metric-value { display: block; overflow-wrap: anywhere; margin-top: 14px; color: #f7f8f6; font: 700 30px/1.04 "Playfair Display", serif; font-variant-numeric: tabular-nums; }
.box-status-rented { color: #91dfb1; }
.box-status-overdue { color: #ffb188; }
.box-status-removed,
.box-status-archived { color: #f2a3a3; }
.box-metric-foot { display: block; overflow: hidden; margin-top: 10px; color: #aeb8b4; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.box-detail-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, .72fr); gap: 22px; margin-top: 22px; }
.box-detail-stack { display: grid; align-content: start; gap: 22px; min-width: 0; }
.box-panel { min-width: 0; overflow: hidden; border: 1px solid #56636a; border-radius: 8px; color: #e5e9e7; background: linear-gradient(110deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.025) 22%, rgba(255,255,255,.075) 42%, transparent 62%), linear-gradient(180deg, #39444a 0%, #252d32 10%, #192126 58%, #11171b 100%); outline: 1px solid rgba(0,0,0,.76); outline-offset: 1px; box-shadow: inset 0 2px rgba(255,255,255,.115), inset 0 -2px rgba(0,0,0,.72), 0 2px 2px rgba(0,0,0,.78), 0 14px 30px rgba(0,0,0,.27); }
.box-panel-head { display: flex; align-items: center; min-height: 63px; padding: 13px 20px; border-bottom: 1px solid rgba(150,163,169,.28); }
.box-panel-head h2 { margin: 0; color: #f4f6f4; font: 650 18px var(--pp-nav-font); }
.box-panel-head p { margin: 5px 0 0; color: #9da8a4; font-size: 12px; }
.box-table-wrap { width: 100%; overflow-x: auto; }
.box-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.box-table th,
.box-table td { padding: 13px 17px; border-bottom: 1px solid rgba(149,163,168,.18); text-align: left; vertical-align: middle; white-space: nowrap; }
.box-table th { color: #c2cbc7; background: rgba(12,17,20,.28); font: 650 12px var(--pp-nav-font); }
.box-table tbody tr:nth-child(even) td { background: rgba(148,170,178,.07); }
.box-table tbody tr:hover td { background: rgba(130,157,168,.13); }
.box-table tr:last-child td { border-bottom: 0; }
.box-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.box-facts td:first-child { width: 34%; color: #dbe0de; }
.box-facts td:last-child { color: #f2f4f2; font-weight: 550; }
.box-subtenant-names { display: block; margin-top: 4px; color: #9faaa6; font-size: 12px; font-weight: 400; white-space: normal; }

.box-action-list { display: grid; gap: 12px; padding: 20px; }
.box-action-list form { margin: 0; }
.box-action { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin: 0; padding: 0 15px; border: 1px solid #526067; border-radius: 7px; color: #f1f4f2; font: 650 14px var(--pp-nav-font); text-decoration: none; background: linear-gradient(106deg, rgba(255,255,255,.09), transparent 42%), linear-gradient(180deg, #364147, #192024); box-shadow: inset 0 2px rgba(255,255,255,.09), inset 0 -2px rgba(0,0,0,.67), 0 3px 8px rgba(0,0,0,.27); }
.box-action:hover { color: #fff; border-color: #d9bc72; }
.box-action svg { width: 18px; height: 18px; }
.box-action-primary { color: #211704; border-color: #e0c071; background: linear-gradient(110deg, rgba(255,255,255,.32), transparent 40%), linear-gradient(180deg, #e6ca82, #ad7e27); text-shadow: 0 1px rgba(255,255,255,.28); }
.box-action-primary:hover { color: #130d02; border-color: #f4d98f; }
.box-action-danger { color: #fff; border-color: #db6c74; background: linear-gradient(180deg, #c95b65, #84313a); }
.box-action.is-disabled { opacity: .42; cursor: not-allowed; }

.box-status-notice { display: flex; align-items: flex-start; gap: 12px; padding: 16px 17px; border: 1px solid #31546a; border-left: 4px solid #6eb6db; border-radius: 7px; color: #d7e4ea; background: linear-gradient(105deg, rgba(95,174,215,.16), rgba(20,47,63,.78)); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.18); }
.box-status-notice.is-warning { border-color: #755f31; border-left-color: #e1b65d; color: #f2dfb4; background: linear-gradient(105deg, rgba(218,167,62,.15), rgba(54,42,17,.78)); }
.box-status-notice > svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; }
.box-status-notice strong,
.box-status-notice span { display: block; }
.box-status-notice strong { color: #f2f6f4; font: 650 14px var(--pp-nav-font); }
.box-status-notice span { margin-top: 4px; color: #aebdc2; font-size: 12px; }
.box-financial-strip { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 22px 0; padding: 13px 16px; border: 1px solid #4b585e; border-radius: 7px; color: #c8d0cd; background: rgba(21,29,33,.72); }
.box-full-history { margin-top: 22px; }
.box-command-archive { margin-top: 22px; }
.box-command-archive > summary { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; min-height: 62px; padding: 13px 20px; cursor: pointer; list-style: none; }
.box-command-archive > summary::-webkit-details-marker { display: none; }
.box-command-archive > summary span { color: #f4f6f4; font: 650 17px var(--pp-nav-font); }
.box-command-archive > summary small { color: #9ba6a2; }
.box-command-archive[open] > summary { border-bottom: 1px solid rgba(150,163,169,.28); }
.box-command-archive[open] > summary svg { transform: rotate(180deg); }
.box-history-note { margin-top: 17px; }

:root[data-theme="light"] .box-page-heading h1,
:root[data-theme="light"] .box-panel-head h2,
:root[data-theme="light"] .box-command-archive > summary span,
:root[data-theme="light"] .box-metric-value { color: #172019; }
:root[data-theme="light"] .box-page-heading p:last-child,
:root[data-theme="light"] .box-metric-top,
:root[data-theme="light"] .box-metric-foot { color: #526158; }
:root[data-theme="light"] .box-summary-metrics,
:root[data-theme="light"] .box-panel { color: #26332b; border-color: #bdc7bf; background: linear-gradient(110deg, rgba(255,255,255,.98), rgba(255,255,255,.24) 32%, transparent 58%), linear-gradient(180deg, #fff, #eef2ee 13%, #e4e9e5); outline: 0; box-shadow: inset 0 2px #fff, inset 0 -1px rgba(70,87,75,.15), 0 9px 28px rgba(31,45,36,.11); }
:root[data-theme="light"] .box-metric { border-right-color: #c8d1ca; }
:root[data-theme="light"] .box-metric-icon { color: #34443a; border-color: #c3cdc5; background: linear-gradient(180deg, #fff, #e2e8e3); }
:root[data-theme="light"] .box-status-rented { color: #176438; }
:root[data-theme="light"] .box-status-overdue { color: #9a481e; }
:root[data-theme="light"] .box-status-removed,
:root[data-theme="light"] .box-status-archived { color: #9a3138; }
:root[data-theme="light"] .box-panel-head { border-color: #c6cfc8; }
:root[data-theme="light"] .box-panel-head p,
:root[data-theme="light"] .box-subtenant-names { color: #59685f; }
:root[data-theme="light"] .box-table th { color: #35443a; background: #e7ece8; }
:root[data-theme="light"] .box-table th,
:root[data-theme="light"] .box-table td { border-color: #d2d9d3; }
:root[data-theme="light"] .box-table tbody tr:nth-child(even) td { background: #f0f3f0; }
:root[data-theme="light"] .box-table tbody tr:hover td { background: #e7ede8; }
:root[data-theme="light"] .box-facts td:first-child,
:root[data-theme="light"] .box-facts td:last-child { color: #26332b; }
:root[data-theme="light"] .box-action { color: #26332b; border-color: #bdc8c0; background: linear-gradient(180deg, #fff, #dfe5e0); box-shadow: inset 0 1px #fff, 0 3px 8px rgba(38,54,43,.10); }
:root[data-theme="light"] .box-action-primary { color: #2e2107; border-color: #c5a75c; background: linear-gradient(180deg, #fff1c9, #d4b35f); }
:root[data-theme="light"] .box-action-danger { color: #fff; border-color: #b34c55; background: linear-gradient(180deg, #c85b65, #91333c); }
:root[data-theme="light"] .box-status-notice { color: #294b5c; border-color: #9cc4d7; background: #eaf5fa; }
:root[data-theme="light"] .box-status-notice.is-warning { color: #654a14; border-color: #dbc68e; background: #fff7df; }
:root[data-theme="light"] .box-status-notice strong { color: #172019; }
:root[data-theme="light"] .box-status-notice span { color: #50645a; }
:root[data-theme="light"] .box-financial-strip { color: #34433a; border-color: #c2ccc4; background: #eef2ee; }

@media (max-width: 1120px) {
  .portal-customer .pills { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .portal-customer .pills::-webkit-scrollbar { display: none; }
  .portal-customer .pills a span { display: none; }
  .portal-admin .admin-shell { grid-template-columns: 244px minmax(0,1fr); }
  /* Ray artik `fixed`: genislik grid izinden MIRAS ALINMAZ, ayrica verilir. */
  .portal-admin .admin-rail { width: 244px; }
  .box-summary-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .box-metric:nth-child(2) { border-right: 0; }
  .box-metric:nth-child(-n+2) { border-bottom: 1px solid rgba(145,158,164,.28); }
  .box-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .portal-customer .tbin { gap: 9px; }
  .portal-customer .topbar .brand-img { width: 84px; height: 39px; }
  .portal-customer .pills { order: 3; flex-basis: 100%; }
  .portal-customer .pills a span { display: inline; }
  .portal-customer .topright .who { display: none; }
  .discord-channel-grid,
  .reminder-visibility-grid { grid-template-columns: 1fr; }
  .discord-channel + .discord-channel { border-top: 1px solid var(--line); border-left: 0; }
  .discord-channel > p { min-height: 0; }
  .portal-admin .admin-shell { display: block; }
  .portal-admin .admin-rail {
    position: fixed;
    left: 0;
    width: min(282px, 86vw);
    transform: translateX(-103%);
    transition: transform .16s ease;
  }
  .portal-admin .admin-shell.is-menu-open .admin-rail { transform: translateX(0); }
  .portal-admin .admin-menu-btn { display: inline-grid; }
  .portal-admin .admin-shell.is-menu-open .admin-rail-scrim {
    display: block;
    position: fixed;
    z-index: 35;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(0,0,0,.55);
  }
  .portal-admin .admin-topbar { padding: 0 14px; }
  .portal-admin .admin-main { width: calc(100% - 28px); padding-top: 22px; }
  .portal-admin .cards { grid-template-columns: 1fr; }
  .portal-admin .admin-global-search { width: min(100%, 520px); }
  .box-page-heading { align-items: flex-start; flex-direction: column; }
  .box-map-link { align-self: stretch; }
}

@media (max-width: 560px) {
  body.portal-customer { font-size: 15px; }
  .portal-customer .wrap { width: calc(100% - 28px); }
  .portal-customer .topright { gap: 7px; }
  .portal-customer .topright .navbtn { font-size: 12px; }
  .portal-customer .langf select { max-width: 34vw; }
  .portal-admin .admin-topbar {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 60px;
    padding: 8px 10px;
  }
  .portal-admin .admin-menu-btn { width: 40px; height: 40px; }
  .portal-admin .admin-global-search { width: 100%; min-width: 0; }
  .portal-admin .admin-global-search input { height: 40px; font-size: 13px; }
  .portal-admin .admin-top-actions { min-width: 0; margin-left: 0; gap: 6px; }
  .portal-admin .admin-top-actions .langsel { width: 92px; max-width: 92px; }
  .portal-admin .admin-top-actions .langgo { display: none; }
  .box-page-heading { margin-top: 0; }
  .box-page-heading h1 { font-size: 31px; }
  .box-page-heading p:last-child { font-size: 14px; }
  .box-summary-metrics { grid-template-columns: 1fr; }
  .box-metric { min-height: 126px; border-right: 0; border-bottom: 1px solid rgba(145,158,164,.28); }
  .box-metric:last-child { border-bottom: 0; }
  .box-metric-value { font-size: 27px; }
  .box-detail-grid,
  .box-detail-stack { gap: 16px; }
  .box-panel-head { min-height: 56px; padding: 11px 15px; }
  .box-action-list { padding: 15px; }
  .box-table th,
  .box-table td { padding: 11px 13px; }
  .reminder-entry-row { grid-template-columns: 29px minmax(68px,.72fr) minmax(100px,1fr); }
  .reminder-entry-row .reminder-row-action { grid-column: 2 / -1; justify-self: end; }
  .recipient-row,
  .delivery-row { grid-template-columns: auto minmax(0,1fr); }
  .recipient-row > :last-child,
  .delivery-row > :last-child { grid-column: 2; justify-self: start; }
  .portal-login .login { padding: 14px; }
  .portal-login .lbox { padding: 28px 22px; }
  .portal-login .langbar a { font-size: 11.5px; padding: 8px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-admin .admin-rail { transition: none; }
}