/* Theme "Graphite Copper" (owner's pick 2026-10-03; gallery design\epoxy_app_themes.html, look 3).
   Loaded after Bootstrap 5.3.8 and app.css. Day = [data-bs-theme=light], Night = [data-bs-theme=dark],
   set on <html> by js/theme.js (saved choice, else the device setting). No inline styles (CSP style-src 'self'). */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../vendor/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
       url("../vendor/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../vendor/fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations"),
       url("../vendor/fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Day ---------- */
:root, [data-bs-theme=light] {
  --ep-page: #ECEBE8;
  --bs-body-font-family: "Archivo", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-bg: #FFFFFF;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: #1C1B1A;
  --bs-body-color-rgb: 28, 27, 26;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: #66615C;
  --bs-secondary-color-rgb: 102, 97, 92;
  --bs-secondary-bg: #E6E3DF;
  --bs-secondary-bg-rgb: 230, 227, 223;
  --bs-tertiary-color: rgba(28, 27, 26, .5);
  --bs-tertiary-color-rgb: 28, 27, 26;
  --bs-tertiary-bg: #F4F3F0;
  --bs-tertiary-bg-rgb: 244, 243, 240;
  --bs-border-color: #D6D2CC;
  --bs-border-color-translucent: rgba(28, 27, 26, .14);
  --bs-link-color: #94461F;
  --bs-link-color-rgb: 148, 70, 31;
  --bs-link-hover-color: #6E3316;
  --bs-link-hover-color-rgb: 110, 51, 22;
  --bs-primary: #9C4A22;
  --bs-primary-rgb: 156, 74, 34;
  --bs-primary-text-emphasis: #5E2C14;
  --bs-primary-bg-subtle: #F4E4DA;
  --bs-primary-border-subtle: #E3C0AA;
  --bs-success: #2E7D50;
  --bs-success-rgb: 46, 125, 80;
  --bs-danger: #B53B30;
  --bs-danger-rgb: 181, 59, 48;
  --bs-focus-ring-color: rgba(156, 74, 34, .25);
  --ep-input-focus: #C9875F;
}
[dir=rtl] {
  --bs-body-font-family: "Noto Sans Arabic", "Archivo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}

/* ---------- Night ---------- */
[data-bs-theme=dark] {
  --ep-page: #101113;
  --bs-body-bg: #18191C;
  --bs-body-bg-rgb: 24, 25, 28;
  --bs-body-color: #EEE8E1;
  --bs-body-color-rgb: 238, 232, 225;
  --bs-emphasis-color: #FFF;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: #A69E95;
  --bs-secondary-color-rgb: 166, 158, 149;
  --bs-secondary-bg: #26272B;
  --bs-secondary-bg-rgb: 38, 39, 43;
  --bs-tertiary-color: rgba(238, 232, 225, .5);
  --bs-tertiary-color-rgb: 238, 232, 225;
  --bs-tertiary-bg: #1F2024;
  --bs-tertiary-bg-rgb: 31, 32, 36;
  --bs-border-color: #303136;
  --bs-border-color-translucent: rgba(255, 255, 255, .12);
  --bs-link-color: #EDA06D;
  --bs-link-color-rgb: 237, 160, 109;
  --bs-link-hover-color: #F6C39A;
  --bs-link-hover-color-rgb: 246, 195, 154;
  --bs-primary-text-emphasis: #F2B184;
  --bs-primary-bg-subtle: #2E1C10;
  --bs-primary-border-subtle: #6B3A1C;
  --bs-focus-ring-color: rgba(227, 138, 80, .3);
  --ep-input-focus: #B8693A;
}
/* Night keeps the Day copper for surfaces with white text (text-bg-*, alerts); only accents get lighter. */
[data-bs-theme=dark] .btn-primary, [data-bs-theme=dark] .btn-outline-primary,
[data-bs-theme=dark] .nav-pills, [data-bs-theme=dark] .list-group, [data-bs-theme=dark] .dropdown-menu,
[data-bs-theme=dark] .pagination, [data-bs-theme=dark] .progress, [data-bs-theme=dark] .form-check-input {
  --bs-primary: #E38A50;
  --bs-primary-rgb: 227, 138, 80;
}

/* ---------- page and type ---------- */
body { background-color: var(--ep-page); }
h1, h2, h3, .h1, .h2, .h3 { font-stretch: 118%; font-weight: 700; letter-spacing: -.005em; }
h4, h5, h6, .h4, .h5, .h6 { font-weight: 600; }
[data-fragment=summary] .fs-4 { font-stretch: 118%; font-weight: 700; font-variant-numeric: tabular-nums; }
.card { box-shadow: 0 1px 2px rgba(28, 27, 26, .05); }
[data-bs-theme=dark] .card { box-shadow: none; }

/* ---------- top bar: brushed graphite with a copper edge ---------- */
.navbar.navbar-graphite {
  --bs-navbar-color: #B3ACA4;
  --bs-navbar-hover-color: #F2E9E1;
  --bs-navbar-active-color: #F0A26C;
  --bs-navbar-brand-color: #F2E9E1;
  --bs-navbar-brand-hover-color: #FFF;
  background-color: #1C1D20;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
                    linear-gradient(180deg, #2B2C30, #1C1D20);
  border-bottom: 1px solid rgba(224, 138, 82, .45);
}
:root[data-bs-theme=dark] .navbar.navbar-graphite {
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
                    linear-gradient(180deg, #1A1B1E, #0A0B0C);
  border-bottom-color: rgba(227, 138, 80, .35);
}
.navbar-graphite .navbar-brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-stretch: 118%; }
.navbar-graphite .navbar-brand::before {
  content: ""; inline-size: .85rem; block-size: .85rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: linear-gradient(135deg, #F6C39A, #B8612F 55%, #7A3517); box-shadow: inset -2px 2px 3px rgba(255, 255, 255, .45);
}
.navbar-graphite .nav-link.active { box-shadow: inset 0 -2px 0 #E08A52; }
.navbar-graphite .badge.rule-badge { background-color: rgba(224, 138, 82, .22); color: #F6D2B8; font-weight: 600; }

/* Day / Night switch: shows the mode it switches to */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; padding: .25rem .45rem; line-height: 1; }
.theme-toggle svg { inline-size: 1rem; block-size: 1rem; fill: currentColor; }
:root[data-bs-theme=dark] .theme-toggle .ico-moon,
:root:not([data-bs-theme=dark]) .theme-toggle .ico-sun { display: none; }

/* ---------- buttons ---------- */
.btn-primary {
  --bs-btn-color: #FFF; --bs-btn-bg: #9C4A22; --bs-btn-border-color: #8E3F1C;
  --bs-btn-hover-color: #FFF; --bs-btn-hover-bg: #86401D; --bs-btn-hover-border-color: #7A3517;
  --bs-btn-focus-shadow-rgb: 176, 101, 64;
  --bs-btn-active-color: #FFF; --bs-btn-active-bg: #7A3517; --bs-btn-active-border-color: #6E3014;
  --bs-btn-disabled-color: #FFF; --bs-btn-disabled-bg: #9C4A22; --bs-btn-disabled-border-color: #9C4A22;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
[data-bs-theme=dark] .btn-primary {
  --bs-btn-color: #1B0E05; --bs-btn-bg: #E38A50; --bs-btn-border-color: #D9773D;
  --bs-btn-hover-color: #1B0E05; --bs-btn-hover-bg: #ED9C66; --bs-btn-hover-border-color: #E38A50;
  --bs-btn-focus-shadow-rgb: 227, 138, 80;
  --bs-btn-active-color: #1B0E05; --bs-btn-active-bg: #D9773D; --bs-btn-active-border-color: #C9713D;
  --bs-btn-disabled-color: #1B0E05; --bs-btn-disabled-bg: #E38A50; --bs-btn-disabled-border-color: #E38A50;
}
.btn-outline-primary {
  --bs-btn-color: #9C4A22; --bs-btn-border-color: #9C4A22;
  --bs-btn-hover-color: #FFF; --bs-btn-hover-bg: #9C4A22; --bs-btn-hover-border-color: #9C4A22;
  --bs-btn-focus-shadow-rgb: 156, 74, 34;
  --bs-btn-active-color: #FFF; --bs-btn-active-bg: #86401D; --bs-btn-active-border-color: #86401D;
  --bs-btn-disabled-color: #9C4A22; --bs-btn-disabled-border-color: #9C4A22;
}
[data-bs-theme=dark] .btn-outline-primary {
  --bs-btn-color: #EDA06D; --bs-btn-border-color: #C9713D;
  --bs-btn-hover-color: #1B0E05; --bs-btn-hover-bg: #E38A50; --bs-btn-hover-border-color: #E38A50;
  --bs-btn-focus-shadow-rgb: 227, 138, 80;
  --bs-btn-active-color: #1B0E05; --bs-btn-active-bg: #D9773D; --bs-btn-active-border-color: #D9773D;
  --bs-btn-disabled-color: #EDA06D; --bs-btn-disabled-border-color: #C9713D;
}
.btn-outline-secondary {
  --bs-btn-color: #5A5550; --bs-btn-border-color: #B9B2AA;
  --bs-btn-hover-color: #FFF; --bs-btn-hover-bg: #5A5550; --bs-btn-hover-border-color: #5A5550;
  --bs-btn-active-color: #FFF; --bs-btn-active-bg: #4A4642; --bs-btn-active-border-color: #4A4642;
}
[data-bs-theme=dark] .btn-outline-secondary {
  --bs-btn-color: #C9C1B8; --bs-btn-border-color: #4A4B51;
  --bs-btn-hover-color: #FFF; --bs-btn-hover-bg: #3A3B41; --bs-btn-hover-border-color: #5A5B62;
  --bs-btn-active-color: #FFF; --bs-btn-active-bg: #44454B; --bs-btn-active-border-color: #5A5B62;
}

/* ---------- components that hard-code Bootstrap blue ---------- */
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.nav-tabs {
  --bs-nav-tabs-link-active-bg: var(--ep-page);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--ep-page);
}
.nav-tabs .nav-link.active { box-shadow: inset 0 2px 0 var(--bs-primary); }
.list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); }
.pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); }
[data-bs-theme=dark] .nav-pills { --bs-nav-pills-link-active-color: #1B0E05; }
[data-bs-theme=dark] .list-group { --bs-list-group-active-color: #1B0E05; }
[data-bs-theme=dark] .dropdown-menu { --bs-dropdown-link-active-color: #1B0E05; }
[data-bs-theme=dark] .pagination { --bs-pagination-active-color: #1B0E05; }
.form-control:focus, .form-select:focus { border-color: var(--ep-input-focus); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-check-input:focus { border-color: var(--ep-input-focus); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }

/* ---------- tables ---------- */
.table { --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .07); }
.table-light {
  --bs-table-color: var(--bs-body-color); --bs-table-bg: var(--bs-tertiary-bg); --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: var(--bs-secondary-bg); --bs-table-striped-color: var(--bs-body-color);
  --bs-table-active-bg: var(--bs-secondary-bg); --bs-table-active-color: var(--bs-body-color);
  --bs-table-hover-bg: var(--bs-secondary-bg); --bs-table-hover-color: var(--bs-body-color);
  color: var(--bs-table-color); border-color: var(--bs-table-border-color);
}
[data-bs-theme=dark] .table-secondary {
  --bs-table-color: var(--bs-body-color); --bs-table-bg: #2A2B30; --bs-table-border-color: #3A3B41;
  --bs-table-striped-bg: #303136; --bs-table-striped-color: var(--bs-body-color);
  --bs-table-active-bg: #34353A; --bs-table-active-color: var(--bs-body-color);
  --bs-table-hover-bg: #34353A; --bs-table-hover-color: var(--bs-body-color);
  color: var(--bs-table-color); border-color: var(--bs-table-border-color);
}
[data-bs-theme=dark] .table-danger {
  --bs-table-color: var(--bs-body-color); --bs-table-bg: #3A1F1C; --bs-table-border-color: #5A2E29;
  --bs-table-striped-bg: #43241F; --bs-table-striped-color: var(--bs-body-color);
  --bs-table-active-bg: #4A2823; --bs-table-active-color: var(--bs-body-color);
  --bs-table-hover-bg: #4A2823; --bs-table-hover-color: var(--bs-body-color);
  color: var(--bs-table-color); border-color: var(--bs-table-border-color);
}

/* ---------- badges in Night ---------- */
[data-bs-theme=dark] .text-bg-light { color: var(--bs-body-color) !important; background-color: var(--bs-secondary-bg) !important; }

@media print {
  body { background-color: #FFF; }
  .card { box-shadow: none; }
}

/* Night: the copper check is light, so its tick and dot turn dark (white on #E38A50 is only 2.6:1). */
[data-bs-theme=dark] .form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231B0E05' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231B0E05'/%3e%3c/svg%3e");
}