/*
 * =========================================================
 * NSR-UI
 * Tactical Interface System
 *
 * File:
 * nsr-ui/assets/css/nsr-ui.css
 *
 * Typography:
 * - Primary    : Roboto
 * - Technical  : Roboto Mono
 *
 * Components:
 * - Header
 * - Typography
 * - Cards
 * - Metrics
 * - Buttons
 * - Status
 * - Badge
 * - Forms
 * - Alerts
 * - Progress
 * - Operational Panel
 * - Help Panel
 * - Table
 * - Tabs
 * - Accordion
 * - Dropdown
 * - Menu List
 * - Map
 * - Modal / Dialog
 * - Toast
 * - Loading
 * - Clock
 * - Mobile Menu
 * - Select
 * - Datepicker
 * =========================================================
 */


/* =========================================================
   FONT
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800&family=Roboto+Mono:wght@400;500;600;700&display=swap');


/* =========================================================
   ROOT / VARIABLES
========================================================= */

:root {
    --nsr-bg: #0b0f14;
    --nsr-bg-soft: #10161d;

    --nsr-surface:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.030) 0%,
            rgba(255, 255, 255, 0.014) 45%,
            rgba(0, 0, 0, 0.075) 100%
        );

    --nsr-surface-hover:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045) 0%,
            rgba(255, 255, 255, 0.020) 45%,
            rgba(0, 0, 0, 0.095) 100%
        );

    --nsr-surface-strong:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055) 0%,
            rgba(255, 255, 255, 0.025) 45%,
            rgba(0, 0, 0, 0.12) 100%
        );

    --nsr-border: rgba(255, 255, 255, 0.11);
    --nsr-border-strong: rgba(255, 255, 255, 0.17);

    --nsr-text: #f4f7fa;
    --nsr-text-soft: rgba(244, 247, 250, 0.72);
    --nsr-text-muted: rgba(244, 247, 250, 0.50);

    --nsr-primary: #5aa9ff;
    --nsr-success: #45d483;
    --nsr-warning: #f4bd55;
    --nsr-danger: #ff5f68;
    --nsr-info: #62c6ff;

    --nsr-radius: 14px;
    --nsr-radius-sm: 10px;
    --nsr-radius-lg: 18px;

    --nsr-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    --nsr-shadow-soft: 0 8px 25px rgba(0, 0, 0, 0.18);

    --nsr-transition: 180ms ease;
    --nsr-transition-slow: 280ms ease;

    --nsr-container: 1400px;

    --nsr-safe-bottom: env(safe-area-inset-bottom, 0px);
    --nsr-safe-top: env(safe-area-inset-top, 0px);
    --nsr-safe-left: env(safe-area-inset-left, 0px);
    --nsr-safe-right: env(safe-area-inset-right, 0px);
}


/* =========================================================
   RESET
========================================================= */

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: var(--nsr-bg);
}

body {
    min-height: 100vh;
    min-height: 100dvh;
}

.nsr-app,
.nsr-app *,
.nsr-modal,
.nsr-modal *,
.nsr-toast-container,
.nsr-toast-container * {
    box-sizing: border-box;
}

.nsr-app {
    min-height: 100vh;
    min-height: 100dvh;

    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(90, 169, 255, 0.045),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(69, 212, 131, 0.025),
            transparent 28%
        ),
        var(--nsr-bg);

    color: var(--nsr-text);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.nsr-app button,
.nsr-app input,
.nsr-app select,
.nsr-app textarea {
    font-family:
        "Roboto",
        Arial,
        sans-serif;
}


/* =========================================================
   CONTAINER
========================================================= */

.nsr-container {
    width: 100%;
    max-width: var(--nsr-container);

    margin: 0 auto;

    padding:
        22px
        22px
        40px;
}


/* =========================================================
   HEADER
========================================================= */

.nsr-header {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
    padding: 14px 16px;

    border:
        1px solid var(--nsr-border);

    border-radius:
        var(--nsr-radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035) 0%,
            rgba(255, 255, 255, 0.016) 48%,
            rgba(0, 0, 0, 0.10) 100%
        );

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        var(--nsr-shadow-soft),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    position: relative;
    z-index: 100;
}

.nsr-brand {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
}

.nsr-brand-mark {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid var(--nsr-border-strong);

    border-radius:
        var(--nsr-radius-sm);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.050),
            rgba(255, 255, 255, 0.015),
            rgba(0, 0, 0, 0.12)
        );

    color:
        var(--nsr-primary);

    font-family:
        "Roboto Mono",
        monospace;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.08em;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.nsr-brand-mark > i.bi.bi-camera,
.nsr-brand-mark > i.bi.bi-camera-fill {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    font-size: 50px !important;
    line-height: 1 !important;
}

.nsr-brand-title {
    color:
        var(--nsr-text);

    font-size: 15px;
    font-weight: 700;

    line-height: 1.25;

    letter-spacing: 0.025em;
}

.nsr-brand-subtitle {
    margin-top: 2px;

    color:
        var(--nsr-text-muted);

    font-size: 10px;
    font-weight: 400;

    line-height: 1.35;

    letter-spacing: 0.025em;
}

.nsr-header-actions {
    display: flex;
    align-items: center;

    gap: 8px;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.nsr-kicker {
    margin-bottom: 7px;

    color:
        var(--nsr-primary);

    font-size: 10px;
    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.nsr-title {
    margin: 0;

    color:
        var(--nsr-text);

    font-size:
        clamp(25px, 4vw, 40px);

    font-weight: 700;

    line-height: 1.12;

    letter-spacing: -0.025em;
}

.nsr-subtitle {
    max-width: 760px;

    margin:
        10px 0 0;

    color:
        var(--nsr-text-soft);

    font-size: 14px;
    font-weight: 400;

    line-height: 1.7;
}

.nsr-section-title {
    color:
        var(--nsr-text);

    font-size: 12px;
    font-weight: 700;

    line-height: 1.35;

    letter-spacing: 0.055em;

    text-transform: uppercase;
}

.nsr-section-note {
    margin-top: 3px;

    color:
        var(--nsr-text-muted);

    font-size: 9px;
    font-weight: 500;

    line-height: 1.35;

    letter-spacing: 0.075em;

    text-transform: uppercase;
}

.nsr-text-muted {
    color:
        var(--nsr-text-muted);
}

.nsr-text-soft {
    color:
        var(--nsr-text-soft);
}


/* =========================================================
   SECTION
========================================================= */

.nsr-section {
    margin-top: 24px;
}

.nsr-section > .nsr-section-title {
    margin-bottom: 10px;
}

.nsr-section-spaced {
    margin-top: 16px;
}


/* =========================================================
   GRID
========================================================= */

.nsr-grid {
    display: grid;
    gap: 12px;
}

.nsr-grid-2 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.nsr-grid-3 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.nsr-grid-4 {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.nsr-span-2 {
    grid-column: span 2;
}

.nsr-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nsr-camera-empty {
    align-items: center;
    text-align: center;
}

.nsr-camera-empty .nsr-brand-mark {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.nsr-camera-empty .nsr-brand-mark > i {
    font-size: 36px !important;
    line-height: 1;
}

.nsr-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}


/* =========================================================
   CARD
========================================================= */

.nsr-card {
    min-width: 0;

    border:
        1px solid var(--nsr-border);

    border-radius:
        var(--nsr-radius);

    background:
        var(--nsr-surface);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        var(--nsr-shadow-soft),
        inset 0 1px 0 rgba(255, 255, 255, 0.018);

    overflow: hidden;

    transition:
        background var(--nsr-transition),
        border-color var(--nsr-transition),
        transform var(--nsr-transition);
}

.nsr-card:hover {
    border-color:
        rgba(255, 255, 255, 0.15);

    background:
        var(--nsr-surface-hover);
}


/* =========================================================
   HEADER HOVER LOCK
========================================================= */

/*
 * HEADER BENAR-BENAR STATIC.
 *
 * Header tidak boleh berubah karena:
 * - hover
 * - focus
 * - focus-within
 * - active
 *
 * Tidak mengunci hover pada CARD.
 * .nsr-card:hover tetap bekerja normal.
 */

.nsr-header,
.nsr-header:hover,
.nsr-header:focus,
.nsr-header:focus-within,
.nsr-header:active {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035) 0%,
            rgba(255, 255, 255, 0.016) 48%,
            rgba(0, 0, 0, 0.10) 100%
        ) !important;

    border-color:
        var(--nsr-border) !important;

    transform:
        none !important;

    box-shadow:
        var(--nsr-shadow-soft),
        inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

/*
 * Jika header berada di dalam card,
 * visual header tetap static.
 *
 * Parent/card tetap boleh hover.
 */
.nsr-card:hover > .nsr-header,
.nsr-card:hover .nsr-header {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035) 0%,
            rgba(255, 255, 255, 0.016) 48%,
            rgba(0, 0, 0, 0.10) 100%
        ) !important;

    border-color:
        var(--nsr-border) !important;

    transform:
        none !important;

    box-shadow:
        var(--nsr-shadow-soft),
        inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.nsr-card-body {
    padding: 18px;
}

.nsr-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        15px 18px;

    border-bottom:
        1px solid var(--nsr-border);
}

