/* V2.8.8 — Emerald Heritage, the existing eighth account design.
   All selectors are limited to Saudi National Day. The business interface,
   other seven designs, authentication and printed reports retain their styles. */
@media screen {
body[data-overview-theme="saudi-national-day"][data-portal-page] {
  --ot-bg:#f5f4ed; --ot-panel:#fffef9; --ot-text:#153e32;
  --ot-muted:#627267; --ot-border:#e2dece; --ot-accent:#006447;
  --ot-secondary:#b78729; --ot-radius:7px; --ot-shadow:0 4px 20px #463d2110;
  --primary:#006447; --primary-ink:#005b3d; --on-primary:#fff;
  --pt-heading-bg:linear-gradient(90deg,#003e32f5 0%,#003e32df 42%,#043e3485 75%,#083e3477),url('/assets/saudi-national-v288/heritage-panorama.png') 65% 57%/cover;
  --pt-heading-ink:#fffdf3; --pt-heading-muted:#edf0df; --pt-heading-accent:#eed394;
}
body[data-overview-theme="saudi-national-day"][data-portal-page] .topbar {
  background:#fbfaf5; border-color:#e2dece;
}
body[data-overview-theme="saudi-national-day"][data-portal-page] .sidebar {
  background:#003e33;
  background:linear-gradient(90deg,#003e33f9,#003e33f7),url('/assets/overview-saudi-v286/najdi-pattern.svg') left top/120px 25px repeat;
  border-right:1px solid #ba9c5d66;
}
body[data-overview-theme="saudi-national-day"][data-portal-page] .sidebar .nav-link.active {
  background:#fffdf2; color:#004b37; border:1px solid #dbc58a;
  box-shadow:0 4px 17px #002c2428;
}
body[data-overview-theme="saudi-national-day"][data-portal-page] .sidebar .nav-link.active::before {background:#cfac60}
body[data-overview-theme="saudi-national-day"][data-portal-page] .reference-brand-note {
  min-height:260px; background:transparent; padding-bottom:22px;
}
body[data-overview-theme="saudi-national-day"][data-portal-page] .reference-brand-note .brand-mountains {
  background:linear-gradient(0deg,#003e33 0%,#003e3359 58%,#003e330a 78%,#003e33 100%),url('/assets/saudi-national-v288/heritage-panorama.png') 69% 60%/auto 115%;
  opacity:1;
}
body[data-overview-theme="saudi-national-day"][data-portal-page] .reference-brand-note small {color:#f0f0de}
body[data-overview-theme="saudi-national-day"][data-portal-page] .sidebar-bottom {background:#003a30dc}
body[data-overview-theme="saudi-national-day"][data-portal-page] .page-head {
  border-bottom:4px solid #c0a260; border-radius:7px;
}
/* Compact national banner keeps the authentic flag visible on every menu.
   Overview carries its larger flag in the hero and needs no duplicate banner. */
body[data-overview-theme="saudi-national-day"][data-portal-page="dashboard"] #portalThemeOccasion {display:none}
body[data-overview-theme="saudi-national-day"] .pt-occasion {
  min-height:75px; gap:21px; padding:5px 25px;
  background:linear-gradient(90deg,#004837f2,#003e33f5),url('/assets/overview-saudi-v286/najdi-pattern.svg') center/120px 25px;
  border-bottom:2px solid #c0a260;
}
body[data-overview-theme="saudi-national-day"] .pt-occasion-flag {
  display:block; width:77px; height:66px; flex:0 0 77px; object-fit:contain;
}
body[data-overview-theme="saudi-national-day"] .pt-occasion>strong {color:#f3dea6}
body[data-overview-theme="saudi-national-day"] .pt-occasion>[lang="ar"] {color:#f3dea6}
/* Scenic art and the national flag are separate assets. No lettering is baked
   into the landscape, and the flag is never clipped, mirrored or animated. */
.ot285[data-design="saudi-national-day"] .ot-national-hero {
  min-height:352px; padding:34px 35px 39px; background:#0b4438;
  align-items:center; flex-direction:row; gap:20px;
}
.ot285[data-design="saudi-national-day"] .ot-national-art {
  inset:0; width:100%; z-index:-1; opacity:1; mask-image:none;
  background:linear-gradient(90deg,#003b31d6 0%,#003b319c 24%,#003b3121 55%,#003b310d 76%,#003b3152 100%),url('/assets/saudi-national-v288/heritage-panorama.png') 64% 53%/cover no-repeat;
}
.ot285[data-design="saudi-national-day"] .ot-hero-copy {
  width:49%; max-width:49%; align-self:center; text-shadow:0 2px 12px #001f22a6;
}
.ot285[data-design="saudi-national-day"] .ot-eyebrow {
  margin-bottom:6px; color:#f5d88b; font-size:11px; letter-spacing:2.5px;
}
.ot285[data-design="saudi-national-day"] .ot-national-date {gap:17px; margin:1px 0 0}
.ot285[data-design="saudi-national-day"] .ot-national-date strong {font-size:76px; letter-spacing:-4px}
.ot285[data-design="saudi-national-day"] .ot-national-date span {
  color:#fffef4; font-size:15px; letter-spacing:4px; border-color:#d7b56e;
}
.ot285[data-design="saudi-national-day"] .ot-national-arabic {
  margin-top:0; width:max-content; max-width:100%; font-size:25px;
  line-height:1.65; color:#f3d690;
}
.ot285[data-design="saudi-national-day"] .ot-national-rule {
  display:block; width:102px; height:2px; background:#cda456; margin:14px 0 16px;
}
.ot285[data-design="saudi-national-day"] .ot-hero h1 {
  font-size:39px; line-height:1.05; letter-spacing:-1.25px; color:#fffef4;
}
.ot285[data-design="saudi-national-day"] .ot-greeting {
  max-width:100%; font-size:14px; color:#fffbe9; margin-top:7px!important;
}
.ot285[data-design="saudi-national-day"] .ot-national-flag {
  position:absolute; top:6px; right:28px; width:clamp(220px,28vw,345px);
  height:210px; object-fit:contain; object-position:right top; z-index:1;
  filter:drop-shadow(0 3px 7px #092a2666);
}
.ot285[data-design="saudi-national-day"] .ot-hero-actions {
  align-self:flex-end; align-items:flex-end; margin-left:auto; gap:8px; padding:0;
}
.ot285[data-design="saudi-national-day"] .ot-hero-actions .ot-btn-primary {
  background:#fffdf3; color:#004d38; border-color:#e6d9b7;
  min-width:156px; min-height:42px; box-shadow:0 5px 18px #002b2833;
}
.ot285[data-design="saudi-national-day"] .ot-design-shortcut {
  min-width:156px; min-height:37px; justify-content:center;
  background:#004d38ee; color:#fffdf1!important; border-color:#d7bd7888;
}
.ot285[data-design="saudi-national-day"] .ot-national-border {
  height:11px; border-top:1px solid #f0d9a188;
  background:#063f32 url('/assets/overview-saudi-v286/najdi-pattern.svg') center/80px 17px repeat-x;
}
.ot285[data-design="saudi-national-day"] .ot-kpi-grid {margin-top:17px}
.ot285[data-design="saudi-national-day"] .ot-kpi {
  background:#fffef9; border-color:#e2dece; border-bottom:2px solid #cba24e;
  box-shadow:0 4px 16px #463d2110;
}
.ot285[data-design="saudi-national-day"] .ot-kpi-icon {background:#edf4e9; color:#076a49; border-color:#d7e5d3}
.ot285[data-design="saudi-national-day"] .ot-kpi:nth-child(even) .ot-kpi-icon {background:#f5eddb; color:#98711e; border-color:#e6d8b8}
.ot285[data-design="saudi-national-day"] .ot-kpi-value {color:#07543e}
.ot285[data-design="saudi-national-day"] .ot-panel {background:#fffef9; border-color:#e2dece}
.ot285[data-design="saudi-national-day"] .ot-panel-head {border-color:#e8e3d5}
.ot285[data-design="saudi-national-day"] .ot-chart-area {fill:#0064470c}
.ot285[data-design="saudi-national-day"] .ot-status-legend li {border-color:#e8e3d5}
/* A real design miniature uses the same artwork and flag as the full hero. */
.ot-thumb[data-thumb="saudi-national-day"] {background:#f5f4ed}
.ot-thumb[data-thumb="saudi-national-day"] .ot-thumb-sidebar {background:#003e33}
.ot-thumb[data-thumb="saudi-national-day"] .ot-thumb-hero {
  isolation:isolate; background:linear-gradient(90deg,#003b31d9,transparent),url('/assets/saudi-national-v288/heritage-panorama.png') 66% 50%/cover;
  border-bottom:2px solid #c5a66a;
}
.ot-thumb[data-thumb="saudi-national-day"] .ot-thumb-hero::before {
  content:""; position:absolute; right:4px; top:1px; width:62px; height:52px;
  background:url('/assets/saudi-national-v288/saudi-flag.svg') right top/contain no-repeat; z-index:-1;
}
.ot-thumb[data-thumb="saudi-national-day"] .ot-thumb-hero::after {
  content:'23 SEPTEMBER'; left:13px; right:auto; bottom:6px; color:#f5dc9d;
  background:none; clip-path:none; font-size:7px; letter-spacing:1px; width:auto; height:auto;
}
@media(min-width:1101px) {
  .ot285[data-design="saudi-national-day"] .ot-grid {grid-template-columns:minmax(0,1.55fr) minmax(330px,1fr)}
  .ot285[data-design="saudi-national-day"] .ot-recent {grid-column:1; grid-row:2}
  .ot285[data-design="saudi-national-day"] .ot-payments {grid-column:2; grid-row:2}
  .ot285[data-design="saudi-national-day"] .ot-recent .ot-table-scroll {overflow:auto}
  .ot285[data-design="saudi-national-day"] .ot-recent-table {display:table; padding:0; width:100%; min-width:490px}
  .ot285[data-design="saudi-national-day"] .ot-recent-table thead {position:static; width:auto; height:auto; overflow:visible; clip-path:none}
  .ot285[data-design="saudi-national-day"] .ot-recent-table tbody {display:table-row-group}
  .ot285[data-design="saudi-national-day"] .ot-recent-table tr {display:table-row; padding:0}
  .ot285[data-design="saudi-national-day"] .ot-recent-table th {padding:12px 12px; white-space:normal}
  .ot285[data-design="saudi-national-day"] .ot-recent-table td {display:table-cell; padding:12px; vertical-align:middle; border-bottom:1px solid #e8e4d8}
  .ot285[data-design="saudi-national-day"] .ot-recent-table td:first-child {white-space:nowrap; font-size:10px}
  .ot285[data-design="saudi-national-day"] .ot-recent-table td:nth-child(2) strong {font-weight:500; min-width:100px}
  .ot285[data-design="saudi-national-day"] .ot-recent-table td:nth-child(4) {white-space:nowrap}
  .ot285[data-design="saudi-national-day"] .ot-recent-table tbody tr:last-child td {border-bottom:0}
  .ot285[data-design="saudi-national-day"] .ot-stage-list {padding:23px 18px 20px}
  .ot285[data-design="saudi-national-day"] .ot-stage-row {grid-template-columns:121px minmax(25px,1fr) 22px; gap:9px; font-size:11px}
}
@media(min-width:761px) and (max-width:1100px) {
  .ot285[data-design="saudi-national-day"] .ot-national-hero {padding-left:25px; padding-right:25px; min-height:358px}
  .ot285[data-design="saudi-national-day"] .ot-hero-copy {width:57%; max-width:57%}
  .ot285[data-design="saudi-national-day"] .ot-national-date strong {font-size:67px}
  .ot285[data-design="saudi-national-day"] .ot-national-date span {font-size:11px; letter-spacing:2px}
  .ot285[data-design="saudi-national-day"] .ot-national-arabic {font-size:21px}
  .ot285[data-design="saudi-national-day"] .ot-national-flag {right:15px; width:225px; height:197px}
}
@media(max-width:760px) {
  body[data-overview-theme="saudi-national-day"] .pt-occasion {gap:7px 13px; padding:7px 13px; justify-content:center; min-height:80px}
  body[data-overview-theme="saudi-national-day"] .pt-occasion-flag {width:61px; height:54px; flex-basis:61px}
  body[data-overview-theme="saudi-national-day"] .pt-occasion>strong {font-size:24px}
  body[data-overview-theme="saudi-national-day"] .pt-occasion>[lang="ar"] {font-size:14px; border-left:0; padding-left:0; flex-basis:100%; text-align:center}
  .ot285[data-design="saudi-national-day"] .ot-national-hero {
    display:grid; grid-template-columns:minmax(0,1fr) 124px; align-content:start;
    align-items:start; gap:13px 5px; min-height:358px; padding:25px 20px 29px;
  }
  .ot285[data-design="saudi-national-day"] .ot-national-art {
    background:linear-gradient(90deg,#003b31e3 0%,#003b31ab 47%,#003b314f 100%),url('/assets/saudi-national-v288/heritage-panorama.png') 62% center/cover no-repeat;
    opacity:1; mask-image:none;
  }
  .ot285[data-design="saudi-national-day"] .ot-hero-copy {grid-column:1/-1; grid-row:1; width:100%; max-width:100%; align-self:start}
  .ot285[data-design="saudi-national-day"] .ot-eyebrow {max-width:57%; font-size:8px; line-height:1.5; letter-spacing:1.5px; margin-bottom:9px}
  .ot285[data-design="saudi-national-day"] .ot-national-date {gap:10px; flex-wrap:wrap; max-width:57%; margin:0 0 8px}
  .ot285[data-design="saudi-national-day"] .ot-national-date strong {font-size:65px; letter-spacing:-3px}
  .ot285[data-design="saudi-national-day"] .ot-national-date span {font-size:9px; letter-spacing:1.8px; padding:7px 0}
  .ot285[data-design="saudi-national-day"] .ot-national-arabic {font-size:21px; margin-top:14px}
  .ot285[data-design="saudi-national-day"] .ot-national-rule {margin:10px 0 14px; width:72px}
  .ot285[data-design="saudi-national-day"] .ot-hero h1 {font-size:35px; letter-spacing:-1px}
  .ot285[data-design="saudi-national-day"] .ot-greeting {font-size:12px; max-width:100%}
  .ot285[data-design="saudi-national-day"] .ot-national-flag {
    position:relative; grid-column:2; grid-row:1; justify-self:end; align-self:start;
    top:auto; right:auto; width:124px; height:129px; margin-top:1px; object-position:right top;
  }
  .ot285[data-design="saudi-national-day"] .ot-hero-actions {
    grid-column:1/-1; grid-row:2; margin:0; align-self:auto; align-items:stretch;
    flex-direction:row; flex-wrap:wrap; gap:8px; padding:0;
  }
  .ot285[data-design="saudi-national-day"] .ot-hero-actions .ot-btn-primary,
  .ot285[data-design="saudi-national-day"] .ot-design-shortcut {min-width:0; min-height:44px; font-size:11px; padding:10px 12px}
}
@media(max-width:359px) {
  .ot285[data-design="saudi-national-day"] .ot-national-hero {grid-template-columns:minmax(0,1fr) 105px; padding-left:17px; padding-right:17px}
  .ot285[data-design="saudi-national-day"] .ot-national-flag {width:105px; height:125px}
  .ot285[data-design="saudi-national-day"] .ot-national-date {max-width:54%}
  .ot285[data-design="saudi-national-day"] .ot-national-date strong {font-size:57px}
  .ot285[data-design="saudi-national-day"] .ot-national-arabic {font-size:19px; margin-top:17px}
}
@media(max-height:790px) and (min-width:761px) {
  body[data-overview-theme="saudi-national-day"][data-portal-page] .reference-brand-note {min-height:170px}
}
}
@media print {
  .ot-national-flag,.ot-national-rule {display:none!important}
}