/* Bangla letters, from the server's own copy of Noto Sans Bengali (static/fonts, OFL), so that an
   office computer with no Bangla font shows them. Fetched only by a page that has a Bangla letter
   on it (unicode-range), the taka sign included; a page with neither never asks for it. */
@font-face { font-family: "AIS Bangla"; src: url("../fonts/NotoSansBengali-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; unicode-range: U+0980-09FF, U+200C-200D, U+25CC; }
@font-face { font-family: "AIS Bangla"; src: url("../fonts/NotoSansBengali-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; unicode-range: U+0980-09FF, U+200C-200D, U+25CC; }
@font-face { font-family: "AIS Bangla"; src: url("../fonts/NotoSansBengali-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; unicode-range: U+0980-09FF, U+200C-200D, U+25CC; }
@font-face { font-family: "AIS Bangla"; src: url("../fonts/NotoSansBengali-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; unicode-range: U+0980-09FF, U+200C-200D, U+25CC; }
/* Base semantics, one focus style, and responsive table behavior. Components use Tailwind utilities. */
html { color-scheme: dark; }
body { background: var(--background); color: var(--text-primary); font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-leading); }
*, *::before, *::after { box-sizing: border-box; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none !important; box-shadow: var(--focus-ring) !important; }
:where(a, button, summary, [role=button]):active { filter: brightness(.92); }
:where(button, input, select, textarea):disabled, [aria-disabled=true] { opacity: .5; cursor: not-allowed; }
button:disabled, [aria-disabled=true] { pointer-events: none; }
[hidden] { display: none !important; }
input::placeholder, textarea::placeholder { color: var(--text-disabled); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: var(--spacing-4); height: var(--spacing-4); }
label { font-weight: 500; }
h1 { font-size: var(--type-h1-size) !important; line-height: var(--type-h1-leading) !important; font-weight: 600 !important; }
h2 { font-size: var(--type-h2-size) !important; line-height: var(--type-h2-leading) !important; font-weight: 600 !important; }
h3 { font-size: var(--type-h3-size) !important; line-height: var(--type-h3-leading) !important; font-weight: 600 !important; }

/* The side panel. The gradient is a background on the panel itself, so it stays where it is while
   a long menu scrolls over it, and its transparent middle shows the surface beneath. */
.ui-sidebar { background-color: var(--sidebar-base); background-image: var(--sidebar-gradient); background-repeat: no-repeat; background-attachment: scroll; }

/* The language switch: two of the header's chips side by side, the one the page is in lit. */
.ui-language-switch { display: inline-flex; gap: var(--spacing-1); }
.ui-language-switch .ui-header-chip { text-decoration: none; }
.ui-language-switch .ui-header-chip[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }

/* The page header: a search box for the machines and the controls beside it. Every control is the
   same height, and the search box is a surface rather than the page background. */
.ui-header-search { display: block; width: 100%; height: var(--spacing-12); min-height: var(--spacing-12); padding: 0 var(--spacing-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--type-body-size); line-height: var(--type-body-leading); transition: border-color .15s, background-color .15s; }
.ui-header-search::placeholder { color: var(--text-secondary); }
.ui-header-search:hover, .ui-header-search:focus { border-color: var(--border-strong); }
.ui-header-chip { display: inline-flex; align-items: center; justify-content: center; min-width: var(--spacing-12); height: var(--spacing-12); padding: 0 var(--spacing-3); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--type-body-small-size); line-height: var(--type-body-small-leading); font-weight: 600; letter-spacing: .04em; }
.ui-header-control { display: inline-flex; align-items: center; gap: var(--spacing-2); height: var(--spacing-12); padding: 0 var(--spacing-3); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); cursor: pointer; transition: border-color .15s, background-color .15s; }
.ui-header-control:hover, .ui-profile[open] .ui-header-control { border-color: var(--border-strong); }
.ui-profile { position: relative; }
.ui-profile > summary { list-style: none; }
.ui-profile > summary::-webkit-details-marker { display: none; }
.ui-profile > summary > .ui-icon { transition: transform .15s; }
.ui-profile[open] > summary > .ui-icon { transform: rotate(180deg); }
.ui-profile-panel { position: absolute; right: 0; top: calc(100% + var(--spacing-2)); z-index: 40; display: flex; flex-direction: column; gap: var(--spacing-3); min-width: 16rem; padding: var(--spacing-4); background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
/* Tables: one dense, dark enterprise treatment, shared by every table on the site.
   A charcoal header, hairline row dividers, no vertical rules, and compact type.
   Text columns share the remaining width; metadata and the actions column size to
   their contents, and the primary identifier column keeps the most room. */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--type-table-size); line-height: var(--type-table-leading); }
th { font-size: var(--type-label-size); line-height: var(--type-label-leading); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-secondary); text-align: left; }
table th, table td { padding: var(--spacing-3) var(--spacing-3) !important; vertical-align: middle; }
table td { font-size: var(--type-table-size) !important; line-height: var(--type-table-leading) !important; }
thead th { height: var(--spacing-10); background: var(--surface-raised) !important; border-bottom: 1px solid var(--border); font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; }
tbody tr { height: var(--spacing-12); }
tbody tr > td { border-bottom: 1px solid var(--border); }
tbody tr:last-child > td { border-bottom: 0; }
/* Text columns share remaining space; metadata/actions size to their contents. */
table :where(th, td) { overflow-wrap: anywhere; }
.ui-table-meta, .ui-table-actions { width: 1%; white-space: nowrap; }
.ui-table-actions { text-align: right; vertical-align: middle; }
.ui-table-actions > .ui-actions { justify-content: flex-end; flex-wrap: nowrap; }
.ui-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2); }
.ui-inline-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-4); align-items: end; }
.ui-inline-form > * { min-width: 0; }
@media (min-width: 1024px) {
    .ui-inline-form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
}
table td.text-right { font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--surface-raised); }