.nsr-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 8px;

    padding:
        12px 18px;

    border-top:
        1px solid var(--nsr-border);
}


/* =========================================================
   METRIC
========================================================= */

.nsr-metric .nsr-card-body {
    min-height: 145px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nsr-metric-value {
    margin: 9px 0;

    color:
        var(--nsr-text);

    font-family:
        "Roboto Mono",
        monospace;

    font-size: 30px;
    font-weight: 600;

    line-height: 1;

    letter-spacing: -0.03em;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   BUTTON
========================================================= */

.nsr-btn {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        9px 15px;

    border:
        1px solid var(--nsr-border);

    border-radius:
        var(--nsr-radius-sm);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035) 0%,
            rgba(255, 255, 255, 0.015) 52%,
            rgba(0, 0, 0, 0.09) 100%
        );

    color:
        var(--nsr-text);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.005em;

    text-decoration: none;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.022);

    transition:
        background var(--nsr-transition),
        border-color var(--nsr-transition),
        color var(--nsr-transition),
        transform var(--nsr-transition),
        opacity var(--nsr-transition);
}

.nsr-btn:hover {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.050) 0%,
            rgba(255, 255, 255, 0.020) 52%,
            rgba(0, 0, 0, 0.11) 100%
        );

    border-color:
        var(--nsr-border-strong);

    transform:
        none;
}

.nsr-btn:active {
    transform:
        none;
}

.nsr-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.nsr-btn-primary {
    border-color:
        rgba(90, 169, 255, 0.35);

    background:
        linear-gradient(
            145deg,
            rgba(90, 169, 255, 0.15),
            rgba(90, 169, 255, 0.065)
        );

    color:
        #8fc8ff;
}

.nsr-btn-success {
    border-color:
        rgba(69, 212, 131, 0.35);

    background:
        linear-gradient(
            145deg,
            rgba(69, 212, 131, 0.13),
            rgba(69, 212, 131, 0.055)
        );

    color:
        #79e5a7;
}

.nsr-btn-warning {
    border-color:
        rgba(244, 189, 85, 0.35);

    background:
        linear-gradient(
            145deg,
            rgba(244, 189, 85, 0.13),
            rgba(244, 189, 85, 0.055)
        );

    color:
        #ffd77f;
}

.nsr-btn-danger {
    border-color:
        rgba(255, 95, 104, 0.35);

    background:
        linear-gradient(
            145deg,
            rgba(255, 95, 104, 0.13),
            rgba(255, 95, 104, 0.055)
        );

    color:
        #ff9a9f;
}

.nsr-btn-ghost {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.020),
            rgba(0, 0, 0, 0.08)
        );
}

.nsr-btn-sm {
    min-height: 34px;

    padding:
        7px 11px;

    font-size: 11px;
}

.nsr-btn-lg {
    min-height: 46px;

    padding:
        11px 18px;

    font-size: 13px;
}

.nsr-btn-block {
    width: 100%;
}


/* =========================================================
   STATUS
========================================================= */

.nsr-status {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color:
        var(--nsr-text-soft);

    font-family:
        "Roboto Mono",
        monospace;

    font-size: 9px;
    font-weight: 600;

    line-height: 1.2;

    letter-spacing: 0.045em;

    text-transform: uppercase;
}

.nsr-status-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background:
        currentColor;

    box-shadow:
        0 0 9px currentColor;
}

.nsr-status-online {
    color:
        var(--nsr-success);
}

.nsr-status-warning {
    color:
        var(--nsr-warning);
}

.nsr-status-danger {
    color:
        var(--nsr-danger);
}

.nsr-status-info {
    color:
        var(--nsr-info);
}


/* =========================================================
   BADGE
========================================================= */

.nsr-badge {
    display: inline-flex;
    align-items: center;

    min-height: 24px;

    padding:
        4px 9px;

    border:
        1px solid var(--nsr-border);

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012),
            rgba(0, 0, 0, 0.08)
        );

    color:
        var(--nsr-text-soft);

    font-family:
        "Roboto Mono",
        monospace;

    font-size: 8px;
    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.045em;

    text-transform: uppercase;
}

.nsr-badge-success {
    border-color:
        rgba(69, 212, 131, 0.3);

    background:
        linear-gradient(
            145deg,
            rgba(69, 212, 131, 0.10),
            rgba(69, 212, 131, 0.035)
        );

    color:
        #79e5a7;
}

.nsr-badge-warning {
    border-color:
        rgba(244, 189, 85, 0.3);

    background:
        linear-gradient(
            145deg,
            rgba(244, 189, 85, 0.10),
            rgba(244, 189, 85, 0.035)
        );

    color:
        #ffd77f;
}

.nsr-badge-danger {
    border-color:
        rgba(255, 95, 104, 0.3);

    background:
        linear-gradient(
            145deg,
            rgba(255, 95, 104, 0.10),
            rgba(255, 95, 104, 0.035)
        );

    color:
        #ff9a9f;
}

.nsr-badge-info {
    border-color:
        rgba(98, 198, 255, 0.3);

    background:
        linear-gradient(
            145deg,
            rgba(98, 198, 255, 0.10),
            rgba(98, 198, 255, 0.035)
        );

    color:
        #8edcff;
}


/* =========================================================
   FORM
========================================================= */

.nsr-form-group {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.nsr-label {
    color:
        var(--nsr-text-soft);

    font-size: 11px;
    font-weight: 500;

    line-height: 1.4;
}

.nsr-input {
    width: 100%;
    min-height: 42px;

    padding:
        10px 12px;

    border:
        1px solid var(--nsr-border);

    border-radius:
        var(--nsr-radius-sm);

    outline: none;

    background:
        linear-gradient(
            145deg,
            rgba(0, 0, 0, 0.18),
            rgba(255, 255, 255, 0.012),
            rgba(0, 0, 0, 0.24)
        );

    color:
        var(--nsr-text);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.4;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.012);

    transition:
        border-color var(--nsr-transition),
        background var(--nsr-transition),
        box-shadow var(--nsr-transition);
}

.nsr-input::placeholder {
    color:
        var(--nsr-text-muted);
}

.nsr-input:focus {
    border-color:
        rgba(90, 169, 255, 0.45);

    background:
        linear-gradient(
            145deg,
            rgba(0, 0, 0, 0.22),
            rgba(255, 255, 255, 0.018),
            rgba(0, 0, 0, 0.28)
        );

    box-shadow:
        0 0 0 3px rgba(90, 169, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

textarea.nsr-input {
    min-height: 100px;
    resize: vertical;
}


/* =========================================================
   ALERT
========================================================= */

.nsr-alert {
    padding:
        13px 15px;

    border:
        1px solid var(--nsr-border);

    border-radius:
        var(--nsr-radius-sm);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.030),
            rgba(255, 255, 255, 0.012),
            rgba(0, 0, 0, 0.08)
        );

    color:
        var(--nsr-text-soft);

    font-size: 12px;
    font-weight: 400;

    line-height: 1.6;
}

