:root {
    --ta-primary: #424968;
    --ta-primary-hover: #424968;
    --ta-primary-soft: #ebe9f4;
    --ta-sis-navy: #172554;
    --ta-sis-sky: #0ea5e9;
    --ta-sis-green: #9272dd;
    --ta-sis-amber: #f59e0b;
    --ta-canvas: #f9fafb;
    --ta-surface: #ffffff;
    --ta-border: #e4e7ec;
    --ta-border-strong: #d0d5dd;
    --ta-text: #101828;
    --ta-muted: #667085;
    --ta-radius: 0.875rem;
    --ta-radius-small: 0.625rem;
    --ta-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    --ta-shadow-raised: 0 12px 30px rgba(16, 24, 40, 0.10);
    --app-canvas: var(--ta-canvas);
    --surface-border: var(--ta-border);
    --surface-shadow: var(--ta-shadow);
    --surface-shadow-hover: 0 8px 22px rgba(16, 24, 40, 0.08);
}

html,
body,
#root,
.sinergi-app-viewport,
.sinergi-app-scale-frame,
.sinergi-shell,
.sinergi-content {
    background: var(--ta-canvas);
    color: var(--ta-text);
}

body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    text-rendering: optimizeLegibility;
}

*:focus-visible {
    outline: 3px solid rgba(70, 95, 255, 0.22);
    outline-offset: 2px;
}

.sinergi-sidebar {
    width: 17.5rem;
    background: var(--ta-surface);
    border-right: 1px solid var(--ta-border);
    box-shadow: none;
}

.sinergi-sidebar > button:first-child {
    min-height: 4.5rem;
    padding: 0.875rem 1.25rem;
    border-bottom-color: var(--ta-border);
}

.sinergi-sidebar-mark {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    border-color: #d9defd;
    background: linear-gradient(145deg, #f4f6ff 0%, #ffffff 100%);
    box-shadow: 0 4px 12px rgba(70, 95, 255, 0.10);
}

.sinergi-sidebar-scroll {
    padding: 1.25rem 0.875rem;
}

.sinergi-sidebar-scroll > div > div:first-child {
    padding-inline: 0.75rem;
    color: #98a2b3;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.sinergi-nav-item {
    min-height: 2.75rem;
    border: 1px solid transparent;
    border-radius: 0.625rem;
    color: #475467;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.sinergi-nav-item:hover {
    border-color: #eaecf0;
    background: #f9fafb;
    color: var(--ta-text);
}

.sinergi-nav-item.is-active {
    border-color: #d9defd;
    background: linear-gradient(90deg, #eef2ff 0%, #f6f8ff 100%);
    color: var(--ta-primary);
    box-shadow: none;
}

.sinergi-nav-item.is-active svg {
    filter: drop-shadow(0 2px 4px rgba(70, 95, 255, 0.18));
}

.sinergi-sidebar > div:last-child {
    border-top-color: var(--ta-border);
    background: #ffffff;
}

.sinergi-sidebar > div:last-child > button:first-child {
    border: 1px solid #eaecf0;
    border-radius: 0.75rem;
    background: #f9fafb;
}

.sinergi-sidebar > div:last-child > button:first-child:hover {
    border-color: #d9defd;
    background: #f4f6ff;
}

.sinergi-topbar {
    min-height: 4.5rem;
    padding-inline: 1.5rem;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--ta-border);
    box-shadow: none;
    backdrop-filter: blur(16px);
}

.sinergi-topbar label:has(input[placeholder*="Cari modul"]) {
    height: 2.625rem;
    border: 1px solid var(--ta-border);
    border-radius: 0.625rem;
    background: #ffffff;
    box-shadow: var(--ta-shadow);
}

.sinergi-topbar label:has(input[placeholder*="Cari modul"]):focus-within {
    border-color: #9ba9ff;
    box-shadow: 0 0 0 3px rgba(70, 95, 255, 0.12);
}

.sinergi-topbar button,
.sinergi-topbar select {
    border-color: var(--ta-border);
}

.sinergi-content {
    padding-top: 1.5rem;
}

[data-module-frame] {
    color: var(--ta-text);
}

:where([data-module-frame]) :where(h1, h2, h3, h4) {
    letter-spacing: -0.025em;
}

:where([data-module-frame]) :where(h1, h2) {
    line-height: 1.25;
}

:where([data-module-frame]) :where(p, label, .text-slate-400, .text-gray-400) {
    text-wrap: pretty;
}

.sinergi-surface,
.kawal-surface,
:where([data-module-frame]) :where(article, section)[class~="bg-white"][class*="border"],
:where([data-module-frame]) div[class~="bg-white"][class*="border"][class*="rounded-"] {
    border-color: var(--ta-border);
    border-radius: var(--ta-radius);
    background: var(--ta-surface);
    box-shadow: var(--ta-shadow);
}

:where([data-module-frame]) :where(article, section)[class~="bg-white"][class*="border"]:hover,
:where([data-module-frame]) div[class~="bg-white"][class*="border"][class*="rounded-"]:hover {
    border-color: #d6dbeb;
}

[data-module-frame] .shadow,
[data-module-frame] .shadow-sm {
    box-shadow: var(--ta-shadow);
}

[data-module-frame] .shadow-md,
[data-module-frame] .shadow-lg,
[data-module-frame] .shadow-xl,
[data-module-frame] .shadow-2xl,
.sinergi-shell [role="dialog"] {
    box-shadow: var(--ta-shadow-raised);
}

[data-module-frame] input:not([type="checkbox"]):not([type="radio"]),
[data-module-frame] select,
[data-module-frame] textarea,
.academic-period-select {
    min-height: 2.625rem;
    border: 1px solid var(--ta-border-strong);
    border-radius: var(--ta-radius-small);
    background-color: #ffffff;
    color: #344054;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

[data-module-frame] textarea {
    min-height: 6.5rem;
}

[data-module-frame] input:not([type="checkbox"]):not([type="radio"]):hover,
[data-module-frame] select:hover,
[data-module-frame] textarea:hover,
.academic-period-select:hover {
    border-color: #98a2b3;
}

[data-module-frame] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-module-frame] select:focus,
[data-module-frame] textarea:focus,
.academic-period-select:focus {
    border-color: #9ba9ff !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(70, 95, 255, 0.12) !important;
}

[data-module-frame] input::placeholder,
[data-module-frame] textarea::placeholder {
    color: #98a2b3;
}

[data-module-frame] button,
[data-module-frame] a[role="button"] {
    min-height: 2.5rem;
    border-radius: var(--ta-radius-small);
    font-weight: 700;
}

[data-module-frame] button[class*="bg-emerald-"],
[data-module-frame] button[class*="bg-green-"],
[data-module-frame] a[class*="bg-emerald-"],
[data-module-frame] a[class*="bg-green-"] {
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.18);
}

[data-module-frame] button:disabled,
[data-module-frame] a[aria-disabled="true"] {
    box-shadow: none;
    filter: saturate(0.7);
}

[data-module-frame] [class*="rounded-full"][class*="text-"][class*="bg-"] {
    font-weight: 700;
}

[data-module-frame] div:has(> table),
[data-module-frame] [role="region"]:has(> table) {
    max-width: 100%;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius);
    background: #ffffff;
    box-shadow: var(--ta-shadow);
}

.sinergi-shell table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto !important;
    background: #ffffff;
    color: #344054;
}

.sinergi-shell thead,
.sinergi-shell thead th {
    background: #f9fafb !important;
}

.sinergi-shell thead th {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: #475467 !important;
    border-bottom: 1px solid var(--ta-border) !important;
    font-size: 0.6875rem;
    font-weight: 700 !important;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.sinergi-shell tbody td {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid #eaecf0 !important;
    color: #475467;
}

.sinergi-shell tbody tr:last-child td {
    border-bottom: 0 !important;
}

.sinergi-shell tbody tr:hover {
    background: #f8f9ff !important;
    box-shadow: inset 3px 0 0 var(--ta-primary);
}

[data-monthly-report-workspace="true"] table td input:not([type="checkbox"]):not([type="radio"]),
[data-monthly-report-workspace="true"] table td select,
[data-monthly-report-workspace="true"] table td textarea {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
}

[data-monthly-report-workspace="true"] table td textarea {
    overflow-y: hidden !important;
    resize: none;
}

.sinergi-shell [role="dialog"] {
    border: 1px solid var(--ta-border);
    border-radius: 1rem;
    background: #ffffff;
}

.sinergi-shell [role="dialog"] > section,
.sinergi-shell [role="dialog"] > div[class*="bg-white"] {
    border-color: var(--ta-border);
    border-radius: 1rem;
}

.sinergi-shell [role="tablist"] {
    border: 1px solid var(--ta-border);
    border-radius: 0.75rem;
    background: #f9fafb;
    padding: 0.25rem;
}

.sinergi-shell [role="tab"] {
    min-height: 2.25rem;
    border-radius: 0.5rem;
}

.sinergi-shell [role="tab"][aria-selected="true"] {
    background: #ffffff;
    color: var(--ta-primary);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.10);
}

.sinergi-shell nav[aria-label*="pagination" i],
.sinergi-shell [class*="pagination"] {
    gap: 0.375rem;
}

