:root {
    /* Material-ish neutrals */
    --md-bg: #f3f5f7; /* app background (neutral grey) */
    --md-surface: #ffffff; /* card surface */
    --md-surface-2: #f8fafc; /* subtle alt surface */
    --md-surface-3: #eef2f6; /* stronger surface */
    --md-outline: rgba(15, 23, 42, .10);
    --md-outline-2: rgba(15, 23, 42, .16);
    --md-text: #0f172a;
    --md-text-2: rgba(15, 23, 42, .72);
    --md-text-3: rgba(15, 23, 42, .55);
    /* Primary (keep blue for “Google feel”) */
    --md-primary: #1a73e8;
    --md-primary-weak: rgba(26, 115, 232, .14);
    /* Green accent (owner likes green) */
    --md-accent: #2e7d32; /* muted green */
    --md-accent-weak: rgba(46, 125, 50, .12);
    --md-accent-weak-2: rgba(46, 125, 50, .18);
    /* Elevation */
    --md-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --md-shadow: 0 8px 24px rgba(15,23,42,.08);
    --md-shadow-lg: 0 16px 48px rgba(15,23,42,.12);
    /* Radius */
    --md-r: 14px;
    --md-r-sm: 10px;
    /* Focus ring */
    --md-ring: 0 0 0 3px rgba(26,115,232,.18);
    --md-ring-green: 0 0 0 3px rgba(46,125,50,.18);
}

/* === Nurse UI aliases (map old vars -> md vars) === */
:root {
    --primary: var(--md-primary);
    --primary-light: var(--md-primary-weak);
    --success: var(--md-accent);
    --success-light: var(--md-accent-weak);
    --warning: #ff991f;
    --warning-light: #fffae6;
    --danger: #de350b;
    --danger-light: #ffebe6;
    --text-main: var(--md-text);
    --text-sec: var(--md-text-2);
    --bg-app: var(--md-bg);
    --bg-card: var(--md-surface);
    --border: rgba(15, 23, 42, .14);
    --radius: var(--md-r);
    --shadow-card: var(--md-shadow-sm);
    --shadow-header: var(--md-shadow);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

/* =========================================
   DomiTech – Unified Input System
   ========================================= */

:root {
    --dt-field-h: 38px;
    --dt-radius: 14px;
}

/* ---------- BASE INPUT / SELECT ---------- */

input[type="date"],
input[type="time"],
select {
    box-sizing: border-box;
    min-height: var(--dt-field-h);
    padding: 9px 12px;
    border-radius: var(--dt-radius);
    border: 1px solid rgba(15, 23, 42, .12);
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.92)), radial-gradient(120px 40px at 30% 10%, rgba(26,115,232,.10), transparent 60%);
    color: var(--md-text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--md-shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}

/* ---------- SELECT ARROW ---------- */

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23475569' d='M5.6 7.7a1 1 0 0 1 1.4 0L10 10.7l3-3a1 1 0 1 1 1.4 1.4l-3.7 3.7a1 1 0 0 1-1.4 0L5.6 9.1a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");
}

    /* ---------- HOVER / FOCUS ---------- */

    input[type="date"]:hover,
    input[type="time"]:hover,
    select:hover {
        border-color: rgba(15, 23, 42, .18);
        transform: translateY(-1px);
    }

    input[type="date"]:focus,
    input[type="time"]:focus,
    select:focus {
        outline: none;
        border-color: rgba(26,115,232,.55);
        box-shadow: var(--md-ring), 0 12px 26px rgba(15,23,42,.10);
    }

    /* ---------- DISABLED ---------- */

    input[type="date"]:disabled,
    input[type="time"]:disabled,
    select:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