.nsr-alert strong {
    font-weight: 700;
}

.nsr-alert-success {
    border-color:
        rgba(69, 212, 131, 0.25);

    background:
        linear-gradient(
            145deg,
            rgba(69, 212, 131, 0.075),
            rgba(69, 212, 131, 0.025)
        );

    color:
        #a4efc2;
}

.nsr-alert-warning {
    border-color:
        rgba(244, 189, 85, 0.25);

    background:
        linear-gradient(
            145deg,
            rgba(244, 189, 85, 0.075),
            rgba(244, 189, 85, 0.025)
        );

    color:
        #ffe0a0;
}

.nsr-alert-danger {
    border-color:
        rgba(255, 95, 104, 0.25);

    background:
        linear-gradient(
            145deg,
            rgba(255, 95, 104, 0.075),
            rgba(255, 95, 104, 0.025)
        );

    color:
        #ffb1b5;
}


/* =========================================================
   DIVIDER
========================================================= */

.nsr-divider {
    width: 100%;
    height: 1px;

    margin:
        14px 0;

    background:
        var(--nsr-border);
}


/* =========================================================
   PROGRESS
========================================================= */

.nsr-progress {
    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background:
        linear-gradient(
            145deg,
            rgba(0, 0, 0, 0.26),
            rgba(255, 255, 255, 0.035)
        );
}

.nsr-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        var(--nsr-primary);

    box-shadow:
        0 0 12px rgba(90, 169, 255, 0.35);

    transition:
        width 350ms ease;
}


/* =========================================================
   OPERATIONAL PANEL
========================================================= */

.nsr-operational-panel {
    border-color:
        rgba(90, 169, 255, 0.15);
}

.nsr-action-tile {
    min-width: 0;

    padding: 15px;

    border:
        1px solid var(--nsr-border);

    border-radius:
        var(--nsr-radius-sm);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.022),
            rgba(255, 255, 255, 0.008),
            rgba(0, 0, 0, 0.08)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.015);

    transition:
        background var(--nsr-transition),
        border-color var(--nsr-transition),
        transform var(--nsr-transition);
}

.nsr-action-tile:hover {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.040),
            rgba(255, 255, 255, 0.012),
            rgba(0, 0, 0, 0.10)
        );

    border-color:
        var(--nsr-border-strong);

    transform:
        translateY(-1px);
}

.nsr-action-title {
    margin-bottom: 5px;

    color:
        var(--nsr-text);

    font-size: 12px;
    font-weight: 700;

    line-height: 1.35;

    letter-spacing: 0.05em;
}

.nsr-action-description {
    min-height: 38px;

    margin-bottom: 13px;

    color:
        var(--nsr-text-muted);

    font-size: 11px;
    font-weight: 400;

    line-height: 1.6;
}


/* =========================================================
   HELP PANEL
========================================================= */

.nsr-help-panel {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 16px;

    border:
        1px solid rgba(244, 189, 85, 0.2);

    border-radius:
        var(--nsr-radius);

    background:
        linear-gradient(
            145deg,
            rgba(244, 189, 85, 0.060),
            rgba(244, 189, 85, 0.018),
            rgba(0, 0, 0, 0.08)
        );
}

.nsr-help-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(244, 189, 85, 0.3);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(244, 189, 85, 0.09),
            rgba(244, 189, 85, 0.025)
        );

    color:
        var(--nsr-warning);

    font-family:
        "Roboto Mono",
        monospace;

    font-size: 17px;
    font-weight: 600;
}

.nsr-help-content {
    min-width: 0;
    flex: 1;
}


/* =========================================================
   TABLE
========================================================= */

.nsr-table-wrapper {
    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling:
        touch;
}

.nsr-table {
    width: 100%;
    min-width: 620px;

    border-collapse:
        collapse;
}

.nsr-table th,
.nsr-table td {
    padding:
        12px 10px;

    border-bottom:
        1px solid var(--nsr-border);

    text-align: left;

    white-space:
        nowrap;
}

.nsr-table th {
    color:
        var(--nsr-text-muted);

    font-family:
        "Roboto Mono",
        monospace;

    font-size: 8px;
    font-weight: 600;

    line-height: 1.3;

    letter-spacing: 0.065em;

    text-transform: uppercase;
}

.nsr-table td {
    color:
        var(--nsr-text-soft);

    font-size: 12px;
    font-weight: 400;

    line-height: 1.4;
}

.nsr-table tbody tr {
    transition:
        background var(--nsr-transition);
}

.nsr-table tbody tr:hover {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.008)
        );
}

.nsr-table tbody tr:last-child td {
    border-bottom: 0;
}


/* =========================================================
   TABS
========================================================= */

.nsr-tabs {
    display: flex;
    align-items: center;

    gap: 4px;

    overflow-x: auto;

    padding-bottom: 1px;

    border-bottom:
        1px solid var(--nsr-border);
}

.nsr-tab {
    position: relative;

    flex: 0 0 auto;

    min-height: 40px;

    padding:
        9px 13px;

    border: 0;

    background: transparent;

    color:
        var(--nsr-text-muted);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.3;

    cursor: pointer;

    transition:
        color var(--nsr-transition),
        background var(--nsr-transition);
}

.nsr-tab:hover {
    color:
        var(--nsr-text);
}

.nsr-tab.active {
    color:
        var(--nsr-primary);
}

.nsr-tab.active::after {
    content: '';

    position: absolute;

    left: 10px;
    right: 10px;
    bottom: -1px;

    height: 2px;

    border-radius: 2px;

    background:
        var(--nsr-primary);

    box-shadow:
        0 0 10px rgba(90, 169, 255, 0.4);
}

.nsr-tab-panel {
    display: none;

    padding-top: 16px;

    color:
        var(--nsr-text-soft);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.7;
}

.nsr-tab-panel.active {
    display: block;
}


/* =========================================================
   ACCORDION
========================================================= */

.nsr-accordion {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.nsr-accordion-item {
    width: 100%;

    border:
        1px solid var(--nsr-border);

    border-radius:
        var(--nsr-radius-sm);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.022),
            rgba(255, 255, 255, 0.008),
            rgba(0, 0, 0, 0.08)
        );

    overflow: hidden;

    transition:
        border-color var(--nsr-transition),
        background var(--nsr-transition);
}

.nsr-accordion-item:hover {
    border-color:
        rgba(255, 255, 255, 0.15);
}

.nsr-accordion-header {
    position: relative;

    width: 100%;
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding:
        15px 52px 15px 17px;

    margin: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color:
        var(--nsr-text);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.4;

    letter-spacing: 0.005em;

    text-align: left;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition:
        background var(--nsr-transition),
        color var(--nsr-transition);
}

.nsr-accordion-header:hover {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.040),
            rgba(255, 255, 255, 0.008)
        );
}

.nsr-accordion-header.active {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.050),
            rgba(255, 255, 255, 0.012)
        );

    color:
        var(--nsr-text);
}

.nsr-accordion-header::after {
    content: '+';

    position: absolute;

    right: 16px;
    top: 50%;

    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform:
        translateY(-50%);

    border:
        1px solid var(--nsr-border);

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            rgba(0, 0, 0, 0.08)
        );

    color:
        var(--nsr-text-muted);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 17px;
    font-weight: 400;

    line-height: 1;

    transition:
        color var(--nsr-transition),
        border-color var(--nsr-transition),
        background var(--nsr-transition);
}

.nsr-accordion-header.active::after {
    content: '−';

    border-color:
        rgba(90, 169, 255, 0.4);

    background:
        linear-gradient(
            145deg,
            rgba(90, 169, 255, 0.09),
            rgba(90, 169, 255, 0.025)
        );

    color:
        var(--nsr-primary);
}

