:root {
    --ek1-bg: #f3f7fa;
    --ek1-surface: #ffffff;
    --ek1-surface-soft: #f7fafc;
    --ek1-primary: #2f80c7;
    --ek1-primary-dark: #245f94;
    --ek1-primary-soft: #eaf4ff;
    --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.10), transparent 28%),
        radial-gradient(circle at 92% 10%, rgba(92, 177, 153, 0.09), transparent 30%),
        linear-gradient(180deg, #f8fbfd 0%, var(--ek1-bg) 55%, #eef4f7 100%) !important;
}

.app-header {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid var(--ek1-line) !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);
}

.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"] {
    border-color: var(--ek1-line) !important;
    box-shadow: 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;
    box-shadow: 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;
}

.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;
}

::-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;
    }
}