/* Tasks form layout like Patients form */
.tasks-form {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tasks-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .tasks-field > span {
        font-size: 13px;
        opacity: .85;
        font-weight: 900;
    }

.tasks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* keeps your tasks-input visual but ensures same spacing */
.tasks-input {
    padding: 10px 12px;
    border-radius: 12px;
}

@media (max-width: 900px) {
    .tasks-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================
   TASKS INPUT — NORMAL STATE
   ========================= */

.tasks-input {
    border: 1px solid rgba(0, 0, 0, 0.12);
    outline: none;
    box-shadow: none;
}

    /* =========================
   TASKS INPUT — FOCUS ONLY
   ========================= */

    .tasks-input:focus,
    .tasks-input:focus-visible {
        border-color: rgba(26, 115, 232, 0.55); /* ili tvoja primary */
        box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
    }

    /* =========================
   PREVENT "ALWAYS FOCUSED"
   ========================= */

    .tasks-input:not(:focus):not(:focus-visible) {
        box-shadow: none;
    }

/* MainLayout.razor.css */

.shell {
    height: 100vh;
    display: grid;
    grid-template-rows: var(--topbar-h, 64px) 1fr; /* topbar + body */
    background: var(--md-bg, #f6f7fb);
}

.content {
    flex: 1 1 auto;
    min-height: 0; /* KLJUČNO za scroll u flexu */
    overflow: auto; /* scroll ide ovdje */
    padding: 16px;
    min-width: 0; /* KLJUČNO da grid/flex ne overflowa */
}

/* =========================================
   FLOORPLAN COMMAND SELECT FIX
   Mora biti u app.css ispod globalnog select stylea
   ========================================= */

select.fp-command-select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    padding: 9px 42px 9px 12px;
    border-radius: 13px;
    border: 1px solid rgba(203, 213, 225, 0.9) !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23475569' d='M5.6 7.7a1 1 0 0 1 1.4 0L10 10.7l3-3a1 1 0 1 1 1.4 1.4l-3.7 3.7a1 1 0 0 1-1.4 0L5.6 9.1a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px 14px !important;
    color: #0f172a !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .01em;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color-scheme: light;
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .15s ease;
}

    select.fp-command-select:hover {
        transform: translateY(-1px);
        background-color: #ffffff !important;
        border-color: rgba(147, 197, 253, 0.95) !important;
    }

    select.fp-command-select:focus {
        background-color: #ffffff !important;
        color: #0f172a !important;
        border-color: rgba(96, 165, 250, 1) !important;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.24), 0 12px 24px rgba(2, 6, 23, 0.24) !important;
    }

    select.fp-command-select option {
        background: #ffffff !important;
        color: #0f172a !important;
        font-weight: 700;
    }

/* =========================================
   ENTERPRISE EDGE-TO-EDGE PAGE FIX
   Za Dashboard / Floorplan stranice
   Staviti na DNO app.css
   ========================================= */

/* Kad je u contentu fp-page, makni default layout padding i spoji pozadinu */
.content:has(.fp-page) {
    padding: 0;
    background: radial-gradient(1000px 500px at 0% 0%, rgba(37, 99, 235, 0.07), transparent 55%), radial-gradient(900px 500px at 100% 0%, rgba(16, 185, 129, 0.06), transparent 55%), linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

    /* Sama stranica popunjava cijeli raspoloživi prostor */
    .content:has(.fp-page) .fp-page {
        min-height: 100%;
        height: auto;
        padding: 18px;
        background: transparent;
    }

    /* Floorplan koristi otvoren page layout; kartice su samo pojedini katovi. */
    .content:has(.fp-page) .fp-canvas-shell {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Ako DashboardTab unutra ima svoj page wrapper, neka ne radi drugi rub/padding efekt */
    .content:has(.fp-page) .dash-page {
        min-height: 100%;
        background: transparent;
    }

/* Mobilno: edge-to-edge i dalje, ali s manjim unutarnjim paddingom */
@media (max-width: 768px) {
    .content:has(.fp-page) .fp-page {
        padding: 12px;
    }

}

/* =========================================================
   ENTERPRISE EDGE-TO-EDGE FIX — NurseTasks page
   Put at the VERY END of app.css
   Goal:
   - no visible page margin transition
   - no card-in-card feeling
   - app content and nurse page share one continuous background
   ========================================================= */
.content:has(.nurse-layout) {
    padding: 0 !important;
    background: radial-gradient(900px 520px at 0% 0%, rgba(26, 115, 232, 0.045), transparent 58%), radial-gradient(900px 520px at 100% 0%, rgba(46, 125, 50, 0.035), transparent 58%), linear-gradient(180deg, #f6e7eb 0%, #efe0e5 45%, #e8d8de 100%) !important;
}

    /* Nurse page becomes part of the app canvas, not a centered mobile card */
    .content:has(.nurse-layout) .nurse-layout {
        width: 100% !important;
        max-width: none !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Content spacing stays inside the page, but no outer edge gap */
    .content:has(.nurse-layout) .nurse-content {
        width: 100% !important;
        max-width: none !important;
        min-height: 100% !important;
        padding: 18px !important;
        background: transparent !important;
    }

    /* Main page wrappers should not introduce another background layer */
    .content:has(.nurse-layout) .carelog-page,
    .content:has(.nurse-layout) .nh-container,
    .content:has(.nurse-layout) .handover-page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        background: transparent !important;
    }

/* Desktop gets a roomy enterprise canvas, not a narrow tablet layout */
@media (min-width: 1024px) {
    .content:has(.nurse-layout) .nurse-content {
        padding: 22px 24px 56px 24px !important;
    }

    .content:has(.nurse-layout) .carelog-page,
    .content:has(.nurse-layout) .nh-container,
    .content:has(.nurse-layout) .handover-page {
        max-width: none !important;
    }
}

/* Very wide screens: keep content elegant but still visually edge-to-edge */
@media (min-width: 1680px) {
    .content:has(.nurse-layout) .nurse-content {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}

/* Mobile: keep usable breathing room */
@media (max-width: 768px) {
    .content:has(.nurse-layout) .nurse-content {
        padding: 12px !important;
    }
}