.nsr-accordion-content {
    width: 100%;

    max-height: 0;

    overflow: hidden;

    padding:
        0 17px;

    margin: 0;

    opacity: 0;

    border-top:
        1px solid transparent;

    background:
        linear-gradient(
            145deg,
            rgba(0, 0, 0, 0.11),
            rgba(255, 255, 255, 0.006)
        );

    color:
        var(--nsr-text-soft);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.7;

    transition:
        max-height 280ms ease,
        opacity 180ms ease,
        padding-top 280ms ease,
        padding-bottom 280ms ease,
        border-color 280ms ease;
}

.nsr-accordion-content.active {
    padding-top: 14px;
    padding-bottom: 16px;

    opacity: 1;

    border-top-color:
        var(--nsr-border);
}

.nsr-accordion-content p {
    margin:
        0 0 10px;
}

.nsr-accordion-content p:last-child {
    margin-bottom: 0;
}

.nsr-accordion-content strong,
.nsr-accordion-content b {
    color:
        var(--nsr-text);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-weight: 700;
}

.nsr-accordion-header:focus-visible {
    box-shadow:
        inset 0 0 0 2px rgba(90, 169, 255, 0.22);
}


/* =========================================================
   DROPDOWN
========================================================= */

.nsr-dropdown {
    position: relative;
    display: inline-block;
}

.nsr-dropdown-toggle {
    position: relative;
}

.nsr-dropdown-menu {
    position: absolute;

    top: calc(100% + 7px);

    right: 0;
    left: auto;

    z-index: 5000;

    min-width: 190px;
    max-width: min(280px, calc(100vw - 24px));

    padding: 7px;

    border: 1px solid rgba(0, 0, 0, 0.78);

    border-radius: var(--nsr-radius);

    background:
        linear-gradient(
            145deg,
            rgba(28, 35, 43, 0.97),
            rgba(8, 12, 17, 0.985)
        );

    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-4px);

    transition:
        opacity var(--nsr-transition),
        transform var(--nsr-transition),
        visibility var(--nsr-transition);
}

.nsr-dropdown-menu.open,
.nsr-dropdown.open .nsr-dropdown-menu,
.nsr-dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

.nsr-dropdown-menu-left {
    right: auto;
    left: 0;
}

.nsr-dropdown-menu-right {
    right: 0;
    left: auto;
}

.nsr-dropdown-item {
    width: 100%;

    min-height: 38px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 9px 11px;

    border: 1px solid transparent;
    border-radius: var(--nsr-radius-sm);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.020),
            rgba(0, 0, 0, 0.08)
        );

    color:
        var(--nsr-text-soft);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 500;

    line-height: 1.35;

    text-align: left;
    text-decoration: none;

    cursor: pointer;

    transition:
        background var(--nsr-transition),
        border-color var(--nsr-transition),
        color var(--nsr-transition),
        transform var(--nsr-transition);
}

.nsr-dropdown-item:hover {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.012),
            rgba(0, 0, 0, 0.08)
        );

    border-color:
        rgba(255, 255, 255, 0.10);

    color:
        var(--nsr-text);

    transform:
        translateX(1px);
}

.nsr-dropdown-item.active {
    background:
        linear-gradient(
            145deg,
            rgba(90, 169, 255, 0.20),
            rgba(30, 75, 115, 0.16)
        );

    color:
        var(--nsr-primary);
}

.nsr-dropdown-item-danger {
    color:
        #ff9a9f;
}

.nsr-dropdown-item-danger:hover {
    background:
        linear-gradient(
            145deg,
            rgba(255, 95, 104, 0.16),
            rgba(90, 25, 31, 0.14)
        );

    color:
        #ffb1b5;
}

.nsr-dropdown-divider {
    height: 1px;

    margin:
        5px 4px;

    background:
        var(--nsr-border);
}

.nsr-dropdown-label {
    padding:
        7px 11px 5px;

    color:
        var(--nsr-text-muted);

    font-family:
        "Roboto Mono",
        monospace;

    font-size: 8px;
    font-weight: 600;

    line-height: 1.3;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


/* =========================================================
   MENU LIST
========================================================= */

.nsr-menu-list {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 4px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.nsr-menu-item {
    width: 100%;
}

.nsr-menu-link {
    position: relative;

    width: 100%;
    min-height: 44px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        10px 12px;

    border:
        1px solid transparent;

    border-radius:
        var(--nsr-radius-sm);

    background:
        transparent;

    color:
        var(--nsr-text-soft);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.35;

    text-decoration: none;

    cursor: pointer;

    transition:
        background var(--nsr-transition),
        border-color var(--nsr-transition),
        color var(--nsr-transition),
        transform var(--nsr-transition);
}

.nsr-menu-link:hover {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.040),
            rgba(255, 255, 255, 0.008)
        );

    border-color:
        var(--nsr-border);

    color:
        var(--nsr-text);

    transform:
        translateX(1px);
}

.nsr-menu-link.active {
    border-color:
        rgba(90, 169, 255, 0.18);

    background:
        linear-gradient(
            145deg,
            rgba(90, 169, 255, 0.10),
            rgba(90, 169, 255, 0.025)
        );

    color:
        #8fc8ff;
}

.nsr-menu-icon {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid var(--nsr-border);

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.020),
            rgba(0, 0, 0, 0.08)
        );

    color:
        var(--nsr-text-muted);

    font-size: 14px;

    transition:
        background var(--nsr-transition),
        border-color var(--nsr-transition),
        color var(--nsr-transition);
}

.nsr-menu-link:hover .nsr-menu-icon,
.nsr-menu-link.active .nsr-menu-icon {
    border-color:
        rgba(90, 169, 255, 0.25);

    background:
        linear-gradient(
            145deg,
            rgba(90, 169, 255, 0.09),
            rgba(90, 169, 255, 0.025)
        );

    color:
        var(--nsr-primary);
}

.nsr-menu-content {
    min-width: 0;
    flex: 1;
}

.nsr-menu-title {
    color:
        inherit;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.35;
}

.nsr-menu-description {
    margin-top: 2px;

    color:
        var(--nsr-text-muted);

    font-size: 9px;
    font-weight: 400;

    line-height: 1.4;
}

.nsr-menu-arrow {
    flex: 0 0 auto;

    color:
        var(--nsr-text-muted);

    font-size: 11px;

    transition:
        transform var(--nsr-transition),
        color var(--nsr-transition);
}

.nsr-menu-link:hover .nsr-menu-arrow {
    color:
        var(--nsr-text-soft);

    transform:
        translateX(2px);
}


/* =========================================================
   MAP
========================================================= */

.nsr-map {
    position: relative;

    width: 100%;
    min-height: 360px;

    overflow: hidden;

    border:
        1px solid var(--nsr-border);

    border-radius:
        var(--nsr-radius-sm);

    background:
        linear-gradient(
            145deg,
            #151b22,
            #0a0e13
        );
}

.nsr-map-grid {
    position: absolute;
    inset: 0;

    opacity: 0.3;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.05) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;
}

.nsr-map-marker {
    position: absolute;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        2px solid rgba(255,255,255,0.85);

    border-radius: 50%;

    font-family:
        "Roboto Mono",
        monospace;

    font-size: 9px;
    font-weight: 600;

    z-index: 2;
}

.nsr-map-marker-blue {
    left: 38%;
    top: 42%;

    background:
        rgba(90, 169, 255, 0.75);

    box-shadow:
        0 0 22px rgba(90, 169, 255, 0.55);
}

.nsr-map-marker-red {
    right: 27%;
    top: 30%;

    background:
        rgba(255, 95, 104, 0.8);

    box-shadow:
        0 0 22px rgba(255, 95, 104, 0.55);
}

