/* === Avanto Presence - Main Stylesheet === */
/* Inspired by Avanto Care design: clean, Scandinavian, warm */

/*
  Two palettes over one set of tokens. Everything that carries a colour reads a variable, so a
  theme is a list of values rather than a second stylesheet — and anything that hardcodes a
  colour will visibly fail to switch, which is the point.

  --avanto-white is a surface, not a colour: in dark mode it is the raised panel above the
  page background. The name is kept because it appears throughout the sheet and renaming it
  would be a large diff for no behavioural gain.
*/
:root {
    --avanto-bg: #f5f5f0;
    --avanto-white: #ffffff;
    --avanto-text: #1a1a1a;
    --avanto-text-secondary: #6b6b6b;
    --avanto-border: #e8e8e3;
    --avanto-primary: #1a1a1a;
    --avanto-accent: #e87040;
    --avanto-green: #4caf50;
    --avanto-orange: #f5a623;
    --avanto-red: #e74c3c;

    --avanto-badge-green-bg: #e8f5e9;  --avanto-badge-green-fg: #2e7d32;
    --avanto-badge-orange-bg: #fff3e0; --avanto-badge-orange-fg: #e65100;
    --avanto-badge-red-bg: #ffebee;    --avanto-badge-red-fg: #c62828;
    --avanto-badge-gray-bg: #f5f5f5;   --avanto-badge-gray-fg: #757575;
    --avanto-badge-blue-bg: #e3f2fd;   --avanto-badge-blue-fg: #1565c0;

    --avanto-shadow: rgba(0, 0, 0, .06);

    /* Ink for text sitting on a filled button. Not simply white: --avanto-primary inverts
       between themes, so a hardcoded white label vanishes on the light fill dark mode gives it. */
    --avanto-on-primary: #ffffff;
    --avanto-on-danger: #ffffff;

    /* Form fields are their own surface. Left unstyled the browser supplies its own, which is
       white regardless of the palette around it. */
    --avanto-field-bg: #ffffff;
    --avanto-field-text: #1a1a1a;
    --avanto-field-border: #e8e8e3;
    --avanto-field-placeholder: #9a9a94;
    --avanto-focus-ring: rgba(0, 0, 0, .05);

    --avanto-sidebar-width: 220px;
    --avanto-topbar-height: 56px;
    --avanto-radius: 12px;
    --avanto-radius-sm: 8px;

    color-scheme: light;
}

/*
  Warm rather than black. The light theme is a Scandinavian off-white, and a pure-black dark
  theme beside it reads as a different product; these are the same greys with the lightness
  inverted and a little warmth left in. Badge fills are deep and desaturated so that coloured
  status still separates from the surface without glowing on a night shift.
*/
[data-theme="dark"] {
    --avanto-bg: #16161a;
    --avanto-white: #1f1f24;
    --avanto-text: #ececec;
    --avanto-text-secondary: #a0a0a8;
    --avanto-border: #2e2e35;
    --avanto-primary: #ececec;
    --avanto-accent: #f08a5d;
    --avanto-green: #5cbc60;
    --avanto-orange: #f0b445;
    --avanto-red: #ef6a5c;

    --avanto-badge-green-bg: #1d3320;  --avanto-badge-green-fg: #8fd694;
    --avanto-badge-orange-bg: #3a2c14; --avanto-badge-orange-fg: #f0be74;
    --avanto-badge-red-bg: #3a1e1e;    --avanto-badge-red-fg: #f2938a;
    --avanto-badge-gray-bg: #2a2a30;   --avanto-badge-gray-fg: #a8a8b0;
    --avanto-badge-blue-bg: #16283a;   --avanto-badge-blue-fg: #8ec2ee;

    --avanto-shadow: rgba(0, 0, 0, .4);

    --avanto-on-primary: #16161a;
    --avanto-on-danger: #2a1210;

    --avanto-field-bg: #26262c;
    --avanto-field-text: #ececec;
    --avanto-field-border: #3a3a43;
    --avanto-field-placeholder: #7e7e88;
    --avanto-focus-ring: rgba(255, 255, 255, .08);

    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html, body {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: var(--avanto-bg);
    color: var(--avanto-text);
    font-size: 14px;
}

a, .btn-link {
    color: var(--avanto-primary);
    text-decoration: none;
}

a:hover {
    color: var(--avanto-accent);
}

/* === Top Bar === */
.avanto-topbar {
    display: flex;
    align-items: center;
    height: var(--avanto-topbar-height);
    background: var(--avanto-white);
    border-bottom: 1px solid var(--avanto-border);
    padding: 0 24px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.topbar-left {
    display: flex;
    align-items: center;
    min-width: 200px;
}

.avanto-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--avanto-text);
}