/* The table component: a rounded surface shell, an optional scroller, and a footer. */
/* No clipping: a row's action menu opens over the rows below it. The corners are rounded on
   the first header cells and the footer instead. */
.ui-table-shell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.custom-card.ui-table-shell { border-radius: var(--radius-md) !important; }
.ui-table-scroll { overflow: visible; }
.ui-table-shell > :is(table, .ui-table-scroll):first-child thead th:first-child { border-top-left-radius: var(--radius-md); }
.ui-table-shell > :is(table, .ui-table-scroll):first-child thead th:last-child { border-top-right-radius: var(--radius-md); }
.ui-table-shell > .ui-table-footer:last-child { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.ui-table-empty { padding: var(--spacing-8) !important; text-align: center; color: var(--text-secondary); }

/* A sortable column label, with a subtle indicator pinned to the right of its cell. */
.ui-sort { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-1); width: 100%; color: inherit; text-decoration: none; }
.ui-sort:hover { color: var(--text-primary); }
.ui-th-right .ui-sort { justify-content: flex-end; }
.ui-sort-icons { display: inline-flex; align-items: center; color: var(--text-disabled); }
.ui-th[aria-sort="ascending"] .ui-sort-icons, .ui-th[aria-sort="descending"] .ui-sort-icons { color: var(--text-secondary); }

/* The row action menu: a compact rounded-square trigger and its dropdown. */
.ui-menu { position: relative; display: inline-flex; }
.ui-menu .ui-menu-trigger { width: var(--spacing-8); min-height: var(--spacing-8); padding: 0; justify-content: center; border-radius: var(--radius-sm); background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-secondary); }
.ui-menu > summary { list-style: none; }
.ui-menu > summary::-webkit-details-marker { display: none; }
.ui-menu .ui-menu-trigger:hover, .ui-menu[open] > .ui-menu-trigger { background: var(--border); border-color: var(--border-strong); color: var(--text-primary); }
.ui-menu-list { position: absolute; right: 0; top: calc(100% + var(--spacing-1)); z-index: 30; display: flex; flex-direction: column; min-width: 11rem; padding: var(--spacing-1); background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.ui-menu-list .ui-menu-item { display: flex; align-items: center; gap: var(--spacing-2); width: 100%; padding: var(--spacing-2) var(--spacing-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); font-size: var(--type-body-small-size); line-height: var(--type-body-small-leading); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; }
.ui-menu-list .ui-menu-item:hover, .ui-menu-list .ui-menu-item:focus-visible { background: var(--surface); color: var(--text-primary); text-decoration: none; }
.ui-menu-list .ui-menu-item-danger { color: var(--danger); }
.ui-menu-list .ui-menu-item :where(.ui-icon) { color: var(--text-secondary); }
@media (max-width: 1023px) {
    table.stacks .ui-menu-list { right: auto; left: 0; }
}

/* The table footer: how much is shown, the pager, and how many rows a page holds. */
.ui-table-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); background: var(--surface-raised); border-top: 1px solid var(--border); font-size: var(--type-caption-size); line-height: var(--type-caption-leading); color: var(--text-secondary); }
.ui-pager { display: flex; align-items: center; gap: var(--spacing-1); }
.ui-page { display: inline-flex; align-items: center; justify-content: center; min-width: var(--spacing-8); height: var(--spacing-8); padding: 0 var(--spacing-2); border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500; text-decoration: none; }
.ui-page:hover { background: var(--surface); color: var(--text-primary); }
.ui-page[aria-current="page"] { background: var(--background); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.ui-page[aria-disabled="true"] { color: var(--text-disabled); pointer-events: none; }
.ui-rows-per-page { display: flex; align-items: center; gap: var(--spacing-2); }
.ui-rows-per-page select { width: auto; min-height: var(--spacing-8); padding: var(--spacing-1) var(--spacing-2); font-size: var(--type-caption-size); line-height: var(--type-caption-leading); }
.ui-dialog-open { overflow: hidden; }
.leaflet-container { border-radius: var(--radius-md); z-index: 10; }
.apexcharts-tooltip.apexcharts-theme-dark { background: var(--surface-raised) !important; border-color: var(--border-strong) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-md) !important; color: var(--text-primary) !important; }
.apexcharts-tooltip-title { background: var(--surface) !important; color: var(--text-secondary) !important; }
@media (max-width: 1023px) {
    body > div[class*="ml-64"] { width: 100%; padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
    table.stacks thead { display: none; }
    table.stacks, table.stacks tbody, table.stacks tr, table.stacks td { display: block; width: 100%; min-width: 0; }
    table.stacks tbody tr { height: auto; }
    table.stacks tr { padding: var(--spacing-3) 0; border-bottom: 1px solid var(--border); }
    table.stacks tr > td { border-bottom: 0; }
    table.stacks td { padding: var(--spacing-2) var(--spacing-3); text-align: left; white-space: normal; overflow-wrap: anywhere; }
    table.stacks td[data-label]::before { content: attr(data-label); display: block; margin-bottom: var(--spacing-1); font-size: var(--type-label-size); line-height: var(--type-label-leading); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
    table.stacks .ui-table-actions > .ui-actions { justify-content: flex-start; flex-wrap: wrap; }
    table.stacks .ui-table-actions button { white-space: normal; }
    table.stacks td:empty, table.stacks .ui-table-actions:not(:has(a, button)) { display: none; }
    table.stacks :where(input, select, textarea) { min-width: 0; max-width: 100%; }
    table.stacks td :where(.flex) { flex-wrap: wrap; }
    .ui-modal { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--text-primary); }