.nsr-map-label {
    position: absolute;

    padding:
        5px 8px;

    border:
        1px solid var(--nsr-border);

    border-radius:
        6px;

    background:
        linear-gradient(
            145deg,
            rgba(0, 0, 0, 0.56),
            rgba(0, 0, 0, 0.72)
        );

    color:
        var(--nsr-text-soft);

    font-family:
        "Roboto Mono",
        monospace;

    font-size: 7px;
    font-weight: 600;

    letter-spacing: 0.05em;

    z-index: 3;
}

.nsr-map-label-one {
    left: 34%;
    top: calc(42% + 42px);
}

.nsr-map-label-two {
    right: 22%;
    top: calc(30% + 42px);
}


/* =========================================================
   MODAL / DIALOG
========================================================= */

body.nsr-modal-open {
    overflow: hidden;
}

.nsr-modal {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    font-family:
        "Roboto",
        Arial,
        sans-serif;
}

.nsr-modal.is-open {
    display: flex;
}

.nsr-modal-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(0, 0, 0, 0.68);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    z-index: 0;
}

.nsr-modal-dialog {
    position: relative;

    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);

    display: flex;
    flex-direction: column;

    margin: 0;

    border:
        1px solid var(--nsr-border-strong);

    border-radius:
        var(--nsr-radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(20, 27, 34, 0.98),
            rgba(6, 10, 14, 0.99)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    overflow: hidden;

    z-index: 1;

    animation:
        nsrModalIn 180ms ease;
}


@keyframes nsrModalIn {
    from {
        opacity: 0;
        transform:
            translateY(8px)
            scale(0.985);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

.nsr-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        16px 18px;

    border-bottom:
        1px solid var(--nsr-border);
}

.nsr-modal-title {
    margin: 0;

    color:
        var(--nsr-text);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.35;

    letter-spacing: 0;
}

.nsr-modal-subtitle {
    margin:
        3px 0 0;

    color:
        var(--nsr-text-muted);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 400;

    line-height: 1.5;
}

.nsr-modal-body {
    padding: 18px;

    overflow-y: auto;

    color:
        var(--nsr-text-soft);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.7;
}

.nsr-modal-body h1,
.nsr-modal-body h2,
.nsr-modal-body h3,
.nsr-modal-body h4,
.nsr-modal-body h5,
.nsr-modal-body h6 {
    margin:
        0 0 10px;

    color:
        var(--nsr-text);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-weight: 700;

    line-height: 1.3;
}

.nsr-modal-body h3 {
    font-size: 16px;
}

.nsr-modal-body h4 {
    font-size: 14px;
}

.nsr-modal-body p {
    margin:
        0 0 10px;

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.7;
}

.nsr-modal-body p:last-child {
    margin-bottom: 0;
}

.nsr-modal-body strong,
.nsr-modal-body b {
    color:
        var(--nsr-text);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-weight: 700;
}

.nsr-modal-body small {
    color:
        var(--nsr-text-muted);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 400;

    line-height: 1.5;
}

.nsr-modal-body ul,
.nsr-modal-body ol {
    margin:
        0 0 12px;

    padding-left:
        20px;

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 12px;

    line-height: 1.7;
}

.nsr-modal-body li {
    margin-bottom: 4px;

    font-family:
        "Roboto",
        Arial,
        sans-serif;
}

.nsr-modal-body label {
    color:
        var(--nsr-text-soft);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 500;

    line-height: 1.4;
}

.nsr-modal-body input,
.nsr-modal-body select,
.nsr-modal-body textarea,
.nsr-modal-body button {
    font-family:
        "Roboto",
        Arial,
        sans-serif;
}

.nsr-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 8px;

    padding:
        12px 18px;

    border-top:
        1px solid var(--nsr-border);
}

.nsr-modal-footer .nsr-btn {
    font-family:
        "Roboto",
        Arial,
        sans-serif;
}

.nsr-modal-close {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid var(--nsr-border);

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.030),
            rgba(0, 0, 0, 0.10)
        );

    color:
        var(--nsr-text-muted);

    font-family:
        "Roboto",
        Arial,
        sans-serif !important;

    font-size: 21px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    transition:
        background var(--nsr-transition),
        color var(--nsr-transition),
        border-color var(--nsr-transition);
}

.nsr-modal-close:hover {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.060),
            rgba(0, 0, 0, 0.12)
        );

    color:
        var(--nsr-text);

    border-color:
        var(--nsr-border-strong);
}

.nsr-modal .nsr-mono,
.nsr-modal .nsr-modal-code,
.nsr-modal .nsr-modal-value {
    font-family:
        "Roboto Mono",
        monospace;
}


/* =========================================================
   TOAST
========================================================= */

.nsr-toast-container {
    position: fixed;

    top:
        max(18px, var(--nsr-safe-top));

    right:
        max(18px, var(--nsr-safe-right));

    left: auto;
    bottom: auto;

    z-index: 11000;

    width:
        min(
            360px,
            calc(
                100vw
                - 36px
                - var(--nsr-safe-left)
                - var(--nsr-safe-right)
            )
        );

    max-width:
        calc(
            100vw
            - 36px
            - var(--nsr-safe-left)
            - var(--nsr-safe-right)
        );

    display: flex;
    flex-direction: column;

    gap: 8px;

    margin: 0;
    padding: 0;

    pointer-events: none;

    box-sizing: border-box;

    overflow-x: hidden;
    overflow-y: auto;

    max-height:
        calc(
            100dvh
            - 36px
            - var(--nsr-safe-top)
            - var(--nsr-safe-bottom)
        );

    overscroll-behavior: contain;
}

.nsr-toast {
    position: relative;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin: 0;
    padding:
        12px 13px;

    border:
        1px solid var(--nsr-border);

    border-radius:
        var(--nsr-radius-sm);

    background:
        linear-gradient(
            145deg,
            rgba(20, 27, 34, 0.98),
            rgba(5, 9, 13, 0.99)
        );

    box-shadow:
        var(--nsr-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    color:
        var(--nsr-text);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.5;

    pointer-events: auto;

    opacity: 0;

    transform:
        translateY(-8px);

    transition:
        opacity 180ms ease,
        transform 180ms ease;

    box-sizing: border-box;

    overflow: hidden;
}

.nsr-toast.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}

.nsr-toast-content {
    flex:
        1 1 auto;

    min-width: 0;
    max-width: 100%;

    overflow: hidden;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;

    white-space:
        normal;
}

.nsr-toast-close {
    width: 25px;
    height: 25px;

    flex:
        0 0 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin:
        0 0 0 auto;

    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        var(--nsr-text-muted);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 17px;

    line-height: 1;

    cursor: pointer;
}

.nsr-toast-success {
    border-color: rgba(0, 0, 0, 0.75);

    background:
        linear-gradient(
            145deg,
            rgba(56, 189, 120, 0.30),
            rgba(20, 70, 45, 0.28),
            rgba(4, 12, 8, 0.96)
        );
}

.nsr-toast-warning {
    border-color: rgba(0, 0, 0, 0.75);

    background:
        linear-gradient(
            145deg,
            rgba(244, 189, 85, 0.31),
            rgba(91, 63, 20, 0.28),
            rgba(12, 9, 4, 0.96)
        );
}

.nsr-toast-danger {
    border-color: rgba(0, 0, 0, 0.75);

    background:
        linear-gradient(
            145deg,
            rgba(255, 95, 104, 0.31),
            rgba(91, 27, 34, 0.28),
            rgba(13, 5, 7, 0.96)
        );
}

.nsr-toast-info {
    border-color: rgba(0, 0, 0, 0.75);

    background:
        linear-gradient(
            145deg,
            rgba(56, 189, 248, 0.29),
            rgba(14, 116, 144, 0.28),
            rgba(3, 10, 14, 0.96)
        );
}


/* =========================================================
   LOADING
========================================================= */

.nsr-loading-spinner {
    width: 13px;
    height: 13px;

    flex: 0 0 13px;

    border:
        2px solid currentColor;

    border-right-color:
        transparent;

    border-radius: 50%;

    animation:
        nsrSpin 700ms linear infinite;
}

