@import 'tailwindcss';

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

/*
 * Geist Sans/Mono di-self-host lewat paket npm resmi `geist` (bukan CDN) — variable font satu file
 * per family sudah mencakup seluruh rentang weight, jadi cukup satu @font-face per family.
 */
@font-face {
    font-family: 'Geist Sans';
    src: url('../../node_modules/geist/dist/fonts/geist-sans/Geist-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('../../node_modules/geist/dist/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}

@theme {
    --font-sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /*
     * Shadow-as-border (lihat DESIGN.md Vercel): ring 1px + soft ambient shadow menggantikan
     * `border border-slate-200`. Didefinisikan sebagai token --shadow-* supaya Tailwind v4
     * otomatis membuat utility `shadow-border`/`shadow-border-lg` yang tetap kompos dengan
     * `ring-*`/`focus:ring-*` (keduanya sama-sama lewat variabel CSS box-shadow bawaan Tailwind) —
     * beda dengan class box-shadow custom manual yang akan menimpa ring saat focus.
     */
    --shadow-border: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.04);
    --shadow-border-lg: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* liga: ligature font Geist; tnum: kolom angka (NIM/NIP/kode) rata lebar demi perbandingan visual. */
body {
    font-feature-settings: 'liga' 1;
}

/*
 * Override Tom Select (resources/views/components/searchable-select.blade.php) supaya menyatu dengan
 * gaya input Tailwind yang sudah ada di panel admin (rounded-lg, border-slate-300, focus:ring-indigo-500).
 * Sengaja tidak import CSS bawaan Tom Select (tom-select/dist/css/*.css) karena akan bentrok dengan reset
 * Tailwind v4 — override ini menargetkan struktur class stabil Tom Select secara langsung.
 */
/* Karena CSS bawaan Tom Select tidak di-import, kelas ini (yang biasanya menyembunyikan <select>
   asli secara visual tapi tetap accessible) perlu ditulis manual — tanpa ini select aslinya
   tetap tampil sebagai <select> native di bawah widget Tom Select. */
.ts-hidden-accessible {
    position: absolute !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    width: 1px !important;
    white-space: nowrap !important;
}

.ts-wrapper {
    position: relative; /* containing block untuk .ts-dropdown di bawah */
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.ts-wrapper .ts-control {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    width: 100%;
    min-height: 2.625rem;
    padding: 0.375rem 0.75rem;
    background-color: #fff;
    border: none;
    border-radius: 0.5rem;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 2px 2px rgba(0, 0, 0, 0.04);
    cursor: text;
}

.ts-wrapper.single .ts-control {
    min-height: 2.625rem;
}

.ts-wrapper.focus .ts-control {
    box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.15); /* neutral-900 */
}

.ts-wrapper.disabled .ts-control {
    background-color: #fafafa; /* neutral-50 */
    color: #a3a3a3; /* neutral-400 */
    cursor: not-allowed;
}

.ts-control input {
    color: #171717; /* neutral-900 */
    outline: none;
}

.ts-control input::placeholder {
    color: #a3a3a3; /* neutral-400 */
}

.ts-control .item {
    color: #171717; /* neutral-900 */
}

.ts-dropdown {
    position: absolute; /* tanpa ini dropdown ikut alur dokumen & mendorong konten di bawahnya turun */
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.25rem;
    background-color: #fff;
    border: none;
    border-radius: 0.5rem;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    z-index: 30;
}

.ts-dropdown .ts-dropdown-content {
    max-height: 15rem;
    overflow-y: auto;
}

.ts-dropdown [data-selectable],
.ts-dropdown .option {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #525252; /* neutral-600 */
    cursor: pointer;
}

.ts-dropdown [data-selectable].active,
.ts-dropdown .option.active {
    background-color: #f5f5f5; /* neutral-100 */
    color: #171717; /* neutral-900 */
}

.ts-dropdown .no-results,
.ts-dropdown .optgroup-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #a3a3a3; /* neutral-400 */
}
