/* CRJEA design system v2: Moroccan institutional identity.
   Green and red from the logo, gold from zellige work, cream paper, Cairo for text, Amiri for display. */
@font-face { font-family: 'Cairo'; font-weight: 400; font-display: swap; src: url('../FONTS/cairo-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cairo'; font-weight: 600; font-display: swap; src: url('../FONTS/cairo-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cairo'; font-weight: 700; font-display: swap; src: url('../FONTS/cairo-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cairo'; font-weight: 400; font-display: swap; src: url('../FONTS/cairo-arabic-400-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC; }
@font-face { font-family: 'Cairo'; font-weight: 600; font-display: swap; src: url('../FONTS/cairo-arabic-600-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC; }
@font-face { font-family: 'Cairo'; font-weight: 700; font-display: swap; src: url('../FONTS/cairo-arabic-700-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC; }
@font-face { font-family: 'Amiri'; font-weight: 400; font-display: swap; src: url('../FONTS/amiri-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122; }
@font-face { font-family: 'Amiri'; font-weight: 700; font-display: swap; src: url('../FONTS/amiri-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122; }
@font-face { font-family: 'Amiri'; font-weight: 400; font-display: swap; src: url('../FONTS/amiri-arabic-400-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC; }
@font-face { font-family: 'Amiri'; font-weight: 700; font-display: swap; src: url('../FONTS/amiri-arabic-700-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC; }

:root {
  --g9: #062f22; --g8: #0a4a33; --g7: #0f6b45; --g6: #178a5a; --g1: #e4f0e9; --g0: #f1f7f3;
  --red: #b32024; --red-d: #8f181c; --red-1: #fbe7e7;
  --gold: #b8893a; --gold-l: #d9bd84; --gold-1: #f7edd7; --gold-d: #8c6522;
  --blue: #2a46a5; --blue-1: #e5eaf8;
  --cream: #f7f2e7; --paper: #fffdf8; --ink: #1b2a23; --ink-2: #3c4a43; --muted: #66756d; --line: #e4dcc9; --line-2: #efe9da;
  --ok: #178a5a; --warn: #c27a10; --bad: #b32024;
  --shadow: 0 1px 2px rgba(31, 42, 35, .06), 0 6px 18px rgba(31, 42, 35, .06);
  --display: 'Amiri', 'Times New Roman', serif; --body: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--body) !important; color: var(--ink); background-color: var(--cream) !important; background-image: url('../IMAGES/zellige-light.png'); background-size: 560px; background-attachment: fixed; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1 { text-align: start; }
h1, h2, h3, h4, h5, h6 { font-family: var(--display); color: var(--g9); font-weight: 700; letter-spacing: 0; line-height: 1.25; }
a { color: var(--g7); } a:hover { color: var(--red); }
::selection { background: var(--gold-1); color: var(--g9); }
.cr-tricolor { height: 5px; background: linear-gradient(90deg, var(--red) 0 38%, var(--g7) 38% 76%, var(--gold) 76% 100%); }
html[dir=rtl] .cr-tricolor { transform: scaleX(-1); }

/* ---------- ornaments */
.cr-star { display: inline-block; width: 1em; height: 1em; background: url('../IMAGES/star-gold.svg') center/contain no-repeat; vertical-align: -0.12em; }
.cr-star.green { background-image: url('../IMAGES/star-green.svg'); } .cr-star.red { background-image: url('../IMAGES/star-red.svg'); }
.cr-divider { display: flex; align-items: center; gap: 14px; color: var(--gold); margin: 6px 0 18px; }
.cr-divider::before, .cr-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-l), transparent); }
.cr-zl { background-image: url('../IMAGES/zellige-white.png'); background-size: 300px; }
.cr-zl-g { background-image: url('../IMAGES/zellige-green.png'); background-size: 300px; }
.cr-eyebrow { font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-d); display: inline-flex; align-items: center; gap: 8px; }
html[dir=rtl] .cr-eyebrow { letter-spacing: 0; }

/* ---------- buttons, badges */
.cr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: 6px; border: 1px solid var(--g7); background: var(--g7); color: #fff !important; font: 600 14px/1.2 var(--body); text-decoration: none !important; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.cr-btn:hover { background: var(--g8); border-color: var(--g8); }
.cr-btn:active { transform: translateY(1px); }
.cr-btn.red { background: var(--red); border-color: var(--red); } .cr-btn.red:hover { background: var(--red-d); border-color: var(--red-d); }
.cr-btn.gold { background: var(--gold); border-color: var(--gold); } .cr-btn.gold:hover { background: var(--gold-d); border-color: var(--gold-d); }
.cr-btn.ghost { background: transparent; color: var(--g7) !important; } .cr-btn.ghost:hover { background: var(--g1); }
.cr-btn.light { background: #fff; color: var(--g8) !important; border-color: #fff; } .cr-btn.light:hover { background: var(--gold-1); border-color: var(--gold-1); }
.cr-btn.outline-light { background: transparent; border-color: rgba(255,255,255,.55); } .cr-btn.outline-light:hover { background: rgba(255,255,255,.12); }
.cr-btn.sm { padding: 6px 12px; font-size: 13px; } .cr-btn.lg { padding: 12px 24px; font-size: 15px; }
.cr-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font: 600 12px/1.7 var(--body); background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.cr-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cr-badge.ok { background: var(--g1); color: var(--g7); } .cr-badge.warn { background: var(--gold-1); color: var(--gold-d); } .cr-badge.bad { background: var(--red-1); color: var(--red); } .cr-badge.info { background: var(--blue-1); color: var(--blue); }

/* ---------- cards and layout atoms */
.cr-card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); position: relative; }
.cr-card.top { border-top: 3px solid var(--gold); }
.cr-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.cr-card__head h3, .cr-card__title { margin: 0; font-size: 20px; display: flex; align-items: center; gap: 10px; }
.cr-card__sub { color: var(--muted); font-size: 13px; margin: 2px 20px 0; }
.cr-card__body { padding: 16px 20px 20px; }
.cr-grid { display: grid; gap: 20px; } .cr-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cr-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cr-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cr-grid.s21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .cr-grid.s12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 992px) { .cr-grid.c3, .cr-grid.c4, .cr-grid.s21, .cr-grid.s12 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cr-grid.c2, .cr-grid.c3, .cr-grid.c4, .cr-grid.s21, .cr-grid.s12 { grid-template-columns: minmax(0, 1fr); } }
.cr-row { display: flex; align-items: center; gap: 12px; } .cr-row.wrap { flex-wrap: wrap; } .cr-row.between { justify-content: space-between; }
.cr-stack { display: flex; flex-direction: column; gap: 14px; }
.cr-muted { color: var(--muted); } .cr-small { font-size: 13px; }
.cr-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 6px 0 22px; }
.cr-pagehead h1 { font-size: 34px; margin: 4px 0 2px; }
.cr-pagehead p { color: var(--muted); margin: 0; max-width: 680px; }

.cr-kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; border-inline-start: 4px solid var(--g7); }
.cr-kpi.gold { border-inline-start-color: var(--gold); } .cr-kpi.red { border-inline-start-color: var(--red); } .cr-kpi.blue { border-inline-start-color: var(--blue); }
.cr-kpi .l { font-size: 12.5px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.cr-kpi .v { font: 700 36px/1.1 var(--display); color: var(--g9); } .cr-kpi .v small { font: 600 14px var(--body); color: var(--muted); margin-inline-start: 4px; }
.cr-kpi .d { font-size: 12.5px; color: var(--muted); }

/* ---------- tables, lists, forms */
.cr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cr-table th { text-align: start; font: 600 12px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 2px solid var(--line); white-space: nowrap; }
html[dir=rtl] .cr-table th { letter-spacing: 0; }
.cr-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.cr-table tr:hover td { background: var(--g0); }
.cr-table-wrap { overflow-x: auto; }
.cr-list { list-style: none; margin: 0; padding: 0; } .cr-list li { position: relative; padding-inline-start: 24px; margin: 8px 0; }
.cr-list li::before { content: ''; position: absolute; inset-inline-start: 0; top: .42em; width: 14px; height: 14px; background: url('../IMAGES/star-gold.svg') center/contain no-repeat; }
.cr-field { display: flex; flex-direction: column; gap: 6px; } .cr-field label { font: 600 13px var(--body); color: var(--ink-2); }
.cr-input, .form-control { font-family: var(--body); border: 1px solid var(--line) !important; border-radius: 6px !important; background: #fff; padding: 10px 12px; color: var(--ink); width: 100%; }
.cr-input:focus, .form-control:focus { outline: 0; border-color: var(--g7) !important; box-shadow: 0 0 0 3px rgba(15, 107, 69, .15) !important; }
.cr-progress { height: 8px; background: var(--line-2); border-radius: 99px; overflow: hidden; } .cr-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--g7), var(--g6)); border-radius: inherit; }
.cr-progress.gold > i { background: linear-gradient(90deg, var(--gold), var(--gold-l)); }
.cr-alert { padding: 12px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); display: flex; gap: 12px; align-items: flex-start; }
.cr-alert.high { background: var(--red-1); border-color: #efc2c3; } .cr-alert.mid { background: var(--gold-1); border-color: #ecd9ab; } .cr-alert.ok { background: var(--g1); border-color: #bcd9c8; }
.cr-empty { text-align: center; padding: 34px 20px; color: var(--muted); }
.cr-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.cr-tabs a, .cr-tabs button { background: none; border: 0; padding: 10px 16px; font: 600 14px var(--body); color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; text-decoration: none; }
.cr-tabs a.on, .cr-tabs button.on { color: var(--g7); border-bottom-color: var(--gold); }
.cr-chip { display: inline-flex; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 600 13px var(--body); color: var(--ink-2); cursor: pointer; text-decoration: none; }
.cr-chip.on, .cr-chip:hover { background: var(--g7); border-color: var(--g7); color: #fff; }
.cr-map { height: 420px; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; z-index: 0; }
.cr-timeline { list-style: none; margin: 0; padding: 0; position: relative; } .cr-timeline li { position: relative; padding: 0 0 18px; padding-inline-start: 26px; }
.cr-timeline li::before { content: ''; position: absolute; inset-inline-start: 5px; top: 6px; bottom: -4px; width: 2px; background: var(--line); } .cr-timeline li:last-child::before { display: none; }
.cr-timeline li::after { content: ''; position: absolute; inset-inline-start: 0; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 3px solid var(--g7); }
.cr-timeline li.now::after { border-color: var(--gold); background: var(--gold); } .cr-timeline li.todo::after { border-color: var(--line); }

/* ---------- public shell */
.cr-pub-head { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.cr-pub-head .in { max-width: 1200px; margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; gap: 22px; }
.cr-pub-head img.logo { height: 52px; display: block; }
.cr-nav { display: flex; gap: 2px; margin-inline-start: auto; align-items: center; flex-wrap: wrap; }
.cr-nav a { padding: 8px 12px; font: 600 14px var(--body); color: var(--ink-2); text-decoration: none; border-radius: 6px; } .cr-nav a:hover { background: var(--g1); color: var(--g7); } .cr-nav a.on { color: var(--g7); box-shadow: inset 0 -3px 0 var(--gold); border-radius: 0; }
.cr-lang { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 0 8px; } .cr-lang button { background: #fff; border: 0; padding: 6px 10px; font: 600 12px var(--body); color: var(--muted); cursor: pointer; } .cr-lang button.on { background: var(--g7); color: #fff; }
.cr-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.cr-hero { background: var(--g9); color: #fff; position: relative; overflow: hidden; }
.cr-hero::before { content: ''; position: absolute; inset: 0; background-image: url('../IMAGES/zellige-white.png'); background-size: 340px; opacity: .1; }
.cr-hero::after { content: ''; position: absolute; inset-inline-end: -10%; top: -30%; width: 60%; height: 160%; background: radial-gradient(closest-side, rgba(184, 137, 58, .28), transparent); }
.cr-hero .in { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 64px 24px 72px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.cr-hero h1 { color: #fff; font-size: 52px; margin: 14px 0 14px; } .cr-hero h1 em { font-style: normal; color: var(--gold-l); }
.cr-hero p.lead { font-size: 18px; color: rgba(255, 255, 255, .86); max-width: 560px; }
.cr-arch { border: 6px solid var(--gold); border-bottom: 0; border-radius: 999px 999px 0 0 / 46% 46% 0 0; background: var(--paper); overflow: hidden; box-shadow: 0 0 0 6px rgba(184, 137, 58, .25), 0 24px 50px rgba(0, 0, 0, .35); position: relative; aspect-ratio: 4 / 4.4; }
.cr-arch .cr-map { height: 100%; border: 0; border-radius: 0; }
.cr-strip { background: var(--paper); border-block: 1px solid var(--line); }
.cr-strip .in { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); }
.cr-strip .it { padding: 22px 20px; border-inline-start: 1px solid var(--line); } .cr-strip .it:first-child { border-inline-start: 0; }
.cr-strip b { display: block; font: 700 40px/1 var(--display); color: var(--g8); } .cr-strip span { color: var(--muted); font-size: 13.5px; }
.cr-section { padding: 64px 0; } .cr-section.alt { background: rgba(255, 253, 248, .85); border-block: 1px solid var(--line); }
.cr-section h2.t { font-size: 36px; margin: 8px 0 8px; } .cr-section .sub { color: var(--muted); max-width: 680px; }
.cr-foot { background: var(--g9); color: rgba(255, 255, 255, .8); margin-top: 0; position: relative; }
.cr-foot::before { content: ''; position: absolute; inset: 0; background: url('../IMAGES/zellige-white.png'); background-size: 340px; opacity: .06; }
.cr-foot .in { position: relative; max-width: 1200px; margin: 0 auto; padding: 44px 24px 24px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.cr-foot h4 { color: var(--gold-l); font: 600 13px var(--body); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; } .cr-foot a { color: rgba(255, 255, 255, .8); text-decoration: none; display: block; padding: 3px 0; } .cr-foot a:hover { color: #fff; }
.cr-foot .copy { position: relative; border-top: 1px solid rgba(255, 255, 255, .12); text-align: center; padding: 14px; font-size: 13px; color: rgba(255, 255, 255, .6); }
@media (max-width: 900px) { .cr-hero .in { grid-template-columns: 1fr; padding: 40px 20px 48px; } .cr-hero h1 { font-size: 38px; } .cr-strip .in { grid-template-columns: repeat(2, 1fr); } .cr-foot .in { grid-template-columns: 1fr 1fr; } .cr-pub-head .in { flex-wrap: wrap; } .cr-nav { margin: 0; } }

/* ---------- app shell (entrepreneur space) */
.cr-app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: calc(100vh - 5px); }
.cr-side { background: var(--paper); border-inline-end: 1px solid var(--line); padding: 0 0 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.cr-side .brand { display: block; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #fff; } .cr-side .brand img { width: 100%; max-height: 62px; object-fit: contain; display: block; }
.cr-side nav { padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.cr-side nav a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font: 600 14px var(--body); }
.cr-side nav a svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.cr-side nav a:hover { background: var(--g0); color: var(--g7); } .cr-side nav a.on { background: var(--g1); color: var(--g7); box-shadow: inset 3px 0 0 var(--gold); } html[dir=rtl] .cr-side nav a.on { box-shadow: inset -3px 0 0 var(--gold); }
.cr-side .grp { padding: 14px 24px 4px; font: 600 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-d); }
.cr-side .who { margin: 8px 12px 0; padding: 12px 14px; border-radius: 10px; background: var(--g0); border: 1px solid var(--g1); font-size: 13px; }
.cr-main { min-width: 0; display: flex; flex-direction: column; }
.cr-top { background: var(--g9); color: #fff; position: relative; border-bottom: 3px solid var(--gold); }
.cr-top::before { content: ''; position: absolute; inset: 0; background: url('../IMAGES/zellige-white.png'); background-size: 320px; opacity: .09; }
.cr-top .in { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 28px; }
.cr-top .name { font: 700 19px var(--display); } .cr-top .name small { display: block; font: 400 12px var(--body); opacity: .75; }
.cr-top .sp { flex: 1; } .cr-top a { color: #fff; text-decoration: none; font: 600 13px var(--body); opacity: .9; } .cr-top a:hover { opacity: 1; color: var(--gold-l); }
.cr-top .burger { display: none; background: none; border: 0; color: #fff; font-size: 22px; }
.cr-content { padding: 26px 28px 40px; max-width: 1280px; width: 100%; }
.cr-flash { margin-bottom: 16px; }
@media (max-width: 900px) { .cr-app { grid-template-columns: 1fr; } .cr-side { position: fixed; z-index: 90; inset-block: 0; inset-inline-start: 0; width: 270px; transform: translateX(-102%); transition: transform .2s; } html[dir=rtl] .cr-side { transform: translateX(102%); } .cr-app.open .cr-side { transform: none; } .cr-top .burger { display: block; } .cr-content { padding: 18px 16px 32px; } }

/* ---------- login */
.cr-login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--paper); }
.cr-login__art { background: var(--g9); color: #fff; position: relative; overflow: hidden; padding: 40px 56px; display: flex; flex-direction: column; justify-content: space-between; }
.cr-login__art::before { content: ''; position: absolute; inset: 0; background: url('../IMAGES/zellige-white.png'); background-size: 360px; opacity: .1; }
.cr-login__art > * { position: relative; }
.cr-login__art h1 { color: #fff; font-size: 46px; margin: 14px 0; } .cr-login__art h1 em { color: var(--gold-l); font-style: normal; }
.cr-login__arch { width: min(340px, 70%); aspect-ratio: 3 / 3.4; border: 5px solid var(--gold); border-bottom: 0; border-radius: 999px 999px 0 0 / 46% 46% 0 0; background: rgba(255, 253, 248, .06); display: flex; align-items: center; justify-content: center; margin-top: 18px; box-shadow: 0 0 0 5px rgba(184, 137, 58, .22); }
.cr-login__arch img { width: 56%; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.cr-login__form { display: flex; align-items: center; justify-content: center; padding: 40px 28px; background-image: url('../IMAGES/zellige-light.png'); background-size: 520px; }
.cr-login__card { width: 100%; max-width: 440px; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 12px; box-shadow: var(--shadow); padding: 30px 32px 28px; }
.cr-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--line-2); padding: 4px; border-radius: 10px; margin: 16px 0 22px; }
.cr-roles a { text-align: center; padding: 9px 6px; border-radius: 7px; font: 600 13px/1.25 var(--body); color: var(--muted); text-decoration: none; } .cr-roles a.on { background: var(--g7); color: #fff; box-shadow: 0 2px 8px rgba(15, 107, 69, .3); }
@media (max-width: 900px) { .cr-login { grid-template-columns: 1fr; } .cr-login__art { padding: 24px; } .cr-login__art h1 { font-size: 32px; } .cr-login__arch { display: none; } }

/* ---------- Ample admin skin (province and super administrators) */
.topbar, .topbar .navbar, .topbar .navbar-collapse, .navbar-header { background: var(--g9) !important; }
.topbar { border-bottom: 3px solid var(--gold) !important; position: relative; }
.topbar::before { content: ''; position: absolute; inset: 0; background: url('../IMAGES/zellige-white.png'); background-size: 320px; opacity: .09; pointer-events: none; }
.topbar .navbar-brand img { background: #fff; border-radius: 6px; padding: 4px 8px; max-height: 50px; }
.left-sidebar, [data-sidebarbg=skin6] { background: var(--paper) !important; border-inline-end: 1px solid var(--line); }
.sidebar-link { color: var(--ink-2) !important; font-family: var(--body) !important; font-weight: 600 !important; border-radius: 8px !important; }
.sidebar-link:hover, .sidebar-link.active, .selected > .sidebar-link { background: var(--g1) !important; color: var(--g7) !important; }
.sidebar-nav ul .sidebar-item .sidebar-link i { color: var(--gold-d) !important; }
.page-wrapper { background: transparent !important; }
.page-breadcrumb { background: transparent !important; border: 0 !important; padding: 18px 25px 0 !important; }
.page-breadcrumb .page-title { font: 700 30px var(--display) !important; color: var(--g9) !important; }
.white-box, .card { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; box-shadow: var(--shadow) !important; }
.footer { background: transparent !important; color: var(--muted) !important; font-family: var(--body); }
.btn-primary, .btn-outline-primary:hover { background-color: var(--g7) !important; border-color: var(--g7) !important; color: #fff !important; }
.btn-outline-primary { color: var(--g7) !important; border-color: var(--g7) !important; }
.btn-danger { background-color: var(--red) !important; border-color: var(--red) !important; }
.table thead th, .table td { font-family: var(--body); }
.accordion-button { font-family: var(--body); font-weight: 600; } .accordion-button:not(.collapsed) { background: var(--g1) !important; color: var(--g7) !important; box-shadow: none !important; }
.accordion-item { border-color: var(--line) !important; background: var(--paper) !important; }
.alert-success { background: var(--g1); border-color: #bcd9c8; color: var(--g8); } .alert-warning { background: var(--gold-1); border-color: #ecd9ab; color: var(--gold-d); } .alert-danger, .alert-error { background: var(--red-1); border-color: #efc2c3; color: var(--red); }
.preloader { background: var(--cream) !important; }
.page-wrapper > .container-fluid, .page-wrapper > .cr-adm { padding: 18px 25px 10px; }

/* client pages that still use Bootstrap 4 components */
.content-section { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; padding: 16px 22px !important; box-shadow: var(--shadow); }
.btn-outline-info { color: var(--g7); border-color: var(--g7); } .btn-outline-info:hover { background: var(--g7); border-color: var(--g7); }

@media print { body { background: #fff !important; } .cr-side, .cr-top, .cr-tricolor, .cr-foot, .cr-noprint { display: none !important; } .cr-app { display: block; } .cr-card { box-shadow: none; break-inside: avoid; } .cr-content { padding: 0; max-width: none; } }

/* map pins */
.cr-pin span { display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; color: #fff; font: 700 13px var(--body); pointer-events: none; }
.leaflet-container { font-family: var(--body); }
.cr-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .cr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 6px; vertical-align: -1px; }

/* Bootstrap 4 form controls inside the new shell */
select.form-control, .custom-select { height: auto !important; padding: 10px 12px; }
textarea.form-control { min-height: 96px; }
.form-group { margin-bottom: 14px; } .form-group label, .form-check-label { font-family: var(--body); font-size: 13.5px; }
.step { background: var(--gold-l) !important; } .step.active { background: var(--gold) !important; } .step.finish { background: var(--g7) !important; }
.invalid-feedback, .help-block, .text-danger { font-size: 12.5px; color: var(--red) !important; }