/* Shared Material Design 3 base: fonts, theme colours, layout, top app bar and the components every app uses.
   Colours come from /theme.css, generated by server.js from core/theme/material-theme.json. App-specific styles live in each app folder. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0&display=block'); /* block: on a slow connection the icon names must not flash as text */
@import url("/theme.css");

:root {
  --e1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --e2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
  color-scheme: light dark;
}

* { box-sizing: border-box }
html { background: var(--surface) }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--on-surface); font: 14px/20px Roboto, system-ui, sans-serif; -webkit-font-smoothing: antialiased }
a { color: inherit; text-decoration: none }
h1, h2, h3, p, ul { margin: 0 }
button, input, select { font: inherit; color: inherit }
[hidden] { display: none !important }
.ms { font-family: 'Material Symbols Outlined'; font-size: 24px; line-height: 1; font-weight: normal; font-variation-settings: 'FILL' 0; user-select: none }
.ms.fill { font-variation-settings: 'FILL' 1 }

/* type scale */
.display { font-size: 45px; line-height: 52px; font-weight: 400 }
.headline { font-size: 28px; line-height: 36px; font-weight: 400 }
.title { font-size: 16px; line-height: 24px; font-weight: 500 }
.label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .5px }
.body-l { font-size: 16px; line-height: 24px }
.muted { color: var(--on-surface-variant) }

/* top app bar + page layout */
.bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 24px; height: 64px; padding: 0 16px 0 24px; background: var(--surface-container) }
.logo { display: flex; align-items: center; gap: 12px }
.logo span { font-size: 22px; font-weight: 500; color: var(--on-surface) }
.logo img { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #111 }
.logo img { display: none } /* the round portrait is hidden; delete this line (and the mark below) to bring it back */
/* Corto as a monochrome mark: the transparent drawing (core/icons/corto-mark.png, 128 px) used as a mask, so it takes the
   theme's text colour: light on the dark bar, dark on the light bar */
.logo::before { content: ''; width: 30px; height: 40px; flex: none; background: var(--on-surface); /* 30 px wide: the drawing's empty sides are cropped */
  -webkit-mask: url(/core/icons/corto-mark.png) center / 40px 40px no-repeat; mask: url(/core/icons/corto-mark.png) center / 40px 40px no-repeat }
main { flex: 1; min-width: 0; padding: 32px 40px 48px; display: flex; flex-direction: column; gap: 24px }
.wrap { width: 100%; max-width: 1100px; margin: 0 auto }

/* page header: icon badge + title on the left, actions on the right */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.ph-title { display: flex; align-items: center; gap: 16px }
.ph-actions { display: flex; gap: 8px; flex-wrap: wrap }
.badge { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 16px; font-size: 32px; background: var(--surface-container-highest); color: var(--primary); font-variation-settings: "FILL" 1 }

/* linear progress indicator (core/progress.js): sticks to the bottom edge of the top app bar */
.progress { position: sticky; top: 64px; z-index: 2; height: 4px; margin-top: -4px; background: var(--secondary-container); overflow: hidden; transition: opacity .3s }
.progress i { display: block; height: 100%; width: 0; border-radius: 0 2px 2px 0; background: var(--primary); transition: width .25s ease-out }
.progress.busy i { width: 40%; animation: indeterminate 1.4s infinite ease-in-out }
.progress.done { opacity: 0 }
@keyframes indeterminate { 0% { transform: translateX(-100%) } 60%, 100% { transform: translateX(260%) } }

/* cards */
.card { background: var(--surface-container-low); border-radius: 12px; overflow: hidden }
.card.outlined { background: var(--surface); border: 1px solid var(--outline-variant) }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 24px; border: 0; border-radius: 20px; font-weight: 500; cursor: pointer; white-space: nowrap;
  background: var(--primary); color: var(--on-primary); transition: box-shadow .15s, background .15s }
.btn:hover { box-shadow: var(--e1) }
.btn .ms { font-size: 18px; margin-left: -8px }
.btn.tonal { background: var(--secondary-container); color: var(--on-secondary-container) }
.btn.text { background: transparent; color: var(--primary); padding: 0 12px }
.btn.text:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); box-shadow: none }
.btn:disabled { opacity: .7; cursor: progress }
.btn.busy .ms { animation: spin 1s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.icon-btn { width: 40px; height: 40px; border: 0; border-radius: 20px; background: transparent; color: var(--on-surface-variant); display: inline-grid; place-items: center; cursor: pointer }
.icon-btn:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent) }
.icon-btn.sm { width: 32px; height: 32px } .icon-btn.sm .ms { font-size: 20px }

/* text fields (outlined) */
.field { display: flex; align-items: center; height: 56px; padding: 0 16px; border: 1px solid var(--outline); border-radius: 4px; background: transparent; color: var(--on-surface); outline: 0 }
.field:focus { border: 2px solid var(--primary); padding: 0 15px }
.field::placeholder { color: var(--on-surface-variant) }
/* native select lists take browser colours unless told otherwise; keep them on the theme in both schemes */
select.field { cursor: pointer }
select.field option { background: var(--surface-container-high); color: var(--on-surface); padding: 6px 8px }
select.field option:checked { background: var(--secondary-container); color: var(--on-secondary-container) }