.logo-img {
    height: 28px;
    width: auto;
}

.topbar-nav {
    display: flex;
    gap: 4px;
    flex: 1;
    padding: 0 32px;
}

.topbar-nav a, .topbar-nav ::deep a {
    padding: 8px 16px;
    border-radius: var(--avanto-radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--avanto-text-secondary);
    text-decoration: none;
    transition: all 0.15s ease;
}

.topbar-nav a:hover, .topbar-nav ::deep a:hover {
    background: var(--avanto-bg);
    color: var(--avanto-text);
}

.topbar-nav ::deep a.active {
    background: var(--avanto-bg);
    color: var(--avanto-text);
    font-weight: 600;
}

.topbar-spacer {
    flex: 1;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 200px;
    justify-content: flex-end;
}


.user-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.user-menu .btn-link {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--avanto-text-secondary);
    padding: 0;
}

.user-menu .btn-link:hover {
    color: var(--avanto-accent);
}

.btn-login {
    padding: 6px 16px;
    background: var(--avanto-primary);
    color: var(--avanto-on-primary) !important;
    border-radius: var(--avanto-radius-sm);
    font-size: 13px;
    font-weight: 500;
}

/* === Body Layout === */
.avanto-app {
    min-height: 100vh;
}

.avanto-body {
    display: flex;
    padding-top: var(--avanto-topbar-height);
    min-height: 100vh;
}

/* === Sidebar === */
.avanto-sidebar {
    width: var(--avanto-sidebar-width);
    background: var(--avanto-white);
    border-right: 1px solid var(--avanto-border);
    position: fixed;
    top: var(--avanto-topbar-height);
    bottom: 0;
    left: 0;
    overflow-y: auto;
    z-index: 900;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
}

.sidebar-nav .nav-item {
    padding: 2px 8px;
}

.sidebar-nav .nav-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--avanto-radius-sm);
    text-decoration: none;
    color: var(--avanto-text-secondary);
    font-size: 14px;
    transition: all 0.15s ease;
}

.sidebar-nav .nav-link:hover {
    background: var(--avanto-bg);
    color: var(--avanto-text);
}

nav.sidebar-nav a.nav-link.active {
    background: var(--avanto-bg);
    color: var(--avanto-text) !important;
    font-weight: 600;
}

nav.sidebar-nav a.nav-link.active span {
    color: var(--avanto-text) !important;
}

/* Stroke icons, sized once here. currentColor means they take the label's colour, so a
   selected item brightens its glyph along with its text and nothing needs a second rule. */
.nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: .75;
}

a.nav-link.active .nav-icon,
a.nav-link:hover .nav-icon {
    opacity: 1;
}

.nav-label {
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
}

/* === Main Content === */
.avanto-content {
    flex: 1;
    margin-left: var(--avanto-sidebar-width);
    padding: 24px 32px;
    max-width: 1400px;
}

/* === Cards === */
.card {
    background: var(--avanto-white);
    border-radius: var(--avanto-radius);
    border: 1px solid var(--avanto-border);
    padding: 24px;
    margin-bottom: 16px;
}

.card-header {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--avanto-border);
}

/* === Tables === */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--avanto-text-secondary);
    border-bottom: 2px solid var(--avanto-border);
}

.table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--avanto-border);
    font-size: 14px;
}

.table tr:hover td {
    background: var(--avanto-bg);
}

/* === Buttons === */
.btn {
    padding: 8px 20px;
    border-radius: var(--avanto-radius-sm);
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: var(--avanto-primary);
    color: var(--avanto-on-primary);
}