@keyframes nsrSpin {
    to {
        transform:
            rotate(360deg);
    }
}

.nsr-btn.is-loading {
    cursor: wait;
}


/* =========================================================
   CLOCK
========================================================= */

.nsr-clock {
    margin-top: 8px;

    color:
        var(--nsr-text);

    font-family:
        "Roboto Mono",
        monospace;

    font-size:
        clamp(22px, 4vw, 34px);

    font-weight: 500;

    line-height: 1.2;

    letter-spacing: 0.025em;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   FOOTER
========================================================= */

.nsr-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 35px;

    padding:
        15px 2px;

    border-top:
        1px solid var(--nsr-border);

    color:
        var(--nsr-text-muted);

    font-family:
        "Roboto Mono",
        monospace;

    font-size: 8px;
    font-weight: 500;

    line-height: 1.4;

    letter-spacing: 0.055em;

    text-transform: uppercase;
}


/* =========================================================
   MOBILE MENU
========================================================= */

/*
 * DESKTOP:
 * Tombol menu mobile disembunyikan.
 */
[data-nsr-mobile-menu] {
    display: none;
}


/*
 * MOBILE:
 * Tombol ☰ harus terlihat.
 *
 * Tidak mengubah ukuran, padding,
 * atau layout header.
 */
@media (max-width: 700px) {

    [data-nsr-mobile-menu] {
        display: inline-flex;
    }

}


/*
 * MOBILE MENU OPEN
 *
 * Jangan mengunci scroll halaman.
 *
 * Sebelumnya:
 *
 * body.nsr-mobile-menu-open {
 *     overflow: hidden;
 * }
 *
 * Rule tersebut dihapus karena menyebabkan
 * halaman tidak dapat di-scroll setelah tombol
 * menu ditekan.
 */


/*
 * Ketika mobile menu aktif, tombol menu pada
 * header tidak boleh berubah visual karena
 * hover / focus / active.
 *
 * Hover komponen lain tetap bekerja normal.
 */
body.nsr-mobile-menu-open .nsr-header [data-nsr-mobile-menu],
body.nsr-mobile-menu-open .nsr-header [data-nsr-mobile-menu]:hover,
body.nsr-mobile-menu-open .nsr-header [data-nsr-mobile-menu]:focus,
body.nsr-mobile-menu-open .nsr-header [data-nsr-mobile-menu]:active {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.020),
            rgba(0, 0, 0, 0.08)
        ) !important;

    border-color:
        var(--nsr-border) !important;

    color:
        var(--nsr-text) !important;

    transform:
        none !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.022) !important;

    outline: none;
}


/* =========================================================
   SCROLLBAR
========================================================= */

.nsr-app *,
.nsr-modal * {
    scrollbar-width: thin;

    scrollbar-color:
        rgba(255,255,255,0.16)
        transparent;
}

.nsr-app *::-webkit-scrollbar,
.nsr-modal *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.nsr-app *::-webkit-scrollbar-track,
.nsr-modal *::-webkit-scrollbar-track {
    background: transparent;
}

.nsr-app *::-webkit-scrollbar-thumb,
.nsr-modal *::-webkit-scrollbar-thumb {
    background:
        rgba(255,255,255,0.16);

    border-radius:
        999px;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

    .nsr-grid-4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .nsr-grid-3 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {

    .nsr-container {
        padding:
            14px
            14px
            30px;
    }

    .nsr-header {
        padding: 12px;
    }

    .nsr-brand-mark {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

    .nsr-brand-title {
        font-size: 14px;
    }

    .nsr-brand-subtitle {
        font-size: 9px;
    }

    .nsr-title {
        font-size: 28px;
    }

    .nsr-grid-2,
    .nsr-grid-3,
    .nsr-grid-4 {
        grid-template-columns: 1fr;
    }

    .nsr-span-2 {
        grid-column: auto;
    }

    .nsr-help-panel {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .nsr-help-content {
        flex-basis:
            calc(100% - 60px);
    }

    .nsr-help-panel > .nsr-btn {
        width: 100%;
    }

    .nsr-map {
        min-height: 300px;
    }

    .nsr-footer {
        flex-direction: column;
        align-items: flex-start;
    }


    /* -----------------------------------------
       Dropdown mobile
    ------------------------------------------ */

    .nsr-dropdown-menu {
        max-width:
            calc(100vw - 24px);
    }


    /* -----------------------------------------
       Toast mobile
    ------------------------------------------ */

    .nsr-toast-container {
        top:
            max(10px, var(--nsr-safe-top));

        right:
            max(10px, var(--nsr-safe-right));

        left:
            max(10px, var(--nsr-safe-left));

        bottom: auto;

        width: auto;

        max-width:
            none;

        max-height:
            calc(
                100dvh
                - 20px
                - var(--nsr-safe-top)
                - var(--nsr-safe-bottom)
            );
    }

    .nsr-toast {
        width: 100%;
        max-width: 100%;

        padding:
            12px 13px;
    }

}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width: 576px) {

    .nsr-container {
        padding:
            10px
            10px
            24px;
    }

    .nsr-header {
        margin-bottom: 16px;

        border-radius:
            12px;
    }

    .nsr-card-body {
        padding: 15px;
    }

    .nsr-card-header {
        padding:
            13px 15px;
    }

    .nsr-card-footer {
        padding:
            11px 15px;
    }

    .nsr-section {
        margin-top: 18px;
    }

    .nsr-section-title {
        font-size: 10px;
    }

    .nsr-btn {
        min-height: 40px;
    }

    .nsr-row {
        width: 100%;
    }

    .nsr-row > .nsr-btn {
        flex:
            1 1 auto;
    }


    /* -----------------------------------------
       Accordion
    ------------------------------------------ */

    .nsr-accordion {
        gap: 6px;
    }

    .nsr-accordion-header {
        min-height: 52px;

        padding:
            14px
            47px
            14px
            15px;

        font-size: 12px;
    }

    .nsr-accordion-header::after {
        right: 13px;

        width: 23px;
        height: 23px;

        font-size: 16px;
    }

    .nsr-accordion-content {
        padding-left: 15px;
        padding-right: 15px;

        font-size: 12px;
    }

    .nsr-accordion-content.active {
        padding-top: 13px;
        padding-bottom: 15px;
    }


    /* -----------------------------------------
       Menu list
    ------------------------------------------ */

    .nsr-menu-link {
        min-height: 46px;

        padding:
            9px 10px;
    }

    .nsr-menu-icon {
        width: 30px;
        height: 30px;

        flex-basis: 30px;
    }


    /* -----------------------------------------
       Dropdown
    ------------------------------------------ */

    .nsr-dropdown-menu {
        position: fixed;

        top: auto;
        right: 10px;
        left: 10px;
        bottom: 10px;

        width:
            auto;

        max-width: none;

        max-height:
            calc(100vh - 20px);

        overflow-y:
            auto;

        border-radius:
            14px;

        transform:
            translateY(8px);
    }

    .nsr-dropdown-menu.open,
    .nsr-dropdown.open .nsr-dropdown-menu,
    .nsr-dropdown-menu.active {
        transform:
            translateY(0);
    }


    /* -----------------------------------------
       Modal
    ------------------------------------------ */

    .nsr-modal {
        padding: 10px;
    }

    .nsr-modal-dialog {
        max-height:
            calc(100vh - 20px);

        border-radius:
            14px;
    }

    .nsr-modal-header {
        padding:
            14px 15px;
    }

    .nsr-modal-body {
        padding:
            15px;
    }

    .nsr-modal-footer {
        padding:
            11px 15px;
    }


    /* -----------------------------------------
       Toast
    ------------------------------------------ */

    .nsr-toast-container {
        top:
            max(7px, var(--nsr-safe-top));

        right:
            max(7px, var(--nsr-safe-right));

        left:
            max(7px, var(--nsr-safe-left));

        bottom: auto;

        width: auto;

        max-width: none;

        gap: 6px;

        max-height:
            calc(
                100dvh
                - 14px
                - var(--nsr-safe-top)
                - var(--nsr-safe-bottom)
            );
    }

    .nsr-toast {
        width: 100%;
        max-width: 100%;
        min-height: 44px;

        padding:
            10px 11px;

        font-size: 11px;
    }

    .nsr-toast-close {
        width: 23px;
        height: 23px;

        flex-basis: 23px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .nsr-app *,
    .nsr-modal *,
    .nsr-toast-container * {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}


/* =========================================================
   NSR SELECT
========================================================= */

.nsr-select {
    position: relative;
    width: 100%;
}

.nsr-select-toggle {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;

    border: 1px solid var(--nsr-border);
    border-radius: var(--nsr-radius-sm);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.012)
        );

    color: var(--nsr-text-soft);

    font-family: "Roboto", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;

    cursor: pointer;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.022);

    outline: none;

    transition:
        background var(--nsr-transition),
        border-color var(--nsr-transition),
        color var(--nsr-transition),
        box-shadow var(--nsr-transition);
}

.nsr-select-toggle:hover {
    border-color: rgba(90,169,255,0.28);

    background:
        linear-gradient(
            145deg,
            rgba(90,169,255,0.075),
            rgba(255,255,255,0.018)
        );

    color: var(--nsr-text);
}

.nsr-select.open .nsr-select-toggle {
    border-color: rgba(90,169,255,0.38);

    box-shadow:
        0 0 0 1px rgba(90,169,255,0.08),
        inset 0 1px 0 rgba(255,255,255,0.022);
}

.nsr-select-value {
    flex: 1 1 auto;
    min-width: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nsr-select-arrow {
    flex: 0 0 auto;

    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--nsr-text-muted);

    font-size: 13px;
    line-height: 1;

    transition:
        transform var(--nsr-transition),
        color var(--nsr-transition);
}

.nsr-select.open .nsr-select-arrow {
    transform: rotate(180deg);
    color: var(--nsr-text-soft);
}

.nsr-select-menu {
    position: absolute;

    top: calc(100% + 7px);
    left: 0;
    right: 0;

    z-index: 6000;

    width: 100%;
    max-height: 240px;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 7px;

    border: 1px solid rgba(0,0,0,0.78);
    border-radius: var(--nsr-radius);

    background:
        linear-gradient(
            145deg,
            rgba(27,34,42,0.97),
            rgba(7,11,16,0.985)
        );

    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);

    box-shadow:
        0 18px 45px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.045);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-5px);

    transition:
        opacity var(--nsr-transition),
        transform var(--nsr-transition),
        visibility var(--nsr-transition);

    scrollbar-width: thin;
}