/* switch */
.switch { appearance: none; position: relative; flex: none; width: 52px; height: 32px; margin: 0; border-radius: 16px; border: 2px solid var(--outline); background: var(--surface-container-highest); cursor: pointer; transition: background .15s }
.switch::after { content: ''; position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--outline); transition: transform .15s, width .15s, height .15s, top .15s }
.switch:checked { background: var(--primary); border-color: var(--primary) }
.switch:checked::after { top: 2px; width: 24px; height: 24px; transform: translateX(20px); background: var(--on-primary) }

/* dialog */
.dialog { width: min(92vw, 560px); max-height: 90vh; padding: 24px; border: 0; border-radius: 28px; background: var(--surface-container-high); color: var(--on-surface); box-shadow: var(--e2) }
.dialog::backdrop { background: rgba(0,0,0,.4) }
.dialog h2 { margin-bottom: 4px }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px }
.dialog-actions .btn.text:first-child { margin-right: auto }

@media (max-width: 700px) {
  .bar { gap: 12px; padding: 0 8px 0 16px }
  main { padding: 20px 16px 32px }
  .display { font-size: 36px; line-height: 44px }
}

/* primary tabs */
.tabs { display: flex; border-bottom: 1px solid var(--outline-variant) }
.tabs a { position: relative; display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 16px; font-weight: 500; color: var(--on-surface-variant); flex: 1 1 0; max-width: 240px }
.tabs a:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent) }
.tabs a.on { color: var(--primary) }
.tabs a.on::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary) }

/* M3 secondary tabs (switching within a card): full-width indicator under the active tab, divider below */
/* the divider is an inset shadow and the indicator sits on it, inside the strip: nothing overflows, so no vertical scrollbar */
.sec-tabs { display: flex; box-shadow: inset 0 -1px 0 var(--outline-variant); overflow-x: auto; overflow-y: hidden; scrollbar-width: none }
.sec-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border: 0; background: none; font: inherit; font-weight: 500; color: var(--on-surface-variant); cursor: pointer; white-space: nowrap }
.sec-tab .ms { font-size: 20px } .sec-tab:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent) }
.sec-tab.on { color: var(--on-surface) } .sec-tab.on .ms { color: var(--primary) } .sec-tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--primary) }
.sec-tab .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 11px; background: var(--surface-container-highest); color: var(--on-surface-variant) }
.sec-tab.on .count { background: var(--secondary-container); color: var(--on-secondary-container) }

/* M3 menu behind a menu chip (core/menu.js): checkbox or radio items, trailing text on the right; .sep: a vertical divider between chip groups */
.menu-chip { padding-right: 8px } .menu-chip b { font-weight: 500; opacity: .8 }
.chips .sep { width: 1px; height: 24px; align-self: center; margin: 0 4px; background: var(--outline-variant) }
.menu { position: absolute; z-index: 5; min-width: 220px; max-height: 70vh; overflow-y: auto; padding: 8px 0; border-radius: 4px; background: var(--surface-container); box-shadow: var(--e2) }
.menu hr { border: 0; border-top: 1px solid var(--outline-variant); margin: 8px 0 }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 16px 0 12px; border: 0; background: none; text-align: left; cursor: pointer; white-space: nowrap }
.menu-item:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent) }
.menu-item .ms { color: var(--on-surface-variant) } .menu-item.on .ms { color: var(--primary) }
.menu-item small { margin-left: auto; padding-left: 24px; color: var(--on-surface-variant) }

/* data tables, as Flutter's DataTable in M3: heading row 56 px in titleSmall, data rows at least 48 px in bodyMedium, a divider
   above each data row, numbers right-aligned (.n, Flutter's numeric: true). A hover layer only where a row can be tapped.
   Grid-based tables put .dt-head on their heading row; a <table class="dt"> gets all of it. */
.dt-head, .dt th { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .1px; color: var(--on-surface) }
.dt-head { min-height: 56px }
table.dt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
.dt th { height: 56px; padding: 0 16px 0 0; text-align: left; vertical-align: middle; white-space: nowrap }
.dt td { height: 48px; padding: 6px 16px 6px 0; border-top: 1px solid var(--outline-variant); vertical-align: middle }
.dt :is(th, td):last-child { padding-right: 0 } .dt .n { text-align: right }

/* sortable column headers (Flutter's _SortArrow): the arrow shows only on the sorted column (faint on hover), turns over in
   150 ms for descending, and sits before the label in number columns (.num) so their labels stay right-aligned.
   On phones (headers hidden) a "Sort by" select instead. */
.sort-btn { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 4px; margin: 0 -4px; border: 0; border-radius: 14px; background: none; font: inherit; color: inherit; cursor: pointer }
.sort-btn.num { flex-direction: row-reverse }
.sort-btn:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent) }
.sort-btn .ms { font-size: 16px; opacity: 0; transition: opacity 150ms, transform 150ms }
.sort-btn:hover .ms { opacity: .5 } .sort-btn.on .ms { opacity: 1 } .sort-btn.desc .ms { transform: rotate(180deg) }
.sort-select { display: none; align-items: center; gap: 10px; margin-bottom: -8px } .sort-select .field { flex: 1 }
.field.sm { height: 40px; padding: 0 12px; border-radius: 4px } .field.sm:focus { padding: 0 11px }
@media (max-width: 700px) { .sort-select { display: flex } }

/* tooltip for charts */
.tip { position: absolute; z-index: 4; padding: 6px 10px; border-radius: 8px; background: var(--inverse-surface); color: var(--inverse-on-surface); font-size: 12px; pointer-events: none; white-space: nowrap }