.btn-primary:hover {
    background: #333;
}

.btn-secondary {
    background: var(--avanto-bg);
    color: var(--avanto-text);
    border: 1px solid var(--avanto-border);
}

.btn-secondary:hover {
    background: var(--avanto-border);
}

.btn-danger {
    background: var(--avanto-red);
    color: var(--avanto-on-danger);
}

.btn-sm {
    padding: 4px 12px;
    font-size: 12px;
}

/* === Status Badges === */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.badge-green  { background: var(--avanto-badge-green-bg);  color: var(--avanto-badge-green-fg); }
.badge-orange { background: var(--avanto-badge-orange-bg); color: var(--avanto-badge-orange-fg); }
.badge-red    { background: var(--avanto-badge-red-bg);    color: var(--avanto-badge-red-fg); }
.badge-gray   { background: var(--avanto-badge-gray-bg);   color: var(--avanto-badge-gray-fg); }
.badge-blue   { background: var(--avanto-badge-blue-bg);   color: var(--avanto-badge-blue-fg); }

/* === Text color utilities === */
.text-green { color: var(--avanto-green); }
.text-orange { color: var(--avanto-orange); }
.text-red { color: var(--avanto-red); }

/* === Stat boxes === */
.stat-box {
    text-align: center;
    padding: 8px 24px;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.stat-label {
    font-size: 12px;
    color: var(--avanto-text-secondary);
    margin-top: 4px;
}

/* === Forms === */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--avanto-text-secondary);
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    background: var(--avanto-field-bg);
    color: var(--avanto-field-text);
    border: 1px solid var(--avanto-field-border);
    border-radius: var(--avanto-radius-sm);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.form-control::placeholder {
    color: var(--avanto-field-placeholder);
}

.form-control:focus {
    border-color: var(--avanto-text-secondary);
    box-shadow: 0 0 0 3px var(--avanto-focus-ring);
}

.form-control:disabled,
.form-control[readonly] {
    background: var(--avanto-bg);
    color: var(--avanto-text-secondary);
}

/* Checkboxes, radios and the native date/time pickers are drawn by the browser. accent-color
   tints the first two; color-scheme on :root is what turns the picker panels dark. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--avanto-accent);
}

/* The caret is baked into a data URI, and its colour cannot come from a custom property:
   var() is not substituted inside a quoted string token, so the whole URL would be taken
   literally. Two rules with two arrows is the honest way to do it. */
select.form-control {
    appearance: none;
    background: var(--avanto-field-bg)
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231a1a1a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
        no-repeat right 12px center/12px;
    padding-right: 36px;
}

[data-theme="dark"] select.form-control {
    background: var(--avanto-field-bg)
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ececec' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
        no-repeat right 12px center/12px;
}

/* === Page Header === */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-header h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

/* === Validation === */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--avanto-green);
}

.invalid {
    outline: 1px solid var(--avanto-red);
}

.validation-message {
    color: var(--avanto-red);
    font-size: 12px;
    margin-top: 4px;
}

/* === Error boundary === */
.blazor-error-boundary {
    background: var(--avanto-red);
    padding: 1rem 1rem 1rem 2rem;
    color: white;
    border-radius: var(--avanto-radius-sm);
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* === Error UI === */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* === Utility === */
.text-muted { color: var(--avanto-text-secondary); }
.text-success { color: var(--avanto-green); }
.text-warning { color: var(--avanto-orange); }
.text-danger { color: var(--avanto-red); }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.d-flex { display: flex; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }

/* === Grid for dashboard === */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

/* === Responsive === */
@media (max-width: 768px) {
    .avanto-sidebar {
        width: 60px;
    }
    .avanto-content {
        margin-left: 60px;
        padding: 16px;
    }
    .topbar-nav {
        display: none;
    }
    .nav-label {
        display: none;
    }
}

/* === Theme toggle === */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    margin-right: 14px;
    background: transparent;
    border: 1px solid var(--avanto-border);
    border-radius: var(--avanto-radius-sm);
    color: var(--avanto-text-secondary);
    cursor: pointer;
}

.theme-toggle:hover {
    color: var(--avanto-text);
    border-color: var(--avanto-text-secondary);
}

