/* ORBIT theme refinement layer - visual only - 2026-07-15 */
:root {
    --orbit-theme-bg: #07111f;
    --orbit-theme-surface: rgba(10, 22, 39, 0.88);
    --orbit-theme-surface-strong: rgba(13, 27, 47, 0.96);
    --orbit-theme-surface-soft: rgba(16, 31, 52, 0.72);
    --orbit-theme-border: rgba(148, 163, 184, 0.18);
    --orbit-theme-border-strong: rgba(34, 211, 238, 0.36);
    --orbit-theme-text: #eef6ff;
    --orbit-theme-muted: #a9b8ca;
    --orbit-theme-faint: #718096;
    --orbit-theme-cyan: #22d3ee;
    --orbit-theme-blue: #60a5fa;
    --orbit-theme-green: #34d399;
    --orbit-theme-amber: #f59e0b;
    --orbit-theme-rose: #fb7185;
    --orbit-theme-radius: 12px;
    --orbit-theme-shadow: 0 18px 48px rgba(2, 6, 23, 0.34);
    --orbit-theme-focus: 0 0 0 3px rgba(34, 211, 238, 0.18);
}

body {
    background:
        radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.10), transparent 30%),
        radial-gradient(circle at 88% 4%, rgba(245, 158, 11, 0.08), transparent 28%),
        linear-gradient(180deg, #08111f 0%, #070d18 48%, #050914 100%) !important;
    color: var(--orbit-theme-text) !important;
    letter-spacing: 0 !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 78%);
}

.fusion-header,
.mobile-header {
    background: rgba(6, 15, 28, 0.88) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
    box-shadow: 0 14px 32px rgba(2, 6, 23, 0.24) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
}

.fusion-logo {
    color: #f8fafc !important;
    letter-spacing: 0 !important;
    text-shadow: 0 8px 22px rgba(34, 211, 238, 0.18) !important;
}

.fusion-header-icon-btn,
.theme-switcher-btn,
.orbit-section-refresh,
.orbit-agenda-actions .fusion-btn,
.orbit-agenda-monthbar .fusion-btn,
.jowat-back-btn {
    border-radius: var(--orbit-theme-radius) !important;
}

.fusion-header-icon-btn,
.theme-switcher-btn {
    background: rgba(15, 23, 42, 0.74) !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    color: #dff7ff !important;
}

.fusion-header-icon-btn:hover,
.theme-switcher-btn:hover {
    border-color: var(--orbit-theme-border-strong) !important;
    background: rgba(12, 31, 48, 0.92) !important;
    transform: translateY(-1px) !important;
}

#side-drawer,
.fusion-sidebar {
    background: rgba(5, 12, 24, 0.94) !important;
    border-right: 1px solid rgba(148, 163, 184, 0.14) !important;
    box-shadow: 18px 0 46px rgba(2, 6, 23, 0.26) !important;
}

.drawer-item,
.nav-item {
    border-radius: 10px !important;
    letter-spacing: 0 !important;
}

.drawer-item:hover,
.nav-item:hover {
    background: rgba(34, 211, 238, 0.10) !important;
    color: #f8fafc !important;
}

.fusion-card,
.glass-panel,
.orbit-card-glass,
.metric-card,
.quick-action-card,
.sidebar-section,
.receivables-section,
.notes-section,
.orbit-agenda-calendar,
.orbit-agenda-side,
#jowat-modal .jowat-modal-panel {
    background:
        linear-gradient(180deg, rgba(15, 27, 46, 0.94), rgba(8, 17, 31, 0.90)) !important;
    border: 1px solid var(--orbit-theme-border) !important;
    box-shadow: var(--orbit-theme-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.fusion-card:hover,
.glass-panel:hover,
.metric-card:hover,
.quick-action-card:hover {
    border-color: rgba(34, 211, 238, 0.26) !important;
}

h1,
h2,
h3,
h4,
h5,
.section-title,
.card-title,
.metric-value,
.theme-switcher-title {
    color: var(--orbit-theme-text) !important;
    letter-spacing: 0 !important;
}

p,
small,
.metric-label,
.card-subtitle,
.theme-description,
.hero-subtitle,
.orbit-agenda-header p {
    color: var(--orbit-theme-muted) !important;
    letter-spacing: 0 !important;
}

.fusion-btn,
button.fusion-btn,
.primary-btn,
.secondary-btn,
.accent-btn,
.success-btn {
    min-height: 40px;
    border-radius: 11px !important;
    letter-spacing: 0 !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

.fusion-btn,
.secondary-btn {
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    color: #dbeafe !important;
}

.fusion-btn:hover,
.secondary-btn:hover {
    background: rgba(15, 35, 55, 0.90) !important;
    border-color: var(--orbit-theme-border-strong) !important;
}

.primary-btn,
.fusion-btn.primary-btn {
    background: linear-gradient(135deg, #0891b2, #2563eb) !important;
    border-color: rgba(125, 211, 252, 0.45) !important;
    color: #ffffff !important;
}

.success-btn,
.fusion-btn.success-btn {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    border-color: rgba(52, 211, 153, 0.42) !important;
}

.accent-btn,
.fusion-btn.accent-btn {
    background: linear-gradient(135deg, #f59e0b, #e11d48) !important;
    border-color: rgba(245, 158, 11, 0.42) !important;
}

input,
select,
textarea,
.fusion-input,
#jowat-modal input,
#jowat-modal select,
#jowat-modal textarea {
    background: rgba(2, 8, 23, 0.54) !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    color: var(--orbit-theme-text) !important;
    border-radius: 11px !important;
    outline: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

input::placeholder,
textarea::placeholder,
.fusion-input::placeholder {
    color: rgba(169, 184, 202, 0.62) !important;
}

input:focus,
select:focus,
textarea:focus,
.fusion-input:focus,
#jowat-modal input:focus,
#jowat-modal select:focus {
    border-color: var(--orbit-theme-border-strong) !important;
    box-shadow: var(--orbit-theme-focus), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

table,
.fusion-table,
.orbit-table-modern {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.fusion-table th,
.orbit-table-modern th {
    background: rgba(15, 23, 42, 0.86) !important;
    color: #c7d2fe !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
    letter-spacing: 0 !important;
}

.fusion-table td,
.orbit-table-modern td {
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
}

#main-content .dashboard-quick-actions .quick-action-card {
    border-radius: 12px !important;
}

#main-content .dashboard-quick-actions .quick-action-card i {
    background: rgba(34, 211, 238, 0.10) !important;
    border: 1px solid rgba(34, 211, 238, 0.18) !important;
    border-radius: 10px !important;
    padding: 8px !important;
}

.theme-switcher-panel {
    background: rgba(6, 15, 28, 0.96) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 14px !important;
}

.theme-option {
    border-radius: 10px !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

.theme-option.active {
    border-color: var(--orbit-theme-cyan) !important;
    background: rgba(34, 211, 238, 0.11) !important;
}

#jowat-modal {
    background: rgba(2, 6, 23, 0.76) !important;
    backdrop-filter: blur(10px) !important;
}

#jowat-modal .jowat-modal-panel {
    width: min(1100px, 96vw) !important;
    border-color: rgba(34, 211, 238, 0.34) !important;
}

#jowat-modal .jowat-tab {
    background: rgba(15, 23, 42, 0.66) !important;
    color: #cbd5e1 !important;
}

#jowat-modal .jowat-tab.active,
#jowat-modal .jowat-tab:hover {
    background: rgba(34, 211, 238, 0.14) !important;
    border-color: rgba(34, 211, 238, 0.36) !important;
    color: #ffffff !important;
}

#j-result {
    color: var(--orbit-theme-text) !important;
}

#j-result [style*="background"] {
    border-radius: 12px !important;
}

.orbit-agenda-shell {
    border-radius: 14px !important;
}

.orbit-agenda-stats div {
    border-radius: 10px !important;
    background: rgba(15, 23, 42, 0.78) !important;
}

.orbit-agenda-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 10px;
    align-items: center;
    margin: 0 0 14px;
}

.orbit-agenda-filterbar {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.orbit-agenda-filterbar button {
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    background: rgba(15, 23, 42, 0.66);
    color: #cbd5e1;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.orbit-agenda-filterbar button:hover,
.orbit-agenda-filterbar button.active {
    border-color: rgba(34, 211, 238, 0.42);
    background: rgba(34, 211, 238, 0.13);
    color: #ffffff;
}

.orbit-agenda-search {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 999px;
    background: rgba(2, 8, 23, 0.46);
}

.orbit-agenda-search i {
    color: var(--orbit-theme-cyan);
}

.orbit-agenda-search input {
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
}

.orbit-agenda-item {
    border-radius: 10px !important;
    background: rgba(2, 8, 23, 0.42) !important;
    border-left: 4px solid var(--agenda-color, var(--orbit-theme-cyan)) !important;
}

.orbit-agenda-item.is-system {
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.08), rgba(2, 8, 23, 0.42)) !important;
}

.orbit-agenda-item.is-manual {
    background: linear-gradient(90deg, rgba(52, 211, 153, 0.07), rgba(2, 8, 23, 0.42)) !important;
}

.orbit-agenda-item strong {
    color: #f8fafc !important;
}

.orbit-agenda-item span,
.orbit-agenda-item small {
    color: var(--orbit-theme-muted) !important;
}

.cal-event-dot {
    border-left: 3px solid rgba(255, 255, 255, 0.42);
    line-height: 1.25;
}

.cal-event-dot span,
.orbit-event-time {
    font-weight: 900;
    color: #ffffff;
}

.cal-event-more {
    margin-top: 3px;
    color: var(--orbit-theme-muted);
    font-size: 10px;
    font-weight: 800;
}

.orbit-event-modal-panel {
    width: min(680px, calc(100vw - 24px));
    max-height: 90vh;
    overflow-y: auto;
    padding: 22px;
    background: #1e293b !important;
    border: 1px solid rgba(34, 211, 238, 0.26) !important;
    border-radius: 12px !important;
}

.orbit-event-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.orbit-event-form-grid label {
    display: block;
    margin-bottom: 5px;
    color: var(--orbit-theme-muted);
    font-size: 12px;
    font-weight: 800;
}

.orbit-event-form-grid .fusion-input {
    width: 100%;
    min-height: 42px;
}

.orbit-color-swatches {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 7px;
    min-height: 42px;
    align-items: center;
}

.orbit-color-swatch {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: var(--swatch);
    cursor: pointer;
    box-shadow: inset 0 0 0 2px rgba(2, 6, 23, 0.22);
}

.orbit-color-swatch:hover,
.orbit-color-swatch.active {
    border-color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16), inset 0 0 0 2px rgba(2, 6, 23, 0.22);
}

.orbit-note-input {
    min-height: 108px;
    border-left: 4px solid var(--note-color, var(--orbit-theme-cyan)) !important;
}

.orbit-agenda-note,
.orbit-day-note {
    margin-top: 8px;
    padding: 8px 10px;
    border-left: 3px solid var(--agenda-color, var(--orbit-theme-cyan));
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.64);
    color: #dbeafe;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.orbit-day-event {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    margin-bottom: 10px;
    border-left: 4px solid var(--agenda-color, var(--orbit-theme-cyan));
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.58);
}

.orbit-day-event-actions {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}

.orbit-day-event-actions .icon-btn {
    width: 34px;
    height: 34px;
    min-height: 34px;
    display: inline-grid;
    place-items: center;
}

.orbit-day-event-actions .icon-btn.danger {
    color: var(--orbit-theme-rose) !important;
}

body.theme-light,
body[data-theme="light"],
[data-theme="light"] body {
    background: #eef4fb !important;
    color: #0f172a !important;
}

body.theme-light .fusion-card,
body[data-theme="light"] .fusion-card,
body.theme-light .glass-panel,
body[data-theme="light"] .glass-panel,
body.theme-light .orbit-card-glass,
body[data-theme="light"] .orbit-card-glass,
body.theme-light .metric-card,
body[data-theme="light"] .metric-card,
body.theme-light .quick-action-card,
body[data-theme="light"] .quick-action-card {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.10) !important;
}

body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light .metric-value,
body[data-theme="light"] h1,
body[data-theme="light"] h2,
body[data-theme="light"] h3,
body[data-theme="light"] h4,
body[data-theme="light"] h5,
body[data-theme="light"] .metric-value {
    color: #0f172a !important;
}

body.theme-light p,
body.theme-light small,
body.theme-light .metric-label,
body[data-theme="light"] p,
body[data-theme="light"] small,
body[data-theme="light"] .metric-label {
    color: #475569 !important;
}

@media (max-width: 768px) {
    .fusion-header {
        min-height: 58px !important;
    }

    .fusion-logo {
        font-size: 17px !important;
    }

    .fusion-btn,
    button.fusion-btn {
        min-height: 44px;
    }

    #jowat-modal .jowat-modal-panel {
        padding: 16px !important;
        width: calc(100vw - 16px) !important;
    }

    .orbit-agenda-toolbar {
        grid-template-columns: 1fr;
    }

    .orbit-event-modal-panel {
        padding: 16px;
    }

    .orbit-event-form-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .orbit-color-swatches {
        grid-template-columns: repeat(4, 30px);
        justify-content: start;
    }

    .orbit-day-event {
        flex-direction: column;
    }

    .orbit-day-event-actions {
        width: 100%;
        justify-content: flex-end;
    }
}