/* ===========================
   NASST Fonts (wwwroot/fonts)
   =========================== */

@font-face { font-family: 'HelveticaNeue-Roman'; src: url("../fonts/HelveticaNeueLTArabic-Roman.eot"); src: url("../fonts/HelveticaNeueLTArabic-Roman.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaNeueLTArabic-Roman.woff") format("woff"), url("../fonts/HelveticaNeueLTArabic-Roman.ttf") format("truetype"), url("../fonts/HelveticaNeueLTArabic-Roman.svg") format("svg"); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: 'HelveticaNeue-Bold'; src: url("../fonts/HelveticaNeueLTArabic-Bold.eot"); src: url("../fonts/HelveticaNeueLTArabic-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaNeueLTArabic-Bold.woff") format("woff"), url("../fonts/HelveticaNeueLTArabic-Bold.ttf") format("truetype"), url("../fonts/HelveticaNeueLTArabic-Bold.svg") format("svg"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'HelveticaNeue-Light'; src: url("../fonts/HelveticaNeueLTArabic-Light.eot"); src: url("../fonts/HelveticaNeueLTArabic-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaNeueLTArabic-Light.woff") format("woff"), url("../fonts/HelveticaNeueLTArabic-Light.ttf") format("truetype"), url("../fonts/HelveticaNeueLTArabic-Light.svg") format("svg"); font-weight: 300; font-style: normal; font-display: swap; }

@font-face { font-family: 'CPDFontAM-webfont'; src: url("../fonts/CPDFontAM-webfont.eot"); src: url("../fonts/CPDFontAM-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/CPDFontAM-webfont.woff") format("woff"), url("../fonts/CPDFontAM-webfont.ttf") format("truetype"), url("../fonts/CPDFontAM-webfont.svg") format("svg"); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: 'CPDFontAL-webfont'; src: url("../fonts/CPDFontAL-webfont.eot"); src: url("../fonts/CPDFontAL-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/CPDFontAL-webfont.woff") format("woff"), url("../fonts/CPDFontAL-webfont.ttf") format("truetype"), url("../fonts/CPDFontAL-webfont.svg") format("svg"); font-weight: 300; font-style: normal; font-display: swap; }

@font-face { font-family: 'CPDFontAB-webfont'; src: url("../fonts/CPDFontAB-webfont.eot"); src: url("../fonts/CPDFontAB-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/CPDFontAB-webfont.woff") format("woff"), url("../fonts/CPDFontAB-webfont.ttf") format("truetype"), url("../fonts/CPDFontAB-webfont.svg") format("svg"); font-weight: 700; font-style: normal; font-display: swap; }

/* ===========================
   Global font for whole site
   =========================== */

html, body { font-family: 'HelveticaNeue-Roman', "Helvetica Neue Roman", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
/* =========================================================
   NASST Portal - Phase 1 theme starter
   IMPORTANT:
   Replace these tokens (colors/fonts/layout) to match the
   "attached guideline file" provided by NASST.
   ========================================================= */
/* =========================================================
   NASST Portal - Global
   ========================================================= */

/* ✅ Global font stack for the whole website */
:root { --nas-font: 'HelveticaNeue-Roman', "Helvetica Neue Roman", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }

/* Apply font everywhere (text + inputs + buttons) */
html, body { font-family: var(--nas-font); }
button, input, select, textarea { font-family: var(--nas-font); }


/* ... KEEP EVERYTHING BELOW EXACTLY AS YOUR FILE ... */

:root { --bg: #0b1220; --card: #0f1b32; --muted: rgba(255,255,255,.72); --text: #ffffff; --brand: #f6c445; /* TODO: set per guideline */ --brand2: #25d0a6; /* TODO: set per guideline */ --border: rgba(255,255,255,.12); --shadow: 0 18px 50px rgba(0,0,0,.35); --radius: 16px; --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* TODO: set per guideline */ }

* { box-sizing: border-box; }
html, body { height: 100%; }
    body.app { margin: 0; font-family: var(--font); color: var(--text); background: radial-gradient(900px 420px at 10% 10%, rgba(37,208,166,.18), transparent 60%), radial-gradient(900px 420px at 90% 5%, rgba(246,196,69,.14), transparent 55%), linear-gradient(180deg, #070b13 0%, var(--bg) 100%); }

.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.topbar { position: sticky; top: 0; backdrop-filter: blur(10px); background: rgba(7,11,19,.65); border-bottom: 1px solid var(--border); z-index: 20; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--text); line-height: 1.15; }
.brand-mark { font-weight: 800; letter-spacing: .4px; }
.brand-sub { font-size: 12px; opacity: .8; }

.nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
    .nav a, .linkbtn { color: var(--text); text-decoration: none; opacity: .9; padding: 8px 10px; border-radius: 10px; }
        .nav a:hover, .linkbtn:hover { background: rgba(255,255,255,.06); opacity: 1; }
.inline { display: inline; }
.linkbtn { background: none; border: none; cursor: pointer; font: inherit; }

.lang .pill { border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text); padding: 8px 12px; border-radius: 999px; cursor: pointer; font-weight: 700; }

.main { padding: 26px 0 60px; }

.hero { padding: 28px; background: linear-gradient(135deg, rgba(246,196,69,.12), rgba(37,208,166,.10)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
    .hero h1 { margin: 0 0 10px; font-size: 38px; }
.lead { margin: 0 0 18px; color: var(--muted); max-width: 78ch; }

.note { margin-top: 16px; padding: 12px 14px; border: 1px dashed rgba(246,196,69,.45); border-radius: 14px; color: var(--muted); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
    .page-head h1 { margin: 0; }
.muted { color: var(--muted); }

.card { background: rgba(15,27,50,.72); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }

.field { margin: 12px 0; }
label { display: block; margin-bottom: 6px; font-size: 13px; opacity: .92; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="tel"], input[type="file"] { width: 100%; padding: 12px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(7,11,19,.45); color: var(--text); outline: none; }
input:focus { border-color: rgba(246,196,69,.7); box-shadow: 0 0 0 4px rgba(246,196,69,.12); }

.error { color: #ffb4b4; font-size: 12px; }

.row { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.05); color: var(--text); text-decoration: none; cursor: pointer; }
    .btn.primary { border-color: rgba(246,196,69,.65); background: linear-gradient(90deg, rgba(246,196,69,.22), rgba(37,208,166,.16)); }
    .btn:hover { transform: translateY(-1px); }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 6px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.panel { padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(7,11,19,.25); }
    .panel h3 { margin: 0 0 6px; font-size: 16px; }

.summary { margin-top: 12px; }

.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
    .tbl th, .tbl td { border-bottom: 1px solid rgba(255,255,255,.10); padding: 10px 8px; vertical-align: top; }
    .tbl th { text-align: left; opacity: .85; font-weight: 700; }
.mini { margin: 0; padding-left: 16px; }
.kv .k { opacity: .75; margin-right: 6px; }
.list { padding-left: 18px; }

.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; gap: 8px; align-items: center; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); border-radius: 999px; padding: 8px 10px; }

.footer { border-top: 1px solid var(--border); background: rgba(7,11,19,.55); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 0; }

/* Responsive */
@media (max-width: 1100px) {
    .grid3 { grid-template-columns: 1fr; }
    .grid2 { grid-template-columns: 1fr; }
    .page-head { align-items: flex-start; flex-direction: column; }
}

/* Basic RTL adjustments */
[dir="rtl"] .tbl th { text-align: right; }
[dir="rtl"] .mini { padding-left: 0; padding-right: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }

.brand-logo-wrap { width: 46px; /* adjust as you like */ height: 46px; /* adjust as you like */ overflow: hidden; /* this is what "removes" visible padding */ display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; /* optional */ }

.brand-logo { width: 100%; height: 100%; display: block; /* visually “zoom in” to remove SVG extra space */ transform: scale(1.25); transform-origin: center; }

.brand-mark { font-weight: 700; font-size: 18px; }
.top-actions { display: flex; align-items: center; gap: 10px; }

.pill { height: 36px; min-width: 48px; padding: 0 14px; border-radius: 999px; border: none; cursor: pointer; font-weight: 600; }

.pill-outline { background: transparent; border: 1px solid currentColor; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; border-radius: 12px; border: 1px solid transparent; font-weight: 700; cursor: pointer; transition: transform .12s ease, opacity .12s ease; }

.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }

.btn-primary { background: var(--brand-primary, #2250E3); color: #fff; border-color: var(--brand-primary, #2250E3); }

    .btn-primary:hover { opacity: .92; transform: translateY(-1px); }

    .btn-primary:active { transform: translateY(0); }
html, body { height: 100%; }

    body.app { min-height: 100vh; display: flex; flex-direction: column; }

.page { flex: 1; display: flex; flex-direction: column; }

.main { flex: 1; /* this pushes footer down on short pages */ }

.footer { margin-top: auto; }



html, body { height: 100%; }
    body.app { min-height: 100vh; /* ONE smooth background for whole site */ background-color: #0b1020; /* fallback */ background-image: radial-gradient(1200px 700px at 20% 10%, rgba(127,238,178,.18), transparent 55%), radial-gradient(900px 600px at 80% 30%, rgba(82,173,245,.16), transparent 60%), linear-gradient(180deg, #0b1020 0%, #070a12 100%); background-repeat: no-repeat; background-size: cover; /* important */ background-attachment: fixed; /* keeps it smooth while scrolling */ }


html, body { height: 100%; }

    body.app { min-height: 100vh; background: #ffffff; /* very subtle professional accents */ background-image: radial-gradient(1200px 700px at 100% 0%, rgba(127,238,178,.12), transparent 60%), radial-gradient(900px 600px at 0% 0%, rgba(82,173,245,.10), transparent 55%); background-repeat: no-repeat; background-size: cover; }
.page, .main, .container, .footer, .topbar { background: transparent; }



body.app { min-height: 100vh; background: #0b1020; background-image: linear-gradient(180deg, #0b1020 0%, #070a12 100%); background-repeat: no-repeat; background-size: cover; }

body.app { min-height: 100vh; background: #0b1020; background-image: radial-gradient(1200px 700px at 20% 10%, rgba(127,238,178,.16), transparent 55%), radial-gradient(900px 600px at 80% 30%, rgba(82,173,245,.14), transparent 60%), linear-gradient(180deg, #0b1020 0%, #070a12 100%); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }

html, body { height: 100%; }

    body.app { min-height: 100vh; background: #f6fbf9; background-image: radial-gradient(900px 600px at 85% 0%, rgba(127,238,178,.22), transparent 60%), radial-gradient(700px 500px at 10% 10%, rgba(82,173,245,.14), transparent 55%), linear-gradient(180deg, #f6fbf9 0%, #eef7f3 100%); background-repeat: no-repeat; background-size: cover; }

.page, .main, .container, .footer, .topbar { background: transparent; }

.card, .form-card { background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(15,23,42,.08); }

*/
/* =========================================================
   NASST Portal - Phase 1 theme starter
   IMPORTANT:
   Replace these tokens (colors/fonts/layout) to match the
   "attached guideline file" provided by NASST.
   ========================================================= */
:root { --bg: #0b1220; --card: #0f1b32; --muted: rgba(255,255,255,.72); --text: #ffffff; --brand: #f6c445; /* TODO: set per guideline */ --brand2: #25d0a6; /* TODO: set per guideline */ --border: rgba(255,255,255,.12); --shadow: 0 18px 50px rgba(0,0,0,.35); --radius: 16px; /* keep your old var but align it to global font */ --font: var(--nas-font); }

* { box-sizing: border-box; }
html, body { height: 100%; }
    body.app { margin: 0; font-family: var(--font); color: var(--text); background: radial-gradient(900px 420px at 10% 10%, rgba(37,208,166,.18), transparent 60%), radial-gradient(900px 420px at 90% 5%, rgba(246,196,69,.14), transparent 55%), linear-gradient(180deg, #070b13 0%, var(--bg) 100%); }

/* (rest of your file unchanged) */
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }