@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}

:root {
    --native-accent: #0877b5;
    --ndt-green: #0877b5;
    --ndt-blue: #0877b5;
    --ndt-navy: #14314e;
    --ndt-red: #0877b5;
    --ndt-ink: #23384d;
    --native-ink: #23384d;
    --ndt-muted: #627387;
    --native-muted: #627387;
    --ndt-line: #e3eaf1;
    --native-line: #e3eaf1;
    --native-bg: #f4f7fb;
    --app-header-height: 0px;
    --app-nav-height: 76px;
    --app-space: clamp(16px, 2.4vw, 36px);
}

html { height: 100%; }
body.ndt-app, body.ndt-login { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.native-app h1, .native-app h2, .native-app h3, .native-app h4, .native-app strong,
.ndt-login h1, .ndt-login h2, .ndt-login strong { font-family: inherit; }
body.native-app {
    height: var(--app-height, 100dvh);
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
    background: var(--native-bg);
    color: var(--native-ink);
    font-size: 14px;
    line-height: 1.6;
}
.native-app :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid #47a5d4;
    outline-offset: 3px;
}
.native-app .native-main {
    grid-row: 1;
    min-height: 0;
    height: 100%;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: calc(var(--app-space) + var(--app-top)) var(--app-space) 36px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c5d1de transparent;
}
.native-app[data-page="request_ndt.index"] .native-main { padding-bottom: 36px; }
.native-app .native-tabbar {
    grid-row: 2;
    position: relative;
    inset: auto;
    width: 100%;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--ndt-line);
    box-shadow: 0 -4px 24px #18365306;
    padding-bottom: var(--app-bottom);
    background: #fff;
}
.native-app .native-tabbar::before { display: none; }
.native-app .native-tabbar-inner {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: var(--app-nav-height);
    max-width: 760px;
    margin: auto;
}
.native-app .native-tabbar a {
    min-height: 52px;
    min-width: 0;
    gap: 5px;
    color: #65758a;
    padding: 11px 3px;
    text-decoration: none;
    transition: color .18s ease;
}
.native-app .native-tabbar a.active { color: var(--native-accent); font-weight: 700; }
.native-app .native-tabbar a:hover { color: var(--native-accent); }
.native-app .native-tabbar .ndt-icon { width: 22px; height: 22px; }
.native-app .native-tabbar span { font-size: 11px; white-space: nowrap; }
.native-app .native-tabbar a.native-add-tab {
    color: var(--native-accent);
    padding: 0 0 10px;
    justify-content: flex-end;
}
.native-app .native-add-circle {
    width: 60px;
    height: 60px;
    bottom: 29px;
    border: 5px solid var(--native-bg);
    background: var(--native-accent);
    box-shadow: 0 5px 14px #0877b52b;
}
.native-app .native-add-tab.active .native-add-circle { background: #075c8d; }
.native-app .native-add-circle .ndt-icon { width: 26px; height: 26px; }
.native-app .native-add-label { font-weight: 700; line-height: 18px; }

.native-app .native-card, .native-app .app-panel, .native-app .metric-card {
    border-color: var(--ndt-line);
    box-shadow: 0 2px 8px #19334d03;
    border-radius: 16px;
}
.screen-intro, .home-overview-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.screen-intro > div, .home-overview-intro > div { min-width: 0; }
.screen-intro h1, .home-overview-intro h1 { font-size: clamp(22px, 2vw, 28px); line-height: 1.3; font-weight: 750; letter-spacing: -.7px; color: #23384d; margin: 0 0 7px; }
.screen-intro p, .home-overview-intro p { font-size: 13px; line-height: 1.65; color: #627387; margin: 0; }
.home-overview-intro .home-greeting { margin-bottom: 3px; }
.screen-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; color: var(--native-accent); margin-bottom: 6px; }
.screen-back .ndt-icon { width: 16px; height: 16px; }
.native-app .native-icon-button { flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; background: #fff; border: 1px solid var(--ndt-line); color: #426079; }
.native-app .native-unread { background: #0877b5; color: white; font-size: 10px; }

.native-app .pertamina-carousel { margin: 0 0 26px; position: relative; border-radius: 20px; background: #14314e; overflow: hidden; isolation: isolate; }
.energy-viewport { position: relative; height: clamp(260px, 23vw, 340px); touch-action: pan-y; }
.native-app .energy-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    min-height: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: #14314e;
    opacity: 0;
    transform: translateX(18px);
    transition: opacity .65s ease, transform .65s ease;
    pointer-events: none;
    animation: none;
}
.native-app .energy-slide.is-active { opacity: 1; transform: none; pointer-events: auto; z-index: 1; }
.energy-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.energy-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0a2437ed 0%, #102c40c7 36%, #102c4060 68%, #102c4020 100%); }
.native-app .energy-slide .energy-content { position: relative; z-index: 1; flex: initial; max-width: 600px; width: 68%; padding: 28px clamp(24px, 3.5vw, 52px) 72px; color: white; }
.energy-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.energy-brand span:first-child { font-weight: 750; font-size: 16px; letter-spacing: -.5px; }
.energy-brand span:last-child { padding-left: 12px; border-left: 1px solid #ffffff50; font-size: 10px; font-weight: 600; letter-spacing: 1.7px; color: #e3eff8; }
.energy-content h2 { font-size: clamp(25px, 2.6vw, 38px); line-height: 1.24; font-weight: 750; letter-spacing: -1px; margin: 0 0 11px; color: #fff; text-wrap: balance; }
.native-app .energy-content p { font-size: 13px; line-height: 1.7; max-width: 390px; color: #e1eaf1; margin: 0 0 18px; }
.energy-link { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 14px; color: #fff; background: #ffffff18; border: 1px solid #ffffff40; border-radius: 9px; font-size: 12px; font-weight: 650; }
.energy-link:hover { color: #fff; background: #ffffff30; }
.energy-link .ndt-icon { width: 16px; height: 16px; }
.carousel-controls { position: absolute; z-index: 3; bottom: 16px; left: clamp(24px, 3.5vw, 52px); right: 20px; display: flex; justify-content: space-between; align-items: center; }
.native-app .carousel-dots { display: flex; gap: 2px; margin: 0; }
.native-app .carousel-dots button { width: 32px; height: 36px; border: 0; padding: 0; background: transparent; display: grid; place-items: center; border-radius: 6px; }
.carousel-dots button span { display: block; width: 6px; height: 6px; border-radius: 6px; background: #ffffff80; transition: width .25s ease; }
.carousel-dots button.active span { width: 23px; background: #fff; }
.carousel-arrows { display: flex; gap: 6px; }
.carousel-arrows button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ffffff35; border-radius: 50%; background: #102c4070; color: white; }
.carousel-arrows button:hover { background: #ffffff25; }
.carousel-arrows .ndt-icon { width: 17px; height: 17px; }

.native-app .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 24px; }
.native-app .metric-card { padding: 20px; min-height: 138px; }
.native-app .metric-top { gap: 8px; font-size: 13px; color: #586d81; align-items: center; }
.native-app .metric-icon { width: 32px; height: 32px; border-radius: 10px; background: #edf5fb; color: #0877b5; flex-shrink: 0; }
.native-app .metric-icon.amber { color: #a26c15; background: #fff6e5; }
.native-app .metric-icon.green { color: #277e5f; background: #edf7f1; }
.native-app .metric-icon.red { color: #56738d; background: #f0f3f8; }
.native-app .metric-icon .ndt-icon { width: 18px; height: 18px; }
.native-app .metric-value { color: #23384d; font-size: 32px; line-height: 1.2; letter-spacing: -1px; margin: 12px 0 6px; font-variant-numeric: tabular-nums; }
.native-app .metric-foot { color: #64768a; font-size: 11px; line-height: 1.55; }
.native-app .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.native-app .dashboard-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.native-app .dashboard-side .app-panel { height: 100%; }
.native-app .panel-title { padding: 20px; gap: 12px; border-color: #e9eef4; flex-wrap: wrap; }
.native-app .panel-title h2 { font-size: 16px; line-height: 1.4; color: #2c4359; font-weight: 700; }
.native-app .panel-title p { font-size: 12px; color: #66798d; margin-top: 4px; }
.native-app .panel-content { padding: 22px 20px; }
.native-app .text-link, .native-app .row-link { color: #0877b5; }
.native-app .text-link { font-size: 12px; font-weight: 650; min-height: 36px; }
.native-app .data-table { table-layout: fixed; white-space: normal; width: 100%; }
.native-app .data-table th, .native-app .data-table td { padding: 16px 20px; }
.native-app .data-table th { background: #fafcfe; color: #617589; font-size: 10px; font-weight: 700; letter-spacing: .5px; }
.native-app .data-table th:first-child { width: 42%; }
.native-app .data-table th:nth-child(2) { width: 27%; }
.native-app .data-table th:last-child { width: 8%; }
.native-app .data-table td { overflow-wrap: anywhere; font-size: 12px; }
.native-app .tag-cell { gap: 12px; min-width: 0; }
.native-app .tag-cell > div { min-width: 0; flex: 1; }
.native-app .tag-cell strong { font-size: 13px; color: #29465e; }
.native-app .tag-cell small, .native-app .data-table td > small { font-size: 11px; color: #697c8f; margin-top: 4px; }
.native-app .asset-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: #edf4fa; color: #6f90ad; }
.native-app .row-link { min-height: 38px; min-width: 30px; display: inline-grid; place-items: center; }
.native-app .panel-bottom { padding: 15px 20px; border-color: #e9eef4; font-size: 11px; color: #66798d; }
.native-app .completion-ring { width: min(144px, 100%); height: auto; aspect-ratio: 1; background: conic-gradient(#0877b5 calc(var(--progress) * 1%), #eaf0f6 0); margin: 0 auto 22px; }
.native-app .ring-center strong { color: #23384d; font-size: 27px; }
.native-app .ring-center span { font-size: 11px; color: #64788b; }
.native-app .legend-row { font-size: 12px; color: #60758a; margin-top: 14px; }
.native-app .method-row { margin-bottom: 20px; }
.native-app .method-label { font-size: 12px; gap: 8px; margin-bottom: 8px; color: #51697e; }
.native-app .method-track { background: #eaf0f6; height: 6px; }
.native-app .method-track > span { background: #0877b5; }
.native-app .status-pill { font-size: 11px; white-space: nowrap; padding: 5px 9px; }
.native-app .status-pill.done { background: #edf7f1; color: #247557; }
.native-app .status-pill:not(.done) { background: #fff6e6; color: #956414; }
.native-app .status-pill.done .status-dot { background: #308b66; }
.native-app .status-pill:not(.done) .status-dot { background: #bc8e29; }
.native-app .primary-action, .native-app .btn-submit, .native-app .native-setting-actions button,
.native-app .setup-enable, .native-app .btn-primary { background: #0877b5; border-color: #0877b5; color: white; }
.native-app .primary-action, .native-app .btn-submit { min-height: 44px; box-shadow: none; font-size: 13px; }
.native-app .primary-action:hover, .native-app .btn-submit:hover { background: #06669d; color: white; }
.native-app .table-button, .native-app .approval-label, .native-app .notification-settings-link, .native-app .setting-text-link { color: #0877b5; }
.native-app .table-button { min-height: 44px; font-size: 12px; }
.native-app .table-button.report { background: #edf5fb; color: #0877b5; border-color: #dceaf5; }
.native-app .setting-icon, .native-app .native-menu-icon, .native-app .settings-account .avatar { background: #edf4fa; color: #0877b5; }
.native-app .form-control:focus, .select2-container--default.select2-container--focus .select2-selection--single { border-color: #78abd0; box-shadow: 0 0 0 3px #0877b515; }
.native-app .form-control { font-size: 16px; min-height: 48px; color: #2d485e; }
.native-app .form-label, .native-app .form-section-title, .native-app .form-title { color: #2c4359; }
.native-app .form-label { font-size: 13px; }
.native-app .section-number { background: #edf4fa; color: #527e9f; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: #405366; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: #0877b5; }
.select2-container--default .select2-search--dropdown .select2-search__field { outline-color: #0877b5; }
.native-app .fc-toolbar button { color: #516d85; min-height: 40px; }
.native-app .calendar-wrapper { border: 1px solid var(--ndt-line); border-radius: 16px; padding: 24px; }
.native-app .request-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.request-toolbar > span { font-size: 13px; color: #62768a; }
.request-toolbar .primary-action { padding: 10px 14px; }
.native-app .native-record-head strong { font-size: 15px; color: #2d475f; }
.native-app .native-record-head small, .native-app .native-record-meta, .native-app .native-record-footer { font-size: 12px; color: #65798c; }
.native-app .native-filter-row label { color: #5f7388; font-size: 10px; }
.native-app .native-search { min-height: 50px; }
.native-app .native-search input { font-size: 16px; }
.native-app .native-date-label { font-size: 12px; color: #63788c; }
.settings-screen { min-height: 100%; display: flex; flex-direction: column; }
.settings-screen .setting-content { border: 0; padding: 24px; flex: 1; }
.native-app .setting-item summary small, .native-app .setting-link small, .native-app .settings-account small { color: #64788b; font-size: 12px; }
.native-app .setting-item summary, .native-app .setting-link { color: #2d475f; padding: 18px 20px; }
.native-app .setting-content .profile-submit { background: #0877b5; }
.native-app .search-history button { color: #0877b5; }
.native-app .search-history-list > span { background: #edf4fa; }
.native-app .notification-open p { font-size: 13px; color: #60758a; }
.native-app .notification-open small { font-size: 11px; color: #65798c; }
.native-app[data-page="request_ndt.create"] .native-main { max-width: none; height: 100%; padding: calc(16px + var(--app-top)) var(--app-space) 24px; overflow: hidden; }
.native-app[data-page="request_ndt.create"] .form-workspace { height: 100%; width: 100%; margin: 0; }
.native-app[data-page="request_ndt.create"] .form-container { height: 100%; border: 1px solid var(--ndt-line); border-radius: 16px; }
.native-app[data-page="request_ndt.create"] .form-header { padding: 20px 24px; }
.native-app[data-page="request_ndt.create"] .form-title { font-size: 22px; line-height: 1.3; }
.native-app[data-page="request_ndt.create"] .form-description { color: #62778b; font-size: 12px; }
.native-app[data-page="request_ndt.create"] .form-body { padding: 0; }
.native-app[data-page="request_ndt.create"] .request-fields { padding: 0 24px 20px; }
.native-app[data-page="request_ndt.create"] .form-section-title { font-size: 15px; }
.native-app[data-page="request_ndt.create"] .form-actions { background: white; border-color: var(--ndt-line); padding: 14px 24px; }
.native-app .swal2-title, .native-app .modal-title { color: #2d475f !important; }
.native-app .ndt-swal-confirm { background: #0877b5 !important; }
.native-app .modal-header { color: #2d475f !important; }
.native-app .app-loading::before { background: #0877b5; }
.ndt-login { background: #f4f7fb; }
.login-story { background: #14314e; }
.login-submit { background: #0877b5; }
.login-input:focus { border-color: #78abd0; box-shadow: 0 0 0 3px #0877b515; }
.login-app-badge .workspace-dot { background: #0877b5; }

@media (min-width: 760px) {
    .native-app .summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .native-app .dashboard-grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 1800px) {
    .energy-viewport { height: 360px; }
}
@media (max-width: 700px) {
    .native-app .dashboard-grid .desktop-secondary { display: none; }
    .native-app .dashboard-grid .data-table th:first-child { width: 58%; }
    .native-app .dashboard-grid .data-table th:nth-last-child(2) { width: 30%; }
    .native-app .dashboard-grid .data-table th:last-child { width: 12%; }
    .native-app .dashboard-grid .data-table td:last-child { padding-left: 0; padding-right: 8px; }
    .native-app .metric-card { padding: 16px; }
    .native-app .metric-top { font-size: 12px; }
    .native-app .metric-value { font-size: 29px; }
    .native-app .dashboard-side { gap: 12px; }
    .native-app .dashboard-side .panel-title h2 { font-size: 13px; }
    .native-app .panel-title { padding: 17px 16px; }
    .native-app .panel-content { padding: 20px 16px; }
    .native-app .data-table th, .native-app .data-table td { padding: 15px 16px; }
    .native-app .calendar-wrapper { padding: 18px 12px; }
}
@media (max-width: 480px) {
    .native-app .pertamina-carousel { border-radius: 16px; margin-bottom: 22px; }
    .energy-viewport { height: 290px; }
    .energy-slide::after { background: linear-gradient(90deg, #0a2437e8, #102c40b0 65%, #102c4075); }
    .native-app .energy-slide .energy-content { width: 100%; max-width: 390px; padding: 22px 22px 66px; }
    .energy-content h2 { font-size: 26px; }
    .native-app .energy-content p { font-size: 12px; margin-bottom: 12px; }
    .energy-brand { margin-bottom: 12px; }
    .carousel-controls { left: 18px; right: 16px; bottom: 14px; }
    .native-app .summary-grid { gap: 10px; margin-bottom: 20px; }
    .native-app .metric-card { min-height: 134px; padding: 15px 13px; }
    .native-app .metric-icon { width: 26px; height: 26px; border-radius: 8px; }
    .native-app .metric-top { gap: 5px; font-size: 11px; }
    .native-app .metric-foot { font-size: 10px; }
    .native-app .asset-icon { display: none; }
    .native-app .tag-cell strong { font-size: 12px; }
    .native-app .status-pill { font-size: 10px; padding: 5px 7px; }
    .native-app .panel-title h2 { font-size: 15px; }
    .native-app .panel-title p { font-size: 11px; }
    .native-app .completion-ring { width: min(128px, 100%); }
    .native-app .request-toolbar > span { display: none; }
    .native-app .request-toolbar { justify-content: flex-end; }
    .native-app[data-page="request_ndt.create"] .form-header { padding: 18px; }
    .native-app[data-page="request_ndt.create"] .form-title { font-size: 20px; }
    .native-app[data-page="request_ndt.create"] .request-fields { padding: 0 18px 18px; }
    .native-app[data-page="request_ndt.create"] .form-actions { padding: 12px 16px; }
    .native-app .settings-screen .setting-content { padding: 18px; }
}
@media (max-width: 360px) {
    .native-app .native-tabbar span { font-size: 10px; }
    .native-app .native-add-circle { width: 56px; height: 56px; }
    .native-app .metric-top { font-size: 10px; }
    .native-app .metric-icon { width: 23px; height: 23px; }
    .native-app .dashboard-side { grid-template-columns: minmax(0, 1fr); }
    .native-app .data-table th, .native-app .data-table td { padding-left: 12px; padding-right: 12px; }
    .energy-content h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .native-app .energy-slide, .carousel-dots button span, .native-app .native-tabbar a { transition: none; }
}


/* Corporate application layout: continuous module surfaces and restrained dashboard panels. */
:root { --app-header-height: 62px; --ndt-line: #dfe6ed; --native-line: #dfe6ed; --native-bg: #f5f7fa; }
body.native-app.has-module-header { grid-template-rows: auto minmax(0, 1fr) auto; background: #fff; }
.module-header {
    grid-row: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center; gap: 12px; min-height: calc(62px + var(--app-top));
    padding: calc(8px + var(--app-top)) var(--app-space) 8px;
    background: #fff; border-bottom: 1px solid var(--ndt-line); z-index: 1031;
}
.module-header h1 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.3px; text-align: center; color: #233c53; line-height: 1.35; }
.module-back { display: grid; place-items: center; width: 44px; height: 44px; color: #38546b; border-radius: 6px; }
.module-back:hover { background: #f1f5f8; color: #0877b5; }
.module-back .ndt-icon { width: 22px; height: 22px; }
.native-app.has-module-header .native-main { grid-row: 2; padding: var(--app-space) var(--app-space) 32px; background: #fff; }
.native-app.has-module-header .native-tabbar { grid-row: 3; }
.native-app.has-module-header .native-card,
.native-app.has-module-header .app-panel,
.native-app.has-module-header .form-container,
.native-app.has-module-header .calendar-wrapper { background: #fff; border: 0; border-radius: 0; box-shadow: none; }
.native-app .native-tabbar { overflow: visible; box-shadow: none; }
.native-app .native-tabbar::before {
    display: block; content: ''; position: absolute; left: 50%; top: -10px;
    width: 72px; height: 12px; transform: translateX(-50%);
    border: 1px solid var(--ndt-line); border-bottom: 0; border-radius: 50% 50% 0 0;
    background: #fff; pointer-events: none;
}
.native-app .native-tabbar-inner { position: relative; z-index: 1; }
.native-app .native-add-circle { width: 52px; height: 52px; bottom: 30px; border: 4px solid #fff; box-shadow: none; }
.native-app .native-add-tab.active .native-add-circle { background: #075b8b; }

.dashboard-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; margin-bottom: 18px; }
.dashboard-identity { min-width: 0; }
.dashboard-kicker { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #0877b5; font-weight: 750; }
.dashboard-kicker > span { font-size: 9px; letter-spacing: 1.3px; color: #6a7d8e; font-weight: 650; border-left: 1px solid #ced9e3; padding-left: 12px; }
.dashboard-identity h1 { font-size: 21px; font-weight: 750; color: #233c53; margin: 0; line-height: 1.3; letter-spacing: -.6px; }
.dashboard-identity p { font-size: 12px; color: #67798b; margin: 0; }
.dashboard-account-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.native-app .dashboard-account-actions .native-icon-button { width: 42px; height: 42px; background: transparent; border: 0; border-radius: 6px; }
.dashboard-profile { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #cddae6; background: #eaf1f7; color: #235776; border-radius: 50%; font-size: 14px; font-weight: 700; }
.native-app .pertamina-carousel { border-radius: 8px; margin-bottom: 22px; }
.energy-viewport { height: 190px; }
.native-app .energy-slide .energy-content { padding: 16px clamp(20px,3vw,40px) 44px; width: 75%; max-width: 660px; }
.energy-photo { object-position: center 66%; }
.energy-slide:nth-child(3) .energy-photo { object-position: right 80%; }
.energy-content h2 { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.25; margin-bottom: 6px; }
.energy-brand { margin-bottom: 7px; }
.energy-brand span:first-child { font-size: 11px; letter-spacing: 1.2px; }
.energy-brand span:last-child { font-size: 9px; }
.energy-link { border-radius: 0; background: transparent; border: 0; min-height: 30px; padding: 0; font-size: 11px; }
.energy-link:hover { background: transparent; text-decoration: underline; }
.carousel-controls { bottom: 8px; left: 20px; right: 16px; }
.native-app .summary-grid {
    gap: 12px; border: 0; border-radius: 0;
    overflow: visible; background: transparent; margin-bottom: 24px;
}
.native-app .summary-grid .metric-card { border: 1px solid var(--ndt-line); border-radius: 8px; background: #fff; box-shadow: none; padding: 18px 20px; min-height: 130px; }
.native-app .summary-grid .metric-icon { background: transparent; width: 20px; height: 20px; border-radius: 0; }
.native-app .summary-grid .metric-top { color: #4e657b; font-size: 12px; }
.native-app .summary-grid .metric-value { font-size: 32px; font-weight: 700; margin: 10px 0 5px; }
.native-app .summary-grid .metric-foot { font-size: 11px; color: #6d7e8f; }
.analytics-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.analytics-section-heading h2 { font-size: 18px; font-weight: 700; color: #233c53; letter-spacing: -.3px; margin: 0 0 4px; }
.analytics-section-heading p { font-size: 12px; color: #6a7c8d; margin: 0; }
.corporate-analytics-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; border: 0; border-radius: 0; overflow: visible; background: transparent; }
.analytics-block { padding: 22px; border: 1px solid var(--ndt-line); border-radius: 8px; background: #fff; min-width: 0; }
.analytics-block-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.analytics-block-title h3 { font-size: 13px; font-weight: 700; color: #354e65; margin: 0; }
.analytics-block-title > span { font-size: 10px; color: #6b7d8f; white-space: nowrap; }
.dashboard-chart { height: 230px; position: relative; width: 100%; }
.dashboard-progress-chart { height: 150px; width: 150px; position: relative; margin: 12px auto 22px; }
.dashboard-progress-value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dashboard-progress-value strong { font-size: 31px; color: #233c53; font-weight: 700; line-height: 1.2; }
.dashboard-progress-value > span { font-size: 11px; color: #6a7d8e; margin-top: 3px; }
.progress-counts { display: flex; flex-direction: column; gap: 10px; font-size: 12px; color: #5d7286; }
.progress-counts > span { display: flex; align-items: center; gap: 7px; }
.progress-counts strong { margin-left: auto; color: #324d64; font-variant-numeric: tabular-nums; }
.progress-counts .status-dot { background: #0877b5; }
.progress-counts .status-dot.waiting { background: #b6c6d3; }
.analytics-caption { font-size: 10px; line-height: 1.6; color: #6b7e8f; margin: 12px 0 0; }
.native-app .methods-block .method-row:last-child { margin-bottom: 0; }
.native-app .methods-block .method-track > span { width: var(--method-width); animation: method-reveal .7s ease-out both; transform-origin: left; }
@keyframes method-reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.filter-area-heading h2 { margin: 0 0 5px; font-size: 17px; font-weight: 700; color: #2d475e; }
.filter-area-heading p { margin: 0; font-size: 12px; color: #677b8e; }
.request-filter-area, .calendar-filters { padding-bottom: 24px; border-bottom: 1px solid var(--ndt-line); margin-bottom: 22px; }
.filter-area-heading { margin-bottom: 20px; }
#native-filter-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.request-search-field { grid-column: 1 / -1; }
.filter-field { display: flex; flex-direction: column; min-width: 0; gap: 8px; }
.filter-field > label, .filter-group-label { font-size: 12px; font-weight: 600; color: #506b81; margin: 0; display: block; }
.filter-field > select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #d5dfe8; border-radius: 5px; background: white; color: #334f65; font-size: 14px; }
.native-app .native-search { border-radius: 5px; margin: 0; height: 48px; min-height: 48px; background: #fff; border-color: #d5dfe8; }
.native-app .native-search input { min-width: 0; padding: 8px 0; font-size: 14px; }
.native-app .native-search button { height: 36px; min-width: 54px; color: #fff; background: #0877b5; border-radius: 4px; margin-right: 6px; padding: 6px 12px; }
.native-app .filter-field .select2-selection--single { border-radius: 5px; border-color: #d5dfe8; }
.native-app .native-date-group { margin-bottom: 24px; }
.native-app .native-date-label { font-size: 12px; font-weight: 650; color: #576f85; margin-bottom: 12px; }
.native-app[data-page="request_ndt.index"] .native-main { background: var(--native-bg); }
.native-app.has-module-header .native-card.native-record { padding: 18px; border: 1px solid var(--ndt-line); border-radius: 8px; background: #fff; }
.native-app .native-records { gap: 12px; grid-template-columns: minmax(0,1fr); }
.native-app .search-history { border: 0; border-top: 1px solid #edf1f5; border-radius: 0; margin: 16px 0 0; padding: 12px 0 0; }
.calendar-filter-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.calendar-method-field { grid-column: 1 / -1; }
.calendar-filter-options { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; margin-top: 20px; }
.calendar-filters { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 12px; padding-bottom: 16px; margin-bottom: 20px; }
.calendar-filters .calendar-periods { margin: 0; flex-wrap: nowrap; }
.calendar-periods button { flex: 1; }
.calendar-filter-toggle { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 13px; border: 1px solid #d8e1e9; border-radius: 5px; color: #526b81; background: #fff; font-size: 12px; }
.calendar-filter-toggle .ndt-icon { width: 18px; height: 18px; }
.calendar-filter-toggle[aria-expanded="true"] { background: #edf5fa; color: #075d90; border-color: #8fb9d2; }
.calendar-filter-count { min-width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #0877b5; font-size: 10px; }
.calendar-filter-details { grid-column: 1 / -1; padding: 18px; border: 1px solid var(--ndt-line); border-radius: 6px; background: #fafcfe; }
.calendar-filter-options { align-items: end; }
.calendar-filter-reset { justify-self: end; min-height: 44px; border: 0; color: #0877b5; background: transparent; font-size: 12px; }
.quick-filter-group { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.quick-filter-group button { min-height: 44px; border: 1px solid #d8e1e9; background: #fff; border-radius: 4px; padding: 8px 12px; font-size: 12px; color: #526b81; }
.quick-filter-group button.active { color: #075d90; background: #edf5fa; border-color: #8fb9d2; font-weight: 650; }
.native-app.has-module-header .calendar-wrapper { padding: 0; }
.native-app .calendar-wrapper .fc-toolbar { margin-bottom: 20px; }
.native-app .calendar-wrapper .fc-toolbar .fc-left { width: auto; }
.native-app .calendar-wrapper .fc-toolbar .fc-right { width: auto; }
.native-app .calendar-wrapper .fc-toolbar h2 { font-size: 18px; font-weight: 700; }
.native-app .calendar-wrapper .fc-toolbar .fc-button { border-radius: 4px; box-shadow: none; border-color: #d8e1e9; }
.native-app .fc-list-heading td { background: #f5f8fb; color: #36546a; }
.native-app .fc-list-empty { background: #fafcfe; color: #61778b; font-size: 13px; }
.native-app .fc-list-item { cursor: pointer; }

.native-app[data-page="profile.edit"] .native-main { padding: 0; }
.settings-page { min-height: 100%; display: flex; flex-direction: column; background: #fff; }
.native-app .settings-account { margin: 0; padding: 26px var(--app-space); border-bottom: 1px solid var(--ndt-line); }
.native-app .settings-account .avatar { border-radius: 50%; background: #edf3f8; }
.native-app .settings-list { padding: 0; border: 0; }
.native-app .settings-list .setting-link { padding: 20px var(--app-space); border-bottom: 1px solid #edf1f5; }
.native-app .settings-list .setting-icon { background: transparent; color: #58758d; border-radius: 0; }
.native-app .settings-logout { margin: auto 0 0; padding: 28px var(--app-space); }
.native-app .settings-logout .native-logout { border-radius: 5px; background: #fff; color: #a14949; border: 1px solid #e4d4d4; }
.native-app .settings-screen { min-height: 100%; padding: 0; }
.native-app .settings-screen .setting-content { padding: 24px var(--app-space); }
.photo-credits { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ndt-line); font-size: 12px; line-height: 1.7; }
.photo-credits a { color: #0877b5; text-decoration: underline; }
.native-app[data-page="request_ndt.create"] .native-main { padding: 0; }
.native-app[data-page="request_ndt.create"] .form-container { border: 0; border-radius: 0; }
.native-app[data-page="request_ndt.create"] .form-header { padding: 22px var(--app-space); }
.native-app[data-page="request_ndt.create"] .form-title { font-size: 18px; font-weight: 700; }
.native-app[data-page="request_ndt.create"] .request-fields { padding-left: var(--app-space); padding-right: var(--app-space); }
.native-app[data-page="request_ndt.create"] .form-actions { padding: 14px var(--app-space); }
.native-app .form-control, .native-app .primary-action, .native-app .secondary-action, .native-app .table-button { border-radius: 5px; }
.native-app .notification-card { border-bottom: 1px solid var(--ndt-line) !important; }
.native-app .notification-open { padding: 12px 0; }
.native-app .notification-settings-link { border-bottom: 1px solid var(--ndt-line); margin-bottom: 20px; }

@media (min-width: 760px) {
    .calendar-filter-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,2fr); }
    .calendar-method-field { grid-column: auto; }
    .calendar-filter-options { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    #native-filter-form { grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); }
    .request-search-field { grid-column: auto; }
}
@media (min-width: 1100px) {
    .corporate-analytics-grid { grid-template-columns: minmax(0,1.7fr) minmax(0,.85fr) minmax(0,1fr); }
}
@media (min-width: 480px) and (max-width: 1099px) {
    .corporate-analytics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .activity-block { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .dashboard-toolbar { gap: 12px; margin-bottom: 14px; }
    .dashboard-identity h1 { font-size: 20px; }
    .dashboard-identity p { font-size: 11px; }
    .dashboard-account-actions { gap: 4px; }
    .dashboard-kicker { gap: 8px; }
    .dashboard-kicker > span { padding-left: 8px; font-size: 8px; letter-spacing: 1px; }
    .native-app .pertamina-carousel { border-radius: 6px; }
    .energy-viewport { height: 180px; }
    .native-app .energy-slide .energy-content { padding: 14px 20px 44px; width: 100%; }
    .energy-content h2 { font-size: 21px; }
    .native-app .energy-content p { font-size: 11px; line-height: 1.6; }
    .native-app .summary-grid .metric-card { padding: 17px 14px; min-height: 124px; }
    .native-app .summary-grid .metric-top { font-size: 11px; }
    .native-app .summary-grid .metric-foot { font-size: 10px; }
    .native-app .summary-grid .metric-value { font-size: 28px; }
    .analytics-section-heading { flex-wrap: wrap; gap: 8px; }
    .analytics-section-heading h2 { font-size: 17px; }
    .analytics-block { padding: 20px 16px; }
    .dashboard-chart { height: 215px; }
    .native-app .native-search input { font-size: 16px; }
    .filter-field > select { font-size: 16px; }
    .native-app .native-search input::placeholder { font-size: 12px; }
    .calendar-filter-options .quick-filter-group button { flex: 1; padding: 8px 10px; }
    .calendar-periods button { padding: 8px 7px; font-size: 11px; }
    .calendar-filter-toggle { padding: 8px; min-width: 44px; position: relative; }
    .calendar-filter-toggle > span:not(.calendar-filter-count) { display: none; }
    .calendar-filter-toggle .calendar-filter-count { position: absolute; top: -5px; right: -5px; }
    .calendar-filter-details { padding: 14px; }
    .native-app .native-add-circle { width: 52px; height: 52px; bottom: 30px; }
}
@media (max-width: 360px) {
    .dashboard-identity p { max-width: 150px; }
    .native-app .summary-grid .metric-top { font-size: 10px; }
    .energy-content h2 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .native-app .methods-block .method-track > span { animation: none; }
}

/* Focused sign-in page. */
body.ndt-login.simple-login { padding: 0; margin: 0; background: #f4f7fa; color: #253c51; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.simple-login h1, .simple-login h2, .simple-login strong { font-family: inherit; }
.signin-layout { display: grid; grid-template-columns: minmax(0,1fr); place-items: center; min-height: 100dvh; width: 100%; padding: 28px 20px; }
.signin-visual { position: relative; display: flex; align-items: flex-end; min-height: 100%; padding: clamp(32px,5vw,72px); padding-bottom: 90px; overflow: hidden; isolation: isolate; background: #14314e; }
.signin-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; z-index: -2; }
.signin-visual::after { position: absolute; content: ''; inset: 0; background: linear-gradient(180deg,#102a4020 0%,#102a4060 40%,#102a40ed 100%); z-index: -1; }
.signin-visual-content { max-width: 440px; color: white; }
.signin-visual-content > span { font-size: 10px; font-weight: 650; letter-spacing: 1.7px; color: #dfeaf2; }
.signin-visual-content h2 { font-size: clamp(30px,3.1vw,46px); line-height: 1.2; font-weight: 700; letter-spacing: -1.3px; color: #fff; margin: 18px 0 15px; }
.signin-visual-content p { font-size: 14px; line-height: 1.8; max-width: 350px; margin: 0; color: #dce8f1; }
.signin-photo-credit { position: absolute; bottom: 24px; left: clamp(32px,5vw,72px); font-size: 10px; color: #d3e1ec; }
.signin-photo-credit a { color: #d3e1ec; text-decoration: underline; }
.signin-main { min-width: 0; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 440px; padding: 32px; border: 1px solid #e1e8ef; border-radius: 14px; background: #fff; box-shadow: 0 5px 24px #213c5106; }
.signin-content { width: 100%; max-width: 420px; }
.signin-brand { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 26px; }
.signin-brand img { width: 150px; max-width: 60%; height: 46px; object-fit: contain; object-position: left center; }
.signin-brand > span { font-size: 9px; letter-spacing: 1.3px; color: #748697; font-weight: 650; white-space: nowrap; }
.signin-content h1 { font-size: 24px; line-height: 1.3; font-weight: 750; letter-spacing: -.8px; margin: 0 0 8px; color: #253c51; text-align: center; }
.signin-description { font-size: 12px; line-height: 1.7; color: #6a7c8e; margin: 0 0 28px; text-align: center; }
.signin-form { margin: 0; }
.signin-field { margin-bottom: 20px; }
.signin-field > label { display: block; margin: 0 0 8px; font-size: 12px; color: #4f687e; font-weight: 650; }
.signin-input { width: 100%; min-height: 50px; border: 1px solid #d5dfe8; border-radius: 7px; background: #fff; color: #2a455a; font-family: inherit; font-size: 16px; padding: 12px 14px; outline: 0; transition: border-color .15s ease,box-shadow .15s ease; }
.signin-input::placeholder { color: #8b9aa8; font-size: 14px; }
.signin-input:focus { border-color: #67a2c5; box-shadow: 0 0 0 3px #0877b510; }
.signin-input[aria-invalid="true"] { border-color: #c67b7b; }
.signin-input-wrap { position: relative; }
.signin-input-wrap .signin-input { padding-right: 50px; }
.signin-password-toggle { display: grid; place-items: center; position: absolute; top: 3px; right: 3px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #7a8e9f; }
.signin-password-toggle .ndt-icon { width: 20px; height: 20px; }
.signin-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 4px 0 20px; font-size: 12px; color: #5e7488; }
.signin-options > label { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; margin: 0; }
.signin-options input { width: 15px; height: 15px; accent-color: #0877b5; }
.signin-options > a { color: #0877b5; min-height: 36px; display: inline-flex; align-items: center; }
.signin-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; padding: 12px 17px; background: #0877b5; color: #fff; border: 0; border-radius: 7px; font-family: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.signin-submit:hover { background: #07679e; }
.signin-submit .ndt-icon { width: 18px; height: 18px; }
.signin-submit:disabled { opacity: .65; cursor: wait; }
.signin-footer { text-align: center; margin: 24px 0 0; font-size: 11px; line-height: 1.7; color: #7c8d9c; }
.simple-login :is(button,a,input):focus-visible { outline: 2px solid #4f9fc9; outline-offset: 3px; }
@media(max-width:900px) {
    .signin-layout { display: grid; }
    .signin-visual { display: none; }
    .signin-main { min-height: 0; padding: 28px; }
    .signin-content { max-width: 400px; }
    .signin-brand { margin-bottom: 26px; }
    .signin-content h1 { font-size: 24px; }
}
@media(max-height:620px) and (max-width:900px) {
    .signin-main { align-items: flex-start; padding-top: calc(22px + env(safe-area-inset-top,0px)); padding-bottom: 22px; }
    .signin-brand { margin-bottom: 22px; }
    .signin-description { margin-bottom: 22px; }
    .signin-field { margin-bottom: 16px; }
    .signin-footer { margin-top: 18px; }
}
@media(prefers-reduced-motion:reduce) { .signin-input { transition: none; } }

/* Reference-inspired home and compact application actions. */
.native-app .dashboard-hero {
    position: relative; isolation: isolate; height: 250px; overflow: hidden;
    margin: calc(-1 * (var(--app-space) + var(--app-top))) calc(-1 * var(--app-space)) 0;
    border-radius: 0 0 24px 24px; background: #2672d2;
}
.dashboard-hero-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: calc(16px + var(--app-top)) var(--app-space) 0; }
.app-mode { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 10px 17px; border-radius: 11px; background: #fff; color: #29445a; }
.app-mode > span { width: 7px; height: 7px; border-radius: 50%; background: #0877b5; }
.app-mode strong { font-size: 15px; font-weight: 750; letter-spacing: -.4px; }
.native-app .dashboard-hero .native-icon-button, .native-app .dashboard-hero .dashboard-profile { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: #29445a; }
.dashboard-hero .dashboard-account-actions { gap: 9px; }
.dashboard-hero .dashboard-profile .ndt-icon { width: 21px; height: 21px; }
.dashboard-hero .native-unread { background: #cf4a4a; border: 2px solid #fff; min-width: 15px; height: 15px; top: -3px; right: -3px; }
.native-app .dashboard-hero .energy-viewport { position: absolute; inset: 0; height: 100%; }
.native-app .dashboard-hero .energy-slide { background: #2672d2; transform: none; }
.dashboard-hero .energy-slide::after { background: linear-gradient(110deg,#216fd6eb 0%,#2c7adccf 50%,#257bd9a6 100%); }
.dashboard-hero .energy-photo { object-position: center 64%; }
.native-app .dashboard-hero .energy-slide .energy-content { position: absolute; top: calc(82px + var(--app-top)); left: 0; padding: 0 var(--app-space); width: 100%; max-width: 800px; }
.native-app .dashboard-hero .energy-content .hero-greeting { color: #eaf3ff; font-size: 14px; line-height: 1.5; margin: 0 0 8px; }
.dashboard-hero .energy-content h2 { color: #fff; font-size: 25px; line-height: 1.3; margin: 0; font-weight: 700; letter-spacing: -.6px; }
.dashboard-hero .carousel-controls { bottom: 42px; left: var(--app-space); right: auto; }
.dashboard-hero .carousel-dots button { height: 24px; width: 26px; }
.dashboard-hero .carousel-dots button span { width: 5px; height: 5px; background: #ffffff80; }
.dashboard-hero .carousel-dots button.active span { width: 17px; background: #fff; }
.hero-context-card { position: relative; z-index: 4; display: flex; align-items: center; gap: 13px; min-height: 84px; margin: -34px 0 22px; padding: 17px 18px; background: #fff; border: 1px solid #e4ebf2; border-radius: 14px; box-shadow: 0 5px 14px #23436408; color: #29445a; }
.hero-context-card:hover { color: #0877b5; border-color: #cbdce9; }
.hero-context-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; color: #0877b5; background: #eaf3fb; }
.hero-context-icon .ndt-icon { width: 23px; height: 23px; }
.hero-context-copy { min-width: 0; flex: 1; }
.hero-context-copy strong { display: block; font-size: 15px; font-weight: 700; }
.hero-context-copy small { display: block; font-size: 11px; color: #6d8193; margin-top: 4px; }
.hero-context-action { display: flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 10px; color: #0877b5; background: #f5f8fb; border-radius: 7px; font-size: 12px; font-weight: 650; }
.hero-context-action .ndt-icon { width: 15px; height: 15px; }

body.native-app[data-page="request_ndt.create"] { grid-template-rows: auto minmax(0,1fr); }
.native-app[data-page="request_ndt.create"] .native-main { display: flex; flex-direction: column; padding: 0; min-height: 0; }
.native-app[data-page="request_ndt.create"] .form-workspace { flex: 1; height: auto; min-height: 0; }
.native-app[data-page="request_ndt.create"] .app-alert { flex-shrink: 0; margin: 12px var(--app-space); }
.native-app[data-page="request_ndt.create"] .form-actions { padding-bottom: calc(14px + var(--app-bottom)); }
.native-app .secondary-action { color: #bc4a4a; border-color: #e3c9c9; background: #fff; }
.native-app .status-pill.done { color: #0877b5; background: #edf5fb; }
.native-app .status-pill.done .status-dot { background: #0877b5; }
.native-app .metric-icon.green { color: #0877b5; background: #edf5fb; }
.native-app .summary-grid .metric-icon.green { background: transparent; }
.native-app .native-record .approve-button, .native-app .approval-label { color: #0877b5; }
.native-app .btn-primary, .native-app .btn-success, .native-app .bg-primary, .native-app .bg-success { background-color: #0877b5 !important; border-color: #0877b5 !important; color: #fff; }
.native-app .modal-footer .btn { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; border-radius: 7px; }
.native-app .modal-footer .btn .ndt-icon { width: 17px; height: 17px; }
.native-app .btn-danger { background: #cf4a4a; border-color: #cf4a4a; color: #fff; }
.native-app .modal-footer .btn-secondary { color: #bd4d4d; border: 1px solid #ddbaba; background: #fff; }
.native-app .native-setting-actions button[data-disable-push] { background: #cf4a4a; border-color: #cf4a4a; color: #fff; }
.native-app #detailModal .modal-content { height: min(calc(var(--app-height,100dvh) * .78),740px); max-height: min(calc(var(--app-height,100dvh) * .82),800px); }
.native-app .modal-header { gap: 12px; }
.native-app .modal-header .modal-title { flex: 1; font-size: 16px; }
.sheet-character { width: 64px; height: 56px; flex-shrink: 0; }
.sheet-character .ndt-character { width: 100%; height: 100%; }

.ndt-character { display: block; width: 170px; height: auto; overflow: visible; }
.character-body { animation: inspector-breathe 3.5s ease-in-out infinite; }
.character-arm { transform-box: fill-box; transform-origin: left center; animation: inspector-wave 3s ease-in-out infinite; }
.character-eyes { transform-box: fill-box; transform-origin: center; animation: inspector-blink 5.5s linear infinite; }
.character-signal { transform-box: fill-box; transform-origin: center; animation: inspector-signal 2.6s ease-in-out infinite; }
.ndt-character--error .character-head { transform-box: fill-box; transform-origin: center; animation: inspector-check .8s ease-in-out 1; }
@keyframes inspector-breathe { 50% { transform: translateY(-2px); } }
@keyframes inspector-wave { 12%,32% { transform: rotate(-7deg); } 22%,42% { transform: rotate(3deg); } 55%,100% { transform: rotate(0); } }
@keyframes inspector-blink { 0%,44%,48%,100% { transform: scaleY(1); } 46% { transform: scaleY(.15); } }
@keyframes inspector-signal { 50% { transform: translateY(-2px); } }
@keyframes inspector-check { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.ndt-swal .swal2-icon { border: 0 !important; width: 174px; height: 144px; margin: 18px auto 8px; background: transparent !important; }
.ndt-swal .swal2-icon, .ndt-swal .swal2-icon-content { animation: none !important; transform: none !important; }
.ndt-swal .swal2-icon-content { width: 100%; height: 100%; display: grid; place-items: center; }
.ndt-swal .swal2-icon-content .ndt-character { width: 174px; height: 144px; }
.ndt-swal .swal2-title { font-family: 'Plus Jakarta Sans',system-ui,sans-serif; font-size: 21px; line-height: 1.35; color: #29445a; padding-top: 8px; }
.ndt-swal .swal2-html-container { font-family: 'Plus Jakarta Sans',system-ui,sans-serif; font-size: 14px; line-height: 1.7; color: #667b8e; margin-top: 10px; }
.ndt-swal .swal2-actions { gap: 10px; }
.ndt-swal-confirm, .ndt-swal-cancel { min-height: 46px; border-radius: 7px; padding: 11px 18px; font-family: 'Plus Jakarta Sans',system-ui,sans-serif; font-size: 13px; font-weight: 650; border: 1px solid transparent; cursor: pointer; }
.ndt-swal-confirm { background: #0877b5 !important; color: #fff !important; }
.ndt-swal-cancel { background: #fff5f5 !important; color: #bc4a4a !important; border-color: #e3c9c9; }
.ndt-swal-confirm.ndt-button-danger { background: #cf4a4a !important; color: #fff !important; }
.ndt-swal-cancel.ndt-button-neutral { background: #fff !important; color: #5d7488 !important; border-color: #d5e0e8; }
.native-app .swal2-popup.ndt-swal:not(.swal2-toast) { max-height: min(calc(var(--app-height,100dvh) * .76),660px); overflow-y: auto; }
.ndt-swal.swal2-toast .swal2-icon { width: 48px; height: 42px; margin: 0 8px 0 0; }
.ndt-swal.swal2-toast .swal2-icon-content .ndt-character { width: 48px; height: 42px; }
.ndt-swal.swal2-toast .swal2-title { font-size: 13px; padding-top: 0; }
.setup-emblem[data-alert-character] { width: 96px; height: 80px; background: transparent; border-radius: 0; margin: 0 auto 12px; }
.setup-emblem .ndt-character { width: 96px; height: 80px; }

@media(max-width:480px) {
    body.ndt-login.simple-login { background: #fff; }
    .signin-layout { padding: calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px)); }
    .signin-main { border: 0; border-radius: 0; box-shadow: none; padding: 0; }
    .signin-content h1 { font-size: 23px; }
    .native-app .dashboard-hero { height: 238px; }
    .dashboard-hero .energy-content h2 { font-size: 22px; max-width: 350px; }
    .hero-context-card { padding: 15px 14px; gap: 10px; }
    .hero-context-copy strong { font-size: 14px; }
    .hero-context-copy small { font-size: 10px; }
    .hero-context-action { font-size: 11px; padding: 9px 7px; }
    .hero-context-icon { width: 38px; height: 38px; }
}
@media(max-width:360px) {
    .dashboard-hero .energy-content h2 { font-size: 21px; }
    .hero-context-copy small { font-size: 9px; }
}
@media(max-height:500px) {
    .native-app #detailModal .modal-content { height: calc(var(--app-height,100dvh) * .86); max-height: calc(var(--app-height,100dvh) - var(--app-top) - 14px); }
    .ndt-swal .swal2-icon { height: 100px; margin-top: 8px; }
    .ndt-swal .swal2-icon-content .ndt-character { height: 100px; width: 122px; }
}
@media(prefers-reduced-motion:reduce) {
    .ndt-character *, .character-body, .character-arm, .character-eyes, .character-signal { animation: none !important; }
}

/* Darker home, recessed Create, and consistent secondary actions. */
.ndt-app-root { overflow: hidden; overflow: clip; overscroll-behavior: none; }
body.native-app { position: fixed; top: 0; left: 0; right: 0; width: 100%; }
.native-app .dashboard-hero { height: 224px; margin-bottom: 0; background: #14314e; border-radius: 0 0 20px 20px; }
.dashboard-hero-top { justify-content: flex-end; }
.native-app .dashboard-hero .energy-slide { background: #14314e; }
.dashboard-hero .energy-slide::after { background: linear-gradient(110deg,#102b47ed 0%,#173e60cc 54%,#164569a6 100%); }
.native-app .dashboard-hero .energy-slide .energy-content { top: calc(76px + var(--app-top)); }
.native-app .dashboard-hero .energy-content .hero-location { color: #c5d9e9; font-size: 11px; margin: 12px 0 0; letter-spacing: .2px; }
.dashboard-hero .carousel-controls { bottom: 32px; }
.dashboard-unit-strip { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; max-width: 100%; min-height: 44px; margin: -22px auto 24px; padding: 10px 18px; border: 1px solid #d4e3ef; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px #173e6009; color: #294a64; }
.dashboard-unit-strip > .ndt-icon { width: 20px; height: 20px; color: #0877b5; }
.dashboard-unit-strip strong { font-size: 13px; white-space: nowrap; }
.dashboard-unit-strip > span { border-left: 1px solid #dce6ef; padding-left: 10px; color: #6b8194; font-size: 11px; white-space: nowrap; }
.native-app .summary-grid .metric-card { background: linear-gradient(125deg,#eaf4fe 0%,#f8fbff 62%,#fff 100%); border-color: #cfe0ef; border-radius: 11px; }
.native-app .summary-grid .metric-card:nth-child(even) { background: linear-gradient(125deg,#f6faff 0%,#eaf3fc 100%); }
.native-app .summary-grid .metric-icon { width: 28px; height: 28px; border-radius: 8px; background: #dbeafa; }
.native-app .summary-grid .metric-icon.green { background: #dbeafa; }
.native-app .summary-grid .metric-value { color: #174d76; }
.native-app.has-module-header .native-card.native-record { background: linear-gradient(135deg,#fff 35%,#f0f7ff 100%); border-color: #d2e3f2; border-left: 3px solid #b0cfe9; border-radius: 11px; }
.native-app .native-record-footer { border-top-color: #e0eaf4; }
.native-app .native-tabbar { border: 0; background: transparent; }
.native-app .native-tabbar::before {
    inset: 0; width: 100%; height: 100%; transform: none; border: 0;
    border-radius: 0; box-shadow: none; mask-image: none; -webkit-mask-image: none;
    background:
        linear-gradient(to right,#e3eaf1 calc(50% - 40px),transparent 0 calc(50% + 40px),#e3eaf1 0) left top / 100% 1px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='76' viewBox='0 0 80 76'%3E%3Cpath d='M0 0C6 0 8 5 9 12C10 17 12 21 12 29A28 28 0 0 0 68 29C68 21 70 17 71 12C72 5 74 0 80 0V76H0Z' fill='%23fff'/%3E%3Cpath d='M0 .5C6 .5 8 5 9 12C10 17 12 21 12 29A28 28 0 0 0 68 29C68 21 70 17 71 12C72 5 74 .5 80 .5' fill='none' stroke='%23e3eaf1'/%3E%3C/svg%3E") center top / 80px 76px no-repeat,
        linear-gradient(to bottom,transparent 57px,#fff 57px),
        linear-gradient(to right,#fff calc(50% - 40px),transparent 0 calc(50% + 40px),#fff 0);
}
.native-app .native-add-circle { top: 5px; bottom: auto; width: 48px; height: 48px; border: 0; }
.native-app .native-add-circle .ndt-icon { width: 23px; height: 23px; }
.native-app .secondary-action, .native-app .modal-footer .btn-secondary,
.native-app .modal-footer .btn-danger[data-bs-dismiss], .ndt-swal-cancel {
    color: #4d6980 !important; border: 1px solid #d5e0e9 !important; background: #fff !important;
}
.native-app .secondary-action:hover, .native-app .modal-footer .btn[data-bs-dismiss]:hover, .ndt-swal-cancel:hover { background: #f4f8fc !important; }
.signin-brand { margin-bottom: 22px; }
.signin-brand img { width: 160px; height: 52px; object-position: center; max-width: 100%; }
.signin-content h1 { font-size: 25px; letter-spacing: -.65px; }
.signin-description { margin-top: 10px; font-size: 13px; }
.signin-submit { justify-content: center; }
#native-filter-form { display: block; }
.request-search-row { display: flex; align-items: center; gap: 10px; }
.request-search-field { flex: 1; min-width: 0; }
.native-app .request-search-field .native-search input { padding: 10px 12px; }
.native-app .request-search-field .native-search button { display: grid; place-items: center; width: 38px; min-width: 38px; padding: 8px; background: #f0f6fc; color: #0877b5; }
.native-app .request-search-field .native-search button .ndt-icon { width: 19px; height: 19px; margin: 0; }
.request-filter-toggle { min-height: 48px; flex-shrink: 0; }
.request-filter-details { padding: 16px; margin-top: 14px; border: 1px solid #dbe6f0; border-radius: 8px; background: #f8fbfe; }
.request-filter-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.request-filter-reset { display: block; text-align: right; margin-top: 14px; font-size: 12px; color: #0877b5; }
.request-filter-area { padding-bottom: 18px; }
.filter-area-heading { margin-bottom: 14px; }
.file-upload-control { position: relative; border-radius: 9px; }
.native-app .file-upload-control .file-input-label { margin: 0; min-height: 96px; padding: 20px 16px; overflow-wrap: anywhere; }
.native-app .file-upload-control .file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; clip: auto; clip-path: none; cursor: pointer; z-index: 1; }
.file-upload-control:focus-within .file-input-label { outline: 2px solid #4f9fc9; outline-offset: 3px; }
.native-app .request-fields { overflow-anchor: none; }
.native-app .methods-block .method-track > span { animation: none; transform: scaleX(0); }
.native-app .methods-block.is-revealed .method-track > span { animation: method-reveal .8s ease-out both; }
.dashboard-chart, .dashboard-progress-chart, .chart-box { position: relative; }
.dashboard-chart canvas, .dashboard-progress-chart canvas, .chart-box canvas { display: block; width: 100% !important; height: 100% !important; max-width: 100%; }
[data-chart-state="waiting"]:not(.methods-block) { background: linear-gradient(180deg,#f8fbfe,#fff); border-radius: 8px; }
[data-chart-state="loading"]:not(.methods-block)::after { content: ''; position: absolute; top: 8px; right: 8px; width: 14px; height: 14px; border: 2px solid #d6e8f7; border-top-color: #0877b5; border-radius: 50%; animation: chart-loading .7s linear infinite; pointer-events: none; }
@keyframes chart-loading { to { transform: rotate(360deg); } }
.ndt-character--success .character-arm { animation: inspector-approve 2.5s ease-in-out infinite; }
.ndt-character--error .character-arm, .ndt-character--question .character-arm { animation: inspector-think 3s ease-in-out infinite; }
.ndt-character--warning .character-arm { animation: inspector-clipboard 3s ease-in-out infinite; }
.ndt-character--info .character-arm { animation: inspector-point 3s ease-in-out infinite; }
@keyframes inspector-approve { 50% { transform: translateY(-3px); } }
@keyframes inspector-think { 50% { transform: rotate(-3deg); } }
@keyframes inspector-clipboard { 50% { transform: translateY(-2px); } }
@keyframes inspector-point { 50% { transform: translateX(3px); } }
@media(max-width:480px) {
    .native-app .dashboard-hero { height: 222px; }
    .signin-content h1 { font-size: 24px; }
    .request-filter-toggle > span:not(.calendar-filter-count) { display: inline; }
    .request-filter-toggle { padding: 8px 10px; }
    .request-filter-grid { grid-template-columns: minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) {
    .native-app .methods-block.is-revealed .method-track > span { animation: none; transform: scaleX(1); }
    [data-chart-state="loading"]::after { animation: none; }
}

/* Clear summary cards and polished interactive controls. */
.native-app .summary-grid .metric-card { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; text-align: center; min-height: 134px; padding: 12px; background: linear-gradient(145deg,#dceefe 0%,#eef7ff 48%,#fbfdff 100%); border-color: #cadff0; box-shadow: inset 0 1px 0 #ffffffc0; }
.native-app .summary-grid .metric-card:nth-child(even) { background: linear-gradient(145deg,#e4f2ff 0%,#f6fbff 100%); }
.native-app .summary-grid .metric-top { display: flex; flex-direction: column-reverse; align-items: center; gap: 5px; color: #365b77; font-size: 12px; line-height: 1.5; }
.native-app .summary-grid .metric-top > span:first-child { min-height: 18px; }
.native-app .summary-grid .metric-icon, .native-app .summary-grid .metric-icon.green { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(145deg,#fff,#d2e9fc); color: #0877b5; box-shadow: 0 2px 6px #0c548010,inset 0 1px 0 #fff; }
.native-app .summary-grid .metric-icon .ndt-icon { width: 22px; height: 22px; stroke-width: 1.8; }
.native-app .summary-grid .metric-value { margin: 5px 0 4px; font-size: 28px; line-height: 1.15; font-weight: 800; color: #164f79; font-variant-numeric: tabular-nums; letter-spacing: -.6px; }
.native-app .summary-grid .metric-foot { font-size: 10px; color: #66819a; line-height: 1.5; }
.native-app .native-add-circle { background: linear-gradient(145deg,#25aceb,#0877b5 58%,#075b8b); box-shadow: inset 0 1px 2px #ffffff55; }
.native-app .native-add-tab.active .native-add-circle { background: linear-gradient(145deg,#1598d4,#075b8b); }
.calendar-date-nav { display: grid; grid-template-columns: 42px minmax(0,1fr) 42px; gap: 10px; align-items: center; margin-bottom: 18px; }
.calendar-date-nav button { min-height: 44px; border: 1px solid #d5e3ef; border-radius: 9px; background: #fff; color: #17608b; display: flex; align-items: center; justify-content: center; }
.calendar-date-nav #calendar-date-title { font-size: 15px; font-weight: 750; gap: 8px; background: #f1f7fd; }
.calendar-date-nav #calendar-date-title::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; }
.native-picker-dialog { position: fixed; inset: auto 0 0; margin: 0 auto; width: min(460px,100%); max-width: 100%; max-height: calc(var(--app-height,100dvh) - 24px); border: 0; border-radius: 20px 20px 0 0; padding: 22px 22px calc(20px + var(--app-bottom)); color: #29475e; background: #fff; overflow-y: auto; box-shadow: 0 -5px 32px #183d6014; }
.native-picker-dialog::backdrop { background: #102a426b; }
.picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.picker-heading h2 { margin: 0; font-size: 18px; font-weight: 750; }
.picker-heading > button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: #f2f7fb; color: #5d7a91; border-radius: 50%; }
.picker-description { font-size: 12px; margin: 8px 0 20px; color: #6f8598; }
.picker-footer { display: flex; gap: 12px; margin-top: 20px; }
.picker-footer button { flex: 1; min-height: 46px; padding: 10px 14px; font-size: 13px; font-weight: 650; border-radius: 8px; }
.picker-primary { border: 1px solid #0877b5; background: #0877b5; color: #fff; }
.picker-secondary { border: 1px solid #d5e0e9; background: #fff; color: #55738c; }
.calendar-jump-selects { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 12px; margin-bottom: 16px; }
.calendar-jump .flatpickr-months { display: none; }
.calendar-jump .flatpickr-calendar { position: static; width: 100%; box-shadow: none; border: 0; background: #fff; }
.calendar-jump .flatpickr-innerContainer,.calendar-jump .flatpickr-rContainer,.calendar-jump .flatpickr-days,.calendar-jump .dayContainer { width: 100%; min-width: 0; max-width: 100%; }
.calendar-jump .flatpickr-day { max-width: none; flex-basis: 14.285%; }
.calendar-jump .flatpickr-day.selected { background: #0877b5; border-color: #0877b5; }
.custom-time-field { position: relative; }
.custom-time-field input { padding-right: 44px; cursor: pointer; background: #fff !important; }
.custom-time-field > .ndt-icon { position: absolute; top: 14px; right: 13px; color: #0877b5; pointer-events: none; }
.time-shortcuts { display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.time-shortcuts button { border: 1px solid #d4e3ef; border-radius: 7px; background: #fff; min-height: 36px; padding: 6px 12px; color: #597b95; font-size: 12px; }
.time-shortcuts button.active { background: #e7f3ff; color: #0877b5; border-color: #9bc5e3; }
.signin-main { border-color: #dce6ee; }
.signin-brand { margin-bottom: 22px; }
.signin-content h1 { font-size: 24px; text-align: center; }
.signin-description { margin: 10px 0 28px; text-align: center; line-height: 1.6; }
.signin-field { margin-bottom: 20px; }
.signin-submit { justify-content: center; border-radius: 8px; background: linear-gradient(135deg,#1495cd,#0877b5); }

/* Original 3D sprite animation: four frames for each of six actions. */
.ndt-character { width: 190px; height: auto; perspective: 600px; }
.character-sprite { display: block; position: relative; width: 100%; aspect-ratio: 1; transform-style: preserve-3d; animation: inspector-depth 4s ease-in-out infinite; }
.sprite-sheet { display: block; position: absolute; inset: 0; filter: drop-shadow(0 4px 4px #264b6812); }
.character-frame { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: inspector-frame-visible 2.8s steps(1,end) infinite; animation-delay: var(--frame-delay); }
.character-signal { position: absolute; display: grid; place-items: center; right: 7px; bottom: 26px; width: 31px; height: 31px; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(145deg,#18a0dc,#075e96); color: #fff; box-shadow: 0 3px 8px #12547a30; }
.character-signal svg { width: 20px; height: 20px; }
.ndt-character--error .character-signal,.ndt-character--logout .character-signal { background: linear-gradient(145deg,#ee7e78,#cc454d); }
.ndt-character--warning .character-signal { background: linear-gradient(145deg,#e4b45b,#b58427); }
.character-caption { display: block; text-align: center; font-size: 11px; font-weight: 600; line-height: 1.5; color: #67829a; margin-top: -6px; }
.ndt-swal .swal2-icon { width: 196px; height: 210px; margin: 8px auto 2px; }
.ndt-swal .swal2-icon-content .ndt-character { width: 190px; height: auto; }
.sheet-character .ndt-character,.setup-emblem .ndt-character { width: 100%; height: 100%; }
.sheet-character .character-sprite { width: 56px; height: 56px; margin: auto; }
.setup-emblem .character-sprite { width: 80px; height: 80px; margin: auto; }
.sheet-character .character-caption,.setup-emblem .character-caption,.swal2-toast .character-caption { display: none; }
.sheet-character .character-signal,.setup-emblem .character-signal,.swal2-toast .character-signal { width: 15px; height: 15px; bottom: 6px; right: 0; border-width: 1px; }
.sheet-character .character-signal svg,.setup-emblem .character-signal svg,.swal2-toast .character-signal svg { width: 10px; height: 10px; }
.ndt-swal.swal2-toast .swal2-icon-content .ndt-character { width: 42px; height: 42px; }
.ndt-swal.swal2-toast .character-sprite { width: 42px; height: 42px; }
@keyframes inspector-frame-visible { 0%,24.99% { opacity: 1; } 25%,100% { opacity: 0; } }
@keyframes inspector-depth { 0%,100% { transform: rotateY(-3deg) translateY(0); } 50% { transform: rotateY(3deg) translateY(-2px); } }
@media(max-width:480px) {
    .native-app .summary-grid .metric-card { min-height: 124px; padding: 10px; }
    .native-app .summary-grid .metric-top { font-size: 11px; }
    .native-app .summary-grid .metric-value { font-size: 26px; }
    .native-app .summary-grid .metric-foot { font-size: 9px; }
    .calendar-date-nav #calendar-date-title { font-size: 13px; }
    .native-picker-dialog { padding-left: 18px; padding-right: 18px; }
}
@media(max-height:500px) {
    .native-picker-dialog { padding-top: 14px; }
    .picker-description { margin-bottom: 10px; }
    .time-shortcuts { margin-top: 10px; }
    .picker-footer { margin-top: 12px; }
    .ndt-swal .swal2-icon { width: 108px; height: 116px; }
    .ndt-swal .swal2-icon-content .ndt-character { width: 102px; height: auto; }
    .character-caption { font-size: 9px; }
}
@media(prefers-reduced-motion:reduce) {
    .sprite-sheet,.character-sprite,.character-frame { animation: none !important; transform: none !important; }
    .character-frame { opacity: 0; }
    .sprite-sheet .character-frame:first-child { opacity: 1; }
}
.native-app .fc-unthemed td.fc-today { background: #edf6ff; }
.app-loading::before { background: linear-gradient(90deg,#68c3ed,#0877b5); }
.native-app .native-tabbar a.native-add-tab { padding-bottom: 3px; }
.native-app .native-add-label { line-height: 14px; }

/* Analog time dial, with a 24-hour readout and precise minute selection. */
.clock-picker { --clock-size: min(266px,calc(100vw - 76px)); padding: 18px 22px calc(20px + var(--app-bottom)); }
.clock-picker .picker-description { margin: 4px 0 14px; font-size: 11px; }
.clock-picker-layout { display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; }
.clock-picker-controls { display: contents; }
.clock-picker-toolbar { order: 1; display: flex; justify-content: space-between; align-items: center; gap: 16px; width: min(300px,100%); margin-bottom: 12px; }
.clock-readout { display: flex; align-items: center; gap: 4px; }
.clock-readout > button { display: grid; place-items: center; min-width: 58px; min-height: 58px; padding: 5px 9px; border: 1px solid transparent; border-radius: 11px; background: #f2f6fa; color: #607a91; }
.clock-readout > button[aria-pressed="true"] { color: #0877b5; background: #e8f4ff; border-color: #b9d8ee; }
.clock-readout strong { font-size: 27px; font-weight: 750; line-height: 1.15; font-variant-numeric: tabular-nums; }
.clock-readout button > span { font-size: 10px; line-height: 1.4; }
.clock-readout-separator { font-size: 22px; font-weight: 650; color: #637f95; }
.clock-period { display: flex; padding: 3px; gap: 3px; background: #f3f7fb; border: 1px solid #e1eaf2; border-radius: 10px; }
.clock-period button { border: 0; border-radius: 7px; background: transparent; color: #74879a; min-width: 40px; min-height: 44px; padding: 5px; font-size: 12px; line-height: 1.4; font-weight: 700; }
.clock-period button small { display: block; font-size: 9px; font-weight: 500; }
.clock-period button[aria-pressed="true"] { color: #0877b5; background: #fff; box-shadow: 0 1px 5px #284c6410; }
.clock-dial-wrap { order: 2; padding: 0; }
.clock-dial { position: relative; width: var(--clock-size); height: var(--clock-size); border-radius: 50%; background: radial-gradient(circle at 38% 28%,#fff 20%,#f0f7fe 100%); box-shadow: inset 0 0 0 1px #e6eef5,0 6px 20px #164f7910; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.clock-face { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.clock-bezel { fill: none; stroke: #d9e7f2; stroke-width: 1; }
.clock-inset { fill: none; stroke: #e8f0f7; stroke-width: 1; }
.clock-tick { stroke: #c8d8e6; stroke-width: 1; stroke-linecap: round; }
.clock-tick.major { stroke: #95afc5; stroke-width: 2; }
.clock-hand { stroke-linecap: round; }
.clock-hand-hour { stroke: #235171; stroke-width: 6; }
.clock-hand-minute { stroke: #36a0d6; stroke-width: 3; }
.clock-dial[data-mode="minute"] .clock-hand-minute { stroke: #0877b5; stroke-width: 4; }
.clock-dial[data-mode="hour"] .clock-hand-hour { stroke: #0877b5; }
.clock-center { fill: #0877b5; }
.clock-center-cap { fill: #fff; }
.clock-number { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; transform: translate(-50%,-50%); color: #3b586f; font-size: 16px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; }
.clock-number.is-obscured { opacity: 0; }
.clock-selection { position: absolute; display: grid; place-items: center; width: 36px; height: 36px; transform: translate(-50%,-50%); color: #fff; background: linear-gradient(145deg,#1ba2df,#0877b5); border-radius: 50%; box-shadow: 0 2px 5px #0877b525; font-size: 16px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; }
.clock-picker-hint { order: 3; min-height: 18px; margin: 10px 0 0; color: #74889b; text-align: center; font-size: 11px; line-height: 1.5; }
.clock-picker .time-shortcuts { order: 4; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; width: min(300px,100%); margin-top: 12px; }
.clock-picker .time-shortcuts button { min-height: 36px; padding: 6px 8px; font-variant-numeric: tabular-nums; }
.clock-picker .picker-footer { position: sticky; bottom: calc(-20px - var(--app-bottom)); padding-top: 8px; margin-top: 12px; background: #fff; }
.clock-picker .picker-footer button { min-height: 44px; }
@media(max-height:620px) {
    .clock-picker { --clock-size: min(240px,calc(100vw - 72px),calc(var(--app-height,100dvh) - 352px)); padding: 14px 18px calc(14px + var(--app-bottom)); max-height: calc(var(--app-height,100dvh) - 16px); }
    .clock-picker .picker-description { display: none; }
    .clock-picker .picker-heading > button { height: 32px; width: 32px; }
    .clock-picker .picker-heading h2 { font-size: 16px; }
    .clock-picker-toolbar { margin: 8px 0; }
    .clock-readout > button { min-height: 50px; }
    .clock-readout strong { font-size: 24px; }
    .clock-picker-hint { font-size: 10px; margin-top: 8px; }
    .clock-picker .time-shortcuts { margin-top: 8px; }
    .clock-picker .picker-footer { bottom: calc(-14px - var(--app-bottom)); margin-top: 8px; padding-top: 4px; }
    .clock-number { font-size: 14px; }
    .clock-selection { width: 31px; height: 31px; font-size: 14px; }
}
@media(max-height:500px) and (min-width:600px) {
    .clock-picker { --clock-size: min(226px,calc(var(--app-height,100dvh) - 142px)); width: min(600px,100%); }
    .clock-picker-layout { grid-template-columns: minmax(0,1fr) auto; gap: 22px; align-items: center; }
    .clock-picker-controls { display: flex; flex-direction: column; align-items: center; width: 100%; }
    .clock-picker-toolbar { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .clock-picker .picker-footer { margin-top: 12px; }
}

/* Shared action feedback and calendar dropdowns. */
.action-spinner { display:inline-block; width:16px; height:16px; flex-shrink:0; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:ndt-action-spin .7s linear infinite; }
[data-action-pending] { display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:wait; }
@keyframes ndt-action-spin { to { transform:rotate(360deg); } }
.detail-loading { min-height:170px; display:flex; align-items:center; justify-content:center; gap:12px; color:#537086; font-size:14px; }
.detail-section { padding:20px; margin-bottom:16px; border:1px solid #dde8f2; border-radius:12px; background:linear-gradient(135deg,#f2f8fe,#fff 65%); }
.detail-section:last-child { margin-bottom:0; }
.detail-section h3 { font-size:15px; font-weight:700; color:#204866; margin:0 0 18px; }
.detail-section .info-item { display:flex; flex-direction:column; gap:6px; min-width:0; overflow-wrap:anywhere; }
.detail-section .info-item strong { font-size:12px; color:#607c92; }
.detail-section .info-item > span { font-size:14px; white-space:pre-wrap; }
.detail-section .info-item .status-pill { align-self:flex-start; font-size:12px; }
.select2-dropdown { border:1px solid #cbddea !important; border-radius:12px !important; padding:6px; background:#fff; box-shadow:0 12px 32px #173d6220; overflow:hidden; color:#284b65; font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:13px; }
.select2-container--default .select2-search--dropdown .select2-search__field { border:1px solid #d7e4ee; border-radius:8px; min-height:38px; padding:8px 10px; color:#284b65; background:#f6faff; }
.select2-results__option { padding:11px 12px; border-radius:7px; margin:2px 0; }
.select2-container--default .select2-results__option[aria-selected=true] { background:#eaf4ff; color:#076bab; font-weight:650; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background:#0877b5; color:#fff; }
.calendar-jump .select2-container .select2-selection--single { height:46px; min-height:46px; border:1px solid #cfdfed; border-radius:10px; background:#f4f9ff; }
.calendar-jump .select2-container .select2-selection--single .select2-selection__rendered { padding:0 32px 0 13px; line-height:44px; color:#24506f; font-weight:650; font-size:14px; }
.calendar-jump .select2-container .select2-selection--single .select2-selection__arrow { height:44px; right:10px; }
.calendar-jump .select2-container--open .select2-selection--single { border-color:#0877b5; box-shadow:0 0 0 3px #0877b512; }
.calendar-jump .select2-dropdown { box-shadow:0 8px 20px #173d6220; }
.calendar-jump .select2-results__options { max-height:min(220px,36dvh); overscroll-behavior:contain; }
.ndt-swal { border:1px solid #e0eaf3; border-radius:20px; box-shadow:0 24px 72px #173b602b; }
.ndt-swal .swal2-actions { flex-wrap:wrap; margin-bottom:8px; }
.ndt-swal .swal2-actions button:focus-visible { outline:3px solid #6ab7ec; outline-offset:3px; }
.ndt-swal.swal2-toast { padding:12px 16px; max-width:calc(100vw - 24px); border-radius:14px; }
.ndt-swal.swal2-toast .character-caption { display:none; }
@media(max-width:480px) { .detail-section { padding:16px; } .select2-dropdown { font-size:14px; } }
@media(prefers-reduced-motion:reduce) { .action-spinner { animation-duration:1.8s; } }

/* Noticeable action feedback, with the same blue/white controls throughout. */
.native-app .native-record .table-button.report,
.native-app .native-record .table-button.report:hover,
.native-app .native-record .approve-button { color:#0877b5 !important; background:#eaf4ff !important; border-color:#c7def2 !important; }
.native-app .native-record .table-button.report:active { background:#d7ebff !important; }
.native-app .native-menu-icon.green,.native-app .home-record-icon,.native-app .native-account .avatar { color:#0877b5 !important; background:#eaf4ff !important; border-color:#c7def2 !important; }
.native-app .form-control:focus,.native-app .form-select:focus,.ndt-login .login-input:focus { border-color:#7aaed5 !important; box-shadow:0 0 0 3px #0877b51a !important; }
.native-app input[type=checkbox],.native-app input[type=radio],.ndt-login input[type=checkbox] { accent-color:#0877b5; }
.native-app .form-check-input:checked { background-color:#0877b5 !important; border-color:#0877b5 !important; }
.native-app .text-success { color:#0877b5 !important; }
.native-app .btn-outline-success { color:#0877b5 !important; border-color:#c7def2 !important; background:#fff !important; }
.native-app .btn-outline-success:hover { color:#fff !important; background:#0877b5 !important; }
.native-app .select2-container--default.select2-container--focus .select2-selection--single { border-color:#7aaed5 !important; box-shadow:0 0 0 3px #0877b51a !important; }
.native-app .select2-container--default .select2-results__option[aria-selected=true],.select2-container--default .select2-results__option[aria-selected=true] { background:#eaf4ff !important; color:#0877b5 !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background:#0877b5 !important; color:#fff !important; }
.native-app .native-setting-actions button[data-open-native-settings] { color:#0877b5; background:#fff; border:1px solid #c7def2; }
.native-app .swal2-container.swal2-center { align-items:center !important; justify-content:center; padding:calc(16px + var(--app-top)) 16px calc(16px + var(--app-bottom)) !important; }
.native-app .swal2-popup.ndt-swal:not(.swal2-toast) { width:min(420px,calc(100vw - 32px)) !important; align-self:center; border-radius:20px !important; padding:18px 20px 16px !important; max-height:calc(var(--app-height,100dvh) - var(--app-top) - var(--app-bottom) - 32px); }
.ndt-swal:not(.swal2-toast) .swal2-icon { width:140px; height:150px; margin:4px auto 2px; }
.ndt-swal:not(.swal2-toast) .swal2-icon-content .ndt-character { width:138px; height:auto; }
.ndt-swal .swal2-title { color:#24445e !important; font-size:20px !important; }
.ndt-swal .swal2-html-container { font-size:14px !important; color:#526d83; }
.ndt-swal .swal2-actions { padding:10px 0 0; margin-top:10px; position:static; }
.ndt-swal-confirm,.ndt-swal-cancel { font-size:14px !important; }
.swal2-container.swal2-top { padding-top:calc(14px + var(--app-top,env(safe-area-inset-top,0px))) !important; }
.ndt-swal.swal2-toast { width:min(460px,calc(100vw - 32px)) !important; min-height:112px; padding:16px 44px 18px 12px !important; border:1px solid #cbdfee; border-left:5px solid #0877b5; border-radius:16px !important; background:linear-gradient(110deg,#f1f8ff,#fff 70%); box-shadow:0 12px 36px #173b6030; column-gap:10px; }
.ndt-swal.swal2-toast .swal2-icon { width:76px; height:80px; margin:0; grid-row:1 / 3; }
.ndt-swal.swal2-toast .swal2-icon-content .ndt-character,.ndt-swal.swal2-toast .character-sprite { width:76px; height:80px; }
.ndt-swal.swal2-toast .character-signal { width:20px; height:20px; right:0; bottom:7px; }
.ndt-swal.swal2-toast .character-signal svg { width:13px; height:13px; }
.ndt-swal.swal2-toast .swal2-title { margin:0 0 5px; font-size:16px !important; line-height:1.4; align-self:end; }
.ndt-swal.swal2-toast .swal2-html-container { margin:0 !important; font-size:13px !important; line-height:1.55; text-align:left; align-self:start; color:#46667e; }
.ndt-swal.swal2-toast .swal2-close { position:absolute; top:8px; right:7px; width:32px; height:32px; font-size:27px; color:#6a8497; border-radius:8px; }
.ndt-swal.swal2-toast .swal2-close:hover { color:#0877b5; background:#eaf4ff; }
.ndt-swal .swal2-timer-progress-bar { background:#0877b5; height:3px; }
@media(max-height:500px) { .ndt-swal:not(.swal2-toast) .swal2-icon { width:88px; height:96px; } .ndt-swal:not(.swal2-toast) .swal2-icon-content .ndt-character { width:86px; } .ndt-swal.swal2-toast { min-height:94px; } }