:root {
    --ek1-bg: #f3f7fa;
    --ek1-surface: #ffffff;
    --ek1-surface-soft: #f7fafc;
    --ek1-primary: #2f80c7;
    --ek1-primary-dark: #245f94;
    --ek1-primary-soft: #eaf4ff;
    --ek1-accent-green: #5e9a80;
    --ek1-accent-green-soft: #eaf4ee;
    --ek1-accent-amber: #cf8d4a;
    --ek1-accent-violet: #8373b5;
    --ek1-accent-teal: #5790a4;
    --ek1-card-accent: #dcece2;
    --ek1-dialog-accent: var(--ek1-accent-green);
    --ek1-accounting-bar-start: #2f4f6f;
    --ek1-accounting-bar-end: #3f698c;
    --ek1-ink: #243b53;
    --ek1-muted: #718596;
    --ek1-line: #d8e4ec;
    --ek1-shadow: 0 12px 30px rgba(36, 59, 83, 0.07);
}

html,
body {
    background: var(--ek1-bg) !important;
    color: var(--ek1-ink) !important;
}

.aura-bg {
    background:
        radial-gradient(circle at 8% 0%, rgba(47, 128, 199, 0.075), transparent 29%),
        radial-gradient(circle at 92% 10%, rgba(94, 154, 128, 0.075), transparent 30%),
        linear-gradient(180deg, #fbfcfd 0%, var(--ek1-bg) 55%, #eff5f6 100%) !important;
}

.app-header {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 2px solid rgba(94, 154, 128, 0.82) !important;
    box-shadow: 0 7px 24px rgba(36, 59, 83, 0.06) !important;
    backdrop-filter: blur(16px);
}

.app-header h1 {
    color: var(--ek1-ink) !important;
    font-weight: 800 !important;
}

.app-header button {
    border-radius: 14px !important;
}

.app-header button[class*="bg-[#34495E]"],
.app-header button[class*="bg-[#2C3E50]"] {
    background: var(--ek1-primary) !important;
    border-color: var(--ek1-primary) !important;
}

.content-container {
    padding-bottom: max(32px, env(safe-area-inset-bottom));
}

.app-view-shell {
    width: 100%;
    color: var(--ek1-ink);
}

/* Each module carries its own restrained accent into its inner cards. */
.app-view-shell[data-view="form"],
.app-view-shell[data-view="history"] {
    --ek1-card-accent: #d7e9f7;
}

.app-view-shell[data-view="accounting"],
.app-view-shell[data-view="accounting-create"],
.app-view-shell[data-view="accounting-history"] {
    --ek1-card-accent: #cfe5f8;
}

.app-view-shell[data-view="calendar"] {
    --ek1-card-accent: #dcece2;
}

.app-view-shell[data-view="customers"],
.app-view-shell[data-view="customer-edit"] {
    --ek1-card-accent: #f2e1c8;
}

.app-view-shell[data-view="team"] {
    --ek1-card-accent: #f2e5ed;
}

.app-view-shell[data-view="documents"],
.app-view-shell[data-view="document-create"],
.app-view-shell[data-view="document-history"],
.app-view-shell[data-view="company"],
.app-view-shell[data-view="chemicals"],
.app-view-shell[data-view="stamp-settings"],
.app-view-shell[data-view="person-signature-settings"],
.app-view-shell[data-view="report-template-settings"],
.app-view-shell[data-view="admin-subscriptions"] {
    --ek1-card-accent: #d9eaee;
}

/* Dialogs inherit the active module accent without altering their layout. */
body:has(.app-view-shell[data-view="form"]),
body:has(.app-view-shell[data-view="history"]),
body:has(.app-view-shell[data-view="accounting"]),
body:has(.app-view-shell[data-view="accounting-create"]),
body:has(.app-view-shell[data-view="accounting-history"]) {
    --ek1-dialog-accent: var(--ek1-primary);
}

body:has(.app-view-shell[data-view="calendar"]) {
    --ek1-dialog-accent: var(--ek1-accent-green);
}

body:has(.app-view-shell[data-view="customers"]),
body:has(.app-view-shell[data-view="customer-edit"]) {
    --ek1-dialog-accent: var(--ek1-accent-amber);
}

body:has(.app-view-shell[data-view="team"]) {
    --ek1-dialog-accent: #bd739a;
}

body:has(.app-view-shell[data-view="documents"]),
body:has(.app-view-shell[data-view="document-create"]),
body:has(.app-view-shell[data-view="document-history"]),
body:has(.app-view-shell[data-view="company"]),
body:has(.app-view-shell[data-view="chemicals"]),
body:has(.app-view-shell[data-view="stamp-settings"]),
body:has(.app-view-shell[data-view="person-signature-settings"]),
body:has(.app-view-shell[data-view="report-template-settings"]),
body:has(.app-view-shell[data-view="admin-subscriptions"]) {
    --ek1-dialog-accent: var(--ek1-accent-teal);
}

.app-view-shell > * {
    width: 100%;
}

.app-view-shell section[class*="bg-white"],
.app-view-shell article[class*="bg-white"],
.app-view-shell div[class*="bg-white"][class*="shadow"],
.app-view-shell button[class*="bg-white"][class*="rounded"][class*="shadow"],
.app-view-shell a[class*="bg-white"][class*="rounded"][class*="shadow"] {
    border-color: var(--ek1-line) !important;
    box-shadow: inset 0 1px 0 var(--ek1-card-accent), var(--ek1-shadow) !important;
}

.app-view-shell button {
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease,
        box-shadow 160ms ease, transform 160ms ease;
}

.app-view-shell button:not(:disabled):active {
    transform: scale(0.985);
}

.app-view-shell button[class*="bg-[#34495E]"],
.app-view-shell button[class*="bg-[#2C3E50]"],
.app-view-shell button[class*="bg-[#1f2937]"],
.app-view-shell button[class*="bg-[#1C1F22]"] {
    background: var(--ek1-primary) !important;
    border-color: var(--ek1-primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(47, 128, 199, 0.18) !important;
}

.app-view-shell button[class*="bg-[#34495E]"]:hover,
.app-view-shell button[class*="bg-[#2C3E50]"]:hover,
.app-view-shell button[class*="bg-[#1f2937]"]:hover,
.app-view-shell button[class*="bg-[#1C1F22]"]:hover {
    background: var(--ek1-primary-dark) !important;
}

.app-view-shell input,
.app-view-shell select,
.app-view-shell textarea,
body [role="dialog"] input,
body [role="dialog"] select,
body [role="dialog"] textarea {
    background: #fbfdff !important;
    border-color: var(--ek1-line) !important;
    border-radius: 14px !important;
    color: var(--ek1-ink) !important;
    box-shadow: inset 0 1px 2px rgba(36, 59, 83, 0.025);
}

.app-view-shell input:focus,
.app-view-shell select:focus,
.app-view-shell textarea:focus,
body [role="dialog"] input:focus,
body [role="dialog"] select:focus,
body [role="dialog"] textarea:focus {
    border-color: var(--ek1-primary) !important;
    box-shadow: 0 0 0 3px rgba(47, 128, 199, 0.12) !important;
    outline: none !important;
}

body [role="dialog"] {
    border: 1px solid rgba(216, 228, 236, 0.95) !important;
    border-top: 2px solid var(--ek1-dialog-accent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ek1-dialog-accent) 14%, transparent), 0 30px 90px rgba(20, 42, 61, 0.24) !important;
}

body [role="dialog"] button[class*="bg-[#34495E]"],
body [role="dialog"] button[class*="bg-[#2C3E50]"],
body [role="dialog"] button[class*="bg-[#1f2937]"],
body [role="dialog"] button[class*="bg-[#1C1F22]"] {
    background: var(--ek1-primary) !important;
    border-color: var(--ek1-primary) !important;
    color: #fff !important;
}

.app-sidebar-overlay {
    background: rgba(20, 42, 61, 0.34) !important;
}

.app-sidebar-panel {
    width: min(316px, calc(100vw - 22px)) !important;
    margin: 10px 0 10px 10px;
    height: calc(100dvh - 20px);
    border: 1px solid rgba(216, 228, 236, 0.95);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 26px 70px rgba(20, 42, 61, 0.22) !important;
}

.app-sidebar-profile {
    background: linear-gradient(135deg, rgba(47, 128, 199, 0.98), rgba(65, 113, 154, 0.98)) !important;
    padding-top: max(24px, env(safe-area-inset-top)) !important;
}

.app-sidebar-nav {
    background: #f6f9fb !important;
}

.app-sidebar-nav nav > button {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 14px !important;
}

.app-sidebar-nav nav > button:hover {
    background: #fff !important;
    border-color: var(--ek1-line) !important;
    box-shadow: 0 5px 15px rgba(36, 59, 83, 0.05);
}

.app-sidebar-nav nav > div[class*="uppercase"] {
    color: #8ca0af !important;
    letter-spacing: 0.15em !important;
}

.app-sidebar-footer {
    border-color: var(--ek1-line) !important;
    background: #fff !important;
}

.ek1-dashboard {
    max-width: 1480px !important;
}

.app-view-shell .ek1-dashboard-primary {
    border: 1px solid #cfe2f3 !important;
    background: linear-gradient(145deg, #e9f4ff, #f8fbff) !important;
    color: #245f94 !important;
    box-shadow: 0 10px 24px rgba(47, 128, 199, 0.10) !important;
}

/* Selected "Vurgulu Seritler" web theme: white cards with slim color bands. */
.app-view-shell .ek1-dashboard-header {
    background: #ffffff !important;
    border-color: #d7e5e5 !important;
    box-shadow: inset 0 -1px 0 var(--ek1-accent-green), 0 12px 30px rgba(36, 59, 83, 0.06) !important;
}

.app-view-shell .ek1-dashboard .ek1-dashboard-quick-grid a.ek1-dashboard-quick-card,
.app-view-shell .ek1-dashboard .ek1-dashboard-action-grid a.ek1-dashboard-action-card {
    background: #ffffff !important;
    border-color: #d7e4e8 !important;
    box-shadow: 0 10px 24px rgba(36, 59, 83, 0.055) !important;
}

.app-view-shell .ek1-dashboard .ek1-dashboard-quick-grid a.ek1-dashboard-quick-card {
    border-top: 2px solid var(--ek1-primary) !important;
}

.app-view-shell .ek1-dashboard .ek1-dashboard-quick-grid .ek1-dashboard-quick-card:nth-child(2) {
    border-top-color: var(--ek1-accent-amber) !important;
}

.app-view-shell .ek1-dashboard-schedule-card {
    background: linear-gradient(145deg, #f3faf5, var(--ek1-accent-green-soft)) !important;
    border-color: #d7eadf !important;
    box-shadow: inset 0 1px 0 var(--ek1-accent-green), 0 10px 24px rgba(52, 113, 77, 0.07) !important;
}

.app-view-shell .ek1-dashboard-schedule-card button {
    border-color: rgba(94, 154, 128, 0.26) !important;
}

.app-view-shell .ek1-dashboard .ek1-dashboard-action-grid a.ek1-dashboard-action-card {
    border-top: 2px solid var(--ek1-primary) !important;
}

.app-view-shell .ek1-dashboard .ek1-dashboard-action-grid .ek1-dashboard-action-card:nth-child(2) {
    border-top-color: var(--ek1-accent-green) !important;
}

.app-view-shell .ek1-dashboard .ek1-dashboard-action-grid .ek1-dashboard-action-card:nth-child(3) {
    border-top-color: var(--ek1-accent-amber) !important;
}

.app-view-shell .ek1-dashboard .ek1-dashboard-action-grid .ek1-dashboard-action-card:nth-child(4) {
    border-top-color: #bd739a !important;
}

.app-view-shell .ek1-dashboard .ek1-dashboard-action-grid .ek1-dashboard-action-card:nth-child(5) {
    border-top-color: var(--ek1-accent-violet) !important;
}

.app-view-shell .ek1-dashboard .ek1-dashboard-action-grid .ek1-dashboard-action-card:nth-child(6) {
    border-top-color: var(--ek1-accent-teal) !important;
}

.app-view-shell .ek1-dashboard .ek1-dashboard-action-grid .ek1-dashboard-action-card:nth-child(1) .ek1-dashboard-card-icon {
    background: #e7f2fc !important;
    color: var(--ek1-primary) !important;
}

.app-view-shell .ek1-dashboard .ek1-dashboard-action-grid .ek1-dashboard-action-card:nth-child(2) .ek1-dashboard-card-icon {
    background: #e9f5ec !important;
    color: var(--ek1-accent-green) !important;
}

.app-view-shell .ek1-dashboard .ek1-dashboard-action-grid .ek1-dashboard-action-card:nth-child(3) .ek1-dashboard-card-icon {
    background: #fff0e5 !important;
    color: var(--ek1-accent-amber) !important;
}

.app-view-shell .ek1-dashboard .ek1-dashboard-action-grid .ek1-dashboard-action-card:nth-child(4) .ek1-dashboard-card-icon {
    background: #f7eaf0 !important;
    color: #ad638d !important;
}

.app-view-shell .ek1-dashboard .ek1-dashboard-action-grid .ek1-dashboard-action-card:nth-child(5) .ek1-dashboard-card-icon {
    background: #efecfa !important;
    color: var(--ek1-accent-violet) !important;
}

.app-view-shell .ek1-dashboard .ek1-dashboard-action-grid .ek1-dashboard-action-card:nth-child(6) .ek1-dashboard-card-icon {
    background: #e7f2f5 !important;
    color: var(--ek1-accent-teal) !important;
}

.app-view-shell .ek1-dashboard-primary:nth-child(2) {
    border-color: #d9e4eb !important;
    background: linear-gradient(145deg, #f0f5f8, #fbfdfe) !important;
    color: #405f73 !important;
}

.app-view-shell .ek1-dashboard-primary [class*="bg-white/"] {
    background: rgba(255, 255, 255, 0.82) !important;
}

.app-view-shell .ek1-dashboard-primary [class*="text-white/"] {
    color: #718596 !important;
}

.ek1-dashboard-secondary {
    min-height: 112px;
}

.calendar-grid,
.calendar-day-box {
    border-color: var(--ek1-line) !important;
}

.calendar-grid {
    background: var(--ek1-line) !important;
}

.app-view-shell[data-view="calendar"] > div > div[class*="bg-[#F4F4F5]"] {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: var(--ek1-line) !important;
    box-shadow: var(--ek1-shadow) !important;
}

/* The fixed weekday row is deliberately quieter than the task cards below it. */
.app-view-shell[data-view="calendar"] .calendar-weekday-header {
    background: #f4f8f7 !important;
    border-color: #d7e4e2 !important;
    box-shadow: inset 0 1px 0 #dcece2 !important;
}

.app-view-shell[data-view="calendar"] .calendar-weekday-header > div {
    background: transparent !important;
    border-color: #d7e4e2 !important;
    color: #526f75 !important;
}

/* Report sections 6 and 7 keep their own identity colours. */
.app-view-shell[data-view="form"] section:has(+ #report-section-signature) {
    box-shadow: inset 0 2px 0 #74599e, var(--ek1-shadow) !important;
}

.app-view-shell[data-view="form"] #report-section-signature {
    box-shadow: inset 0 2px 0 #397aa7, var(--ek1-shadow) !important;
}

/* Receipt creation and the global return action share the accounting header tone. */
.app-view-shell[data-view="accounting-history"] button[class*="min-h-14"][class*="bg-[#2F80C7]"] {
    background: linear-gradient(135deg, var(--ek1-accounting-bar-start), var(--ek1-accounting-bar-end)) !important;
    border-color: var(--ek1-accounting-bar-start) !important;
    box-shadow: 0 10px 24px rgba(31, 55, 77, 0.18) !important;
}

.app-header .ml-auto > button:last-child {
    background: linear-gradient(135deg, var(--ek1-accounting-bar-start), var(--ek1-accounting-bar-end)) !important;
    border-color: var(--ek1-accounting-bar-start) !important;
    box-shadow: 0 8px 18px rgba(31, 55, 77, 0.18) !important;
}

::-webkit-scrollbar-thumb {
    background: #b8c8d4 !important;
}

@media (min-width: 1024px) {
    .app-view-shell {
        max-width: 1800px !important;
        padding-left: 36px !important;
        padding-right: 36px !important;
    }

    .app-view-shell[data-view="form"] {
        max-width: 1480px !important;
    }

    .app-view-shell[data-view="company"],
    .app-view-shell[data-view="chemicals"],
    .app-view-shell[data-view="stamp-settings"],
    .app-view-shell[data-view="person-signature-settings"],
    .app-view-shell[data-view="customer-edit"],
    .app-view-shell[data-view="document-create"] {
        max-width: 1360px !important;
    }

    .app-view-shell[data-view="documents"],
    .app-view-shell[data-view="document-history"] {
        max-width: 1500px !important;
    }

    .app-view-shell > div[class*="max-w-"]:not(.ek1-dashboard),
    .app-view-shell > section[class*="max-w-"]:not(.ek1-dashboard) {
        max-width: none !important;
    }

    .ek1-dashboard-primary {
        min-height: 150px !important;
        padding: 24px !important;
    }

    .ek1-dashboard-secondary {
        min-height: 128px;
        padding: 18px !important;
    }
}

@media (min-width: 1280px) {
    .ek1-dashboard {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .ek1-dashboard-header {
        padding: 26px !important;
    }

    .ek1-dashboard-title {
        font-size: 28px !important;
    }

    .ek1-dashboard-meta {
        font-size: 12px !important;
    }

    .ek1-dashboard-section-title {
        font-size: 19px !important;
    }

    .ek1-dashboard-quick-grid {
        gap: 18px !important;
    }

    .ek1-dashboard-action-grid {
        gap: 16px !important;
    }

    .ek1-dashboard-quick-card,
    .ek1-dashboard-schedule-card {
        min-height: 138px !important;
        padding: 22px !important;
    }

    .ek1-dashboard-action-card {
        min-height: 104px !important;
        padding: 18px !important;
    }

    .ek1-dashboard-card-icon {
        width: 52px !important;
        height: 52px !important;
        border-radius: 16px !important;
        font-size: 18px !important;
    }

    .ek1-dashboard-card-title {
        font-size: 16px !important;
    }

    .ek1-dashboard-card-description {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }
}

@media (max-width: 639px) {
    .app-sidebar-panel {
        margin: 0;
        width: min(304px, 92vw) !important;
        height: 100dvh;
        border-radius: 0 24px 24px 0;
        border-left: 0;
    }

    .app-header > div:last-child {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .app-header h1 {
        font-size: 14px !important;
    }

    .app-view-shell {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .ek1-dashboard-secondary {
        min-height: 104px;
    }
}