.nsr-select.open .nsr-select-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.nsr-select-option {
    width: 100%;
    min-height: 38px;

    display: flex;
    align-items: center;

    padding: 9px 11px;
    margin: 0;

    border: 1px solid transparent;
    border-radius: var(--nsr-radius-sm);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.018),
            rgba(0,0,0,0.08)
        );

    color: var(--nsr-text-soft);

    font-family: "Roboto", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;

    cursor: pointer;

    transition:
        background var(--nsr-transition),
        border-color var(--nsr-transition),
        color var(--nsr-transition),
        transform var(--nsr-transition);
}

.nsr-select-option + .nsr-select-option {
    margin-top: 3px;
}

.nsr-select-option:hover {
    background:
        linear-gradient(
            145deg,
            rgba(90,169,255,0.16),
            rgba(30,75,115,0.12)
        );

    border-color: rgba(90,169,255,0.14);
    color: var(--nsr-text);

    transform: translateX(1px);
}

.nsr-select-option.active,
.nsr-select-option.selected {
    background:
        linear-gradient(
            145deg,
            rgba(90,169,255,0.18),
            rgba(30,75,115,0.10)
        );

    border-color: rgba(90,169,255,0.18);
    color: #8fc8ff;
}

.nsr-select-option:focus-visible {
    outline: none;

    border-color: rgba(90,169,255,0.35);

    box-shadow:
        inset 0 0 0 1px rgba(90,169,255,0.18);
}

.nsr-select-option[aria-disabled="true"],
.nsr-select-option.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.nsr-select-option[aria-disabled="true"]:hover,
.nsr-select-option.disabled:hover {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.018),
            rgba(0,0,0,0.08)
        );

    border-color: transparent;
    color: var(--nsr-text-soft);
    transform: none;
}


/* =========================================================
   NSR SELECT — OVERLAY FIX
========================================================= */

.nsr-card:has(.nsr-select) {
    overflow: visible;
}

.nsr-card:has(.nsr-select.open) {
    position: relative;
    z-index: 100;
}

.nsr-select.open {
    z-index: 101;
}


/* =========================================================
   SELECT — MOBILE
========================================================= */

@media (max-width: 576px) {

    .nsr-select-toggle {
        min-height: 40px;
        padding: 9px 11px;
    }

    .nsr-select-menu {
        max-height: 220px;
    }

    .nsr-select-option {
        min-height: 40px;
        padding: 10px 11px;
    }

}


/* =========================================================
   NSR DATEPICKER
========================================================= */

/*
 * Reusable NSR-UI Datepicker.
 *
 * Datepicker menggunakan komponen modal NSR-UI
 * yang sudah tersedia di atas.
 *
 * Fungsi CSS:
 * - Field tanggal
 * - Trigger
 * - Icon
 * - Calendar header
 * - Month navigation
 * - Weekday
 * - Calendar grid
 * - Day state
 * - Today state
 * - Selected state
 * - Disabled state
 * - Mobile layout
 *
 * JavaScript datepicker akan mengontrol:
 * - buka / tutup modal
 * - navigasi bulan
 * - pemilihan tanggal
 * - Today
 * - Select
 *
 * Nilai tanggal tetap dapat disimpan sebagai:
 * YYYY-MM-DD
 */


/* -----------------------------------------
   Datepicker field
------------------------------------------ */

.nsr-datepicker {
    position: relative;

    width: 100%;

    min-width: 0;
}

.nsr-datepicker-toggle {
    position: relative;

    width: 100%;
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        10px 12px;

    border:
        1px solid var(--nsr-border);

    border-radius:
        var(--nsr-radius-sm);

    outline: none;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012),
            rgba(0, 0, 0, 0.08)
        );

    color:
        var(--nsr-text-soft);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 500;

    line-height: 1.35;

    text-align: left;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.022);

    transition:
        background var(--nsr-transition),
        border-color var(--nsr-transition),
        color var(--nsr-transition),
        box-shadow var(--nsr-transition);
}

.nsr-datepicker-toggle:hover {
    border-color:
        rgba(90,169,255,0.28);

    background:
        linear-gradient(
            145deg,
            rgba(90,169,255,0.075),
            rgba(255,255,255,0.018),
            rgba(0,0,0,0.08)
        );

    color:
        var(--nsr-text);
}

.nsr-datepicker.open .nsr-datepicker-toggle {
    border-color:
        rgba(90,169,255,0.38);

    box-shadow:
        0 0 0 1px rgba(90,169,255,0.08),
        inset 0 1px 0 rgba(255,255,255,0.022);
}

.nsr-datepicker-value {
    min-width: 0;

    flex:
        1 1 auto;

    overflow: hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    color:
        inherit;
}

.nsr-datepicker-icon {
    width: 20px;
    height: 20px;

    flex:
        0 0 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        var(--nsr-text-muted);

    font-size: 14px;

    line-height: 1;

    transition:
        color var(--nsr-transition);
}

.nsr-datepicker-toggle:hover .nsr-datepicker-icon,
.nsr-datepicker.open .nsr-datepicker-icon {
    color:
        var(--nsr-primary);
}

