/* Shared visual theme. Functional layouts remain in style.css. */
:root {
    --primary: #171c35;
    --primary-alt: #252647;
    --accent: #6554d9;
    --text: #283249;
    --border: #e2e6ef;
    --success: #17835d;
    --danger: #c84151;
    --shadow: 0 8px 28px rgba(31, 37, 68, .07);
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background: #f4f5fa;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
.topbar { height: 72px; gap: 24px; border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 4px 18px #11162b18; }
.brand-name { font-size: 1.15rem; font-weight: 650; letter-spacing: -.03em; }
.brand img { border-radius: 12px; padding: 3px; border: 0; }
.main-nav { gap: 6px; }
.main-nav a { font-size: .9rem; font-weight: 500; padding: 10px 14px; border-radius: 9px; }
.main-nav a[aria-current="page"] { background: #ffffff18; box-shadow: inset 0 -2px #b6a8ff; }
.header-profile-picture { border: 2px solid #ffffff50; }
.language-select { font-size: .85rem; }
.site-footer { padding: 13px 28px; font-size: .85rem; border-top: 1px solid #ffffff12; }
.footer-user strong { font-weight: 600; }
.footer-user span { color: #c1c6de; border-left: 1px solid #ffffff30; padding-left: 14px; }
.footer-links { gap: 20px; font-size: .78rem; }
.footer-links > span { color: #c1c6de; }
.footer-links a, .footer-links button { text-decoration: none; }
.footer-links a:hover, .footer-links button:hover { text-decoration: underline; }
.page-shell { padding: 0 28px 24px; margin: 28px auto; }
.page-title { font-size: 1.7rem; font-weight: 650; letter-spacing: -.04em; margin-bottom: 24px; }
.form-card, .table-panel { background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 26px; }
.table-topbar { margin-bottom: 20px; }
.grid-page-size { display: flex; align-items: center; gap: 8px; margin: 0; }
.grid-page-size label { margin: 0; white-space: nowrap; font-size: .8rem; }
.grid-page-size select { width: 80px; height: 38px; min-height: 38px; padding: 6px 10px; }
.filters { font-size: .82rem; color: #69738b; margin-bottom: 14px; }
.filters strong { font-weight: 500; }
.table-scroll { width: 100%; overflow-x: auto; }
.grid-table { min-width: 900px; border: 0; border-radius: 0; table-layout: auto; }
.grid-table th { background: #f7f8fc; font-size: .72rem; letter-spacing: .04em; font-weight: 650; color: #657088; padding: 14px 12px; }
.grid-table td { font-size: .85rem; padding: 17px 12px; vertical-align: middle; border-color: #edf0f6; }
.grid-table td:nth-child(2) { font-weight: 550; color: #263149; }
.grid-table tbody tr:hover { background: #faf9ff; }
.grid-table tbody tr:last-child td { border-bottom: 0; }
.grid-table .action-buttons { gap: 5px; }
.grid-table .action-buttons .icon-action { border-radius: 8px; transition: background .15s; }
.grid-table .action-buttons .icon-action:hover { background: #eeeafd; }
.badge { border-radius: 7px; font-size: .68rem; letter-spacing: .03em; font-weight: 650; padding: 6px 9px; }
.badge-active { background: #e7f5ed; color: #187449; border: 0; }
.badge-inactive { background: #fff0e8; color: #a65f22; border: 0; }
label { font-size: .83rem; font-weight: 600; color: #414c63; }
.field-group input, .form-grid input, .form-grid select, .form-grid textarea,
input, select, textarea { border-color: #aeb9cc; background: #fff; border-radius: 9px; font-size: .9rem; box-shadow: none; }
input:focus, select:focus, textarea:focus, .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px #6554d918; outline: 0;
}
input[readonly] { background: #f5f6fa; color: #6e7890; }
button, .btn { border-radius: 9px; font-size: .85rem; font-weight: 600; transition: background .15s, box-shadow .15s; }
button:hover, .btn:hover { filter: brightness(1.04); }
.btn-primary { background: #5363dc; box-shadow: 0 3px 8px #5363dc20; }
.btn-secondary { background: #e9edf5; color: #3c4861; }
.btn-danger { background: #c84151; color: #fff; }
.btn-success { background: #17835d; color: #fff; }
.form-buttons { gap: 10px; }
.alert { border-radius: 10px; font-size: .88rem; font-weight: 500; }
.overview { margin-bottom: 24px; }
.overview-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 22px; }
.overview-heading h1 { margin: 5px 0 8px; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.045em; color: #1c2640; }
.overview-heading p { margin: 0; color: #737e94; font-size: .9rem; }
.overview-eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: #7665cf; font-weight: 700; }
.overview-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.overview-card { background: #fff; padding: 20px 24px; border: 1px solid var(--border); border-radius: 15px; box-shadow: 0 3px 12px #1f254403; }
.overview-card span { display: flex; align-items: center; gap: 9px; font-size: .8rem; color: #737e94; }
.overview-card span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #8874e9; }
.overview-card:nth-child(2) span::before { background: #df9e42; }
.overview-card:nth-child(3) span::before { background: #28a27b; }
.overview-card:nth-child(4) span::before { background: #d35b64; }
.overview-card:nth-child(5) span::before { background: #7c879e; }
.overview-card strong { display: block; margin-top: 12px; font-size: 2rem; font-weight: 650; color: #26304b; letter-spacing: -.04em; }
.login-page-shell { padding: 24px; }
.login-panel { min-height: 560px; border: 1px solid #e2e5ef; border-radius: 24px; box-shadow: 0 24px 70px #23233e14; grid-template-columns: 1fr 1fr; }
.login-intro { position: relative; background: radial-gradient(ellipse at 85% 5%, #7c64d965, transparent 55%), linear-gradient(155deg, #222844, #171c35); padding: 44px; }
.login-intro h1 { font-size: clamp(2rem, 3.5vw, 3.1rem); font-weight: 650; letter-spacing: -.055em; line-height: 1.12; }
.login-intro p { color: #c1c7df; font-size: .96rem; }
.eyebrow { background: #ffffff0b; border-color: #ffffff26; letter-spacing: .1em; }
.feature-list span { font-size: .72rem; background: #ffffff08; border-color: #ffffff20; }
.login-box { background: #fff; padding: 36px; }
.login-form { box-shadow: none; padding: 16px 8px; border-radius: 0; }
.login-form h2 { font-size: 1.7rem; letter-spacing: -.035em; }
.login-page-shell > .login-form { padding: 32px; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); }
.login-page-shell > .login-form p { color: #737e94; font-size: .9rem; line-height: 1.6; }
.seed-account { background: #f7f8fc; border-color: #e5e7f2; }
.seed-account-row { margin-top: 8px; border-color: #e2e5ef; font-size: .8rem; }
.forgot-box { box-shadow: none; padding: 16px 8px; }
dialog { color: var(--text); }
#email-dialog, #contact-dialog, #disclaimer-dialog { border: 1px solid #e2e6ef; border-radius: 20px; box-shadow: 0 30px 100px #10152c40; }
dialog::backdrop { backdrop-filter: blur(4px); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.profile-dropdown { padding: 7px; border: 1px solid var(--border); box-shadow: 0 16px 45px #11162b25; }
.fill-application-page { background: #f4f5fa; }
.fill-application-page .application-page { padding: 12px 18px; }
.fill-application-page .application-card { border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 16px; }
.fill-application-page .application-header { background: linear-gradient(110deg, #222844, #333258); }
.fill-application-page .header-box { background: #ffffff05; border-color: #ffffff16; border-radius: 8px; }
.fill-application-page .header-box strong { letter-spacing: .05em; font-size: .65rem; color: #c8c7e6; }
.fill-application-page .form-section { border-color: #e2e6ef; background: #fff; border-radius: 12px; }
.fill-application-page .applicant-scroll-area > .form-section { background: #f8f9fc; padding: 20px; }
.fill-application-page .section-title { color: #5249a0; font-size: .95rem; }
.fill-application-page .section-heading { color: #29334a; font-size: 1.08rem; font-weight: 650; letter-spacing: -.02em; }
.fill-application-page .field label { font-size: .8rem; font-weight: 550; color: #45516a; }
.fill-application-page .field input, .fill-application-page .field select, .fill-application-page .field textarea { border-color: #aeb9cc; font-size: .88rem; border-radius: 8px; }
.fill-application-page .declaration-box { background: #f5f6fc; border-color: #e2e6ef; font-size: .88rem; line-height: 1.65; }
.fill-application-page .signature-box { background: #fff; border-color: #bbc2d6; }
.fill-application-page .icon-actions { margin-top: 2px; }
.fill-application-page .field.inline-choice { flex-wrap: wrap; }
.fill-application-page .btn-warning { background: #f1c40f; color: #332a0a; }
.fill-application-page .btn-export { background: #e67e22; color: #fff; }
.fill-application-page button[name="save_form"] { background: #2563eb; }
.fill-application-page .delete-upload-btn { background: transparent; box-shadow: none; }
@media (max-width: 900px) {
    .overview-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .topbar { height: auto; gap: 10px; }
    .main-nav { gap: 4px; flex-wrap: wrap; }
    .main-nav a { padding: 8px 10px; }
    .page-shell { padding-left: 16px; padding-right: 16px; margin-top: 18px; }
    .form-card, .table-panel { padding: 18px; }
    .login-panel { grid-template-columns: 1fr; min-height: 0; max-width: 600px; }
    .login-intro { padding: 28px; }
    .login-box { padding: 24px; }
    .login-intro .feature-list { display: none; }
}
@media (max-width: 600px) {
    .overview-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .overview-card { padding: 14px 10px; }
    .overview-card span { font-size: .7rem; gap: 5px; }
    .overview-card strong { font-size: 1.6rem; }
    .site-footer { padding: 10px 16px; gap: 8px; }
    .footer-links { gap: 12px; font-size: .7rem; }
    .fill-application-page .application-page { padding: 6px; }
    .fill-application-page .application-body { padding: 10px 8px 0; }
    .fill-application-page .applicant-scroll-area > .form-section { padding: 12px; }
    .fill-application-page .form-section { padding: 12px; }
    .fill-application-page .two-column { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print {
    .fill-application-page .applicant-tabs { display: none !important; }
    .fill-application-page .applicant-panel[hidden] { display: block !important; }
    .fill-application-page .applicant-panel + .applicant-panel { break-before: page; page-break-before: always; }
    body { background: #fff; }
    .overview, .topbar { display: none; }
    .table-scroll { overflow: visible; }
    .grid-table { min-width: 0; }
    .fill-application-page .form-section, .fill-application-page .application-card { box-shadow: none; }
}

.applicant-tabs { display: flex; flex: 0 0 auto; gap: 8px; overflow-x: auto; padding: 0 0 10px; }
.applicant-tabs[hidden] { display: none; }
.applicant-tab { flex: 0 0 auto; padding: 9px 18px; border: 1px solid #aab4ca; border-radius: 8px; background: #f1f4fa; color: #334155; cursor: pointer; font: inherit; font-weight: 600; }
.applicant-tab[aria-selected="true"] { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.applicant-tab:focus-visible { outline: 3px solid #818cf8; outline-offset: 2px; }
@media screen { .fill-application-page .applicant-panel[hidden] { display: none; } }

/* Shared decorative icons retain the visible, translated control labels. */
[data-ui-icon]::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-inline-end: .45em; vertical-align: -.12em; flex: 0 0 1em; background-color: currentColor; -webkit-mask: var(--ui-icon) center / contain no-repeat; mask: var(--ui-icon) center / contain no-repeat; }
[data-ui-icon="withdraw"] { --ui-icon: url("images/withdraw.svg"); }
[data-ui-icon="home"] { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2010%209-7%209%207v11h-6v-7H9v7H3z%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-icon="logout"] { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%203H4v18h5m5-14%205%205-5%205m-6-5h11%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-icon="lock"] { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%2210%22%20width%3D%2214%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2010V7a4%204%200%200%201%208%200v3m-4%205v2%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-icon="user"] { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021v-2a8%208%200%200%201%2016%200v2%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-icon="users"] { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M2%2021v-2a7%207%200%200%201%2014%200v2m1-18a4%204%200%200%201%200%208m2%203a7%207%200%200%201%203%207%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-icon="close"] { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%206%2012%2012M6%2018%2018%206%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-icon="download"] { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v12m-5-5%205%205%205-5M4%2016v5h16v-5%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-icon="sparkles"] { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%203%206%206%203-6%203-3%206-3-6-6-3%206-3zM3%202v4M1%204h4%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-icon="mail"] { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3%206%209%207%209-7%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-icon="save"] { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h15l3%203v15H3zM7%203v6h10V3M7%2021v-8h10v8%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-icon="check"] { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2012%205%205L20%206%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-icon="plus"] { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v16M4%2012h16%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-icon="info"] { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%2011v6m0-10v1%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-icon="language"] { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h12M9%202v3m4%200c0%206-4%2010-9%2012m1-9c1%203%204%206%208%208m1%205%204-11%204%2011m-6-4h4%22%2F%3E%3C%2Fsvg%3E"); }
[data-ui-icon="action"] { --ui-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012h16m-6-6%206%206-6%206%22%2F%3E%3C%2Fsvg%3E"); }

.fill-application-page .application-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
    min-width: 0;
    overflow-x: auto;
    padding: 4px 2px 12px;
}
.fill-application-page .application-toolbar .applicant-tabs {
    padding: 0;
    overflow: visible;
}
.fill-application-page .application-toolbar .icon-actions {
    flex-wrap: nowrap;
    margin: 0 0 0 auto;
    padding: 0;
}
.fill-application-page .application-toolbar .btn,
.fill-application-page .application-toolbar .applicant-tab {
    white-space: nowrap;
}
@media print {
    .fill-application-page .application-toolbar { display: none !important; }
}

.table-actions .grid-pagination { margin: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }