/* ================================================================
APAS Design System — Components
----------------------------------------------------------------
Reusable component classes built on tokens.css. Every component
uses BEM-style naming under an "apas-" prefix.
Import order:
================================================================ */
/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
font-family: var(--apas-font-family);
font-size: var(--apas-text-body-md);
line-height: var(--apas-line-normal);
color: var(--apas-ink);
background: var(--apas-bg);
-webkit-font-smoothing: antialiased;
}
/* ---------- Typography utility classes ---------- */
.apas-display-xl { font-size: var(--apas-text-display-xl); font-weight: var(--apas-font-weight-bold); line-height: var(--apas-line-tight); letter-spacing: var(--apas-tracking-tight); }
.apas-display-lg { font-size: var(--apas-text-display-lg); font-weight: var(--apas-font-weight-bold); line-height: var(--apas-line-snug); letter-spacing: var(--apas-tracking-tight); }
.apas-heading-lg { font-size: var(--apas-text-heading-lg); font-weight: var(--apas-font-weight-bold); line-height: var(--apas-line-snug); letter-spacing: var(--apas-tracking-snug); }
.apas-heading-md { font-size: var(--apas-text-heading-md); font-weight: var(--apas-font-weight-semibold); line-height: var(--apas-line-snug); letter-spacing: var(--apas-tracking-snug); }
.apas-heading-sm { font-size: var(--apas-text-heading-sm); font-weight: var(--apas-font-weight-semibold); line-height: var(--apas-line-normal); }
.apas-body-md { font-size: var(--apas-text-body-md); font-weight: var(--apas-font-weight-regular); line-height: var(--apas-line-normal); }
.apas-body-strong{ font-size: var(--apas-text-body-md); font-weight: var(--apas-font-weight-semibold); line-height: var(--apas-line-normal); }
.apas-body-sm { font-size: var(--apas-text-body-sm); font-weight: var(--apas-font-weight-regular); line-height: var(--apas-line-normal); }
.apas-caption { font-size: var(--apas-text-caption); font-weight: var(--apas-font-weight-regular); color: var(--apas-muted); }
.apas-label { font-size: var(--apas-text-label); font-weight: var(--apas-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--apas-tracking-wider); color: var(--apas-muted); }
.apas-mono-ref { font-size: var(--apas-text-body-sm); font-weight: var(--apas-font-weight-semibold); letter-spacing: var(--apas-tracking-wide); }
.apas-text-muted { color: var(--apas-muted); }
.apas-text-ink-2 { color: var(--apas-ink-2); }
/* ================================================================
BUTTON
--------------------------------------------------------------
Variants: --primary, --secondary (default), --ghost
States: :hover, :focus-visible, :disabled
================================================================ */
.apas-btn {
display: inline-flex;
align-items: center;
gap: var(--apas-space-8);
height: 40px;
padding: 0 var(--apas-space-16);
border-radius: var(--apas-radius-lg);
border: 1px solid var(--apas-line);
background: var(--apas-surface);
color: var(--apas-ink);
font: inherit;
font-weight: var(--apas-font-weight-semibold);
cursor: pointer;
white-space: nowrap;
transition: background var(--apas-duration-fast) var(--apas-ease),
border-color var(--apas-duration-fast) var(--apas-ease);
}
.apas-btn:hover { background: var(--apas-line-2); }
.apas-btn:focus-visible { outline: 2px solid var(--apas-ink); outline-offset: 2px; }
.apas-btn:disabled, .apas-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.apas-btn .apas-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.apas-btn--primary {
background: var(--apas-accent);
color: var(--apas-on-accent);
border-color: var(--apas-accent);
}
.apas-btn--primary:hover { background: var(--apas-accent-soft); border-color: var(--apas-accent-soft); }
.apas-btn--ghost { background: transparent; border-color: transparent; }
.apas-btn--ghost:hover { background: var(--apas-line-2); }
/* ================================================================
ICON BUTTON — square 40×40 used in the top bar
================================================================ */
.apas-icon-btn {
width: 40px; height: 40px;
border-radius: var(--apas-radius-lg);
background: var(--apas-surface-2);
border: 1px solid var(--apas-line);
display: grid;
place-items: center;
cursor: pointer;
color: var(--apas-ink-2);
position: relative;
transition: background var(--apas-duration-fast) var(--apas-ease);
}
.apas-icon-btn:hover { background: var(--apas-line-2); }
.apas-icon-btn__dot {
position: absolute;
top: 9px; right: 11px;
width: 8px; height: 8px;
border-radius: 50%;
background: #6ee7a3;
border: 2px solid var(--apas-surface);
}
/* ================================================================
PILL / BADGE
Variants: --green --purple --amber --blue --pink (default = grey)
================================================================ */
.apas-pill {
display: inline-flex;
align-items: center;
gap: var(--apas-space-6);
padding: var(--apas-space-4) var(--apas-space-10);
border-radius: var(--apas-radius-full);
font-size: var(--apas-text-label);
font-weight: var(--apas-font-weight-semibold);
background: var(--apas-line-2);
color: var(--apas-ink-2);
white-space: nowrap;
}
.apas-pill--green { background: var(--apas-pill-green-bg); color: var(--apas-pill-green-ink); }
.apas-pill--purple { background: var(--apas-pill-purple-bg); color: var(--apas-pill-purple-ink); }
.apas-pill--amber { background: var(--apas-pill-amber-bg); color: var(--apas-pill-amber-ink); }
.apas-pill--blue { background: var(--apas-pill-blue-bg); color: var(--apas-pill-blue-ink); }
.apas-pill--pink { background: var(--apas-pill-pink-bg); color: var(--apas-pill-pink-ink); }
/* ================================================================
FIELD — wraps label + control in vertical layout
================================================================ */
.apas-field { display: flex; flex-direction: column; gap: var(--apas-space-6); }
.apas-field__label {
font-size: var(--apas-text-label);
color: var(--apas-muted);
text-transform: uppercase;
letter-spacing: var(--apas-tracking-wider);
font-weight: var(--apas-font-weight-semibold);
}
/* ================================================================
INPUT / TEXTAREA / SELECT
================================================================ */
.apas-input,
.apas-textarea,
.apas-select {
width: 100%;
padding: var(--apas-space-10) var(--apas-space-12);
background: var(--apas-surface-2);
border: 1px solid var(--apas-line);
border-radius: var(--apas-radius-md);
font: inherit;
color: var(--apas-ink);
outline: none;
transition: background var(--apas-duration-fast) var(--apas-ease),
border-color var(--apas-duration-fast) var(--apas-ease);
}
.apas-input::placeholder, .apas-textarea::placeholder { color: var(--apas-muted); }
.apas-input:focus,
.apas-textarea:focus,
.apas-select:focus {
background: var(--apas-surface);
border-color: var(--apas-ink);
}
.apas-textarea { resize: vertical; min-height: 110px; line-height: var(--apas-line-normal); }
/* ================================================================
CHECKBOX (with surrounding label tile)
================================================================ */
.apas-checkbox {
display: flex; align-items: center; gap: var(--apas-space-10);
padding: var(--apas-space-10) var(--apas-space-12);
background: var(--apas-surface-2);
border: 1px solid var(--apas-line);
border-radius: var(--apas-radius-md);
cursor: pointer;
user-select: none;
}
.apas-checkbox input[type="checkbox"] {
appearance: none;
width: 16px; height: 16px;
border-radius: 4px;
border: 1.5px solid var(--apas-line);
background: var(--apas-surface);
display: grid; place-items: center;
cursor: pointer;
}
.apas-checkbox input[type="checkbox"]:checked {
background: var(--apas-accent);
border-color: var(--apas-accent);
}
.apas-checkbox input[type="checkbox"]:checked::after {
content: "";
width: 10px; height: 6px;
border: 2px solid var(--apas-on-accent);
border-top: 0; border-right: 0;
transform: rotate(-45deg) translate(1px, -1px);
}
.apas-checkbox__label { font-size: var(--apas-text-body-sm); font-weight: var(--apas-font-weight-medium); }
/* ================================================================
AVATAR
Tones: --green --purple --amber (default = mono)
================================================================ */
.apas-avatar {
width: 40px; height: 40px;
border-radius: var(--apas-radius-lg);
background: var(--apas-accent);
color: var(--apas-on-accent);
display: grid; place-items: center;
font-weight: var(--apas-font-weight-bold);
font-size: var(--apas-text-body-sm);
flex: 0 0 40px;
}
.apas-avatar--green { background: var(--apas-pill-green-bg); color: var(--apas-pill-green-ink); }
.apas-avatar--purple { background: var(--apas-pill-purple-bg); color: var(--apas-pill-purple-ink); }
.apas-avatar--amber { background: var(--apas-pill-amber-bg); color: var(--apas-pill-amber-ink); }
.apas-avatar--sm { width: 32px; height: 32px; border-radius: var(--apas-radius-full); flex: 0 0 32px; font-size: var(--apas-text-caption); }
/* ================================================================
CARD
================================================================ */
.apas-card {
background: var(--apas-surface);
border-radius: var(--apas-radius-2xl);
padding: var(--apas-space-20);
display: flex;
flex-direction: column;
gap: var(--apas-space-12);
border: 1px solid var(--apas-line);
}
.apas-card__head {
display: flex; align-items: center; justify-content: space-between;
gap: var(--apas-space-12);
}
.apas-card__title { font-weight: var(--apas-font-weight-bold); font-size: var(--apas-text-heading-sm); letter-spacing: var(--apas-tracking-snug); }
.apas-card__sub { color: var(--apas-muted); font-size: var(--apas-text-caption); }
/* ================================================================
ROW (used inside cards as a list item with top border)
================================================================ */
.apas-row {
display: flex; align-items: center; justify-content: space-between;
gap: var(--apas-space-12);
padding: var(--apas-space-10) 0;
border-top: 1px solid var(--apas-line-2);
}
.apas-row:first-of-type { border-top: 0; }
.apas-row__left { display: flex; align-items: center; gap: var(--apas-space-10); min-width: 0; }
.apas-row__ref { font-weight: var(--apas-font-weight-semibold); font-size: var(--apas-text-body-sm); }
.apas-row__desc {
color: var(--apas-muted); font-size: var(--apas-text-caption);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px;
}
/* ================================================================
STAT CARD (small surface inside hero)
================================================================ */
.apas-stat {
background: var(--apas-surface-2);
border: 1px solid var(--apas-line);
border-radius: var(--apas-radius-xl);
padding: var(--apas-space-14) var(--apas-space-16);
}
.apas-stat__label { font-size: var(--apas-text-caption); color: var(--apas-muted); }
.apas-stat__value { font-size: var(--apas-text-heading-lg); font-weight: var(--apas-font-weight-bold); letter-spacing: var(--apas-tracking-snug); margin-top: 4px; }
.apas-stat__delta { font-size: var(--apas-text-label); margin-top: 2px; color: var(--apas-status-ok); font-weight: var(--apas-font-weight-semibold); }
.apas-stat__delta--warn { color: var(--apas-status-warn); }
/* ================================================================
MINI STAT (4-up tile on dashboard)
================================================================ */
.apas-mini-stat {
background: var(--apas-surface);
border: 1px solid var(--apas-line);
border-radius: var(--apas-radius-2xl);
padding: var(--apas-space-20);
display: flex; flex-direction: column; gap: var(--apas-space-6);
min-height: 140px;
}
.apas-mini-stat__icon {
width: 36px; height: 36px;
border-radius: var(--apas-radius-md);
background: var(--apas-line-2);
display: grid; place-items: center;
color: var(--apas-ink-2);
}
.apas-mini-stat__value { font-size: var(--apas-text-display-lg); font-weight: var(--apas-font-weight-bold); letter-spacing: var(--apas-tracking-tight); }
.apas-mini-stat__label { font-size: var(--apas-text-caption); color: var(--apas-muted); }
/* ================================================================
NAV ITEM (sidebar)
================================================================ */
.apas-nav-item {
display: flex; align-items: center; gap: var(--apas-space-12);
padding: var(--apas-space-10) var(--apas-space-12);
border-radius: var(--apas-radius-lg);
color: var(--apas-ink-2);
cursor: pointer;
font-weight: var(--apas-font-weight-medium);
user-select: none;
transition: background var(--apas-duration-fast) var(--apas-ease),
color var(--apas-duration-fast) var(--apas-ease);
white-space: nowrap;
}
.apas-nav-item:hover { background: var(--apas-line-2); }
.apas-nav-item--active { background: var(--apas-accent); color: var(--apas-on-accent); }
.apas-nav-item .apas-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.apas-nav-item__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.apas-nav-item__badge {
margin-left: auto;
background: var(--apas-line-2);
color: var(--apas-ink-2);
border-radius: var(--apas-radius-full);
padding: 1px var(--apas-space-8);
font-size: var(--apas-text-label);
font-weight: var(--apas-font-weight-semibold);
}
.apas-nav-item--active .apas-nav-item__badge { background: rgba(255,255,255,.18); color: var(--apas-on-accent); }
/* ================================================================
TAB
================================================================ */
.apas-tab {
padding: var(--apas-space-10) var(--apas-space-14);
border-radius: var(--apas-radius-lg);
color: var(--apas-ink-2);
font-weight: var(--apas-font-weight-medium);
font-size: var(--apas-text-body-sm);
cursor: pointer;
white-space: nowrap;
transition: background var(--apas-duration-fast) var(--apas-ease),
color var(--apas-duration-fast) var(--apas-ease);
}
.apas-tab:hover { background: var(--apas-line-2); }
.apas-tab--active { background: var(--apas-accent); color: var(--apas-on-accent); }
.apas-tabs {
background: var(--apas-surface);
border-radius: var(--apas-radius-2xl);
padding: var(--apas-space-6);
display: flex; gap: 2px;
overflow-x: auto;
}
/* ================================================================
BREADCRUMB
================================================================ */
.apas-breadcrumb {
display: flex; align-items: center; gap: var(--apas-space-8);
color: var(--apas-muted);
font-size: var(--apas-text-caption);
padding: 0 var(--apas-space-4);
}
.apas-breadcrumb a { color: var(--apas-muted); text-decoration: none; cursor: pointer; }
.apas-breadcrumb a:hover { color: var(--apas-ink); }
.apas-breadcrumb__sep { opacity: .5; }
.apas-breadcrumb__current { color: var(--apas-ink); font-weight: var(--apas-font-weight-semibold); }
/* ================================================================
RELATED APPLICATION ITEM
States: default (linked), --empty
================================================================ */
.apas-related {
display: flex; align-items: center; justify-content: space-between;
padding: var(--apas-space-10) var(--apas-space-12);
background: var(--apas-surface-2);
border: 1px solid var(--apas-line);
border-radius: var(--apas-radius-lg);
}
.apas-related__left { display: flex; flex-direction: column; }
.apas-related__kind { font-size: var(--apas-text-label); color: var(--apas-muted); text-transform: uppercase; letter-spacing: var(--apas-tracking-wide); }
.apas-related__ref { font-weight: var(--apas-font-weight-semibold); font-size: var(--apas-text-body-sm); }
.apas-related__action { color: var(--apas-ink); text-decoration: none; font-weight: var(--apas-font-weight-semibold); font-size: var(--apas-text-body-sm); }
.apas-related--empty .apas-related__ref { color: var(--apas-muted); font-style: italic; font-weight: var(--apas-font-weight-medium); }
/* ================================================================
KV ROW (Applicant card)
================================================================ */
.apas-kv { display: flex; flex-direction: column; gap: var(--apas-space-8); }
.apas-kv__row {
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--apas-space-12);
padding: var(--apas-space-8) 0;
border-top: 1px solid var(--apas-line-2);
}
.apas-kv__row:first-child { border-top: 0; }
.apas-kv__k { color: var(--apas-muted); font-size: var(--apas-text-caption); }
.apas-kv__v { font-weight: var(--apas-font-weight-medium); text-align: right; word-break: break-word; max-width: 60%; }
/* ================================================================
TIMELINE ITEM (Stage history)
================================================================ */
.apas-timeline { display: flex; flex-direction: column; gap: var(--apas-space-10); }
.apas-timeline-item {
display: flex; gap: var(--apas-space-12); align-items: flex-start;
padding: var(--apas-space-10) var(--apas-space-12);
background: var(--apas-surface-2);
border: 1px solid var(--apas-line);
border-radius: var(--apas-radius-lg);
}
.apas-timeline-item__dot {
width: 10px; height: 10px; border-radius: 50%; margin-top: 6px;
background: var(--apas-ink); flex: 0 0 10px;
}
.apas-timeline-item__dot--green { background: var(--apas-status-ok); }
.apas-timeline-item__dot--amber { background: var(--apas-status-warn); }
.apas-timeline-item__body { flex: 1; }
.apas-timeline-item__head {
display: flex; align-items: center; justify-content: space-between; gap: var(--apas-space-8);
}
.apas-timeline-item__stage { font-weight: var(--apas-font-weight-semibold); font-size: var(--apas-text-body-sm); }
.apas-timeline-item__when { color: var(--apas-muted); font-size: var(--apas-text-label); }
.apas-timeline-item__note { color: var(--apas-ink-2); font-size: var(--apas-text-caption); margin-top: 2px; }
/* ================================================================
TOP BAR
================================================================ */
.apas-topbar {
background: var(--apas-surface);
border-radius: var(--apas-radius-2xl);
padding: var(--apas-space-12) var(--apas-space-16);
display: flex; align-items: center; gap: var(--apas-space-12);
}
.apas-topbar__search {
flex: 1; position: relative; max-width: 520px;
}
.apas-topbar__search input {
width: 100%;
background: var(--apas-surface-2);
border: 1px solid var(--apas-line);
border-radius: var(--apas-radius-lg);
padding: var(--apas-space-10) var(--apas-space-12) var(--apas-space-10) 38px;
font: inherit;
color: var(--apas-ink);
outline: none;
}
.apas-topbar__search input:focus { border-color: var(--apas-ink); }
.apas-topbar__search-icon {
position: absolute; left: var(--apas-space-12); top: 50%; transform: translateY(-50%);
width: 16px; height: 16px; color: var(--apas-muted);
}
.apas-topbar__lang {
height: 40px; padding: 0 var(--apas-space-12);
border-radius: var(--apas-radius-lg);
background: var(--apas-surface-2);
border: 1px solid var(--apas-line);
display: flex; align-items: center; gap: var(--apas-space-6);
cursor: pointer;
color: var(--apas-ink-2);
font-weight: var(--apas-font-weight-medium);
}
.apas-topbar__user {
display: flex; align-items: center; gap: var(--apas-space-10);
padding: 4px var(--apas-space-12) 4px 4px;
background: var(--apas-surface-2);
border: 1px solid var(--apas-line);
border-radius: var(--apas-radius-full);
cursor: pointer;
}
.apas-topbar__user-meta { line-height: 1.1; }
.apas-topbar__user-name { font-size: var(--apas-text-body-sm); font-weight: var(--apas-font-weight-semibold); }
.apas-topbar__user-role { font-size: var(--apas-text-label); color: var(--apas-muted); }
.apas-topbar__signout {
height: 40px; padding: 0 var(--apas-space-16);
border-radius: var(--apas-radius-lg);
background: var(--apas-accent);
color: var(--apas-on-accent);
border: 0;
font-weight: var(--apas-font-weight-semibold);
cursor: pointer;
font: inherit; font-weight: var(--apas-font-weight-semibold);
}
/* ================================================================
SIDEBAR (app shell, expanded / collapsed)
================================================================ */
.apas-sidebar {
background: var(--apas-surface);
border-radius: var(--apas-radius-2xl);
padding: 18px 14px;
display: flex;
flex-direction: column;
gap: var(--apas-space-6);
width: 248px;
height: 100%;
overflow: hidden;
transition: width var(--apas-duration-slow) var(--apas-ease),
padding var(--apas-duration-slow) var(--apas-ease);
}
.apas-sidebar--collapsed {
width: 76px;
padding: 18px 10px;
align-items: center;
}
.apas-sidebar__brand {
display: flex; align-items: center; justify-content: space-between;
gap: var(--apas-space-10);
padding: 4px var(--apas-space-6) 14px;
}
.apas-sidebar__logo svg { height: 26px; width: auto; display: block; color: var(--apas-ink); }
.apas-sidebar__mark {
width: 36px; height: 36px; border-radius: var(--apas-radius-md);
background: var(--apas-accent); color: var(--apas-on-accent);
display: none; place-items: center;
font-weight: var(--apas-font-weight-bold); font-size: var(--apas-text-body-sm);
}
.apas-sidebar--collapsed .apas-sidebar__brand { padding: 4px 0 14px; flex-direction: column; }
.apas-sidebar--collapsed .apas-sidebar__logo { display: none; }
.apas-sidebar--collapsed .apas-sidebar__mark { display: grid; }
.apas-sidebar__collapse-btn {
width: 28px; height: 28px; border-radius: var(--apas-radius-sm);
background: var(--apas-surface-2);
border: 1px solid var(--apas-line);
display: grid; place-items: center;
cursor: pointer; color: var(--apas-ink-2);
flex: 0 0 28px;
}
.apas-sidebar__collapse-btn:hover { background: var(--apas-line-2); }
.apas-sidebar__collapse-btn svg { width: 14px; height: 14px; transition: transform var(--apas-duration-slow) var(--apas-ease); }
.apas-sidebar--collapsed .apas-sidebar__collapse-btn svg { transform: rotate(180deg); }
.apas-sidebar__section-label {
font-size: var(--apas-text-label);
color: var(--apas-muted);
text-transform: uppercase;
letter-spacing: var(--apas-tracking-widest);
padding: var(--apas-space-12) var(--apas-space-10) var(--apas-space-4);
white-space: nowrap;
overflow: hidden;
}
.apas-sidebar--collapsed .apas-sidebar__section-label { opacity: 0; height: 8px; padding: 0; pointer-events: none; }
.apas-sidebar--collapsed .apas-nav-item {
padding: 0; gap: 0; width: 44px; height: 44px;
justify-content: center; align-items: center;
}
.apas-sidebar--collapsed .apas-nav-item__label,
.apas-sidebar--collapsed .apas-nav-item__badge { display: none; }
/* ================================================================
DETAIL HEADER (used at top of detail screens)
================================================================ */
.apas-detail-header {
background: var(--apas-surface);
border-radius: var(--apas-radius-2xl);
padding: var(--apas-space-20) var(--apas-space-24);
display: flex; flex-direction: column; gap: var(--apas-space-14);
}
.apas-detail-header__top {
display: flex; justify-content: space-between; align-items: flex-start;
gap: var(--apas-space-16); flex-wrap: wrap;
}
.apas-detail-header__title { display: flex; flex-direction: column; gap: var(--apas-space-6); min-width: 0; }
.apas-detail-header__refrow { display: flex; align-items: center; gap: var(--apas-space-10); flex-wrap: wrap; }
.apas-detail-header__ref { font-size: var(--apas-text-caption); color: var(--apas-muted); font-weight: var(--apas-font-weight-semibold); letter-spacing: var(--apas-tracking-wide); }
.apas-detail-header__heading { margin: 0; font-size: var(--apas-text-display-lg); letter-spacing: var(--apas-tracking-tight); font-weight: var(--apas-font-weight-bold); }
.apas-detail-header__sub { color: var(--apas-muted); }
.apas-detail-header__actions { display: flex; gap: var(--apas-space-8); flex-wrap: wrap; }
.apas-detail-header__meta {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--apas-space-14);
padding-top: var(--apas-space-6);
}
.apas-meta {
background: var(--apas-surface-2);
border: 1px solid var(--apas-line);
border-radius: var(--apas-radius-xl);
padding: var(--apas-space-12) var(--apas-space-14);
}
.apas-meta__label { font-size: var(--apas-text-label); color: var(--apas-muted); text-transform: uppercase; letter-spacing: var(--apas-tracking-wider); }
.apas-meta__value { font-weight: var(--apas-font-weight-semibold); margin-top: var(--apas-space-4); }
@media (max-width: 1100px) {
.apas-detail-header__meta { grid-template-columns: 1fr 1fr; }
}
/* ================================================================
HERO (dashboard)
================================================================ */
.apas-hero {
background: var(--apas-surface);
border-radius: var(--apas-radius-2xl);
padding: var(--apas-space-20) var(--apas-space-24);
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--apas-space-24);
align-items: center;
min-height: 180px;
}
.apas-hero__lead { display: flex; flex-direction: column; gap: var(--apas-space-12); }
.apas-hero__title { margin: 0; font-size: var(--apas-text-display-lg); font-weight: var(--apas-font-weight-bold); letter-spacing: var(--apas-tracking-tight); }
.apas-hero__copy { margin: 0; color: var(--apas-muted); max-width: 520px; }
.apas-hero__cta { display: flex; gap: var(--apas-space-10); flex-wrap: wrap; }
.apas-hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--apas-space-12); }
@media (max-width: 1100px) {
.apas-hero { grid-template-columns: 1fr; }
}
/* ================================================================
DATE INPUT — styled native
----------------------------------------------------------------
Styled to match .apas-input but reveals the native browser
calendar on click. Use when you want zero JS and the platform
picker is acceptable.
================================================================ */
.apas-date-input {
width: 100%;
padding: var(--apas-space-10) var(--apas-space-12);
background: var(--apas-surface-2);
border: 1px solid var(--apas-line);
border-radius: var(--apas-radius-md);
font: inherit;
font-size: var(--apas-text-body-md);
color: var(--apas-ink);
outline: none;
transition: background var(--apas-duration-fast) var(--apas-ease),
border-color var(--apas-duration-fast) var(--apas-ease);
}
.apas-date-input:focus { background: var(--apas-surface); border-color: var(--apas-ink); }
.apas-date-input::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0.55;
filter: grayscale(1);
transition: opacity var(--apas-duration-fast) var(--apas-ease);
}
.apas-date-input:hover::-webkit-calendar-picker-indicator { opacity: 0.85; }
/* ================================================================
DATE PICKER — calendar popover
----------------------------------------------------------------
Self-contained calendar surface. Render inline (e.g. inside a
form column) or position absolutely as a popover relative to a
trigger field.
================================================================ */
.apas-datepicker {
width: 280px;
background: var(--apas-surface);
border: 1px solid var(--apas-line);
border-radius: var(--apas-radius-2xl);
padding: var(--apas-space-16);
box-shadow: var(--apas-shadow-md);
display: flex;
flex-direction: column;
gap: var(--apas-space-12);
font-family: var(--apas-font-family);
color: var(--apas-ink);
}
.apas-datepicker__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--apas-space-8);
}
.apas-datepicker__title {
font-weight: var(--apas-font-weight-semibold);
font-size: var(--apas-text-body-md);
letter-spacing: var(--apas-tracking-snug);
}
.apas-datepicker__nav { display: flex; gap: 4px; }
.apas-datepicker__nav-btn {
width: 28px; height: 28px;
border-radius: var(--apas-radius-sm);
background: var(--apas-surface-2);
border: 1px solid var(--apas-line);
display: grid; place-items: center;
cursor: pointer;
color: var(--apas-ink-2);
transition: background var(--apas-duration-fast) var(--apas-ease);
font: inherit; font-weight: var(--apas-font-weight-bold); font-size: 14px;
padding: 0; line-height: 1;
}
.apas-datepicker__nav-btn:hover { background: var(--apas-line-2); }
.apas-datepicker__nav-btn svg { width: 12px; height: 12px; }
.apas-datepicker__weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.apas-datepicker__weekday {
text-align: center;
font-size: var(--apas-text-label);
color: var(--apas-muted);
font-weight: var(--apas-font-weight-semibold);
padding: 6px 0;
letter-spacing: var(--apas-tracking-wide);
}
.apas-datepicker__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.apas-datepicker__day {
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
border-radius: var(--apas-radius-sm);
font-size: var(--apas-text-body-sm);
font-weight: var(--apas-font-weight-medium);
color: var(--apas-ink);
cursor: pointer;
background: transparent;
border: 1px solid transparent;
transition: background var(--apas-duration-fast) var(--apas-ease),
color var(--apas-duration-fast) var(--apas-ease);
user-select: none;
}
.apas-datepicker__day:hover { background: var(--apas-line-2); }
.apas-datepicker__day--outside { color: var(--apas-muted); opacity: 0.45; }
.apas-datepicker__day--today { border-color: var(--apas-ink); }
.apas-datepicker__day--selected {
background: var(--apas-accent);
color: var(--apas-on-accent);
border-color: var(--apas-accent);
}
.apas-datepicker__day--selected:hover { background: var(--apas-accent-soft); }
.apas-datepicker__day--disabled {
color: var(--apas-muted);
opacity: 0.4;
cursor: not-allowed;
}
.apas-datepicker__day--disabled:hover { background: transparent; }
.apas-datepicker__footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--apas-line-2);
padding-top: var(--apas-space-10);
}
.apas-datepicker__action {
background: none;
border: 0;
padding: 6px 10px;
border-radius: var(--apas-radius-sm);
color: var(--apas-ink-2);
font: inherit;
font-weight: var(--apas-font-weight-semibold);
font-size: var(--apas-text-body-sm);
cursor: pointer;
transition: background var(--apas-duration-fast) var(--apas-ease);
}
.apas-datepicker__action:hover { background: var(--apas-line-2); color: var(--apas-ink); }
/* ================================================================
APP SHELL (sidebar + main)
================================================================ */
.apas-shell {
display: grid;
grid-template-columns: 248px 1fr;
min-height: 100vh;
gap: var(--apas-space-12);
padding: var(--apas-space-12);
transition: grid-template-columns var(--apas-duration-slow) var(--apas-ease);
}
.apas-shell--collapsed { grid-template-columns: 76px 1fr; }
.apas-shell__main { display: flex; flex-direction: column; gap: var(--apas-space-12); min-width: 0; }
@media (max-width: 720px) {
.apas-shell, .apas-shell--collapsed { grid-template-columns: 1fr; padding: var(--apas-space-8); }
}