.theme-icon {
    width: 17px;
    height: 17px;
}

/* Show the theme you would switch *to*, which is the one the button promises. */
[data-theme="dark"] .theme-icon-moon,
[data-theme="light"] .theme-icon-sun {
    display: none;
}

/* === Logo === */
/* Two files rather than a filter: inverting or greying the dark wordmark muddies it, and a
   white version already exists. Pages that do not load this stylesheet — the standalone alarm
   and logout views — keep the single light mark, since they have no theme to follow. */
.logo-dark { display: none; }

[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: inline-block; }

/* === QR codes and the activation modal === */
/* White plate under every QR: a dark-themed page would otherwise invert the code's quiet zone
   and some scanners refuse it outright. The code itself is always dark-on-light. */
.qr-image,
.qr-image-sm {
    background: #ffffff;
    padding: 10px;
    border-radius: var(--avanto-radius-sm);
    border: 1px solid var(--avanto-border);
    image-rendering: pixelated;
}

.qr-image { width: 260px; height: 260px; }
.qr-image-sm { width: 120px; height: 120px; }

.qr-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.qr-modal {
    background: var(--avanto-white);
    color: var(--avanto-text);
    border: 1px solid var(--avanto-border);
    border-radius: var(--avanto-radius);
    padding: 28px;
    text-align: center;
    max-width: 380px;
    box-shadow: 0 12px 40px var(--avanto-shadow);
}

.qr-modal h2 { margin: 0 0 4px; font-size: 18px; }

.qr-code-text {
    margin-top: 14px;
    font-size: 22px;
    letter-spacing: 2px;
}

/* Document import — one proposal per row, with its decision on the right. The row is wide and
   low on purpose: an operator reads down the left column and presses down the right one. */
.import-action {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--avanto-border);
}

.import-action:first-of-type { border-top: none; }

.import-action-text { flex: 1; min-width: 0; }

/* Care instructions arrive as numbered steps in one string; keep the line breaks the plan had. */
.import-action-detail { white-space: pre-wrap; }

.import-action-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.import-action-assignee { width: 210px; }

@media (max-width: 700px) {
    .import-action { flex-direction: column; }
    .import-action-controls { justify-content: flex-start; }
}

/* === Charts (ApexCharts) in dark mode ===
   ApexCharts draws its own light theme regardless of ours: a near-white tooltip, a pale title
   strip and dark axis text. Our text colour is inherited into the tooltip, so in dark mode it
   rendered white on white. These rules repaint those parts from the tokens; light mode keeps the
   library's own look. */
[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light,
[data-theme="dark"] .apexcharts-xaxistooltip,
[data-theme="dark"] .apexcharts-yaxistooltip,
[data-theme="dark"] .apexcharts-menu {
    background: var(--avanto-field-bg);
    border-color: var(--avanto-field-border);
    color: var(--avanto-text);
    box-shadow: 0 2px 8px var(--avanto-shadow);
}

[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: var(--avanto-white);
    border-bottom-color: var(--avanto-field-border);
}

/* The small arrow under the x-axis hover label is drawn with borders. */
[data-theme="dark"] .apexcharts-xaxistooltip-bottom::before,
[data-theme="dark"] .apexcharts-xaxistooltip-bottom::after {
    border-bottom-color: var(--avanto-field-bg);
}

[data-theme="dark"] .apexcharts-menu-item:hover {
    background: var(--avanto-white);
}

/* Axis labels, titles and legends: SVG text and the legend's inline colour. */
[data-theme="dark"] .apexcharts-text,
[data-theme="dark"] .apexcharts-title-text,
[data-theme="dark"] .apexcharts-yaxis-title-text,
[data-theme="dark"] .apexcharts-xaxis-title-text {
    fill: var(--avanto-text-secondary);
}

[data-theme="dark"] .apexcharts-legend-text {
    color: var(--avanto-text) !important;
}

[data-theme="dark"] .apexcharts-gridline,
[data-theme="dark"] .apexcharts-xaxis line {
    stroke: var(--avanto-border);
}

[data-theme="dark"] .apexcharts-toolbar svg {
    fill: var(--avanto-text-secondary);
}