.sinergi-shell nav[aria-label*="pagination" i] button,
.sinergi-shell [class*="pagination"] button {
    min-width: 2.25rem;
    min-height: 2.25rem;
    border: 1px solid var(--ta-border);
    border-radius: 0.5rem;
    background: #ffffff;
}

.sinergi-shell .bg-slate-50,
.sinergi-shell .bg-gray-50 {
    background-color: #f9fafb;
}

.sinergi-shell .bg-slate-100,
.sinergi-shell .bg-gray-100 {
    background-color: #f2f4f7;
}

.sinergi-shell .border-slate-100,
.sinergi-shell .border-slate-200,
.sinergi-shell .border-gray-100,
.sinergi-shell .border-gray-200 {
    border-color: var(--ta-border);
}

.sinergi-shell .text-slate-900,
.sinergi-shell .text-gray-900 {
    color: var(--ta-text);
}

.sinergi-shell .text-slate-500,
.sinergi-shell .text-gray-500,
.sinergi-shell .text-slate-600,
.sinergi-shell .text-gray-600 {
    color: var(--ta-muted);
}

.sinergi-mobile-header {
    min-height: 4rem;
    border-bottom-color: var(--ta-border);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.sinergi-mobile-drawer {
    border-right: 1px solid var(--ta-border);
    background: #ffffff;
    box-shadow: 18px 0 45px rgba(16, 24, 40, 0.14);
}

.sinergi-mobile-nav {
    border-top-color: var(--ta-border);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -4px 18px rgba(16, 24, 40, 0.08);
}

.sinergi-login-card {
    border: 1px solid var(--ta-border);
    border-radius: 1rem;
    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.12);
}

.sinergi-login-aside {
    background: linear-gradient(145deg, #172554 0%, #3730a3 46%, #465fff 72%, #2e139b 132%);
}

.boot-splash-card {
    border-color: var(--ta-border);
    border-radius: 1rem;
    box-shadow: var(--ta-shadow-raised);
}

@media (min-width: 1024px) {
    .sinergi-app-scale-frame .sinergi-sidebar {
        width: 17.5rem;
    }

    .sinergi-app-scale-frame .sinergi-topbar {
        min-height: 4.5rem;
    }

    [data-module-frame] {
        max-width: 100% !important;
    }
}

@media (max-width: 1023px) {
    .sinergi-content {
        padding-inline: 0.875rem;
        padding-top: 0.875rem;
    }

    [data-module-frame] {
        width: 100%;
    }

    :where([data-module-frame]) :where(article, section)[class~="bg-white"][class*="border"],
    :where([data-module-frame]) div[class~="bg-white"][class*="border"][class*="rounded-"] {
        border-radius: 0.75rem;
    }

    [data-module-frame] button,
    [data-module-frame] a[role="button"] {
        min-height: 2.75rem;
    }

    [data-module-frame] div:has(> table),
    [data-module-frame] [role="region"]:has(> table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .sinergi-shell table {
        min-width: max-content;
    }

    .sinergi-shell table th,
    .sinergi-shell table td {
        min-width: 7.5rem;
    }

    [data-module-frame="kehadiran-pegawai"] .attendance-management-table {
        display: block;
        min-width: 0 !important;
    }

    [data-module-frame="kehadiran-pegawai"] .attendance-management-table thead {
        display: none;
    }

    [data-module-frame="kehadiran-pegawai"] .attendance-management-table tbody {
        display: grid;
        gap: 0.75rem;
        padding: 0.75rem;
    }

    [data-module-frame="kehadiran-pegawai"] .attendance-management-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid var(--ta-border);
        border-radius: 0.875rem;
        background: #ffffff;
    }

    [data-module-frame="kehadiran-pegawai"] .attendance-management-table td {
        position: static !important;
        left: auto !important;
        z-index: auto !important;
        display: block;
        min-width: 0 !important;
        border: 0;
        background: #ffffff !important;
        padding: 0.75rem;
    }

    [data-module-frame="kehadiran-pegawai"] .attendance-management-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.35rem;
        color: #98a2b3;
        font-size: 0.5625rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    [data-module-frame="kehadiran-pegawai"] .attendance-management-table td[data-label="Pegawai"],
    [data-module-frame="kehadiran-pegawai"] .attendance-management-table td[data-label="Rincian Izin"] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 639px) {
    [data-module-frame] h1,
    [data-module-frame] h2 {
        font-size: clamp(1.125rem, 5.5vw, 1.5rem) !important;
    }

    [data-module-frame] .grid {
        min-width: 0;
    }

    .academic-period-mobile-panel {
        border-color: var(--ta-border);
        border-radius: 0.75rem;
        box-shadow: var(--ta-shadow-raised);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}