/* =========================================================
AGF Strategy App — DARK theme (inspired by user's reference)
Brand: Dark Green #203F3F · Fountain Blue #5CB2B1 · Light Aqua #DEEFEF
Gold #B8965A · RAG: green/yellow/red/grey
========================================================= */
:root {
/* Brand */
--agf-dark-green: #203F3F;
--agf-fountain: #5CB2B1;
--agf-light-aqua: #DEEFEF;
--agf-gold: #B8965A;
/* Dark surfaces — shifted toward aqua/sky teal (brighter & cooler) */
--bg: #0E2B2E; /* page bg — dark teal w/ aqua tint */
--bg-2: #123335; /* slightly lighter section bg */
--sidebar: #0B2528; /* sidebar */
--card: #163B3F; /* card */
--card-2: #1B4549; /* nested / hovered */
--card-3: #123335; /* table row alt */
--border: #22504F; /* hairline */
--border-strong: #335E5D; /* stronger divider */
--primary: #7FD3D1; /* primary accent — brighter aqua */
--primary-dark: #3FA09E;
--primary-light: #A9E2E0;
--primary-deep: #295F5E;
--primary-25: #16383B;
--primary-50: #1E4B4D;
/* Text */
--text: #E8F2F1;
--text-2: #B8CDCB;
--text-muted: #87A09E;
--text-faint: #5F7878;
--on-primary: #0A2528;
/* RAG */
--rag-green: #2FB36B;
--rag-green-bg: #173B2A;
--rag-yellow: #E0A93D;
--rag-yellow-bg: #3F3315;
--rag-red: #D85949;
--rag-red-bg: #3F1F1B;
--rag-grey: #6F807E;
--rag-grey-bg: #1E2E2E;
--radius: 14px;
--radius-sm: 10px;
--shadow-sm: 0 1px 0 rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.18);
--shadow: 0 1px 0 rgba(0,0,0,.3), 0 14px 36px -18px rgba(0,0,0,.5);
/* Tweakable knobs (overridden at runtime) */
--logo-size: 200px;
--font-scale: 1;
--page-pad: 30px;
--card-pad-x: 22px;
--card-pad-y: 18px;
--stat-pad-y: 18px;
}
/* Density presets (set on via tweaks) */
body[data-density="compact"] {
--page-pad: 22px;
--card-pad-x: 16px;
--card-pad-y: 12px;
--stat-pad-y: 14px;
}
body[data-density="comfy"] {
--page-pad: 38px;
--card-pad-x: 28px;
--card-pad-y: 22px;
--stat-pad-y: 22px;
}
/* Light theme overrides (set on by ThemeToggle) */
html[data-theme="light"] {
--bg: #F4F7F7;
--bg-2: #EAF1F1;
--sidebar: #FFFFFF;
--card: #FFFFFF;
--card-2: #F2F7F7;
--card-3: #EBF1F1;
--border: #D8E3E2;
--border-strong: #B7C9C7;
--primary: #2E8B89;
--primary-dark: #1F6968;
--primary-light: #5CB2B1;
--primary-deep: #29403F;
--primary-25: #E0EFEF;
--primary-50: #C7E2E1;
--text: #14302F;
--text-2: #355352;
--text-muted: #6F8A88;
--text-faint: #94ABA9;
--on-primary: #FFFFFF;
--rag-green-bg: #DCF1E5;
--rag-yellow-bg: #FAF1D9;
--rag-red-bg: #F8DDD9;
--rag-grey-bg: #E4EAEA;
--shadow-sm: 0 1px 0 rgba(20,48,47,.05), 0 2px 6px rgba(20,48,47,.04);
--shadow: 0 1px 0 rgba(20,48,47,.06), 0 14px 36px -18px rgba(20,48,47,.18);
}
html[data-theme="light"] body {
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(94,178,177,.10), transparent 60%),
linear-gradient(180deg, #F8FBFB 0%, #EFF5F5 60%, #E7EFEF 100%);
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: var(--bg);
color: var(--text);
font-family: "Cairo", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: calc(14.5px * var(--font-scale, 1));
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
html[dir="ltr"], html[dir="ltr"] body {
font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
min-height: 100vh;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(127,211,209,.14), transparent 60%),
radial-gradient(ellipse 60% 50% at 100% 100%, rgba(63,160,158,.08), transparent 65%),
linear-gradient(180deg, #1B4849 0%, #143839 28%, #0E2B2E 60%, #0A2225 100%);
background-attachment: fixed;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.muted { color: var(--text-muted); }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
/* ============== SHELL ============== */
.shell {
display: flex;
flex-direction: row; /* sidebar first then main — naturally flips with dir */
min-height: 100vh;
}
.sidebar {
flex: 0 0 268px;
background: var(--sidebar);
border-inline-end: 1px solid var(--border);
display: flex; flex-direction: column;
position: sticky; top: 0; height: 100vh;
}
.sb-brand {
display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 18px 16px 22px; border-bottom: 1px solid var(--border);
}
.sb-brand-mark {
width: var(--logo-size, 200px);
display: grid; place-items: center;
flex-shrink: 0;
}
.sb-brand-mark img {
display: block;
width: 100%; height: auto;
object-fit: contain;
filter: drop-shadow(0 4px 18px rgba(127,211,209,.30));
}
.sb-brand-mark .logo-light,
.tn-brand-mark .logo-light,
.login-logo .logo-light { display: none; }
html[data-theme="light"] .sb-brand-mark .logo-dark,
html[data-theme="light"] .tn-brand-mark .logo-dark,
html[data-theme="light"] .login-logo .logo-dark { display: none; }
html[data-theme="light"] .sb-brand-mark .logo-light,
html[data-theme="light"] .tn-brand-mark .logo-light,
html[data-theme="light"] .login-logo .logo-light { display: block; }
html[data-theme="light"] .sb-brand-mark img,
html[data-theme="light"] .tn-brand-mark img,
html[data-theme="light"] .login-logo img {
filter: drop-shadow(0 2px 10px rgba(46,139,137,.18));
}
.sb-nav { padding: 14px 12px; flex: 1; overflow-y: auto; }
.sb-nav button {
display: flex; align-items: center; gap: 10px;
width: 100%;
padding: 11px 12px;
background: transparent; border: 1px solid transparent;
border-radius: 10px;
color: var(--text-2); font-size: 14px; font-weight: 500;
text-align: start;
margin-bottom: 3px;
transition: all .12s;
}
.sb-nav button:hover { background: var(--card); color: var(--text); }
.sb-nav button.active {
background: var(--primary-50);
color: var(--primary);
font-weight: 700;
border-color: var(--border-strong);
}
.sb-nav .sb-icon {
width: 20px; height: 20px; display: grid; place-items: center;
color: var(--text-muted);
}
.sb-nav button.active .sb-icon { color: var(--primary); }
.sb-label { flex: 1; }
.sb-badge {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 20px;
padding: 0 7px;
border-radius: 10px;
background: var(--rag-red);
color: #fff;
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
font-weight: 800;
letter-spacing: -.02em;
}
.sb-nav button.active .sb-badge {
background: var(--primary);
color: var(--on-primary);
}
.sb-footer {
padding: 14px; border-top: 1px solid var(--border);
}
.sb-user {
display: flex; align-items: center; gap: 10px;
padding: 8px 4px;
}
.sb-user .avatar {
width: 38px; height: 38px; border-radius: 10px;
background: var(--card);
border: 1px solid var(--border-strong);
display: grid; place-items: center;
color: var(--primary);
}
.sb-user .u-name { font-weight: 700; font-size: 13.5px; color: var(--text); }
.sb-user .u-role { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
/* ============== MAIN ============== */
.main { min-width: 0; flex: 1 1 auto; }
.topbar {
display: flex; justify-content: space-between; align-items: center;
padding: 18px 32px;
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter: blur(10px);
position: sticky; top: 0; z-index: 20;
}
.tb-title { font-size: 15px; font-weight: 700; color: var(--text); }
.tb-title .muted { color: var(--text-muted); font-weight: 500; }
.tb-actions { display: flex; align-items: center; gap: 14px; }
/* ============== TOP NAV (horizontal tabs) ============== */
.shell-top { flex-direction: column; }
.topnav {
position: sticky; top: 0; z-index: 30;
background: color-mix(in srgb, var(--sidebar) 94%, transparent);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(12px);
}
.tn-top {
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
padding: 12px 28px;
}
.tn-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tn-brand-mark {
width: 132px;
display: grid; place-items: center;
flex-shrink: 0;
}
.tn-brand-mark img {
display: block;
width: 100%; height: auto;
object-fit: contain;
filter: drop-shadow(0 4px 18px rgba(127,211,209,.30));
}
.tn-title {
font-size: 14.5px; font-weight: 700; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tn-title .muted { color: var(--text-muted); font-weight: 500; }
.tn-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.tn-user { display: flex; align-items: center; gap: 9px; }
.tn-user .avatar {
width: 34px; height: 34px; border-radius: 9px;
background: var(--card);
border: 1px solid var(--border-strong);
display: grid; place-items: center;
color: var(--primary);
flex-shrink: 0;
}
.tn-user .u-name { font-weight: 700; font-size: 12.5px; color: var(--text); line-height: 1.2; }
.tn-user .u-role { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.tn-logout {
display: grid; place-items: center;
width: 36px; height: 36px;
border-radius: 9px;
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
cursor: pointer;
transition: all .12s;
}
.tn-logout:hover { color: var(--rag-red); border-color: var(--rag-red); }
.tn-nav {
display: flex; align-items: stretch;
gap: 2px;
padding: 0 20px;
border-top: 1px solid var(--border);
overflow-x: auto;
scrollbar-width: thin;
}
.tn-nav::-webkit-scrollbar { height: 5px; }
.tn-nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.tn-nav button {
display: flex; align-items: center; gap: 8px;
padding: 13px 14px;
background: transparent; border: none;
border-bottom: 2px solid transparent;
color: var(--text-2); font-size: 13.5px; font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition: color .12s, border-color .12s;
}
.tn-nav button:hover { color: var(--text); }
.tn-nav button.active {
color: var(--primary);
font-weight: 700;
border-bottom-color: var(--primary);
}
.tn-nav .tn-icon {
display: grid; place-items: center;
color: var(--text-muted);
flex-shrink: 0;
}
.tn-nav button:hover .tn-icon,
.tn-nav button.active .tn-icon { color: var(--primary); }
.tn-badge {
display: inline-grid; place-items: center;
min-width: 20px; height: 18px;
padding: 0 6px;
border-radius: 9px;
background: var(--rag-red);
color: #fff;
font-family: "IBM Plex Mono", monospace;
font-size: 10px; font-weight: 800; letter-spacing: -.02em;
}
@media (max-width: 640px) {
.tn-top { padding: 10px 16px; }
.tn-title { display: none; }
.tn-user .tn-user-meta { display: none; }
.tn-nav { padding: 0 10px; }
}
.user-switch {
display: flex; align-items: center; gap: 8px;
}
.user-switch .us-label { font-size: 12px; color: var(--text-muted); }
.user-switch select {
font: inherit; font-size: 13px;
padding-block: 7px;
padding-inline-start: 14px;
padding-inline-end: 32px;
background: var(--card);
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left 12px center;
border: 1px solid var(--border-strong);
border-radius: 10px;
color: var(--text);
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
min-width: 220px;
}
[dir="ltr"] .user-switch select { background-position: right 12px center; }
.user-switch select:focus { border-color: var(--primary); }
.user-switch select option { background: var(--card); color: var(--text); }
.theme-btn {
width: 36px; height: 36px; border-radius: 10px;
background: var(--card);
border: 1px solid var(--border-strong);
color: var(--text-2);
display: grid; place-items: center;
}
.theme-btn:hover { color: var(--primary); border-color: var(--primary); }
/* Language toggle (AR / EN) */
.lang-toggle {
display: inline-flex;
background: var(--card);
border: 1px solid var(--border-strong);
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.lang-toggle button {
font: inherit;
font-size: 12px;
font-weight: 700;
padding: 6px 12px;
border-radius: 7px;
background: transparent;
border: 0;
color: var(--text-muted);
letter-spacing: .04em;
cursor: pointer;
font-family: "IBM Plex Mono", monospace;
}
.lang-toggle button:hover { color: var(--text); }
.lang-toggle button.active {
background: var(--primary);
color: var(--on-primary);
}
/* ============== PAGE ============== */
.page { padding: var(--page-pad) var(--page-pad) calc(var(--page-pad) * 2); max-width: 1200px; margin-inline: auto; }
.page-narrow { max-width: 980px; }
.page-head {
display: flex; justify-content: space-between; align-items: flex-end;
flex-wrap: wrap; gap: 20px; row-gap: 14px; margin-bottom: 26px;
}
.page-head h1 {
font-size: 28px; font-weight: 800; margin: 0 0 6px;
letter-spacing: -.02em; color: var(--text);
}
.page-head .lede { font-size: 14px; color: var(--text-muted); margin: 0; max-width: 720px; }
.page-head-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; row-gap: 12px; }
.page-head-right .exec-period { flex-wrap: nowrap; white-space: nowrap; }
.back-btn {
display: inline-flex; align-items: center; gap: 6px;
margin-bottom: 18px;
padding: 8px 14px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 9px;
color: var(--text-muted);
font-size: 13px; font-weight: 600;
cursor: pointer;
transition: color .12s, border-color .12s, background .12s;
}
.back-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-50); }
.back-btn svg { flex-shrink: 0; }
.btn {
font-family: inherit; font-size: 13px; font-weight: 600;
padding: 9px 16px; border-radius: 10px; border: 1px solid transparent;
transition: all .15s;
display: inline-flex; align-items: center; gap: 8px;
}
.btn.ghost { background: transparent; border-color: var(--border-strong); color: var(--text-2); }
.btn.ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-light); }
.btn.gold { background: var(--agf-gold); color: #fff; }
.btn.gold:hover { background: #a07c46; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; padding: 12px 16px; font-size: 14px; }
/* ============== CARDS ============== */
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.card-head {
display: flex; justify-content: space-between; align-items: flex-start;
padding: var(--card-pad-y) var(--card-pad-x) 14px;
border-bottom: 1px solid var(--border);
gap: 14px;
}
.card-eyebrow {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px; color: var(--primary);
text-transform: uppercase; letter-spacing: .12em; font-weight: 600; margin-bottom: 5px;
}
.card-title { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -.01em; color: var(--text); }
.card-body { padding: var(--card-pad-y) var(--card-pad-x); }
/* ============== STATS ============== */
.stat-row { display: grid; gap: 14px; margin-bottom: 22px; }
.stat-row.four { grid-template-columns: repeat(4, 1fr); }
.stat-row.five { grid-template-columns: repeat(5, 1fr); }
.stat-row.three { grid-template-columns: repeat(3, 1fr); }
.stat {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
padding: var(--stat-pad-y) 20px;
}
.stat-top {
display: flex; align-items: center; justify-content: flex-start;
gap: 10px; margin-bottom: 14px;
}
.stat-top .stat-ic {
width: 34px; height: 34px; border-radius: 9px;
background: var(--primary-50); color: var(--primary);
display: grid; place-items: center;
}
.stat .stat-label { font-size: 13px; color: var(--text-2); font-weight: 600; }
.stat .stat-value {
font-family: "Cairo", sans-serif;
font-size: 30px; font-weight: 800;
margin: 0; letter-spacing: -.02em; line-height: 1;
color: var(--text);
}
.stat .stat-value .su { font-size: 14px; color: var(--text-muted); margin-inline-start: 4px; font-weight: 600; }
.stat .stat-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
/* ============== TAGS / BADGES ============== */
.tag {
font-size: 10.5px; padding: 3px 9px; border-radius: 5px;
background: var(--primary-50); color: var(--primary); font-weight: 700;
font-family: "IBM Plex Mono", monospace; letter-spacing: .04em;
}
.tag-gold { background: rgba(184,150,90,.16); color: var(--agf-gold-soft, #D9BC85); }
.tag-soft { background: var(--card-2); color: var(--text-muted); }
/* RAG badge */
.rag {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700;
padding: 4px 11px 4px 8px;
border-radius: 999px;
white-space: nowrap;
letter-spacing: 0.02em;
border: 1px solid transparent;
}
.rag .rag-dot {
width: 7px; height: 7px; border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 2px currentColor;
opacity: 0.85;
}
.rag-green {
color: var(--rag-green);
background: linear-gradient(135deg, rgba(47,179,107,0.18), rgba(47,179,107,0.08));
border-color: rgba(47,179,107,0.3);
box-shadow: 0 0 10px -2px rgba(47,179,107,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
}
.rag-yellow {
color: var(--rag-yellow);
background: linear-gradient(135deg, rgba(224,169,61,0.18), rgba(224,169,61,0.08));
border-color: rgba(224,169,61,0.3);
box-shadow: 0 0 10px -2px rgba(224,169,61,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
}
.rag-red {
color: var(--rag-red);
background: linear-gradient(135deg, rgba(216,89,73,0.18), rgba(216,89,73,0.08));
border-color: rgba(216,89,73,0.3);
box-shadow: 0 0 10px -2px rgba(216,89,73,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
}
.rag-grey {
color: var(--rag-grey);
background: linear-gradient(135deg, rgba(111,128,126,0.15), rgba(111,128,126,0.06));
border-color: rgba(111,128,126,0.25);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.rag-green .rag-dot { background: var(--rag-green); box-shadow: 0 0 0 2px rgba(47,179,107,0.25), 0 0 6px rgba(47,179,107,0.5); }
.rag-yellow .rag-dot { background: var(--rag-yellow); box-shadow: 0 0 0 2px rgba(224,169,61,0.25), 0 0 6px rgba(224,169,61,0.5); }
.rag-red .rag-dot { background: var(--rag-red); box-shadow: 0 0 0 2px rgba(216,89,73,0.25), 0 0 6px rgba(216,89,73,0.5); }
.rag-grey .rag-dot { background: var(--rag-grey); box-shadow: 0 0 0 2px rgba(111,128,126,0.2); }
/* progress bars */
.bar {
height: 6px;
background: var(--card-2);
border-radius: 99px;
overflow: hidden;
position: relative;
box-shadow: inset 0 1px 2px rgba(0,0,0,.32);
}
.bar > span {
display: block; height: 100%;
background-color: var(--primary);
background-image: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.16) 100%);
border-radius: 99px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 0 10px -1px color-mix(in srgb, var(--primary) 55%, transparent);
transition: width .55s cubic-bezier(.4,0,.2,1);
transform-origin: left center;
animation: bar-fill .9s cubic-bezier(.2,.7,.2,1) both;
}
[dir="rtl"] .bar > span { transform-origin: right center; }
@keyframes bar-fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.bar > span { animation: none; }
}
.bar.rag-green > span { background-color: var(--rag-green); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 12px -1px rgba(47,179,107,.5); }
.bar.rag-yellow > span { background-color: var(--rag-yellow); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 12px -1px rgba(224,169,61,.5); }
.bar.rag-red > span { background-color: var(--rag-red); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 12px -1px rgba(216,89,73,.5); }
.bar.rag-grey > span { background-color: var(--rag-grey); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 8px -1px rgba(111,128,126,.4); }
.bar-thin { height: 4px; }
.bar-thick { height: 10px; }
.bar-thick > span {
background-image: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,.18) 100%);
}
/* RAG dot counters (e.g. 1● 0● 0● 1●) */
.rag-counters { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rag-counters .rc {
display: inline-flex; align-items: center; gap: 6px;
font-family: "IBM Plex Mono", monospace; font-size: 12px;
color: var(--text-2); font-weight: 700;
}
.rag-counters .rc .rc-dot { width: 9px; height: 9px; border-radius: 50%; }
.rc.green .rc-dot { background: var(--rag-green); }
.rc.yellow .rc-dot { background: var(--rag-yellow); }
.rc.red .rc-dot { background: var(--rag-red); }
.rc.grey .rc-dot { background: var(--rag-grey); }
/* ============== INITIATIVE CARDS ============== */
.init-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.init-card {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
padding: 20px 22px;
display: flex; flex-direction: column; gap: 10px;
transition: border-color .15s, transform .15s;
}
.init-card:hover { border-color: var(--border-strong); }
.ic-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ic-pillar-tag {
font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 6px;
background: var(--primary-50); color: var(--primary);
}
.ic-title { font-size: 17px; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -.01em; }
.ic-desc { font-size: 12.5px; color: var(--text-muted); margin: 4px 0 0; line-height: 1.6; }
.ic-owner { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.ic-owner .ic-owner-ic { color: var(--primary); display: inline-flex; }
.ic-progress-row { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.ic-progress-row .pct { font-family: "IBM Plex Mono", monospace; font-weight: 700; color: var(--text); }
.ic-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--border); margin-top: 4px; }
.ic-foot .foot-label { font-size: 11.5px; color: var(--text-muted); }
/* ============== PILLAR ACCORDION ============== */
.pillar-acc {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
margin-bottom: 14px;
overflow: hidden;
}
.pa-head {
display: flex; align-items: center; gap: 14px;
padding: 18px 22px;
cursor: pointer;
width: 100%;
background: transparent;
border: 0;
text-align: start;
}
.pa-head:hover { background: var(--card-2); }
.pa-icon {
width: 44px; height: 44px; border-radius: 10px;
background: var(--primary-50); color: var(--primary);
display: grid; place-items: center;
flex-shrink: 0;
}
.pa-info { flex: 1; }
.pa-title { font-size: 17px; font-weight: 800; color: var(--text); margin: 0 0 4px; }
.pa-desc { font-size: 12.5px; color: var(--text-muted); margin: 0; }
.pa-meta {
font-size: 11.5px; color: var(--text-muted);
font-family: "IBM Plex Mono", monospace;
margin-inline-start: auto;
white-space: nowrap;
}
.pa-chev { color: var(--text-muted); display: grid; place-items: center; transition: transform .25s; }
.pa-acc.open .pa-chev { transform: rotate(180deg); }
.pa-body { border-top: 1px solid var(--border); }
.pa-initiative {
padding: 18px 22px 8px;
border-bottom: 1px solid var(--border);
background: var(--card);
}
.pa-initiative + .pa-initiative {
border-top: 4px solid var(--bg);
}
.pa-initiative:last-child { border-bottom: 0; }
.pa-init-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--border);
}
.pa-init-head.clickable {
cursor: pointer;
margin-inline: -8px;
padding: 8px;
border-radius: 10px;
transition: background .12s;
}
.pa-init-head.clickable:hover {
background: var(--primary-25);
}
table.tbl.clickable-rows tbody tr {
cursor: pointer;
transition: background .12s;
}
table.tbl.clickable-rows tbody tr:hover td {
background: var(--primary-25);
}
.pa-init-code {
flex-shrink: 0;
min-width: 56px;
height: 44px;
padding: 0 12px;
border-radius: 10px;
background: var(--primary-25);
border: 1px solid rgba(127,211,209,.35);
color: var(--primary);
font-family: "IBM Plex Mono", monospace;
font-size: 13px;
font-weight: 800;
letter-spacing: .04em;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pa-init-body { flex: 1; min-width: 0; }
.pa-init-title {
font-size: 16px;
font-weight: 800;
color: var(--text);
margin: 0 0 6px;
letter-spacing: -.01em;
line-height: 1.3;
}
.pa-init-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-size: 11.5px;
color: var(--text-muted);
}
.pa-init-meta > span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.pa-init-status {
padding: 3px 9px 3px 8px;
border-radius: 6px;
font-weight: 700;
font-size: 10.5px;
letter-spacing: .02em;
}
.pa-init-status.s-active {
background: rgba(47,179,107,.12);
color: var(--rag-green);
border: 1px solid rgba(47,179,107,.3);
}
.pa-init-status.s-pilot {
background: rgba(184,150,90,.12);
color: var(--agf-gold);
border: 1px solid rgba(184,150,90,.3);
}
.pa-init-status-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
}
.pa-init-owner svg, .pa-init-kpis svg { opacity: .7; }
/* ============== TABLES ============== */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th, table.tbl td {
padding: 12px 10px; text-align: start;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
table.tbl th {
font-size: 10.5px; font-weight: 700; color: var(--text-muted);
text-transform: uppercase; letter-spacing: .06em;
font-family: "IBM Plex Mono", monospace;
background: var(--card-2);
}
table.tbl tbody tr:hover { background: var(--card-2); }
table.tbl td.num { font-family: "IBM Plex Mono", monospace; text-align: center; white-space: nowrap; color: var(--text-2); }
table.tbl td.num.actual { color: var(--text); font-weight: 700; font-size: 14.5px; }
table.tbl td.baseline { font-family: "IBM Plex Mono", monospace; text-align: center; color: var(--text); }
table.tbl td.current-year { background: rgba(184,150,90,.05); }
table.tbl th.current-year { color: var(--agf-gold); }
table.tbl td.name { color: var(--text); font-weight: 600; }
table.tbl td.name small { display: block; color: var(--text-muted); font-size: 11px; font-weight: 400; margin-top: 2px; }
/* ============== HEATMAP (Q1-Q4 by KPI rows) ============== */
.heatmap-q {
display: grid;
grid-template-columns: minmax(260px, 1fr) repeat(4, 80px);
gap: 0;
background: var(--card);
}
.hmq-th {
font-size: 11px; font-family: "IBM Plex Mono", monospace;
color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em;
padding: 12px 16px;
text-align: center;
border-bottom: 1px solid var(--border);
font-weight: 700;
}
.hmq-th.label-th { text-align: start; }
.hmq-th.sel {
color: var(--primary);
background: var(--primary-25);
border-bottom-color: var(--primary);
}
.hmq-cell.sel {
background: rgba(127,211,209,.05);
}
.hmq-section {
grid-column: 1 / -1;
font-size: 12.5px; font-weight: 800; color: var(--primary);
padding: 14px 16px 8px;
border-bottom: 1px solid var(--border);
background: var(--card-2);
}
.hmq-row-label {
font-size: 13px; color: var(--text-2); font-weight: 600;
padding: 12px 16px;
display: flex; align-items: center;
border-bottom: 1px solid var(--border);
}
.hmq-cell {
padding: 10px;
display: grid; place-items: center;
border-bottom: 1px solid var(--border);
}
.hmq-tile {
width: 28px; height: 28px;
border-radius: 6px;
background: var(--card-2);
border: 1px solid var(--border);
}
.hmq-tile.green { background: var(--rag-green); border-color: var(--rag-green); }
.hmq-tile.yellow { background: var(--rag-yellow); border-color: var(--rag-yellow); }
.hmq-tile.red { background: var(--rag-red); border-color: var(--rag-red); }
.hmq-tile.grey { background: var(--card-2); border: 1px solid var(--border-strong); }
/* ============== PILLAR PERFORMANCE STRIP ============== */
.pp-row-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 22px;
}
.pp-card {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px 20px;
display: flex; flex-direction: column;
}
.pp-top {
display: flex; align-items: flex-start; gap: 12px; justify-content: space-between;
margin-bottom: 14px;
min-height: 56px;
}
.pp-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--primary-50); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; }
.pp-name { font-size: 16px; font-weight: 800; color: var(--text); margin: 0; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pp-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 500; }
.pp-rag-tag { flex-shrink: 0; }
.pp-bar-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; margin-bottom: 6px; color: var(--text-muted); margin-top: auto; }
.pp-bar-row .pct { font-family: "IBM Plex Mono", monospace; font-weight: 700; color: var(--text); font-size: 14px; }
.pp-bar-row .target { font-family: "IBM Plex Mono", monospace; }
.pp-counters { display: flex; gap: 18px; margin-top: 14px; justify-content: space-between; }
/* ============== FILTERS ============== */
.filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; row-gap: 12px; margin-bottom: 18px; }
.filter-row .exec-period { flex-wrap: nowrap; white-space: nowrap; }
.select {
font: inherit; font-size: 13px;
padding-block: 9px;
padding-inline-start: 14px;
padding-inline-end: 36px;
background: var(--card);
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left 14px center;
border: 1px solid var(--border-strong);
border-radius: 10px;
color: var(--text);
outline: none;
-webkit-appearance: none;
appearance: none;
min-width: 200px;
}
[dir="ltr"] .select { background-position: right 14px center; }
.select:focus { border-color: var(--primary); }
.select option { background: var(--card); color: var(--text); }
/* ============== UPDATE FORM (Initiative Owner) ============== */
.form-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px 26px;
max-width: 760px;
margin-inline: auto;
}
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label {
font-size: 12.5px; font-weight: 700; color: var(--text);
display: flex; align-items: center; gap: 4px;
}
.field label .req { color: var(--rag-red); }
.field .help { font-size: 11.5px; color: var(--text-muted); }
.field input[type="text"],
.field input[type="number"],
.field input[type="url"],
.field select,
.field textarea {
width: 100%;
font: inherit; font-size: 14px;
padding: 11px 14px;
background: var(--bg-2);
border: 1px solid var(--border-strong);
border-radius: 10px;
color: var(--text);
outline: none;
transition: border-color .12s, background .12s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
border-color: var(--primary);
}
.field select {
-webkit-appearance: none; appearance: none;
background: var(--bg-2);
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left 14px center;
padding-inline-end: 36px; cursor: pointer;
}
[dir="ltr"] .field select { background-position: right 14px center; }
.field select option { background: var(--card); color: var(--text); }
.field textarea { resize: vertical; min-height: 84px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.field-row.two { grid-template-columns: 1fr 1fr; }
/* RAG picker */
.rag-picker { display: flex; gap: 8px; }
.rag-picker button {
flex: 1;
font: inherit; font-size: 12.5px; font-weight: 700;
padding: 10px; border-radius: 9px;
border: 1px solid var(--border-strong);
background: var(--bg-2); color: var(--text-2);
display: flex; align-items: center; justify-content: center; gap: 8px;
transition: all .12s;
}
.rag-picker button .d { width: 9px; height: 9px; border-radius: 50%; }
.rag-picker button.green .d { background: var(--rag-green); }
.rag-picker button.yellow .d { background: var(--rag-yellow); }
.rag-picker button.red .d { background: var(--rag-red); }
.rag-picker button.grey .d { background: var(--rag-grey); }
.rag-picker button.sel { background: var(--primary-50); color: var(--text); border-color: var(--primary); }
/* Recheck alert (تحديثات معادة للتصحيح) */
.recheck-alert {
border: 1px solid rgba(216,89,73,.4);
background: rgba(216,89,73,.08);
border-radius: var(--radius);
padding: 16px 20px;
margin-bottom: 20px;
}
.recheck-alert .ra-title {
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 800; color: var(--rag-red);
margin-bottom: 12px;
}
.recheck-item {
background: var(--bg-2);
border-radius: 10px;
padding: 12px 16px;
font-size: 13px;
display: flex; flex-direction: column; gap: 4px;
}
.recheck-item .ri-title { font-weight: 700; color: var(--text); }
.recheck-item .ri-reason { font-size: 12px; color: var(--text-muted); }
.recheck-item + .recheck-item { margin-top: 8px; }
/* ============== LISTS ============== */
.list { display: flex; flex-direction: column; }
.list .li {
display: flex; align-items: flex-start; gap: 14px;
padding: 14px 22px; border-bottom: 1px solid var(--border);
}
.list .li:last-child { border-bottom: 0; }
.list .li:hover { background: var(--card-2); }
.li-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--primary-50); color: var(--primary); flex-shrink: 0; font-family: "IBM Plex Mono", monospace; font-weight: 700; font-size: 11px; }
.li-body { flex: 1; min-width: 0; }
.li-body .li-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin: 0 0 3px; }
.li-body .li-meta { font-size: 11.5px; color: var(--text-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.li-body .li-meta .dot-sep { color: var(--border-strong); }
.li-body p { margin: 6px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.li-aside { text-align: end; flex-shrink: 0; font-size: 11.5px; color: var(--text-muted); font-family: "IBM Plex Mono", monospace; }
/* ============== TWO-COL ============== */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.two-col.left-wide { grid-template-columns: 2fr 1fr; }
.two-col.right-wide { grid-template-columns: 1fr 2fr; }
/* ============== MODAL ============== */
.modal-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,.6);
z-index: 100; display: flex; align-items: center; justify-content: center;
padding: 30px;
}
.modal {
background: var(--card); border-radius: var(--radius);
width: 100%; max-width: 760px; max-height: 88vh; overflow: auto;
box-shadow: 0 40px 100px -20px rgba(0,0,0,.6);
border: 1px solid var(--border-strong);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.modal-close { background: transparent; border: 0; font-size: 18px; color: var(--text-muted); padding: 4px 8px; cursor: pointer; }
.modal-body { padding: 22px; }
.modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--card-2); }
.empty {
padding: 40px 20px; text-align: center; color: var(--text-muted);
font-size: 13px;
}
/* Toast */
.toast {
position: fixed; bottom: 24px; inset-inline-start: 24px;
background: var(--card); color: var(--text);
border: 1px solid var(--border-strong);
padding: 14px 20px; border-radius: 12px;
box-shadow: 0 18px 40px -12px rgba(0,0,0,.6);
z-index: 200;
font-weight: 600; font-size: 13.5px;
display: flex; align-items: center; gap: 12px;
}
.toast .toast-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rag-green); box-shadow: 0 0 0 3px rgba(47,179,107,.25); }
/* ============== RESPONSIVE ============== */
@media (max-width: 1100px) {
.shell { grid-template-columns: 1fr; }
.sidebar { display: none; }
.stat-row.five, .stat-row.four { grid-template-columns: repeat(2, 1fr); }
.pp-row-grid, .init-grid { grid-template-columns: 1fr; }
.two-col, .two-col.left-wide, .two-col.right-wide { grid-template-columns: 1fr; }
.field-row, .field-row.two { grid-template-columns: 1fr; }
}
/* ============== LOGOUT (sidebar footer) ============== */
.sb-logout {
display: flex; align-items: center; gap: 10px;
width: 100%;
margin-top: 10px;
padding: 10px 12px;
background: transparent;
border: 1px solid var(--border-strong);
border-radius: 10px;
color: var(--text-2);
font-family: inherit;
font-size: 13px;
font-weight: 600;
transition: all .15s;
}
.sb-logout:hover {
border-color: var(--rag-red);
color: var(--rag-red);
background: rgba(216,89,73,.07);
}
.sb-logout svg { flex-shrink: 0; }
/* ============== LOGIN SCREEN ============== */
.login-shell {
position: relative;
min-height: 100vh;
display: grid;
place-items: center;
padding: 40px 24px;
}
.login-bg {
position: fixed; inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(127,211,209,.18), transparent 60%),
radial-gradient(ellipse 50% 40% at 100% 100%, rgba(184,150,90,.08), transparent 65%);
}
.login-card {
position: relative;
z-index: 1;
width: 100%;
max-width: 760px;
background: var(--card);
border: 1px solid var(--border-strong);
border-radius: 22px;
padding: 36px 38px 32px;
box-shadow:
0 40px 100px -20px rgba(0,0,0,.55),
0 0 0 1px rgba(127,211,209,.04);
}
.login-head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 22px;
padding-bottom: 26px;
margin-bottom: 24px;
border-bottom: 1px solid var(--border);
}
.login-logo {
width: 88px; height: 88px;
border-radius: 18px;
background: var(--card-2);
border: 1px solid var(--border-strong);
display: grid; place-items: center;
padding: 12px;
}
.login-logo img {
width: 100%; height: auto; display: block;
filter: drop-shadow(0 4px 14px rgba(127,211,209,.35));
}
.login-titles { min-width: 0; }
.login-eyebrow {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
color: var(--primary);
text-transform: uppercase;
letter-spacing: .14em;
font-weight: 600;
margin-bottom: 4px;
}
.login-title {
margin: 0 0 6px;
font-size: 26px;
font-weight: 800;
letter-spacing: -.02em;
color: var(--text);
}
.login-lede {
margin: 0;
font-size: 13.5px;
color: var(--text-muted);
max-width: 520px;
}
.login-lang { align-self: flex-start; }
.login-roles {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.login-role {
display: grid;
grid-template-columns: 44px 1fr 28px;
align-items: center;
gap: 16px;
padding: 16px 18px;
background: var(--card-2);
border: 1px solid var(--border);
border-radius: 14px;
color: var(--text);
text-align: start;
cursor: pointer;
transition: all .15s;
font-family: inherit;
}
.login-role:hover {
border-color: var(--border-strong);
background: var(--primary-25);
}
.login-role.active {
border-color: var(--primary);
background: var(--primary-50);
box-shadow: 0 0 0 3px rgba(127,211,209,.08);
}
.lr-icon {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--card);
border: 1px solid var(--border-strong);
display: grid; place-items: center;
color: var(--primary);
}
.login-role.active .lr-icon {
background: var(--primary);
color: var(--on-primary);
border-color: var(--primary);
}
.lr-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lr-label { font-size: 15px; font-weight: 700; }
.lr-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.lr-check { color: var(--primary); display: grid; place-items: center; }
.lr-circle {
width: 18px; height: 18px;
border-radius: 50%;
border: 1.5px solid var(--border-strong);
}
.login-accounts {
margin-top: 22px;
padding-top: 22px;
border-top: 1px dashed var(--border);
}
.login-accounts-label {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
color: var(--primary);
text-transform: uppercase;
letter-spacing: .14em;
font-weight: 600;
margin-bottom: 12px;
}
.login-accounts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.login-account {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--card-2);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--text);
text-align: start;
cursor: pointer;
transition: all .12s;
font-family: inherit;
min-width: 0;
}
.login-account:hover {
border-color: var(--border-strong);
background: var(--primary-25);
}
.login-account.active {
border-color: var(--primary);
background: var(--primary-50);
}
.la-avatar {
width: 34px; height: 34px;
border-radius: 10px;
background: var(--card);
border: 1px solid var(--border-strong);
display: grid; place-items: center;
color: var(--primary);
flex-shrink: 0;
}
.login-account.active .la-avatar {
background: var(--primary);
color: var(--on-primary);
border-color: var(--primary);
}
.la-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.la-name {
font-size: 13.5px; font-weight: 700;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.la-title {
font-size: 11.5px; color: var(--text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.login-actions {
margin-top: 28px;
display: flex;
justify-content: flex-end;
}
.login-submit {
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 22px;
background: var(--primary);
color: var(--on-primary);
border: 0;
border-radius: 12px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all .15s;
}
.login-submit:hover:not(:disabled) {
background: var(--primary-light);
transform: translateY(-1px);
}
.login-submit:disabled {
opacity: .45;
cursor: not-allowed;
}
[dir="rtl"] .login-submit svg { transform: scaleX(-1); }
@media (max-width: 640px) {
.login-card { padding: 26px 22px; border-radius: 16px; }
.login-head { grid-template-columns: auto 1fr; gap: 14px; }
.login-lang { grid-column: 1 / -1; justify-self: start; }
.login-logo { width: 64px; height: 64px; padding: 10px; }
.login-title { font-size: 22px; }
.login-accounts-grid { grid-template-columns: 1fr; }
.login-role { grid-template-columns: 40px 1fr 24px; gap: 12px; padding: 14px; }
}
/* ============== LOGIN (invite-only) ============== */
.login-card-new {
max-width: 460px;
padding: 32px 36px 26px;
}
.login-head-new {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding-bottom: 22px;
margin-bottom: 18px;
text-align: center;
position: relative;
}
.login-head-new .login-logo {
width: auto;
height: 80px;
background: transparent;
border: 0;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.login-head-new .login-logo img {
width: auto;
height: 100%;
display: block;
}
.login-head-new .login-titles { text-align: center; }
.login-head-new .login-title { font-size: 22px; }
.login-head-new .login-lede { font-size: 12.5px; margin-inline: auto; }
.login-lang-bottom {
display: flex;
justify-content: center;
margin-top: 16px;
}
.login-lang-bottom .lang-toggle {
padding: 1px;
border-radius: 6px;
}
.login-lang-bottom .lang-toggle button {
font-size: 9px;
padding: 2px 6px;
border-radius: 4px;
}
.invite-note {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--primary-25);
border: 1px solid rgba(127,211,209,.25);
border-radius: 10px;
font-size: 12px;
color: var(--text-2);
margin-bottom: 22px;
line-height: 1.5;
}
.invite-note svg { color: var(--primary); flex-shrink: 0; }
.login-form {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 18px;
}
.login-form .field { margin-bottom: 0; }
.login-form .field label {
font-size: 12px;
font-weight: 700;
color: var(--text-2);
margin-bottom: 6px;
}
.login-form input {
width: 100%;
padding: 12px 14px;
background: var(--card-2);
border: 1px solid var(--border-strong);
border-radius: 10px;
color: var(--text);
font: inherit;
font-size: 14px;
outline: none;
transition: border-color .12s;
}
.login-form input:focus { border-color: var(--primary); }
.login-form input::placeholder { color: var(--text-faint); }
.field-label-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.field-label-row label { margin-bottom: 0 !important; }
.login-link {
background: transparent;
border: 0;
color: var(--primary);
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
padding: 0;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.login-link:hover { text-decoration: underline; }
.login-link.strong { font-weight: 700; }
.pwd-wrap { position: relative; }
.pwd-toggle {
position: absolute;
inset-inline-end: 8px;
top: 50%;
transform: translateY(-50%);
padding: 4px 10px;
background: transparent;
border: 0;
color: var(--text-muted);
font: inherit;
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
}
.pwd-toggle:hover { color: var(--primary); }
.login-error {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: rgba(216,89,73,.1);
border: 1px solid rgba(216,89,73,.3);
border-radius: 9px;
color: var(--rag-red);
font-size: 12.5px;
font-weight: 600;
}
.login-submit-block {
width: 100%;
justify-content: center;
padding: 13px 16px;
}
.login-submit-block span { white-space: nowrap; }
.login-foot {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
padding-top: 16px;
border-top: 1px solid var(--border);
font-size: 13px;
}
.login-hint {
display: flex;
align-items: center;
gap: 6px;
margin-top: 16px;
padding: 8px 12px;
background: var(--card-2);
border: 1px dashed var(--border);
border-radius: 8px;
font-size: 11.5px;
color: var(--text-muted);
}
.login-hint svg { color: var(--text-faint); flex-shrink: 0; }
.login-code {
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
font-weight: 700;
color: var(--primary);
background: var(--primary-25);
padding: 1px 6px;
border-radius: 4px;
}
.access-success {
text-align: center;
padding: 20px 0;
}
.access-success-ic {
width: 64px; height: 64px;
margin: 0 auto 16px;
border-radius: 50%;
background: rgba(47,179,107,.15);
color: var(--rag-green);
display: grid;
place-items: center;
}
.access-success h3 { margin: 0; font-size: 15px; color: var(--text); }
/* ============== CALENDAR ============== */
.cal-grid {
display: grid;
grid-template-columns: 1.45fr 1fr;
gap: 18px;
}
.cal-filter {
display: inline-flex;
background: var(--card);
border: 1px solid var(--border-strong);
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.cal-filter button {
font: inherit;
font-size: 12px;
font-weight: 600;
padding: 7px 14px;
border-radius: 7px;
background: transparent;
border: 0;
color: var(--text-muted);
cursor: pointer;
}
.cal-filter button:hover { color: var(--text); }
.cal-filter button.active {
background: var(--primary);
color: var(--on-primary);
}
/* Month card */
.cal-month { display: flex; flex-direction: column; }
.cal-month-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 18px 14px;
border-bottom: 1px solid var(--border);
}
.cal-month-title {
margin: 0;
font-size: 18px;
font-weight: 800;
letter-spacing: -.01em;
color: var(--text);
}
.cal-month-nav { display: inline-flex; gap: 6px; align-items: center; }
.cal-nav-btn {
width: 32px; height: 32px;
border-radius: 9px;
background: var(--card-2);
border: 1px solid var(--border-strong);
color: var(--text-2);
display: grid; place-items: center;
}
.cal-nav-btn:hover { color: var(--primary); border-color: var(--primary); }
.cal-today-btn {
padding: 7px 12px;
border-radius: 9px;
background: var(--card-2);
border: 1px solid var(--border-strong);
color: var(--text);
font: inherit;
font-size: 12px;
font-weight: 700;
}
.cal-today-btn:hover { border-color: var(--primary); color: var(--primary); }
.cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
border-bottom: 1px solid var(--border);
}
.cal-wd {
text-align: center;
padding: 9px 4px;
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: .08em;
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
}
.cal-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
padding: 8px;
gap: 4px;
}
.cal-day {
position: relative;
aspect-ratio: 1 / 1;
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding: 8px;
color: var(--text-2);
font-family: inherit;
font-size: 13px;
cursor: pointer;
transition: all .12s;
min-height: 60px;
}
.cal-day:hover {
background: var(--card-2);
border-color: var(--border);
}
.cal-day.empty { cursor: default; pointer-events: none; }
.cal-day.empty:hover { background: transparent; border-color: transparent; }
.cal-day-num {
font-size: 13px;
font-weight: 600;
color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.cal-day.has .cal-day-num { color: var(--text); font-weight: 700; }
.cal-day.today {
background: var(--primary-50);
border-color: var(--primary);
}
.cal-day.today .cal-day-num {
color: var(--primary-light);
font-weight: 800;
}
.cal-day.picked {
background: var(--primary);
border-color: var(--primary);
}
.cal-day.picked .cal-day-num {
color: var(--on-primary);
font-weight: 800;
}
.cal-day-dots {
position: absolute;
bottom: 6px;
inset-inline-start: 8px;
display: flex;
gap: 3px;
}
.cal-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--primary);
}
.cal-dot.t-tournament { background: var(--agf-gold); }
.cal-dot.t-deadline { background: var(--rag-red); }
.cal-dot.t-meeting { background: var(--primary); }
.cal-day.picked .cal-dot { background: var(--on-primary); }
/* Side card */
.cal-side { display: flex; flex-direction: column; }
.cal-side-body {
flex: 1;
overflow-y: auto;
max-height: 520px;
}
.cal-close-btn {
width: 28px; height: 28px;
border-radius: 8px;
background: var(--card-2);
border: 1px solid var(--border-strong);
color: var(--text-muted);
display: grid; place-items: center;
flex-shrink: 0;
}
.cal-close-btn:hover { color: var(--rag-red); border-color: var(--rag-red); }
/* Event list */
.cal-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.cal-list.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.cal-row {
display: grid;
grid-template-columns: 36px 1fr auto;
align-items: flex-start;
gap: 12px;
padding: 14px;
background: var(--card-2);
border: 1px solid var(--border);
border-radius: 12px;
border-inline-start: 3px solid var(--border-strong);
transition: border-color .12s, background .12s;
}
.cal-row:hover {
background: var(--card);
border-color: var(--border-strong);
}
.cal-row.t-tournament { border-inline-start-color: var(--agf-gold); }
.cal-row.t-deadline { border-inline-start-color: var(--rag-red); }
.cal-row.t-meeting { border-inline-start-color: var(--primary); }
.cal-row-icon {
width: 34px; height: 34px;
border-radius: 9px;
background: var(--card);
border: 1px solid var(--border-strong);
display: grid; place-items: center;
color: var(--primary);
flex-shrink: 0;
}
.cal-row.t-tournament .cal-row-icon { color: var(--agf-gold); }
.cal-row.t-deadline .cal-row-icon { color: var(--rag-red); }
.cal-row-body { min-width: 0; }
.cal-row-top {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 6px;
}
.cal-row-title {
font-size: 13.5px;
font-weight: 700;
color: var(--text);
line-height: 1.4;
margin-bottom: 5px;
}
.cal-row-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 11.5px;
color: var(--text-muted);
}
.cal-row-meta span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.cal-row-meta svg { opacity: .8; }
.cal-row-kpi {
color: var(--primary) !important;
font-weight: 600;
}
.cal-row-action {
align-self: center;
flex-shrink: 0;
}
.cal-row { position: relative; }
.cal-row.t-tournament .cal-row-action,
.cal-row.t-meeting .cal-row-action,
.cal-row.t-deadline .cal-row-action {
margin-inline-start: auto;
}
.cal-type-tag, .cal-init-tag, .cal-status-tag {
display: inline-flex;
align-items: center;
font-size: 10.5px;
font-weight: 700;
padding: 3px 8px;
border-radius: 6px;
letter-spacing: .02em;
}
.cal-type-tag {
background: var(--card);
border: 1px solid var(--border-strong);
color: var(--text-2);
}
.cal-type-tag.t-tournament { color: var(--agf-gold); border-color: rgba(184,150,90,.4); }
.cal-type-tag.t-deadline { color: var(--rag-red); border-color: rgba(216,89,73,.4); }
.cal-type-tag.t-meeting { color: var(--primary); border-color: rgba(127,211,209,.4); }
.cal-init-tag {
background: var(--primary-25);
color: var(--primary);
border: 1px solid rgba(127,211,209,.2);
}
.cal-status-tag.s-now {
background: rgba(47,179,107,.15);
color: var(--rag-green);
border: 1px solid rgba(47,179,107,.35);
}
.cal-status-tag.s-soon {
background: var(--card);
color: var(--text-muted);
border: 1px solid var(--border-strong);
}
.cal-status-tag.s-ended {
background: transparent;
color: var(--text-faint);
border: 1px solid var(--border);
}
.cal-status-tag.s-tbc {
background: var(--card);
color: var(--agf-gold);
border: 1px solid rgba(184,150,90,.4);
}
.cal-cat-tag {
display: inline-flex;
align-items: center;
font-size: 10.5px;
font-weight: 700;
padding: 3px 8px;
border-radius: 6px;
letter-spacing: .02em;
background: var(--primary-25);
color: var(--text-2);
border: 1px solid var(--border-strong);
}
@media (max-width: 1100px) {
.cal-grid { grid-template-columns: 1fr; }
.cal-list.grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.cal-day { min-height: 48px; padding: 5px; }
.cal-day-num { font-size: 11.5px; }
.cal-wd { font-size: 9.5px; padding: 7px 2px; }
}
/* ============== EXEC PERIOD SELECTOR ============== */
.exec-asof {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
padding: 5px 10px;
background: var(--card);
border: 1px solid var(--border-strong);
border-radius: 8px;
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
color: var(--text-muted);
}
.exec-asof b {
color: var(--primary);
font-weight: 700;
font-family: inherit;
}
.exec-asof svg { color: var(--primary); }
.exec-period {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.exec-period-label {
font-size: 12px;
color: var(--text-muted);
font-weight: 600;
}
.exec-quarter-seg {
display: inline-flex;
background: var(--card);
border: 1px solid var(--border-strong);
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.exec-quarter-seg button {
font: inherit;
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
font-weight: 700;
padding: 7px 14px;
border-radius: 7px;
background: transparent;
border: 0;
color: var(--text-muted);
letter-spacing: .02em;
cursor: pointer;
min-width: 42px;
}
.exec-quarter-seg button:hover { color: var(--text); }
.exec-quarter-seg button.active {
background: var(--primary);
color: var(--on-primary);
}
.exec-year-sel {
font: inherit;
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
font-weight: 700;
padding-block: 7px;
padding-inline-start: 12px;
padding-inline-end: 28px;
background: var(--card);
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left 10px center;
border: 1px solid var(--border-strong);
border-radius: 10px;
color: var(--text);
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
[dir="ltr"] .exec-year-sel { background-position: right 10px center; }
.exec-year-sel:focus { border-color: var(--primary); }
.exec-year-sel option { background: var(--card); color: var(--text); }
/* ============== KPI / INIT DETAIL MODAL ============== */
.kpi-detail, .init-detail { display: flex; flex-direction: column; gap: 22px; }
.kpi-detail-head, .init-detail-head {
display: flex; flex-direction: column; gap: 10px;
}
.kpi-detail-tags, .init-detail-tags {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.init-detail-tags .init-detail-spacer { flex: 1; }
.init-detail-pillar {
font-size: 13px;
font-weight: 700;
color: var(--primary);
margin-bottom: 4px;
}
.init-detail-owner {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; color: var(--text-muted);
}
.kpi-detail-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.kpi-detail-stat {
padding: 14px 16px;
background: var(--card-2);
border: 1px solid var(--border);
border-radius: 12px;
}
.kds-label {
font-family: "IBM Plex Mono", monospace;
font-size: 10px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
margin-bottom: 8px;
}
.kds-value {
font-size: 22px;
font-weight: 800;
color: var(--text);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.kds-value.sm { font-size: 15px; padding-top: 6px; }
.kds-value.tgt { color: var(--primary); }
.kds-value .su { font-size: 13px; color: var(--text-muted); margin-inline-start: 3px; font-weight: 600; }
.kds-sub {
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
}
.kpi-detail-section, .init-detail-section { display: flex; flex-direction: column; gap: 12px; }
.kds-detail-text {
margin: 0;
font-size: 13px;
line-height: 1.7;
color: var(--text);
background: var(--card-2);
border-radius: 10px;
padding: 12px 14px;
}
.kpi-detail-note {
display: block;
margin-top: 3px;
font-size: 11px;
font-weight: 600;
color: var(--text-2);
}
.ikr-detail {
margin-top: 4px;
font-size: 11.5px;
line-height: 1.55;
color: var(--text-2);
}
.kds-section-title {
font-size: 13px;
font-weight: 800;
color: var(--text);
margin: 0;
letter-spacing: -.01em;
}
/* SVG chart */
.kpi-chart-wrap {
background: var(--card-2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
}
.kpi-chart {
width: 100%;
height: auto;
display: block;
}
.kpi-chart-legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 18px;
margin-top: 12px;
font-size: 11px;
color: var(--text-muted);
}
.lg-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: "IBM Plex Mono", monospace;
}
.lg-swatch {
width: 12px; height: 12px;
border-radius: 3px;
}
.lg-line {
width: 18px; height: 2px;
background: var(--primary);
border-radius: 2px;
}
.lg-line.tgt {
background: repeating-linear-gradient(to right, var(--primary) 0 5px, transparent 5px 9px);
height: 2px;
}
.lg-line.base {
background: repeating-linear-gradient(to right, var(--text-faint) 0 3px, transparent 3px 7px);
height: 2px;
}
/* Targets row */
.kpi-targets-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.kt-cell {
padding: 12px;
background: var(--card-2);
border: 1px solid var(--border);
border-radius: 10px;
text-align: center;
}
.kt-y {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
color: var(--text-muted);
font-weight: 700;
letter-spacing: .06em;
margin-bottom: 6px;
text-transform: uppercase;
}
.kt-v {
font-size: 15px;
font-weight: 800;
color: var(--text);
font-variant-numeric: tabular-nums;
}
/* Initiative KPI list */
.init-kpi-list {
display: flex; flex-direction: column; gap: 8px;
}
.init-kpi-row {
display: grid;
grid-template-columns: 1.4fr 1fr auto;
align-items: center;
gap: 16px;
padding: 14px 16px;
background: var(--card-2);
border: 1px solid var(--border);
border-radius: 11px;
font-family: inherit;
text-align: start;
color: var(--text);
cursor: pointer;
transition: all .12s;
}
.init-kpi-row:hover {
border-color: var(--primary);
background: var(--primary-25);
}
.ikr-name { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ikr-meta { font-size: 11.5px; color: var(--text-muted); }
.ikr-bar {
display: flex; align-items: center; gap: 10px;
}
.ikr-bar .bar { flex: 1; }
.ikr-pct {
font-family: "IBM Plex Mono", monospace;
font-size: 11.5px;
font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
min-width: 36px;
text-align: end;
}
/* Status pills / dots */
.status-dot {
display: inline-block;
width: 10px; height: 10px; border-radius: 50%;
margin-top: 4px;
}
.status-dot.s-pending { background: var(--rag-yellow); }
.status-dot.s-approved { background: var(--rag-green); }
.status-dot.s-rejected { background: var(--rag-red); }
.status-pill {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 5px;
margin-inline-start: 6px;
letter-spacing: .02em;
vertical-align: middle;
}
.status-pill.s-pending {
background: rgba(224,169,61,.15);
color: var(--rag-yellow);
border: 1px solid rgba(224,169,61,.35);
}
.status-pill.s-approved {
background: rgba(47,179,107,.15);
color: var(--rag-green);
border: 1px solid rgba(47,179,107,.35);
}
.status-pill.s-rejected {
background: rgba(216,89,73,.15);
color: var(--rag-red);
border: 1px solid rgba(216,89,73,.35);
}
.reject-note {
margin-top: 4px !important;
padding: 6px 10px;
background: rgba(216,89,73,.08);
border-inline-start: 2px solid var(--rag-red);
border-radius: 6px;
color: var(--text-2);
font-size: 12px;
}
.risk-dot {
display: inline-block;
width: 10px; height: 10px; border-radius: 50%;
margin-top: 4px;
}
.risk-dot.lvl-high { background: var(--rag-red); }
.risk-dot.lvl-medium { background: var(--rag-yellow); }
.risk-dot.lvl-low { background: var(--rag-grey); }
.list.compact .li { padding: 10px 0; }
.list.compact .li p { font-size: 12.5px; }
@media (max-width: 720px) {
.kpi-detail-grid { grid-template-columns: repeat(2, 1fr); }
.kpi-targets-row { grid-template-columns: repeat(3, 1fr); }
.init-kpi-row { grid-template-columns: 1fr; gap: 10px; }
}
/* ============== OWNER TASKS ============== */
.tasks-meta {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.tasks-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
background: rgba(216,89,73,.12);
border: 1px solid rgba(216,89,73,.35);
color: var(--rag-red);
border-radius: 9px;
font-size: 12px;
font-weight: 700;
}
.tasks-badge-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--rag-red);
box-shadow: 0 0 0 3px rgba(216,89,73,.2);
}
.tasks-badge.soft {
background: rgba(224,169,61,.1);
border-color: rgba(224,169,61,.35);
color: var(--rag-yellow);
}
.tasks-list {
display: flex; flex-direction: column;
}
.task-row {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 22px;
border-bottom: 1px solid var(--border);
}
.task-row:last-child { border-bottom: 0; }
.task-info { flex: 1; min-width: 0; }
.task-tags {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.task-name {
font-size: 14px;
font-weight: 700;
color: var(--text);
margin-bottom: 4px;
}
.task-meta {
font-size: 11.5px;
color: var(--text-muted);
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
align-items: center;
}
/* ============== ADMIN APPROVALS ============== */
.approvals-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.approval-card {
padding: 20px 22px;
display: flex;
flex-direction: column;
gap: 16px;
}
.approval-head {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--border);
}
.approval-head-left {
display: flex;
align-items: center;
gap: 14px;
flex: 1;
min-width: 0;
}
.approval-kpi-name {
font-size: 15px;
font-weight: 800;
color: var(--text);
margin-bottom: 3px;
}
.approval-init {
font-size: 12px;
color: var(--text-muted);
}
.approval-stats {
display: grid;
grid-template-columns: 1fr auto 1fr 1fr;
gap: 12px;
align-items: stretch;
}
.approval-stat {
padding: 14px;
background: var(--card-2);
border: 1px solid var(--border);
border-radius: 11px;
}
.approval-stat.highlight {
background: var(--primary-50);
border-color: var(--primary);
}
.approval-stat.highlight .kds-value { color: var(--primary-light); }
.approval-arrow {
display: grid; place-items: center;
color: var(--text-muted);
padding: 0 4px;
}
[dir="rtl"] .approval-arrow svg { transform: scaleX(-1); }
.approval-meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
font-size: 12px;
color: var(--text-muted);
padding-bottom: 4px;
border-bottom: 1px dashed var(--border);
}
.approval-meta span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.approval-body { display: flex; flex-direction: column; gap: 6px; }
.approval-body p {
margin: 0;
font-size: 13px;
color: var(--text-2);
line-height: 1.55;
padding: 10px 12px;
background: var(--card-2);
border-inline-start: 2px solid var(--primary);
border-radius: 8px;
}
.evidence-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.approval-actions {
display: flex;
align-items: center;
gap: 10px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.approval-note {
flex: 1;
padding: 10px 14px;
background: var(--card-2);
border: 1px solid var(--border-strong);
border-radius: 9px;
color: var(--text);
font: inherit;
font-size: 13px;
outline: none;
}
.approval-note:focus { border-color: var(--primary); }
.approval-note::placeholder { color: var(--text-faint); }
@media (max-width: 780px) {
.approval-stats { grid-template-columns: 1fr; }
.approval-arrow { display: none; }
.approval-actions { flex-direction: column; align-items: stretch; }
}
/* ============== NOTIFICATION BELL ============== */
.bell-wrap { position: relative; }
.bell-btn {
width: 36px; height: 36px; border-radius: 10px;
background: var(--card);
border: 1px solid var(--border-strong);
color: var(--text-2);
display: grid; place-items: center;
position: relative;
cursor: pointer;
}
.bell-btn:hover { color: var(--primary); border-color: var(--primary); }
.bell-badge {
position: absolute;
top: -4px;
inset-inline-end: -4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: var(--rag-red);
color: #fff;
font-size: 10px;
font-weight: 800;
display: grid;
place-items: center;
font-family: "IBM Plex Mono", monospace;
letter-spacing: -.02em;
border: 2px solid var(--bg);
}
.bell-panel {
position: absolute;
top: calc(100% + 8px);
inset-inline-end: 0;
width: 340px;
max-height: 480px;
background: var(--card);
border: 1px solid var(--border-strong);
border-radius: 14px;
box-shadow: 0 20px 50px -12px rgba(0,0,0,.6);
z-index: 50;
display: flex;
flex-direction: column;
overflow: hidden;
}
.bell-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
font-size: 13.5px;
font-weight: 700;
color: var(--text);
}
.bell-mark-all {
background: transparent;
border: 0;
color: var(--primary);
font: inherit;
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
padding: 0;
}
.bell-mark-all:hover { text-decoration: underline; }
.bell-list {
flex: 1;
overflow-y: auto;
max-height: 400px;
}
.bell-item {
display: flex;
gap: 12px;
width: 100%;
padding: 12px 16px;
background: transparent;
border: 0;
border-bottom: 1px solid var(--border);
text-align: start;
font-family: inherit;
color: var(--text);
cursor: pointer;
transition: background .12s;
}
.bell-item:hover { background: var(--card-2); }
.bell-item.unread { background: var(--primary-25); }
.bell-item.unread:hover { background: var(--primary-50); }
.bell-item:last-child { border-bottom: 0; }
.bell-dot {
flex-shrink: 0;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--text-faint);
margin-top: 7px;
}
.bell-dot.k-update_pending { background: var(--rag-yellow); }
.bell-dot.k-update_approved { background: var(--rag-green); }
.bell-dot.k-update_rejected { background: var(--rag-red); }
.bell-dot.k-support_request { background: var(--primary); }
.bell-dot.k-kpi_red { background: var(--rag-red); }
.bell-dot.k-access_request { background: var(--agf-gold); }
.bell-item.unread .bell-dot { box-shadow: 0 0 0 3px rgba(127,211,209,.2); }
.bell-item-body { flex: 1; min-width: 0; }
.bell-item-text {
font-size: 12.5px;
font-weight: 600;
color: var(--text);
line-height: 1.5;
margin-bottom: 4px;
}
.bell-item.unread .bell-item-text { font-weight: 700; }
.bell-item-time {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
color: var(--text-muted);
}
/* ============== RISK MATRIX ============== */
.risks-view-seg {
display: inline-flex;
background: var(--card);
border: 1px solid var(--border-strong);
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.risks-view-seg button {
display: inline-flex;
align-items: center;
gap: 6px;
font: inherit;
font-size: 12px;
font-weight: 600;
padding: 7px 12px;
border-radius: 7px;
background: transparent;
border: 0;
color: var(--text-muted);
cursor: pointer;
}
.risks-view-seg button:hover { color: var(--text); }
.risks-view-seg button.active {
background: var(--primary);
color: var(--on-primary);
}
/* ============== ORG PAGES (Finance / Governance / Meetings) ============== */
.org-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
border-bottom: 1px solid var(--border-strong);
margin: 4px 0 22px;
}
.org-tab {
display: inline-flex;
align-items: center;
gap: 8px;
font: inherit;
font-size: 13.5px;
font-weight: 600;
padding: 11px 16px;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
color: var(--text-muted);
cursor: pointer;
transition: color .15s ease, border-color .15s ease;
}
.org-tab:hover { color: var(--text); }
.org-tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
.org-tab-panel { animation: fadeIn .2s ease; }
.org-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
padding: 56px 28px;
}
.org-empty-ic {
width: 64px;
height: 64px;
border-radius: 16px;
display: grid;
place-items: center;
background: var(--primary-50);
color: var(--primary);
}
.org-empty h3 { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }
.org-empty p { font-size: 13.5px; color: var(--text-muted); max-width: 460px; margin: 0; line-height: 1.6; }
/* ---- Bylaws / Statute (digital, tabbed) ---- */
.bylaws { display: flex; flex-direction: column; gap: 16px; }
.bylaws-doc-head {
display: flex; align-items: center; gap: 14px;
padding: 16px 18px;
background: linear-gradient(120deg, var(--primary-50), transparent);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.bylaws-doc-ic {
flex: none; width: 46px; height: 46px; border-radius: 12px;
display: grid; place-items: center;
background: var(--primary); color: var(--on-primary);
}
.bylaws-doc-title { margin: 0; font-size: 17px; font-weight: 800; color: var(--text); }
.bylaws-doc-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.bylaws-search {
display: flex; align-items: center; gap: 10px;
padding: 0 14px;
background: var(--card);
border: 1px solid var(--border-strong);
border-radius: 12px;
color: var(--text-muted);
}
.bylaws-search input {
flex: 1; border: 0; background: transparent; outline: none;
font: inherit; font-size: 14px; color: var(--text);
padding: 12px 0;
}
.bylaws-search-clear {
display: inline-flex; align-items: center; gap: 5px;
font: inherit; font-size: 12.5px; font-weight: 600;
border: 0; background: transparent; color: var(--primary);
cursor: pointer; white-space: nowrap;
}
.bylaws-body { display: grid; grid-template-columns: 270px 1fr; gap: 18px; align-items: start; }
.bylaws-nav {
position: sticky; top: 8px;
background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 12px; overflow: hidden;
}
.bylaws-nav-title {
font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--text-muted);
padding: 4px 8px 10px;
}
.bylaws-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bylaws-nav-item {
display: flex; align-items: center; gap: 10px; width: 100%;
font: inherit; text-align: start; cursor: pointer;
padding: 9px 10px; border: 0; border-radius: 10px;
background: transparent; color: var(--text-muted);
transition: background .15s ease, color .15s ease;
}
.bylaws-nav-item:hover { background: var(--primary-50); color: var(--text); }
.bylaws-nav-item.active { background: var(--primary); color: var(--on-primary); }
.bylaws-nav-n {
flex: none; width: 22px; height: 22px; border-radius: 7px;
display: grid; place-items: center;
font-size: 12px; font-weight: 700;
background: var(--primary-50); color: var(--primary);
}
.bylaws-nav-item.active .bylaws-nav-n { background: rgba(255,255,255,.22); color: var(--on-primary); }
.bylaws-nav-label { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.35; }
.bylaws-nav-count { flex: none; font-size: 11.5px; font-weight: 700; opacity: .7; }
.bylaws-content { min-width: 0; }
.bylaws-ch-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.bylaws-ch-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--text); }
.bylaws-ch-count {
font-size: 12px; font-weight: 700; color: var(--primary);
background: var(--primary-50); padding: 3px 10px; border-radius: 999px;
}
.bylaws-ch-intro {
margin: 0 0 14px; font-size: 14px; line-height: 1.8; color: var(--text-muted);
border-inline-start: 3px solid var(--primary);
padding-inline-start: 12px;
}
.bylaws-results-head {
font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 12px;
}
.bylaws-empty {
padding: 40px 20px; text-align: center;
font-size: 14px; color: var(--text-muted);
background: var(--card); border: 1px dashed var(--border-strong); border-radius: var(--radius);
}
.bylaw-cards { display: flex; flex-direction: column; gap: 12px; }
.bylaw-card {
background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px 18px;
}
.bylaw-card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bylaw-num {
flex: none; font-size: 12px; font-weight: 800; color: var(--primary);
background: var(--primary-50); padding: 3px 10px; border-radius: 8px;
}
.bylaw-card-title { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--text); line-height: 1.5; }
.bylaw-crumb { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.bylaw-card-body { margin-top: 10px; }
.bylaw-para, .bylaw-lead { margin: 0; font-size: 14px; line-height: 1.9; color: var(--text); }
.bylaw-lead { font-weight: 600; margin-bottom: 8px; }
.bylaw-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.bylaw-list li {
position: relative; font-size: 14px; line-height: 1.85; color: var(--text);
padding-inline-start: 18px;
}
.bylaw-list li::before {
content: ""; position: absolute; inset-inline-start: 4px; top: 11px;
width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
}
.bylaw-defs { width: 100%; }
.bylaw-defs td { vertical-align: top; line-height: 1.8; }
.bylaw-term { font-weight: 700; color: var(--text); white-space: nowrap; }
@media (max-width: 760px) {
.bylaws-body { grid-template-columns: 1fr; }
.bylaws-nav { position: static; }
}
/* ---- Organizational chart ---- */
.orgchart {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 4px 4px;
}
.orgc-single {
width: 100%;
max-width: 720px;
}
.orgc-duo {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 360px));
justify-content: center;
gap: 18px;
}
@media (max-width: 680px) {
.orgc-duo { grid-template-columns: 1fr; }
}
.orgc-teams {
width: 100%;
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
grid-auto-rows: 1fr;
gap: 16px;
}
.orgc-teams > * { grid-column: span 2; }
@media (max-width: 1100px) {
.orgc-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.orgc-teams > * { grid-column: auto; }
}
@media (max-width: 680px) {
.orgc-teams { grid-template-columns: 1fr; }
}
.orgc-link {
width: 2px;
height: 30px;
background: linear-gradient(var(--agf-fountain), rgba(92, 178, 177, 0));
opacity: 0.7;
}
.orgc-caption {
margin: 6px 0 16px;
font-size: 13px;
font-weight: 700;
color: var(--agf-fountain);
letter-spacing: 0.2px;
}
.orgc-node {
width: 100%;
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
animation: fadeIn 0.4s ease both;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.orgc-node:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
}
.orgc-node-head {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 18px;
font-weight: 800;
font-size: 15.5px;
color: #fff;
}
.orgc-node-ic {
width: 30px;
height: 30px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.18);
flex-shrink: 0;
}
.orgc-primary .orgc-node-head {
background: linear-gradient(135deg, #3a9c9a 0%, #205856 100%);
}
.orgc-secondary .orgc-node-head {
background: linear-gradient(135deg, #2f8583 0%, #1d4d4c 100%);
font-size: 15px;
}
.orgc-team .orgc-node-head {
background: linear-gradient(135deg, var(--agf-gold) 0%, #8a6f3e 100%);
font-size: 12.5px;
line-height: 1.45;
padding: 11px 14px;
min-height: 72px;
}
.orgc-node-list {
list-style: none;
margin: 0;
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 9px;
}
.orgc-team .orgc-node-list { padding: 12px 14px; }
.orgc-node-list li {
position: relative;
padding-inline-start: 18px;
font-size: 12.5px;
line-height: 1.65;
color: var(--text-muted);
}
.orgc-node-list li::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--agf-fountain);
}
.orgc-team .orgc-node-list li::before { background: var(--agf-gold); }
@media (max-width: 680px) {
.orgc-duo { grid-template-columns: 1fr; }
}
/* ---- Subscription status (Finance) ---- */
.subs-year {
font-size: 13px; font-weight: 700; color: var(--text-2);
letter-spacing: .02em; margin: 2px 0 14px;
}
.subs-summary {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 12px; margin-bottom: 18px;
}
.subs-stat {
background: var(--card-2); border: 1px solid var(--border);
border-radius: 12px; padding: 14px 16px;
border-inline-start: 3px solid var(--rag-grey);
}
.subs-stat.t-total { border-inline-start-color: var(--agf-gold); }
.subs-stat.t-paid { border-inline-start-color: var(--rag-green); }
.subs-stat.t-pending { border-inline-start-color: var(--rag-yellow); }
.subs-stat.t-overdue { border-inline-start-color: var(--rag-red); }
.subs-stat-n { font-size: 26px; font-weight: 800; line-height: 1; color: var(--text); }
.subs-stat-l { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.subs-table { margin-top: 4px; }
.subs-country { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); }
.subs-flag { display: inline-flex; flex: 0 0 auto; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); }
.subs-flag img { display: block; }
.subs-fed { color: var(--text-2); }
.subs-date { color: var(--text-2); }
.subs-tag {
display: inline-flex; align-items: center; gap: 7px;
padding: 4px 11px; border-radius: 999px;
font-size: 12px; font-weight: 700; white-space: nowrap;
}
.subs-dot { width: 7px; height: 7px; border-radius: 50%; }
.subs-tag.t-paid { color: var(--rag-green); background: var(--rag-green-bg); }
.subs-tag.t-pending { color: var(--rag-yellow); background: var(--rag-yellow-bg); }
.subs-tag.t-overdue { color: var(--rag-red); background: var(--rag-red-bg); }
.subs-tag.t-paid .subs-dot { background: var(--rag-green); }
.subs-tag.t-pending .subs-dot { background: var(--rag-yellow); }
.subs-tag.t-overdue .subs-dot { background: var(--rag-red); }
@media (max-width: 680px) {
.subs-summary { grid-template-columns: repeat(2, 1fr); }
.subs-fed { display: none; }
}
/* ---- Meetings & Minutes ---- */
.meet-list { display: flex; flex-direction: column; gap: 12px; }
.meet-card {
display: flex; align-items: stretch; gap: 16px; text-align: start;
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 16px; cursor: pointer; width: 100%;
transition: border-color .15s, transform .15s, box-shadow .15s;
}
.meet-card:hover { border-color: var(--agf-gold); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.meet-date {
flex: 0 0 auto; width: 78px; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 2px;
background: var(--card-2); border-radius: 10px; padding: 10px 6px;
}
.meet-date-d { font-size: 28px; font-weight: 800; line-height: 1; color: var(--agf-gold); }
.meet-date-m { font-size: 11px; color: var(--text-muted); font-family: "IBM Plex Mono", monospace; }
.meet-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.meet-card-top { display: flex; align-items: center; gap: 10px; }
.meet-ref { font-size: 11.5px; font-family: "IBM Plex Mono", monospace; color: var(--text-muted); letter-spacing: .03em; }
.meet-card-title { font-size: 15.5px; font-weight: 700; color: var(--text); }
.meet-card-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--text-2); }
.meet-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.meet-card-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.meet-chip {
font-size: 11.5px; color: var(--text-2); background: var(--card-2);
border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
}
.meet-chip b { color: var(--text); font-weight: 800; }
.meet-card-arrow { flex: 0 0 auto; display: flex; align-items: center; color: var(--text-muted); }
.meet-card:hover .meet-card-arrow { color: var(--agf-gold); }
.meet-mstatus { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.meet-mstatus.s-completed { color: var(--rag-green); background: var(--rag-green-bg); }
.meet-mstatus.s-upcoming { color: var(--rag-yellow); background: var(--rag-yellow-bg); }
/* detail */
.meet-detail { display: flex; flex-direction: column; gap: 18px; }
.meet-head-card { padding: 20px 22px; }
.meet-head-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.meet-title { font-size: 21px; font-weight: 800; color: var(--text); margin: 0 0 12px; }
.meet-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--text-2); padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.meet-meta-i { display: inline-flex; align-items: center; gap: 6px; }
.meet-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.meet-role { display: flex; flex-direction: column; gap: 3px; }
.meet-role-l { font-size: 11.5px; color: var(--text-muted); }
.meet-role-v { font-size: 13.5px; font-weight: 600; color: var(--text); }
.meet-section { }
.meet-sec-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 12px; }
.meet-sec-title svg { color: var(--agf-gold); }
.meet-sec-count { margin-inline-start: auto; font-size: 11.5px; font-weight: 600; color: var(--text-muted); background: var(--card-2); border-radius: 999px; padding: 3px 10px; }
.meet-agenda { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; }
.meet-agenda li { font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.meet-decisions { display: flex; flex-direction: column; gap: 10px; }
.meet-decision {
background: var(--card-2); border: 1px solid var(--border);
border-inline-start: 3px solid var(--rag-green);
border-radius: 10px; padding: 12px 14px;
}
.meet-decision-no { display: inline-block; font-size: 11px; font-weight: 800; color: var(--rag-green); letter-spacing: .04em; margin-bottom: 5px; }
.meet-decision p { margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.6; }
.meet-decision-owner { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.meet-decision-owner svg { color: var(--agf-gold); }
.meet-attendees { display: flex; flex-wrap: wrap; gap: 8px; }
.meet-attendee { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); background: var(--card-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; }
.meet-attendee svg { color: var(--agf-gold); flex-shrink: 0; }
.meet-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.meet-file-empty { color: var(--text-muted); }
.meet-file-info { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text); transition: border-color .15s, background .15s; }
.meet-file-info:hover { border-color: var(--agf-gold); background: var(--card); }
.meet-file-info svg { color: var(--agf-gold); flex-shrink: 0; }
.meet-file-name { font-size: 13px; font-weight: 600; }
.meet-file-view { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--agf-gold); margin-inline-start: 6px; }
.meet-no-file { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.meet-no-file svg { color: var(--text-muted); }
.meet-file-remove { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--rag-red); background: var(--rag-red-bg); border: 1px solid transparent; border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.meet-file-remove:hover { border-color: var(--rag-red); }
.meet-file-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.meet-upload-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #1a1a1a; background: var(--agf-gold); border: none; border-radius: 8px; padding: 9px 16px; cursor: pointer; }
.meet-upload-btn:hover { filter: brightness(1.05); }
.meet-file-hint { font-size: 11.5px; color: var(--text-muted); }
.meet-file-warn { margin: 10px 0 0; font-size: 12px; color: var(--rag-yellow); line-height: 1.5; }
.meet-actions td.meet-task { font-weight: 600; color: var(--text); }
.meet-actions td.meet-owner { color: var(--text-2); }
.meet-due { display: inline-flex; align-items: center; gap: 5px; }
.meet-astatus { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.meet-adot { width: 7px; height: 7px; border-radius: 50%; }
.meet-astatus.s-done { color: var(--rag-green); background: var(--rag-green-bg); }
.meet-astatus.s-in_progress { color: var(--rag-yellow); background: var(--rag-yellow-bg); }
.meet-astatus.s-overdue { color: var(--rag-red); background: var(--rag-red-bg); }
.meet-astatus.s-pending { color: var(--rag-grey); background: var(--rag-grey-bg); }
.meet-astatus.s-done .meet-adot { background: var(--rag-green); }
.meet-astatus.s-in_progress .meet-adot { background: var(--rag-yellow); }
.meet-astatus.s-overdue .meet-adot { background: var(--rag-red); }
.meet-astatus.s-pending .meet-adot { background: var(--rag-grey); }
/* subscriptions inline edit (admin) */
.subs-edit-hint {
display: flex; align-items: center; gap: 8px;
font-size: 12px; color: var(--text-2);
background: var(--card-2); border: 1px solid var(--border);
border-radius: 8px; padding: 9px 12px; margin-bottom: 12px;
}
.subs-edit-hint svg { color: var(--agf-gold); flex-shrink: 0; }
.subs-edit-select, .subs-edit-date {
font: inherit; font-size: 12.5px; color: var(--text);
background: var(--card); border: 1px solid var(--border-strong);
border-radius: 7px; padding: 6px 9px; max-width: 100%;
}
.subs-edit-select:focus, .subs-edit-date:focus { outline: none; border-color: var(--agf-gold); }
.t-unset { color: var(--text-muted); }
/* meetings admin controls */
.meet-detail-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.meet-edit-btn { display: inline-flex; align-items: center; gap: 6px; }
.meet-admin-bar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.meet-admin-bar .btn { display: inline-flex; align-items: center; gap: 6px; }
.meet-item { position: relative; display: flex; align-items: stretch; gap: 8px; }
.meet-item .meet-card { flex: 1 1 auto; }
.meet-card-admin { display: flex; flex-direction: column; gap: 8px; justify-content: center; flex: 0 0 auto; }
.meet-admin-act {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 9px; cursor: pointer;
background: var(--card-2); border: 1px solid var(--border-strong); color: var(--text-2);
transition: border-color .15s, color .15s, background .15s;
}
.meet-admin-act:hover { border-color: var(--agf-gold); color: var(--agf-gold); }
.meet-admin-act.danger:hover { border-color: var(--rag-red); color: var(--rag-red); background: var(--rag-red-bg); }
.meet-delete-msg { font-size: 14px; color: var(--text); line-height: 1.6; margin: 0; }
.btn.danger { background: var(--rag-red); color: #fff; border-color: transparent; }
.btn.danger:hover { filter: brightness(1.05); }
/* meeting form */
.mf { display: flex; flex-direction: column; gap: 16px; }
.mf-row { display: flex; flex-wrap: wrap; gap: 14px; }
.mf-row > .mf-field, .mf-col { flex: 1 1 160px; min-width: 140px; }
.mf-col { display: flex; }
.mf-col .mf-field { flex: 1 1 auto; }
.mf-field { display: flex; flex-direction: column; gap: 6px; }
.mf-field > label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.mf-field input, .mf-field select, .mf-bi input, .mf-list-row input, .mf-list-row select {
font: inherit; font-size: 13.5px; color: var(--text);
background: var(--card); border: 1px solid var(--border-strong);
border-radius: 8px; padding: 9px 11px; width: 100%;
}
.mf-field input:focus, .mf-field select:focus, .mf-bi input:focus,
.mf-list-row input:focus, .mf-list-row select:focus { outline: none; border-color: var(--agf-gold); }
.mf-bi { display: flex; gap: 10px; }
.mf-bi input { flex: 1 1 0; min-width: 0; }
.mf-list { border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.mf-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mf-list-head h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.btn.ghost.sm { font-size: 12px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 5px; }
.mf-list-block { display: flex; flex-direction: column; gap: 8px; background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.mf-list-row { display: flex; align-items: center; gap: 10px; }
.mf-list-row > input, .mf-list-row > select { flex: 1 1 0; min-width: 0; }
.mf-del {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
background: var(--card); border: 1px solid var(--border-strong); color: var(--text-muted);
transition: border-color .15s, color .15s;
}
.mf-del:hover { border-color: var(--rag-red); color: var(--rag-red); }
.mf-del-spacer { flex: 0 0 auto; width: 34px; }
.mf-textarea {
width: 100%; box-sizing: border-box; resize: vertical; min-height: 68px;
font: inherit; line-height: 1.6; color: var(--text);
background: var(--card-2); border: 1px solid var(--border-strong);
border-radius: 9px; padding: 9px 12px;
}
.mf-textarea:focus { outline: none; border-color: var(--agf-gold); }
/* ---- Media Reports (monthly magazine) ---- */
.media-grid {
display: grid; gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.media-item { position: relative; display: flex; }
.media-card {
flex: 1 1 auto; display: flex; flex-direction: column; text-align: start;
background: var(--card); border: 1px solid var(--border); border-radius: 14px;
overflow: hidden; cursor: pointer; padding: 0;
transition: border-color .15s, transform .15s, box-shadow .15s;
}
.media-card:hover { border-color: var(--agf-gold); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.media-cover {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
height: 120px; color: var(--agf-gold);
background: linear-gradient(135deg, rgba(191,161,74,.16), rgba(191,161,74,.04));
border-bottom: 1px solid var(--border);
}
.media-cover-month { font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: .2px; }
.media-card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 15px 15px; flex: 1 1 auto; }
.media-card-title { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.4; }
.media-card-sum {
margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.55;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.media-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; flex-wrap: wrap; }
.media-card-date { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); }
.media-card-tag {
display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
color: var(--agf-gold); background: rgba(191,161,74,.12); border-radius: 7px; padding: 4px 9px;
}
.media-card-tag.empty { color: var(--text-muted); background: var(--card-2); font-weight: 600; }
.media-item .meet-card-admin { position: absolute; top: 8px; inset-inline-end: 8px; flex-direction: row; gap: 6px; }
.media-item .meet-admin-act { width: 32px; height: 32px; background: var(--card); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.media-detail .meet-head-card { padding: 20px 22px; }
.media-badge {
display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
color: var(--agf-gold); background: rgba(191,161,74,.12); border-radius: 8px; padding: 5px 11px;
}
.media-summary { margin: 12px 0 0; font-size: 14px; color: var(--text-2); line-height: 1.7; }
.media-viewer-wrap {
background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.media-viewer-bar {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--card-2);
}
.media-viewer-name { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); min-width: 0; }
.media-viewer-name svg { color: var(--agf-gold); flex-shrink: 0; }
.media-viewer-links { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.media-viewer-links a {
display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600;
color: var(--agf-gold); text-decoration: none;
}
.media-viewer-links a:hover { text-decoration: underline; }
.media-pdf { display: block; width: 100%; height: 78vh; min-height: 480px; border: 0; background: #333; }
.media-pdf-fallback {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
height: 100%; min-height: 300px; padding: 30px; text-align: center; color: var(--text-2);
}
.media-empty { text-align: center; }
/* ---- Magazine book viewer (pdf.js) ---- */
.mag-book { background: var(--card, #1d2b2a); border-radius: 12px; padding: 14px 10px 10px; max-width: 900px; margin: 0 auto; }
.mag-book-spread { display: flex; flex-direction: row; gap: 4px; justify-content: center; align-items: flex-start; }
.mag-book-stage {
display: flex; align-items: center; justify-content: center; gap: 10px;
perspective: 1600px; min-height: 320px;
}
.mag-book-page {
position: relative; display: flex; align-items: center; justify-content: center;
max-width: 100%; border-radius: 6px; overflow: hidden;
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
transform-style: preserve-3d; backface-visibility: hidden;
}
.mag-book-canvas { display: block; max-width: 100%; height: auto; background: #fff; }
.mag-book-loading {
display: flex; align-items: center; justify-content: center;
min-height: 320px; min-width: 240px; color: var(--text-2); font-size: 14px; font-weight: 600;
}
.mag-book-page.flip-fwd { animation: magFlipFwd 0.48s ease; }
.mag-book-page.flip-back { animation: magFlipBack 0.48s ease; }
@keyframes magFlipFwd {
0% { transform: rotateY(0deg); opacity: 1; }
45% { transform: rotateY(-24deg) scale(0.985); opacity: 0.55; }
100% { transform: rotateY(0deg); opacity: 1; }
}
@keyframes magFlipBack {
0% { transform: rotateY(0deg); opacity: 1; }
45% { transform: rotateY(24deg) scale(0.985); opacity: 0.55; }
100% { transform: rotateY(0deg); opacity: 1; }
}
[dir="rtl"] .mag-book-page.flip-fwd { animation-name: magFlipBack; }
[dir="rtl"] .mag-book-page.flip-back { animation-name: magFlipFwd; }
.mag-book-nav {
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line, rgba(255,255,255,0.12));
background: rgba(255, 255, 255, 0.05); color: var(--text); cursor: pointer;
transition: background 0.15s ease, opacity 0.15s ease;
}
.mag-book-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.mag-book-nav:disabled { opacity: 0.3; cursor: default; }
.mag-book-bar {
display: flex; align-items: center; justify-content: center; gap: 18px;
padding: 12px 6px 4px;
}
.mag-book-btn {
display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
border-radius: 999px; border: 1px solid var(--line, rgba(255,255,255,0.12));
background: transparent; color: var(--text); font-size: 12.5px; font-weight: 700; cursor: pointer;
transition: background 0.15s ease;
}
.mag-book-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.mag-book-btn:disabled { opacity: 0.35; cursor: default; }
.mag-book-count { font-size: 13px; font-weight: 700; color: var(--text-2); direction: ltr; }
@media (max-width: 680px) {
.mag-book-nav { display: none; }
.mag-book-stage { min-height: 220px; }
}
@media (max-width: 680px) {
.meet-roles { grid-template-columns: 1fr; }
.meet-date { width: 64px; }
.mf-bi { flex-direction: column; }
.media-grid { grid-template-columns: 1fr; }
.media-pdf { height: 68vh; }
}
.risk-legend {
display: flex; align-items: center; gap: 8px;
font-size: 11px; color: var(--text-muted);
flex-wrap: wrap;
}
.rl-cell {
width: 14px; height: 14px;
border-radius: 3px;
display: inline-block;
}
.rl-low { background: rgba(47,179,107,.4); border: 1px solid rgba(47,179,107,.6); }
.rl-mid { background: rgba(224,169,61,.4); border: 1px solid rgba(224,169,61,.6); }
.rl-high { background: rgba(216,89,73,.4); border: 1px solid rgba(216,89,73,.6); }
.rl-vhigh { background: rgba(216,89,73,.7); border: 1px solid rgba(216,89,73,.9); }
.risk-matrix {
display: grid;
grid-template-columns: 22px 1fr;
gap: 8px;
align-items: center;
}
.rm-yaxis-label {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 700;
color: var(--text-muted);
text-align: center;
align-self: stretch;
padding: 8px 0;
}
.rm-xaxis-label {
grid-column: 2;
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 700;
color: var(--text-muted);
text-align: center;
padding: 8px 0;
}
.rm-grid {
display: grid;
grid-template-columns: 28px repeat(5, 1fr);
gap: 6px;
}
.rm-corner { background: transparent; }
.rm-header {
font-family: "IBM Plex Mono", monospace;
font-size: 11.5px;
font-weight: 700;
color: var(--text-muted);
text-align: center;
align-self: center;
justify-self: center;
}
.rm-row-h { text-align: end; padding-inline-end: 6px; }
.rm-col-h { padding-bottom: 2px; }
.rm-cell {
position: relative;
min-height: 76px;
border-radius: 10px;
background: var(--card-2);
border: 1px solid var(--border);
padding: 8px 8px 22px;
display: flex;
flex-wrap: wrap;
gap: 4px;
align-content: flex-start;
}
.rm-cell.sev-low { background: rgba(47,179,107,.10); border-color: rgba(47,179,107,.3); }
.rm-cell.sev-mid { background: rgba(224,169,61,.12); border-color: rgba(224,169,61,.35); }
.rm-cell.sev-high { background: rgba(216,89,73,.14); border-color: rgba(216,89,73,.4); }
.rm-cell.sev-vhigh { background: rgba(216,89,73,.28); border-color: rgba(216,89,73,.6); }
.rm-count {
position: absolute;
top: 6px;
inset-inline-end: 8px;
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
color: var(--text-muted);
font-weight: 700;
}
.rm-risk {
display: inline-flex;
align-items: center;
padding: 3px 8px;
background: var(--card);
border: 1px solid var(--border-strong);
border-radius: 6px;
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
font-weight: 700;
color: var(--text);
letter-spacing: .04em;
}
.rm-more {
position: absolute;
bottom: 6px;
inset-inline-start: 8px;
font-size: 10px;
color: var(--text-muted);
font-weight: 700;
}
/* ============== COUNTRIES DASHBOARD ============== */
.stat.stat-active {
border-color: var(--primary);
background: var(--primary-25);
}
.countries-bars {
display: flex; flex-direction: column;
gap: 12px;
}
.cb-row {
display: grid;
grid-template-columns: 28px 28px 1.2fr 3fr auto;
align-items: center;
gap: 12px;
}
.cb-rank {
font-family: "IBM Plex Mono", monospace;
font-size: 11.5px;
font-weight: 700;
color: var(--text-muted);
text-align: center;
}
.cb-flag { font-size: 20px; line-height: 1; }
.cb-name {
font-size: 13px;
font-weight: 700;
color: var(--text);
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cb-bar-wrap {
height: 10px;
background: var(--card-2);
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
}
.cb-bar {
height: 100%;
background: var(--primary);
border-radius: 5px;
transition: width .3s ease;
}
.cb-bar.top {
background: linear-gradient(90deg, var(--agf-gold), var(--primary));
}
.cb-val {
font-family: "IBM Plex Mono", monospace;
font-size: 12.5px;
font-weight: 800;
color: var(--text);
min-width: 70px;
text-align: end;
font-variant-numeric: tabular-nums;
}
/* ============== LABEL / EYEBROW FONT OVERRIDE ==============
IBM Plex Mono looks awkward in Arabic (no case, monospace).
Use the body font with subtle letter-spacing for labels —
keep monospace only for actual numbers (tables, percents, dates). */
.kds-label,
.card-eyebrow,
.login-eyebrow,
.login-accounts-label,
.pa-meta,
table.tbl th,
.hmq-th,
.rm-yaxis-label,
.rm-xaxis-label,
.kpi-chart-legend .lg-item,
.cal-wd {
font-family: inherit !important;
text-transform: none !important;
letter-spacing: .01em !important;
}
/* In English, eyebrow labels look better in uppercase tracking */
[dir="ltr"] .card-eyebrow,
[dir="ltr"] .login-eyebrow,
[dir="ltr"] .login-accounts-label,
[dir="ltr"] .kds-label {
text-transform: uppercase !important;
letter-spacing: .08em !important;
}
.card-eyebrow,
.login-eyebrow,
.login-accounts-label {
font-size: 11.5px;
font-weight: 700;
}
.kds-label {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
}
.pa-meta {
font-size: 12px;
font-weight: 600;
}
table.tbl th, .hmq-th {
font-size: 11.5px;
font-weight: 700;
}
.cal-wd {
font-size: 11px;
font-weight: 700;
}
/* ============== PRINT ============== */
@media print {
html, body {
background: #ffffff !important;
color: #14302f !important;
}
body { background-image: none !important; }
.sidebar, .topbar, .tweaks-panel, .modal-backdrop, .toast,
.bell-wrap, .lang-toggle, .theme-btn, .sb-logout,
.exec-period, .page-head-right .btn,
.cal-filter, .cal-month-nav, .cal-today-btn { display: none !important; }
.shell { display: block; }
.main { width: 100%; }
.page { padding: 0; }
.card, .stat, .pp-card, .approval-card {
box-shadow: none !important;
background: #ffffff !important;
border-color: #cfd8d8 !important;
page-break-inside: avoid;
break-inside: avoid;
}
.pa-acc { page-break-inside: avoid; break-inside: avoid; }
.heatmap-q { page-break-inside: avoid; break-inside: avoid; }
h1, h2, h3, h4 { color: #14302f !important; }
.lede { color: #355352 !important; }
.muted { color: #6F8A88 !important; }
table.tbl th { color: #355352 !important; }
table.tbl td { color: #14302f !important; }
.stat-value, .pp-name, .card-title { color: #14302f !important; }
.card-eyebrow { color: #2E8B89 !important; }
.bar { background: #E0EFEF !important; }
.hmq-tile.grey { background: #E4EAEA !important; }
/* Force light bg so RAG fills stay readable */
@page { size: A4; margin: 12mm; }
}
/* ============== ABOUT THE FEDERATION ============== */
.af-section-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 17px;
font-weight: 700;
margin: 26px 0 14px;
color: var(--text);
}
.af-section-title svg { color: var(--agf-fountain); }
.af-section-sub {
margin: -8px 0 16px;
color: var(--text-muted);
font-size: 13px;
}
.af-org {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.af-org-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 18px;
width: 100%;
}
.af-org-row .af-leader {
flex: 0 1 480px;
max-width: 560px;
}
.af-org-row .af-leader-compact {
flex: 1 1 280px;
max-width: 320px;
padding: 22px;
gap: 14px;
}
.af-leader-compact .af-flag {
inset-inline-end: calc(50% - 62px);
width: 40px;
height: 40px;
}
.af-leader-compact .af-flag .flag-img { width: 28px; height: 20px; }
.af-leader-compact .af-name { font-size: 19px; }
.af-leader-compact .af-title { font-size: 13.5px; }
.af-leader-compact .af-bio { font-size: 13px; }
.af-leader {
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
padding: 30px;
}
.af-leader-body { position: relative; }
.af-info-edit {
position: absolute;
top: 0;
inset-inline-end: 0;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
background: var(--card-2, rgba(255, 255, 255, 0.04));
color: var(--agf-fountain);
cursor: pointer;
transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.af-info-edit:hover {
transform: scale(1.08);
filter: brightness(1.1);
background: rgba(92, 178, 177, 0.16);
}
.af-leader-edit { text-align: start; display: flex; flex-direction: column; gap: 12px; }
.af-field { display: flex; flex-direction: column; gap: 5px; }
.af-field-label {
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
}
.af-input {
width: 100%;
padding: 9px 11px;
font: inherit;
font-size: 13.5px;
color: var(--text);
background: var(--card-2, rgba(255, 255, 255, 0.04));
border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
border-radius: 8px;
box-sizing: border-box;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.af-input:focus {
outline: none;
border-color: var(--agf-fountain);
box-shadow: 0 0 0 3px rgba(92, 178, 177, 0.18);
}
.af-textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.af-edit-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 2px;
}
.af-edit-actions .af-reset-btn { margin-inline-start: auto; }
.af-leader-top {
position: relative;
display: flex;
justify-content: center;
padding-top: 4px;
}
.af-photo {
border-radius: 50%;
object-fit: cover;
border: 3px solid rgba(92, 178, 177, 0.45);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
.af-photo-ph {
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
color: #fff;
background: linear-gradient(135deg, var(--agf-fountain), #2E8B89);
text-transform: uppercase;
}
.af-avatar-wrap {
position: relative;
display: inline-flex;
line-height: 0;
}
.af-photo-edit,
.af-photo-remove {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid var(--card);
cursor: pointer;
color: #fff;
z-index: 3;
transition: transform 0.15s ease, filter 0.15s ease;
}
.af-photo-edit {
inset-inline-end: 0;
top: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--agf-fountain);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.af-photo-remove {
inset-inline-start: 0;
top: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background: #c0392b;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.af-photo-edit:hover,
.af-photo-remove:hover {
transform: scale(1.08);
filter: brightness(1.08);
}
.af-flag {
position: absolute;
bottom: 2px;
inset-inline-end: calc(50% - 88px);
background: var(--card);
border-radius: 50%;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.af-flag .flag-img {
width: 32px;
height: 23px;
object-fit: cover;
border-radius: 3px;
}
.flag-img {
display: block;
height: auto;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
object-fit: cover;
}
.af-leader-body { text-align: center; }
.af-name {
margin: 0 0 4px;
font-size: 23px;
font-weight: 800;
color: var(--text);
}
.af-title {
color: var(--agf-fountain);
font-weight: 600;
font-size: 15px;
margin-bottom: 10px;
}
.af-email {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-muted);
font-size: 13.5px;
text-decoration: none;
margin-bottom: 14px;
}
.af-email:hover { color: var(--agf-fountain); }
.af-bio {
color: var(--text-muted);
font-size: 14.5px;
line-height: 1.75;
margin: 4px 0 0;
}
.af-members {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 12px;
}
.af-member {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.af-member:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.af-select { appearance: none; cursor: pointer; }
.af-member-flag {
flex-shrink: 0;
display: flex;
align-items: center;
}
.af-member-flag .flag-img {
width: 40px;
height: 28px;
object-fit: cover;
border-radius: 4px;
}
.af-member-country {
font-weight: 700;
font-size: 14.5px;
color: var(--text);
}
.af-member-rep {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.af-member-person {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.af-member-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 1.5px solid rgba(92, 178, 177, 0.4);
}
.af-member-avatar-ph {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: var(--agf-fountain);
background: rgba(92, 178, 177, 0.14);
}
.af-member-person-name {
font-size: 12.5px;
font-weight: 600;
color: var(--text);
}
.af-member-photo-field {
display: flex;
align-items: center;
gap: 12px;
}
.af-member-photo-field .af-member-avatar {
width: 48px;
height: 48px;
}
.af-member-photo-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* ---- Member editing (admin) ---- */
.af-members-controls {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: -4px 0 14px;
}
.af-member.editable .af-member-body { padding-inline-end: 4px; }
.af-member-actions {
display: flex;
align-items: center;
gap: 4px;
margin-inline-start: auto;
flex-shrink: 0;
}
.af-member-btn {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7px;
border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
background: var(--card-2, rgba(255, 255, 255, 0.04));
color: var(--agf-fountain);
cursor: pointer;
transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.af-member-btn:hover:not(:disabled) {
transform: scale(1.08);
background: rgba(92, 178, 177, 0.16);
}
.af-member-btn:disabled {
opacity: 0.35;
cursor: default;
}
.af-member-btn-danger { color: #e2706b; }
.af-member-btn-danger:hover:not(:disabled) {
background: rgba(226, 112, 107, 0.16);
}
.af-member-editing {
flex-direction: column;
align-items: stretch;
gap: 12px;
text-align: start;
}
.af-member-edit-head {
display: flex;
align-items: flex-end;
gap: 12px;
}
.af-member-code { flex: 1 1 auto; min-width: 0; }
/* ============== COMMITTEES (Governance > Committees tab) ============== */
.committees { display: block; }
.cmt-group { margin-top: 18px; }
.cmt-group:first-of-type { margin-top: 4px; }
.cmt-group-title {
font-size: 1.02rem;
font-weight: 700;
margin: 0 0 12px;
color: var(--agf-fountain);
display: flex;
align-items: center;
gap: 8px;
}
.cmt-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.cmt-card { padding: 16px; }
.cmt-card-head {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 12px;
margin-bottom: 10px;
border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1));
}
.cmt-card-icon {
width: 34px;
height: 34px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: rgba(92, 178, 177, 0.14);
color: var(--agf-fountain);
}
.cmt-card-title { font-weight: 700; font-size: 0.98rem; flex: 1 1 auto; min-width: 0; }
.cmt-card-count {
flex-shrink: 0;
min-width: 24px;
height: 22px;
padding: 0 7px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--card-2, rgba(255, 255, 255, 0.05));
border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
font-size: 0.78rem;
font-weight: 700;
color: var(--text-muted);
}
.cmt-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cmt-member {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 8px;
border-radius: 9px;
background: var(--card-2, rgba(255, 255, 255, 0.03));
border: 1px solid transparent;
}
.cmt-member.editable { border-color: var(--border, rgba(255, 255, 255, 0.08)); }
.cmt-member-avatar {
width: 64px;
height: 64px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(92, 178, 177, 0.16);
color: var(--agf-fountain);
}
.cmt-member-avatar img {
width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.cmt-photo-edit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmt-photo-preview { width: 80px; height: 80px; }
.cmt-photo-hint { font-size: 11px; color: var(--text-muted); }
.cmt-photo-warn { font-size: 11.5px; color: var(--rag-yellow); }
.cmt-member-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cmt-member-name { font-weight: 600; font-size: 0.9rem; }
.cmt-member-role { font-size: 0.76rem; color: var(--text-muted); }
.cmt-member-actions { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; flex-shrink: 0; }
.cmt-empty { font-size: 0.85rem; color: var(--text-muted); padding: 6px 4px; }
.cmt-member-editing {
flex-direction: column;
align-items: stretch;
gap: 10px;
background: var(--card-2, rgba(255, 255, 255, 0.04));
border-color: var(--border, rgba(255, 255, 255, 0.12));
}
.cmt-add { margin-top: 12px; }
/* ============== CUSTOM SCROLLBAR ============== */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(92, 178, 177, 0.25);
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(92, 178, 177, 0.5);
}
::-webkit-scrollbar-corner {
background: transparent;
}
* { scrollbar-width: thin; scrollbar-color: rgba(92,178,177,0.25) transparent; }
/* ===== Elite IMG budget dashboard (replica of img-agf-players.netlify.app) ===== */
.imgd-page { max-width: 1200px; margin: 0 auto; }
.imgd-page, .imgd-page * { font-variant-numeric: tabular-nums; }
.imgd-topbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin: 10px 0 18px; }
.imgd-title h1 { margin: 0 0 4px; font-size: 24px; }
.imgd-title p { margin: 0; color: var(--muted, #7ea8a6); font-size: 13px; }
.imgd-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.imgd-seg { display: inline-flex; background: rgba(9,32,31,0.55); border: 1px solid rgba(92,178,177,0.25); border-radius: 999px; padding: 3px; gap: 2px; }
.imgd-seg-btn { border: 0; background: transparent; color: #9ec9c7; font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.imgd-seg-btn.on { background: #59c2b2; color: #06211f; }
.imgd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: rgba(92,178,177,0.18); border: 1px solid rgba(92,178,177,0.18); border-radius: 14px; overflow: hidden; margin-bottom: 22px; }
.imgd-kpi, .imgd-consol-cell { background: rgba(7,28,27,0.72); padding: 16px 18px; }
.imgd-kpi-l { font-size: 10.5px; letter-spacing: 0.12em; color: #6fa3a0; font-weight: 700; margin-bottom: 6px; }
.imgd-kpi-v { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 20px; font-weight: 700; color: #eafffb; }
.imgd-kpi-s { font-size: 11.5px; color: #6fa3a0; margin-top: 5px; }
.imgd-sec { font-size: 11px; letter-spacing: 0.14em; color: #6fa3a0; font-weight: 700; margin: 26px 0 10px; display: flex; align-items: center; gap: 10px; }
.imgd-sec::after { content: ""; flex: 1; height: 1px; background: rgba(92,178,177,0.2); }
.imgd-consol { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: rgba(92,178,177,0.2); border: 1px solid rgba(92,178,177,0.28); border-radius: 14px; overflow: hidden; }
.imgd-consol-cell { background: rgba(5,38,35,0.9); }
.imgd-years { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.imgd-yearcard { background: rgba(255,255,255,0.035); border: 1px solid rgba(92,178,177,0.2); border-radius: 14px; padding: 16px 18px; }
.imgd-yearhead { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 14px; color: #eafffb; }
.imgd-dot { width: 8px; height: 8px; border-radius: 50%; background: #59c2b2; }
.imgd-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.imgd-bar-name { width: 96px; flex: none; font-size: 12.5px; color: #b8dcd9; }
.imgd-bar-track { flex: 1; background: rgba(92,178,177,0.12); border-radius: 6px; height: 24px; overflow: hidden; }
.imgd-bar-fill { height: 100%; background: linear-gradient(90deg, #0e5b52, #17806f); border-radius: 6px; display: flex; align-items: center; justify-content: flex-end; min-width: 90px; }
.imgd-bar-fill span { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #d9fff7; padding: 0 8px; white-space: nowrap; }
.imgd-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.imgd-pcard { background: rgba(255,255,255,0.035); border: 1px solid rgba(92,178,177,0.2); border-radius: 14px; padding: 16px 18px; cursor: pointer; transition: border-color .15s; }
.imgd-pcard:hover { border-color: #59c2b2; }
.imgd-pcard-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; position: relative; }
.imgd-avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; background: #0e5b52; color: #d9fff7; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.imgd-pname { font-weight: 700; color: #eafffb; }
.imgd-pdoj { font-size: 11.5px; color: #6fa3a0; }
.imgd-pspent { font-family: ui-monospace, Menlo, monospace; font-size: 19px; font-weight: 700; color: #eafffb; }
.imgd-ptrack { background: rgba(92,178,177,0.14); border-radius: 5px; height: 7px; margin: 8px 0 5px; overflow: hidden; }
.imgd-pfill { height: 100%; background: #59c2b2; border-radius: 5px; }
.imgd-psub { font-size: 11.5px; color: #6fa3a0; margin-bottom: 10px; }
.imgd-plines div { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; border-top: 1px dashed rgba(92,178,177,0.16); color: #9ec9c7; }
.imgd-plines b { color: #d9fff7; font-family: ui-monospace, Menlo, monospace; font-weight: 600; }
.imgd-more { margin-top: 10px; font-size: 12px; color: #59c2b2; font-weight: 700; }
.imgd-modal { max-width: 460px; width: calc(100% - 32px); }
.imgd-close { margin-inline-start: auto; border: 0; background: transparent; color: #9ec9c7; font-size: 16px; cursor: pointer; }
.imgd-tblock { margin-top: 14px; }
.imgd-tlabel { font-size: 11px; letter-spacing: 0.1em; color: #6fa3a0; font-weight: 700; margin-bottom: 6px; }
.imgd-trow { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-top: 1px dashed rgba(92,178,177,0.16); color: #b8dcd9; }
.imgd-trow b { font-family: ui-monospace, Menlo, monospace; color: #eafffb; }
.imgd-empty { color: #9ec9c7; }
/* ---- Media photo library (التقارير الإعلامية > مكتبة الصور) ---- */
.media-photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
}
.media-photo-item { position: relative; }
.media-photo-btn {
display: block;
width: 100%;
padding: 0;
border: 1px solid var(--line, rgba(255,255,255,.12));
border-radius: 12px;
overflow: hidden;
cursor: pointer;
background: var(--card, rgba(255,255,255,.04));
aspect-ratio: 4 / 3;
}
.media-photo-btn img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.media-photo-btn:hover img { transform: scale(1.04); }
.media-photo-del { position: absolute; top: 8px; inset-inline-end: 8px; }
/* ---- Heatmap legend + overall-health info ---- */
.hmq-legend {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
padding: 10px 2px 14px;
font-size: 12.5px;
color: var(--muted);
}
.hmq-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.hmq-legend-item .hmq-tile { flex: 0 0 auto; }
.stat-info-btn {
margin-inline-start: auto;
background: none;
border: none;
padding: 2px;
cursor: pointer;
color: var(--muted);
display: inline-flex;
align-items: center;
border-radius: 6px;
}
.stat-info-btn:hover { color: var(--text); }
.calc-info p { margin: 0 0 10px; line-height: 1.8; }
.calc-info p:last-child { margin-bottom: 0; }
/* Read-only RAG status tag (exec "All KPIs" view) */
.tag.rag-green { background: rgba(34,160,107,.14); color: #1d7a54; border: 1px solid rgba(34,160,107,.35); }
.tag.rag-yellow { background: rgba(230,170,30,.16); color: #9a7414; border: 1px solid rgba(230,170,30,.4); }
.tag.rag-red { background: rgba(214,69,69,.13); color: #b23434; border: 1px solid rgba(214,69,69,.35); }
.tag.rag-grey { background: rgba(120,130,140,.15); color: #5b6770; border: 1px solid rgba(120,130,140,.35); }
/* Auto progress (read-only) in KPI form */
.auto-progress-box { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border: 1px dashed var(--border); border-radius: 10px; background: var(--bg); }
.auto-progress-box small { font-size: 11px; }
/* Boot loading gate (waiting for shared server state) */
.app-boot-loading { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--text-muted); font-size: 14px; }
.boot-spinner { width: 34px; height: 34px; border: 3px solid var(--border); border-top-color: var(--gold, #b98d2f); border-radius: 50%; animation: boot-spin 0.8s linear infinite; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
/* ---------------- Important Links (روابط مهمة) ---------------- */
.links-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.link-card {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
}
.link-card-main {
display: block;
padding: 16px 18px;
text-decoration: none;
color: inherit;
flex: 1;
}
.link-card-main:hover { background: var(--bg-hover, rgba(0,0,0,0.03)); }
.link-card-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.link-card-desc { font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.6; }
.link-card-url { font-size: 12px; color: var(--brand, #0b6e4f); direction: ltr; text-align: left; }
.link-card-actions {
display: flex;
gap: 8px;
padding: 10px 14px;
border-top: 1px solid var(--border);
}
.lk-danger:hover { border-color: var(--rag-red) !important; color: var(--rag-red) !important; }
.lk-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 14px;
}
.lk-form-grid .lk-span2 { grid-column: 1 / -1; }
@media (max-width: 680px) {
.lk-form-grid { grid-template-columns: 1fr; }
}
/* ---- Disbursed amounts table (Finance > المبالغ المصروفة) ---- */
.exp-card { padding: 14px; }
.exp-scroll { overflow-x: auto; }
.exp-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 860px; }
.exp-table th, .exp-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.exp-table thead th {
background: var(--accent, #1f6f4a); color: #fff; font-weight: 700; font-size: 12.5px;
position: sticky; top: 0;
}
.exp-table .exp-item { text-align: start; white-space: normal; min-width: 220px; font-weight: 600; }
.exp-table .exp-num { text-align: center; font-variant-numeric: tabular-nums; direction: ltr; }
.exp-table .exp-note { text-align: start; white-space: normal; min-width: 160px; font-size: 12px; color: var(--text-muted); }
.exp-table .exp-total { font-weight: 700; }
.exp-table .exp-util { color: var(--text-muted); }
.exp-table tr.exp-subtotal td { background: color-mix(in srgb, var(--accent, #1f6f4a) 8%, transparent); font-weight: 700; }
.exp-table tr.exp-grand td { background: color-mix(in srgb, var(--accent, #1f6f4a) 14%, transparent); font-weight: 800; }
.exp-footnote { margin: 10px 4px 0; font-size: 12px; color: var(--text-muted); }