/* * BusClick admin — Material Design 3 layer. * Components from @material/web come themed by lib/md3/theme.css; this file adds what Material Web does not ship * (navigation drawer/rail, top app bar, data tables, stat cards, link chips, snackbar...) using only --md-sys-* tokens. * Written with logical properties so RTL (the default) and LTR both work. */ /* ------------------------------------------------------------------ base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--md-ref-typeface-plain); font-size: 14px; line-height: 22px; letter-spacing: 0; color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface-container); -webkit-font-smoothing: antialiased; } a { color: var(--md-sys-color-primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, p { margin: 0; } :not(:defined) { opacity: 0; } .num { font-variant-numeric: normal; /* Estedad's tnum widens separators */ } .ltr { direction: ltr; unicode-bidi: isolate; } .muted { color: var(--md-sys-color-on-surface-variant); } .nowrap { white-space: nowrap; } .grow { flex: 1 1 auto; } /* MD3 type scale tuned for Estedad (Persian needs more line height; weights carry the hierarchy, not size alone) */ .display-small { font-size: 34px; line-height: 46px; font-weight: 800; } .headline-medium { font-size: 26px; line-height: 38px; font-weight: 800; } .headline-small { font-size: 22px; line-height: 34px; font-weight: 800; } .title-large { font-size: 19px; line-height: 30px; font-weight: 700; } .title-medium { font-size: 15.5px; line-height: 26px; font-weight: 700; } .title-small { font-size: 14px; line-height: 22px; font-weight: 600; } .body-large { font-size: 15.5px; line-height: 27px; } .body-medium { font-size: 14px; line-height: 22px; } .body-small { font-size: 12.5px; line-height: 20px; } .label-large { font-size: 14px; line-height: 22px; font-weight: 600; } .label-medium { font-size: 12.5px; line-height: 18px; font-weight: 500; } strong, b { font-weight: 700; } /* icons (Material Symbols sprite) */ .icon { width: 24px; height: 24px; flex: none; fill: currentColor; vertical-align: middle; } .icon.sm { width: 18px; height: 18px; } .icon.lg { width: 32px; height: 32px; } md-icon > svg { width: 100%; height: 100%; fill: currentColor; } [dir='rtl'] .icon.flip-rtl { transform: scaleX(-1); } /* ------------------------------------------------------------------ app shell */ .app { display: flex; min-height: 100vh; } .nav-drawer { position: sticky; inset-block-start: 0; block-size: 100vh; inline-size: 280px; flex: none; display: flex; flex-direction: column; padding: 12px; background: var(--md-sys-color-surface-container); overflow-y: auto; z-index: 20; } .brand { display: flex; align-items: center; gap: 12px; padding: 12px 16px 20px; color: var(--md-sys-color-on-surface); } .brand-mark { position: relative; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--md-sys-color-primary), color-mix(in srgb, var(--md-sys-color-primary) 75%, #000)); color: var(--md-sys-color-on-primary); box-shadow: 0 4px 12px color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent); } .brand-mark::after { /* accent: the yellow of a bus */ content: ''; position: absolute; inset-block-start: 6px; inset-inline-end: 6px; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--bc-accent); box-shadow: 0 0 0 1.5px var(--md-sys-color-on-primary); } .brand-mark.lg { inline-size: 64px; block-size: 64px; border-radius: 20px; } .brand-mark.lg .icon { width: 36px; height: 36px; } .brand-mark.lg::after { inline-size: 11px; block-size: 11px; inset-block-start: 10px; inset-inline-end: 10px; } :root { --bc-accent: #FFB300; } .brand-text .title-medium { font-weight: 800; } .brand-text { display: flex; flex-direction: column; } .nav-list { display: flex; flex-direction: column; gap: 2px; } .nav-section { padding: 16px 16px 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--md-sys-color-on-surface-variant); opacity: .8; } .nav-section:first-child { padding-block-start: 4px; } .nav-item { position: relative; display: flex; align-items: center; gap: 12px; block-size: 48px; padding-inline: 16px 20px; border-radius: 24px; color: var(--md-sys-color-on-surface-variant); font-weight: 500; text-decoration: none !important; outline: none; } .nav-item::before { /* state layer */ content: ''; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .15s; } .nav-item:hover::before { opacity: .08; } .nav-item:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: -3px; } .nav-item[aria-current='page'] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-weight: 700; } .nav-item .icon-fill { display: none; } .nav-item[aria-current='page'] .icon-line { display: none; } .nav-item[aria-current='page'] .icon-fill { display: block; } .nav-item .nav-label { flex: 1; } .nav-badge { min-inline-size: 16px; block-size: 16px; padding-inline: 4px; border-radius: 8px; background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); font-size: 11px; line-height: 16px; font-weight: 500; text-align: center; } .app-main { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; } .top-app-bar { position: sticky; inset-block-start: 0; z-index: 10; display: flex; align-items: center; gap: 4px; block-size: 64px; padding-inline: 16px 8px; background: var(--md-sys-color-surface-container); } .top-app-bar .title { flex: 1; font-size: 18px; line-height: 28px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-button { display: none; } .account { display: flex; align-items: center; gap: 8px; padding-inline: 8px; } .avatar { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font-weight: 700; } .content { flex: 1; margin: 0 16px 16px 16px; margin-inline-start: 0; padding: 24px; border-radius: 28px; background: var(--md-sys-color-surface); min-inline-size: 0; } .scrim { display: none; } .theme-icon-light { display: none; } :root[data-theme='dark'] .theme-icon-dark { display: none; } :root[data-theme='dark'] .theme-icon-light { display: inline-flex; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .theme-icon-dark { display: none; } :root:not([data-theme='light']) .theme-icon-light { display: inline-flex; } } /* navigation rail (medium) */ @media (max-width: 1199px) and (min-width: 840px) { .nav-drawer { inline-size: 88px; padding: 12px 4px; align-items: center; } .brand { padding: 8px 0 24px; } .brand-text, .nav-section { display: none; } .nav-item { flex-direction: column; gap: 4px; block-size: auto; padding: 0; border-radius: 0; background: none !important; font-size: 12px; line-height: 16px; } .nav-item::before { display: none; } .nav-item .icon-wrap { display: grid; place-items: center; inline-size: 56px; block-size: 32px; border-radius: 16px; position: relative; } .nav-item:hover .icon-wrap { background: color-mix(in srgb, currentColor 8%, transparent); } .nav-item[aria-current='page'] .icon-wrap { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .nav-item[aria-current='page'] { color: var(--md-sys-color-on-surface); } .nav-item .nav-label { flex: none; margin-block-end: 12px; } .nav-badge { position: absolute; inset-block-start: -4px; inset-inline-end: 6px; } .nav-item .icon-wrap .nav-badge { display: block; } } .nav-item .icon-wrap { display: contents; } @media (max-width: 1199px) and (min-width: 840px) { .nav-item .icon-wrap { display: grid; } } /* modal drawer (compact) */ @media (max-width: 839px) { .nav-drawer { position: fixed; inset-block: 0; inset-inline-start: 0; block-size: auto; inline-size: min(320px, 85vw); background: var(--md-sys-color-surface-container-low); border-start-end-radius: 16px; border-end-end-radius: 16px; transform: translateX(100%); transition: transform .25s cubic-bezier(.2, 0, 0, 1); box-shadow: 0 1px 3px rgb(0 0 0 / .3), 0 4px 8px 3px rgb(0 0 0 / .15); } [dir='ltr'] .nav-drawer { transform: translateX(-100%); } .drawer-open .nav-drawer { transform: none; } .drawer-open .scrim { display: block; position: fixed; inset: 0; background: var(--md-sys-color-scrim); opacity: .32; z-index: 15; } .menu-button { display: inline-flex; } .content { margin: 0; border-radius: 28px 28px 0 0; padding: 16px; } .top-app-bar { padding-inline: 4px; } .account .name, .account .account-roles { display: none; } } /* ------------------------------------------------------------------ page structure */ .page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-block-end: 24px; } .page-header .text { flex: 1 1 280px; } .page-header .supporting { color: var(--md-sys-color-on-surface-variant); margin-block-start: 6px; max-inline-size: 72ch; } .page-header .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .back-link { display: inline-flex; align-items: center; gap: 4px; margin-block-end: 8px; color: var(--md-sys-color-on-surface-variant); } .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 16px; } .toolbar form.search { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; } .toolbar md-outlined-text-field { --md-outlined-text-field-top-space: 10px; --md-outlined-text-field-bottom-space: 10px; min-inline-size: 260px; } .grid { display: grid; gap: 16px; } .grid.stats { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-block-end: 24px; } .grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; } .grid.side { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } @media (max-width: 1023px) { .grid.side { grid-template-columns: minmax(0, 1fr); } } .stack { display: flex; flex-direction: column; gap: 16px; } .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ------------------------------------------------------------------ cards */ .card { position: relative; border-radius: 16px; background: var(--md-sys-color-surface); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent); box-shadow: 0 1px 2px rgb(0 0 0 / .04); overflow: hidden; } .card.filled { border: none; background: var(--md-sys-color-surface-container-highest); } .card.tonal { border: none; background: var(--md-sys-color-surface-container-low); } .card.elevated { border: none; background: var(--md-sys-color-surface-container-low); --md-elevation-level: 1; } .card.danger { border-color: var(--md-sys-color-error); } .card-header { display: flex; align-items: center; gap: 12px; padding: 16px 16px 8px; min-block-size: 56px; } .card-header .title-medium { flex: 1; } .card-header > .icon:first-child { inline-size: 36px; block-size: 36px; padding: 7px; border-radius: 10px; color: var(--md-sys-color-primary); background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); } .card-body { padding: 8px 16px 16px; } .card-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 16px 16px; } /* stat card */ .stat { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 16px; background: var(--md-sys-color-surface); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent); box-shadow: 0 1px 2px rgb(0 0 0 / .04); color: inherit; text-decoration: none !important; position: relative; transition: box-shadow .15s, border-color .15s, transform .15s; } a.stat[href]:hover { border-color: var(--md-sys-color-outline-variant); box-shadow: 0 6px 16px rgb(0 0 0 / .08); transform: translateY(-1px); } .stat .stat-icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 14px; flex: none; } .stat .value { font-size: 26px; line-height: 36px; font-weight: 800; font-variant-numeric: normal; /* Estedad's tnum widens separators */ } .stat .label { color: var(--md-sys-color-on-surface-variant); font-size: 13px; line-height: 20px; } .tone-primary { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } .tone-secondary { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .tone-info { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); } .tone-success { background: var(--bc-success-container); color: var(--bc-on-success-container); } .tone-warning { background: var(--bc-warning-container); color: var(--bc-on-warning-container); } .tone-error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); } .tone-neutral { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); } /* ------------------------------------------------------------------ chips */ .chip { display: inline-flex; align-items: center; gap: 4px; block-size: 26px; padding-inline: 10px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; } .chip .icon { width: 16px; height: 16px; } .filter-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; block-size: 34px; padding-inline: 16px; border-radius: 999px; border: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); background: var(--md-sys-color-surface); font-weight: 600; text-decoration: none !important; } .filter-chip:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); } .filter-chip[aria-selected='true'] { border-color: transparent; padding-inline-start: 8px; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .filter-chip .icon { width: 18px; height: 18px; display: none; } .filter-chip[aria-selected='true'] .icon { display: block; } .filter-chip .count { color: var(--md-sys-color-on-surface-variant); font-variant-numeric: normal; /* Estedad's tnum widens separators */ } .filter-chip.attention { border-color: transparent; background: var(--bc-warning-container); color: var(--bc-on-warning-container); } .filter-chip.attention .count { color: inherit; } /* ------------------------------------------------------------------ data table */ .table-wrap { overflow-x: auto; } .data-table { inline-size: 100%; border-collapse: collapse; } .data-table th { position: sticky; inset-block-start: 0; background: var(--md-sys-color-surface-container-low); block-size: 46px; padding: 0 16px; text-align: start; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--md-sys-color-on-surface-variant); border-block-end: 1px solid var(--md-sys-color-outline-variant); } .data-table td { block-size: 56px; padding: 10px 16px; border-block-end: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent); vertical-align: middle; } .data-table tbody tr:last-child td { border-block-end: none; } .data-table tbody tr { transition: background .1s; } .data-table tbody tr[data-href] { cursor: pointer; } .data-table tbody tr:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 5%, transparent); } .data-table td.num, .data-table th.num { text-align: end; font-variant-numeric: normal; /* Estedad's tnum widens separators */ } .data-table .primary-cell { font-weight: 600; color: var(--md-sys-color-on-surface); } .data-table .sub { display: block; color: var(--md-sys-color-on-surface-variant); font-size: 12px; line-height: 16px; } .data-table.compact td { block-size: 44px; padding-block: 6px; } .data-table.compact th, .data-table.compact td { padding-inline: 10px; } .data-table tfoot td { font-weight: 700; background: var(--md-sys-color-surface-container-low); border-block-start: 1px solid var(--md-sys-color-outline-variant); } /* ------------------------------------------------------------------ reports */ .report-period > .icon { margin-inline-end: 4px; } .report-range { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-inline-start: auto; } .toolbar .report-range md-outlined-text-field { min-inline-size: 0; inline-size: 150px; } .report-range md-outlined-button.selected { --md-outlined-button-outline-color: var(--md-sys-color-primary); } .table-empty { padding: 48px 16px !important; text-align: center; color: var(--md-sys-color-on-surface-variant); } .route-cell { max-inline-size: 360px; } .route-cell .route { display: flex; align-items: center; gap: 6px; overflow: hidden; } .route-cell .route span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------------ key/value, lists, timeline */ .kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 12px 24px; margin: 0; } .kv dt { color: var(--md-sys-color-on-surface-variant); } .kv dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; } .list-rows { list-style: none; margin: 0; padding: 0; } .list-rows li { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-block-start: 1px solid var(--md-sys-color-outline-variant); } .list-rows li:first-child { border-block-start: none; } .list-rows .leading { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; flex: none; } .list-rows .body { flex: 1; min-inline-size: 0; } .list-rows .trailing { color: var(--md-sys-color-on-surface-variant); } .timeline { list-style: none; margin: 0; padding: 4px 16px 16px; } .timeline li { position: relative; padding-inline-start: 28px; padding-block-end: 16px; } .timeline li::before { content: ''; position: absolute; inset-inline-start: 5px; inset-block-start: 6px; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--md-sys-color-primary); } .timeline li::after { content: ''; position: absolute; inset-inline-start: 9px; inset-block: 20px -2px; inline-size: 2px; background: var(--md-sys-color-outline-variant); } .timeline li:last-child::after { display: none; } .timeline .when { color: var(--md-sys-color-on-surface-variant); font-size: 12px; } .timeline code { font-size: 11px; color: var(--md-sys-color-on-surface-variant); direction: ltr; unicode-bidi: isolate; display: inline-block; max-inline-size: 100%; overflow-wrap: anywhere; } .money-table { inline-size: 100%; border-collapse: collapse; } .money-table td { padding: 8px 0; } .money-table td:last-child { text-align: end; font-variant-numeric: normal; /* Estedad's tnum widens separators */ } .money-table tr.total td { font-weight: 500; font-size: 16px; border-block-start: 1px solid var(--md-sys-color-outline-variant); padding-block-start: 12px; } .money-table tr.sub td { font-weight: 500; } /* ------------------------------------------------------------------ forms */ .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px 16px; } .form-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .form-row md-outlined-text-field { flex: 1 1 240px; } md-outlined-text-field, md-outlined-select { inline-size: 100%; } .form-row md-outlined-text-field, .toolbar md-outlined-text-field { inline-size: auto; } md-filled-button.danger, md-filled-tonal-button.danger { --md-filled-button-container-color: var(--md-sys-color-error); --md-filled-button-label-text-color: var(--md-sys-color-on-error); --md-filled-button-hover-label-text-color: var(--md-sys-color-on-error); --md-filled-button-focus-label-text-color: var(--md-sys-color-on-error); --md-filled-button-pressed-label-text-color: var(--md-sys-color-on-error); --md-filled-button-icon-color: var(--md-sys-color-on-error); --md-filled-button-hover-icon-color: var(--md-sys-color-on-error); --md-filled-tonal-button-container-color: var(--md-sys-color-error-container); --md-filled-tonal-button-label-text-color: var(--md-sys-color-on-error-container); } md-outlined-button.danger { --md-outlined-button-label-text-color: var(--md-sys-color-error); --md-outlined-button-icon-color: var(--md-sys-color-error); } md-filled-button.success { --md-filled-button-container-color: var(--bc-success); --md-filled-button-label-text-color: var(--bc-on-success); --md-filled-button-icon-color: var(--bc-on-success); } /* inline notes (MD3 has no "alert"; tonal container + icon) */ .note { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 14px; line-height: 24px; } .note .icon { margin-block-start: -2px; } /* ------------------------------------------------------------------ snackbar & empty state */ .snackbar { position: fixed; inset-block-end: 24px; inset-inline-start: 50%; z-index: 50; transform: translate(50%, 150%); display: flex; align-items: center; gap: 8px; min-inline-size: 288px; max-inline-size: min(560px, calc(100vw - 32px)); min-block-size: 48px; padding: 6px 8px 6px 16px; padding-inline: 16px 8px; border-radius: 14px; background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); box-shadow: 0 2px 3px rgb(0 0 0 / .3), 0 6px 10px 4px rgb(0 0 0 / .15); opacity: 0; transition: transform .3s cubic-bezier(.2, 0, 0, 1), opacity .2s; } [dir='ltr'] .snackbar { transform: translate(-50%, 150%); } .snackbar.show { transform: translate(50%, 0); opacity: 1; } [dir='ltr'] .snackbar.show { transform: translate(-50%, 0); } .snackbar .text { flex: 1; } .snackbar.error .icon { color: var(--md-sys-color-error-container); } .snackbar md-icon-button { --md-icon-button-icon-color: var(--md-sys-color-inverse-on-surface); --md-icon-button-hover-icon-color: var(--md-sys-color-inverse-on-surface); } .empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px; text-align: center; color: var(--md-sys-color-on-surface-variant); } .empty-state .icon { width: 48px; height: 48px; } /* ------------------------------------------------------------------ public (payment / login) pages */ .public { min-block-size: 100vh; display: grid; place-items: center; align-content: center; gap: 24px; padding: 32px 16px; background: radial-gradient(1200px 520px at 50% -10%, color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent), transparent 70%), var(--md-sys-color-surface-container); } .public-brand { display: flex; align-items: center; gap: 12px; color: var(--md-sys-color-on-surface); } .public-brand .name { font-size: 20px; line-height: 28px; font-weight: 800; } .public-brand .tagline { font-size: 12.5px; line-height: 18px; color: var(--md-sys-color-on-surface-variant); } .public-card { inline-size: min(100%, 440px); padding: 32px 28px; border-radius: 28px; background: var(--md-sys-color-surface); text-align: center; border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent); box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 18px 40px -12px rgb(0 0 0 / .18); } .public-foot { font-size: 12px; color: var(--md-sys-color-on-surface-variant); } .public-card .hero { display: grid; place-items: center; inline-size: 72px; block-size: 72px; margin: 0 auto 16px; border-radius: 24px; } .public-card .hero .icon { width: 40px; height: 40px; } .public-card .amount { font-size: 30px; line-height: 42px; font-weight: 800; margin: 8px 0 24px; font-variant-numeric: normal; /* Estedad's tnum widens separators */ } .public-card .actions { display: flex; flex-direction: column; gap: 8px; margin-block-start: 24px; } .public-card .actions > * { inline-size: 100%; } .public-card md-outlined-text-field { text-align: start; } .public-card form { display: flex; flex-direction: column; gap: 16px; text-align: start; } .otp-field { --md-outlined-text-field-input-text-size: 24px; letter-spacing: 8px; } md-dialog { max-inline-size: min(560px, calc(100vw - 48px)); } /* Native