@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../views/**/*.blade.php';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    /* Brand */
    --color-primary: #1E3A5F;
    --color-primary-hover: #274C77;
    --color-accent: #F97316;
    --color-accent-hover: #EA580C;

    /* Sidebar */
    --color-sidebar: #0c2649;
    --color-sidebar-deep: #081c3d;
    --color-sidebar-active: #FF7800;

    /* Surfaces */
    --color-background: #F4F7FB;
    --color-background-muted: #F7F9FC;
    --color-surface: #FFFFFF;
    --color-border: #E3E9F1;

    /* Text */
    --color-text-primary: #1F2937;
    --color-text-secondary: #6B7280;

    /* Semantic */
    --color-success: #22C55E;
    --color-warning: #FBBF24;
    --color-danger: #EF4444;
    --color-info: #3B82F6;

    /* Soft backgrounds for badges/alerts */
    --color-success-soft: #F0FDF4;
    --color-warning-soft: #FFFBEB;
    --color-danger-soft: #FEF2F2;
    --color-info-soft: #EFF6FF;
    --color-primary-soft: #EEF3F9;
}

@layer base {
    body {
        @apply bg-background text-text-primary antialiased;
    }
}

@layer components {
    .siaga-input {
        @apply w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary/70 transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20;
    }

    .siaga-table-head {
        @apply bg-background text-text-secondary text-xs font-semibold uppercase tracking-wide;
    }

    .siaga-table-head th {
        @apply px-4 py-3 text-left;
    }

    .siaga-table-body {
        @apply divide-y divide-border;
    }

    .siaga-table-body td {
        @apply px-4 py-3;
    }

    .siaga-sidebar {
        background: linear-gradient(180deg, #12325f 0%, var(--color-sidebar) 48%, var(--color-sidebar-deep) 100%);
        @apply w-60 text-white border-r border-white/5;
    }

    .siaga-sidebar-header {
        @apply px-4 py-4 border-b border-white/8;
    }

    .siaga-sidebar-link {
        @apply mx-2.5 flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-[13px] font-medium text-white/72 transition-all duration-200;
    }

    .siaga-sidebar-link:hover:not(.siaga-sidebar-link--active) {
        @apply bg-white/8 text-white/92;
    }

    .siaga-sidebar-link--active {
        @apply bg-sidebar-active text-white shadow-[0_1px_6px_rgba(255,120,0,0.22)];
    }

    .siaga-sidebar-link--disabled {
        @apply cursor-not-allowed text-white/28 pointer-events-none;
    }

    .siaga-sidebar-link--disabled:hover {
        @apply bg-transparent text-white/28;
    }

    .siaga-sidebar-link__badge {
        @apply shrink-0 rounded px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-white/40 bg-white/8;
    }

    .siaga-sidebar-link__icon {
        @apply h-[18px] w-[18px] shrink-0 opacity-80;
    }

    .siaga-sidebar-link--active .siaga-sidebar-link__icon {
        @apply opacity-100;
    }

    .siaga-sidebar-group-label {
        @apply px-3 py-1 text-[10px] font-medium uppercase tracking-[0.14em] text-white/32 transition-colors duration-200;
    }

    .siaga-sidebar-group--active .siaga-sidebar-group-label {
        @apply text-white/55;
    }

    /* Collapsed sidebar (desktop only): icon-only rail */
    @media (min-width: 768px) {
        html.siaga-sidebar-collapsed .siaga-sidebar {
            @apply w-[4.25rem];
        }

        html.siaga-sidebar-collapsed .siaga-sidebar-brand-text,
        html.siaga-sidebar-collapsed .siaga-sidebar-link__label,
        html.siaga-sidebar-collapsed .siaga-sidebar-link__badge {
            @apply hidden;
        }

        html.siaga-sidebar-collapsed .siaga-sidebar-header {
            @apply px-0;
        }

        html.siaga-sidebar-collapsed .siaga-sidebar-header > div {
            @apply justify-center;
        }

        html.siaga-sidebar-collapsed .siaga-sidebar-link {
            @apply justify-center px-0;
        }

        html.siaga-sidebar-collapsed .siaga-sidebar-group-label {
            @apply mx-3 h-0 overflow-hidden border-t border-white/10 p-0;
            font-size: 0;
        }
    }

    .siaga-app-shell {
        @apply min-h-screen flex bg-gradient-to-br from-background-muted via-background to-sky-50/35;
    }

    .siaga-page-header {
        @apply bg-surface/90 backdrop-blur-sm border-b border-border/70 shadow-sm shadow-sidebar/[0.04];
    }

    .siaga-card {
        @apply bg-surface rounded-xl border border-border/80 shadow-sm shadow-sidebar/[0.03];
    }

    .siaga-card-hover {
        @apply transition-shadow hover:shadow-md hover:shadow-sidebar/[0.05];
    }

    .siaga-section-title {
        @apply text-xs font-semibold uppercase tracking-wider text-sidebar/55 mb-3;
    }

    /* Aksen cabang aktif (navbar/sidebar chrome) */
    .cabang-aksen-chip {
        @apply inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-sm;
    }

    .cabang-aksen-select {
        @apply rounded-lg border bg-white px-2.5 py-1.5 text-sm text-text-primary focus:outline-none focus:ring-2;
    }

    .cabang-aksen-dot {
        @apply inline-block h-2 w-2 shrink-0 rounded-full;
    }

    .siaga-searchable-select__input {
        @apply w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary/70 transition-colors focus:border-sidebar focus:outline-none focus:ring-2 focus:ring-sidebar/15;
    }

    .siaga-searchable-select {
        @apply relative overflow-visible;
    }

    .siaga-searchable-select__list {
        @apply absolute z-50 mt-1 max-h-56 w-full overflow-y-auto rounded-lg border border-border bg-surface py-1 shadow-lg shadow-sidebar/10;
    }

    .siaga-searchable-select__option {
        @apply cursor-pointer px-3 py-2 text-sm text-text-primary transition-colors hover:bg-primary-soft;
    }

    .siaga-searchable-select__option.is-active {
        @apply bg-primary-soft text-sidebar;
    }

    .siaga-searchable-select__empty {
        @apply absolute z-50 mt-1 w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-text-secondary shadow-lg shadow-sidebar/10;
    }

    .siaga-table-scroll {
        @apply overflow-x-auto overscroll-x-contain;
        -webkit-overflow-scrolling: touch;
    }

    .siaga-table-scroll table {
        @apply min-w-full text-sm;
    }

    .siaga-table-scroll thead th {
        @apply whitespace-nowrap;
    }

    .siaga-table-actions {
        @apply whitespace-nowrap text-right;
    }

    .login-page {
        @apply relative flex min-h-screen min-h-dvh flex-col;
    }

    .login-page__bg {
        @apply fixed inset-0 -z-20 bg-cover bg-center bg-no-repeat;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .login-page__overlay {
        @apply fixed inset-0 -z-10 bg-gradient-to-br from-white/30 via-white/15 to-sky-100/25;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .login-card {
        @apply w-full max-w-3xl bg-surface rounded-2xl shadow-2xl overflow-hidden border border-white/60;
    }

    .login-input {
        @apply w-full rounded-xl border border-border bg-surface py-2.5 text-sm text-text-primary placeholder:text-text-secondary/60 transition-colors focus:border-sidebar focus:outline-none focus:ring-2 focus:ring-sidebar/15;
    }

    .login-btn-primary {
        @apply w-full rounded-xl bg-sidebar py-2.5 text-sm font-semibold text-white transition-colors hover:bg-[#002a5c] focus:outline-none focus:ring-2 focus:ring-sidebar/30;
    }

    .login-btn-secondary {
        @apply w-full rounded-xl border border-sidebar bg-surface py-2.5 text-sm font-semibold text-sidebar transition-colors hover:bg-primary-soft focus:outline-none focus:ring-2 focus:ring-sidebar/20;
    }

    .siaga-dpb-detail-table .siaga-searchable-select__input {
        @apply py-1.5 text-sm;
    }

    .siaga-konfirmasi-harga {
        @apply space-y-0;
    }

    .siaga-konfirmasi-harga--fill {
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - 7.5rem);
    }

    .siaga-konfirmasi-harga--fill .siaga-konfirmasi-harga__table-wrap {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .siaga-konfirmasi-harga--fill .siaga-konfirmasi-harga__table-wrap > .siaga-card {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1;
        margin-bottom: 0.75rem;
    }

    .siaga-konfirmasi-harga .siaga-table-scroll {
        max-height: calc(100dvh - 6rem);
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .siaga-konfirmasi-harga--fill .siaga-table-scroll {
        flex: 1;
        min-height: 36rem;
        height: calc(100dvh - 8rem);
        max-height: calc(100dvh - 8rem);
    }

    .siaga-konfirmasi-harga .siaga-table-scroll table {
        border-collapse: separate;
        border-spacing: 0;
    }

    .siaga-konfirmasi-harga .siaga-table-scroll thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        @apply bg-background;
        box-shadow: 0 1px 0 var(--color-border);
    }

    .siaga-konfirmasi-harga .siaga-table-scroll thead .siaga-konfirmasi-col--otc {
        @apply bg-amber-100 text-amber-900;
    }

    .siaga-konfirmasi-harga .siaga-table-scroll thead .siaga-konfirmasi-col--reg {
        @apply bg-sky-100 text-sky-900;
    }

    .siaga-konfirmasi-harga .siaga-table-scroll thead .siaga-konfirmasi-col--vip {
        @apply bg-violet-100 text-violet-900;
    }

    /* Sticky identity columns (checkbox + kode + nama) when scrolling horizontally */
    .siaga-konfirmasi-harga .siaga-konfirmasi-sticky-col {
        position: sticky;
        background-color: var(--color-surface);
        z-index: 1;
    }

    .siaga-konfirmasi-harga thead th.siaga-konfirmasi-sticky-col {
        position: sticky;
        top: 0;
        z-index: 5;
        background-color: var(--color-background);
    }

    .siaga-konfirmasi-harga .siaga-konfirmasi-sticky-col--check {
        left: 0;
        min-width: 2.5rem;
        width: 2.5rem;
        box-shadow: 1px 0 0 var(--color-border);
    }

    .siaga-konfirmasi-harga .siaga-konfirmasi-sticky-col--kode {
        left: 2.5rem;
        min-width: 5.5rem;
        box-shadow: 1px 0 0 var(--color-border);
    }

    .siaga-konfirmasi-harga .siaga-konfirmasi-sticky-col--nama {
        left: 8rem;
        min-width: 10rem;
        max-width: 12rem;
        box-shadow: 4px 0 8px -2px rgba(12, 38, 73, 0.08);
    }

    .siaga-konfirmasi-harga thead th.siaga-konfirmasi-sticky-col--check,
    .siaga-konfirmasi-harga thead th.siaga-konfirmasi-sticky-col--kode,
    .siaga-konfirmasi-harga thead th.siaga-konfirmasi-sticky-col--nama {
        background-color: var(--color-background);
    }

    .siaga-konfirmasi-harga .siaga-konfirmasi-row--active .siaga-konfirmasi-sticky-col {
        background-color: color-mix(in srgb, var(--color-info-soft) 40%, var(--color-surface));
    }

    .siaga-table-scroll--drag-scroll {
        cursor: grab;
    }

    .siaga-table-scroll--drag-scroll.is-dragging {
        cursor: grabbing;
        user-select: none;
    }

    .siaga-table-scroll--drag-scroll.is-dragging * {
        cursor: grabbing;
    }

    .siaga-konfirmasi-badge {
        @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
    }

    .siaga-konfirmasi-badge--active {
        @apply bg-success-soft text-emerald-700 ring-1 ring-emerald-200;
    }

    .siaga-konfirmasi-context {
        @apply border-border/80;
    }

    .siaga-konfirmasi-metric {
        @apply rounded-lg border border-border/70 bg-background-muted/50 px-3 py-2.5;
    }

    .siaga-konfirmasi-metric--accent {
        @apply border-amber-200/80 bg-amber-50/70;
    }

    .siaga-konfirmasi-metric__label {
        @apply text-[11px] font-medium uppercase tracking-wide text-text-secondary;
    }

    .siaga-konfirmasi-metric__value {
        @apply mt-0.5 text-sm font-semibold text-text-primary;
    }

    .siaga-konfirmasi-dot {
        @apply inline-block h-2 w-2 rounded-full;
    }

    .siaga-konfirmasi-dot--otc {
        @apply bg-accent;
    }

    .siaga-konfirmasi-dot--reg {
        @apply bg-info;
    }

    .siaga-konfirmasi-dot--vip {
        @apply bg-violet-500;
    }

    .siaga-konfirmasi-filter-pill {
        @apply inline-flex items-center rounded-full px-2.5 py-1 font-medium;
    }

    .siaga-konfirmasi-filter-pill--info {
        @apply bg-info-soft text-info;
    }

    .siaga-konfirmasi-filter-pill--warning {
        @apply bg-warning-soft text-amber-700;
    }

    .siaga-konfirmasi-filter-pill--danger {
        @apply bg-danger-soft text-danger;
    }

    .siaga-konfirmasi-row--active {
        @apply bg-info-soft/40;
    }

    .siaga-konfirmasi-row--active .siaga-konfirmasi-col--otc {
        @apply bg-amber-100/55;
    }

    .siaga-konfirmasi-row--active .siaga-konfirmasi-col--reg {
        @apply bg-sky-100/55;
    }

    .siaga-konfirmasi-row--active .siaga-konfirmasi-col--vip {
        @apply bg-violet-100/55;
    }

    .siaga-konfirmasi-col--otc {
        @apply bg-amber-50/45;
    }

    .siaga-konfirmasi-col--otc-start {
        @apply border-l-2 border-l-amber-300/70;
    }

    .siaga-konfirmasi-col--reg {
        @apply bg-sky-50/45;
    }

    .siaga-konfirmasi-col--reg-start {
        @apply border-l-2 border-l-sky-300/70;
    }

    .siaga-konfirmasi-col--vip {
        @apply bg-violet-50/45;
    }

    .siaga-konfirmasi-col--vip-start {
        @apply border-l-2 border-l-violet-300/70;
    }

    thead .siaga-konfirmasi-col--otc {
        @apply bg-amber-100/80 text-amber-900 font-semibold;
    }

    thead .siaga-konfirmasi-col--reg {
        @apply bg-sky-100/80 text-sky-900 font-semibold;
    }

    thead .siaga-konfirmasi-col--vip {
        @apply bg-violet-100/80 text-violet-900 font-semibold;
    }

    .siaga-konfirmasi-input-cell {
        @apply w-full min-w-[5.5rem] rounded-lg border bg-surface px-2 py-1.5 text-right text-sm text-text-primary transition-colors focus:outline-none focus:ring-2;
    }

    .siaga-konfirmasi-input-cell--otc {
        @apply border-amber-200/90 focus:border-amber-400 focus:ring-amber-400/25;
    }

    .siaga-konfirmasi-input-cell--reg {
        @apply border-sky-200/90 focus:border-sky-400 focus:ring-sky-400/25;
    }

    .siaga-konfirmasi-input-cell--vip {
        @apply border-violet-200/90 focus:border-violet-400 focus:ring-violet-400/25;
    }

    .siaga-konfirmasi-input-cell--warning {
        @apply border-amber-400 bg-amber-50/60 focus:border-amber-500 focus:ring-amber-500/20;
    }

    .siaga-konfirmasi-dirty-dot {
        @apply absolute -left-1 top-1/2 h-1.5 w-1.5 -translate-y-1/2 rounded-full bg-info;
    }

    .siaga-konfirmasi-margin {
        @apply inline-flex min-w-[4.5rem] justify-center rounded-md px-2 py-1 text-xs font-semibold whitespace-nowrap;
    }

    .siaga-konfirmasi-margin--otc {
        @apply border border-amber-200 bg-amber-50 text-amber-800;
    }

    .siaga-konfirmasi-margin--reg {
        @apply border border-sky-200 bg-sky-50 text-sky-800;
    }

    .siaga-konfirmasi-margin--vip {
        @apply border border-violet-200 bg-violet-50 text-violet-800;
    }

    .siaga-konfirmasi-margin--danger {
        @apply border-red-200 bg-red-50 text-red-700;
    }

    .siaga-konfirmasi-status {
        @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap;
    }

    .siaga-konfirmasi-status--siap {
        @apply bg-success-soft text-emerald-700;
    }

    .siaga-konfirmasi-status--perlu_cek {
        @apply bg-warning-soft text-amber-700;
    }

    .siaga-konfirmasi-status--margin_rendah {
        @apply bg-danger-soft text-red-700;
    }

    .siaga-konfirmasi-footer {
        @apply fixed inset-x-0 bottom-0 z-30 border-t border-border/80 bg-surface/95 backdrop-blur-sm shadow-[0_-4px_20px_rgba(12,38,73,0.08)];
    }

    .siaga-konfirmasi-footer__inner {
        @apply mx-auto flex max-w-[100rem] flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between md:px-6 lg:px-7;
    }
}

/* Cetak faktur/kwitansi: sembunyikan chrome aplikasi */
@media print {
    .siaga-sidebar,
    #sidebar-backdrop,
    #app-sidebar,
    .siaga-page-header,
    .siaga-print-hide {
        display: none !important;
    }

    .siaga-app-shell {
        display: block !important;
        min-height: 0 !important;
        background: #fff !important;
    }

    .siaga-app-shell > .flex-1 {
        display: block !important;
    }

    main {
        padding: 0 !important;
        margin: 0 !important;
    }

    body {
        background: #fff !important;
    }

    .siaga-print-document {
        max-width: none !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }
}