.nsr-datepicker-input {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* -----------------------------------------
   Datepicker modal
------------------------------------------ */

.nsr-datepicker-modal .nsr-modal-dialog {
    max-width:
        430px;
}

.nsr-datepicker-modal .nsr-modal-body {
    padding:
        15px;
}


/* -----------------------------------------
   Calendar
------------------------------------------ */

.nsr-datepicker-calendar {
    width: 100%;

    min-width: 0;
}


/* -----------------------------------------
   Calendar toolbar
------------------------------------------ */

.nsr-datepicker-toolbar {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom:
        14px;
}

.nsr-datepicker-month {
    min-width: 0;

    flex:
        1 1 auto;

    color:
        var(--nsr-text);

    font-family:
        "Roboto Mono",
        monospace;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.35;

    letter-spacing:
        0.035em;

    text-align: center;

    text-transform:
        uppercase;
}

.nsr-datepicker-nav {
    width: 34px;
    height: 34px;

    flex:
        0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid var(--nsr-border);

    border-radius:
        9px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.030),
            rgba(0,0,0,0.10)
        );

    color:
        var(--nsr-text-muted);

    font-size: 14px;

    line-height: 1;

    cursor: pointer;

    outline: none;

    transition:
        background var(--nsr-transition),
        border-color var(--nsr-transition),
        color var(--nsr-transition);
}

.nsr-datepicker-nav:hover {
    border-color:
        rgba(90,169,255,0.30);

    background:
        linear-gradient(
            145deg,
            rgba(90,169,255,0.10),
            rgba(90,169,255,0.025)
        );

    color:
        var(--nsr-primary);
}

.nsr-datepicker-nav:active {
    transform:
        none;
}

.nsr-datepicker-nav:focus-visible {
    border-color:
        rgba(90,169,255,0.40);

    box-shadow:
        0 0 0 2px rgba(90,169,255,0.10);
}


/* -----------------------------------------
   Weekdays
------------------------------------------ */

.nsr-datepicker-weekdays {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap: 4px;

    margin-bottom:
        5px;
}

.nsr-datepicker-weekday {
    min-width: 0;

    min-height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        var(--nsr-text-muted);

    font-family:
        "Roboto Mono",
        monospace;

    font-size: 8px;
    font-weight: 600;

    line-height: 1;

    letter-spacing:
        0.035em;

    text-transform:
        uppercase;
}


/* -----------------------------------------
   Calendar grid
------------------------------------------ */

.nsr-datepicker-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap: 4px;
}


/* -----------------------------------------
   Calendar day
------------------------------------------ */

.nsr-datepicker-day {
    width: 100%;
    min-width: 0;

    aspect-ratio: 1 / 1;

    min-height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid transparent;

    border-radius:
        9px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.018),
            rgba(0,0,0,0.07)
        );

    color:
        var(--nsr-text-soft);

    font-family:
        "Roboto Mono",
        monospace;

    font-size: 11px;
    font-weight: 500;

    line-height: 1;

    cursor: pointer;

    outline: none;

    transition:
        background var(--nsr-transition),
        border-color var(--nsr-transition),
        color var(--nsr-transition),
        box-shadow var(--nsr-transition);
}

.nsr-datepicker-day:hover {
    border-color:
        rgba(90,169,255,0.22);

    background:
        linear-gradient(
            145deg,
            rgba(90,169,255,0.12),
            rgba(90,169,255,0.025)
        );

    color:
        var(--nsr-text);
}

.nsr-datepicker-day:focus-visible {
    border-color:
        rgba(90,169,255,0.40);

    box-shadow:
        0 0 0 2px rgba(90,169,255,0.10);
}


/* -----------------------------------------
   Empty calendar cell
------------------------------------------ */

.nsr-datepicker-day.is-empty {
    border-color:
        transparent;

    background:
        transparent;

    cursor:
        default;

    pointer-events:
        none;

    box-shadow:
        none;
}


/* -----------------------------------------
   Today
------------------------------------------ */

.nsr-datepicker-day.is-today {
    border-color:
        rgba(90,169,255,0.32);

    color:
        #8fc8ff;

    box-shadow:
        inset 0 0 0 1px rgba(90,169,255,0.08);
}


/* -----------------------------------------
   Selected
------------------------------------------ */

.nsr-datepicker-day.is-selected {
    border-color:
        rgba(90,169,255,0.45);

    background:
        linear-gradient(
            145deg,
            rgba(90,169,255,0.22),
            rgba(30,75,115,0.16)
        );

    color:
        #a9d5ff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.035),
        0 0 12px rgba(90,169,255,0.08);
}

.nsr-datepicker-day.is-selected.is-today {
    border-color:
        rgba(90,169,255,0.55);
}


/* -----------------------------------------
   Disabled
------------------------------------------ */

.nsr-datepicker-day.is-disabled {
    opacity:
        0.30;

    cursor:
        not-allowed;

    pointer-events:
        none;
}


/* -----------------------------------------
   Datepicker footer actions
------------------------------------------ */

.nsr-datepicker-actions {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-top:
        14px;

    padding-top:
        13px;

    border-top:
        1px solid var(--nsr-border);
}

.nsr-datepicker-actions-left,
.nsr-datepicker-actions-right {
    display: flex;
    align-items: center;

    gap: 7px;
}

.nsr-datepicker-actions .nsr-btn {
    min-height:
        38px;

    font-size:
        11px;
}


/* -----------------------------------------
   Datepicker selected information
------------------------------------------ */

.nsr-datepicker-selected {
    margin-bottom:
        12px;

    padding:
        9px 11px;

    border:
        1px solid var(--nsr-border);

    border-radius:
        var(--nsr-radius-sm);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.020),
            rgba(0,0,0,0.08)
        );

    color:
        var(--nsr-text-muted);

    font-family:
        "Roboto Mono",
        monospace;

    font-size:
        9px;

    font-weight:
        500;

    line-height:
        1.4;

    letter-spacing:
        0.035em;

    text-align:
        center;
}

.nsr-datepicker-selected strong {
    color:
        var(--nsr-text);

    font-weight:
        600;
}


/* -----------------------------------------
   Datepicker modal close
------------------------------------------ */

.nsr-datepicker-modal .nsr-modal-header {
    padding:
        14px 16px;
}

.nsr-datepicker-modal .nsr-modal-title {
    font-size:
        14px;
}

.nsr-datepicker-modal .nsr-modal-subtitle {
    font-size:
        10px;
}


/* -----------------------------------------
   Datepicker mobile
------------------------------------------ */

@media (max-width: 576px) {

    .nsr-datepicker-modal {
        padding:
            10px;
    }

    .nsr-datepicker-modal .nsr-modal-dialog {
        width:
            100%;

        max-width:
            none;

        max-height:
            calc(100vh - 20px);

        max-height:
            calc(100dvh - 20px);

        border-radius:
            14px;
    }

    .nsr-datepicker-modal .nsr-modal-header {
        padding:
            13px 14px;
    }

    .nsr-datepicker-modal .nsr-modal-body {
        padding:
            13px;
    }

    .nsr-datepicker-toolbar {
        margin-bottom:
            12px;
    }

    .nsr-datepicker-nav {
        width:
            36px;

        height:
            36px;

        flex-basis:
            36px;
    }

    .nsr-datepicker-weekdays {
        gap:
            3px;
    }

    .nsr-datepicker-grid {
        gap:
            3px;
    }

    .nsr-datepicker-day {
        min-height:
            40px;

        border-radius:
            8px;

        font-size:
            11px;
    }

    .nsr-datepicker-actions {
        flex-wrap:
            wrap;
    }

    .nsr-datepicker-actions-left,
    .nsr-datepicker-actions-right {
        flex:
            1 1 auto;
    }

    .nsr-datepicker-actions-right {
        justify-content:
            flex-end;
    }

}


/* -----------------------------------------
   Datepicker reduced motion
------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .nsr-datepicker-toggle,
    .nsr-datepicker-nav,
    .nsr-datepicker-day,
    .nsr-datepicker-actions .nsr-btn {
        transition:
            none !important;
    }

}