/* ==========================================================================
   SihatSokmo Audiometri — sistem reka bentuk

   Ini alat kerja klinik, bukan laman pemasaran. Ia dibuka lapan jam sehari
   oleh juruteknik, doktor dan pegawai HR yang membaca nombor dan membuat
   keputusan perubatan. Reka bentuknya mengikut keutamaan itu:

     - Ketumpatan maklumat lebih penting daripada ruang putih hiasan
     - Nombor mesti mudah diimbas: fon tabular, penjajaran kanan
     - Warna membawa makna klinikal, bukan hiasan
     - Tiada animasi yang melambatkan kerja berulang

   Token di bawah adalah satu-satunya sumber warna, jarak dan tipografi.
   Jangan tulis nilai heksadesimal terus dalam templat.
   ========================================================================== */

:root {
    /* --- Neutral ---------------------------------------------------------
       Sedikit sejuk, bukan kelabu tepu. Teks pada kertas putih sepanjang
       hari lebih selesa dengan hitam yang dilembutkan. */
    --ink-900: #0d1117;
    --ink-800: #1a212b;
    --ink-700: #2c3644;
    --ink-600: #475467;
    --ink-500: #667085;
    --ink-400: #98a2b3;
    --ink-300: #d0d5dd;
    --ink-200: #e4e7ec;
    --ink-100: #f2f4f7;
    --ink-050: #f9fafb;
    --paper: #ffffff;

    /* --- Jenama ----------------------------------------------------------
       Teal perubatan. Digunakan untuk tindakan dan navigasi aktif sahaja,
       supaya ia kekal bermakna dan tidak menjadi hiasan. */
    --brand-700: #0f5f5c;
    --brand-600: #14807b;
    --brand-500: #17968f;
    --brand-100: #d5efed;
    --brand-050: #eef8f7;

    /* --- Warna klinikal --------------------------------------------------
       Terikat kepada makna dalam sistem, bukan kepada rasa:
         normal   keputusan dalam julat
         watch    STS dikesan, perlu ujian ulangan
         alert    kehilangan pendengaran disyaki, perlu rujukan
       Dipilih supaya masih dapat dibezakan pada penglihatan warna deutan. */
    --normal-600: #10796a;
    --normal-100: #d6f0e9;
    --watch-700: #96631a;
    --watch-600: #b8801f;
    --watch-100: #fdf0d5;
    --alert-700: #a52c2c;
    --alert-600: #c73b3b;
    --alert-100: #fbe0e0;
    --info-600: #2563a8;
    --info-100: #dbeafe;

    /* --- Tipografi -------------------------------------------------------
       Fon sistem: tiada muat turun, tiada anjakan susun atur, dan ia sudah
       kelihatan betul pada Windows di kaunter klinik. */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
        "Liberation Mono", monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;

    /* --- Jarak: skala 4px ------------------------------------------------ */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* --- Bayang ----------------------------------------------------------
       Halus. Bayang tebal pada setiap kad ialah tanda paling jelas antara
       muka yang direka tanpa tujuan. */
    --shadow-sm: 0 1px 2px rgba(13, 17, 23, 0.06);
    --shadow-md: 0 1px 3px rgba(13, 17, 23, 0.08), 0 4px 12px rgba(13, 17, 23, 0.04);
    --shadow-lg: 0 4px 6px rgba(13, 17, 23, 0.04), 0 12px 32px rgba(13, 17, 23, 0.08);

    --ring: 0 0 0 3px var(--brand-100);

    /* --- Pelonggaran ------------------------------------------------------
       Gerakan yang terasa mahal ialah gerakan yang bermula pantas dan
       mendarat perlahan, bukan yang laju sepanjang masa. `ease-back`
       melepasi sasaran sedikit sebelum kembali — digunakan HANYA untuk
       elemen yang muncul, tidak pernah untuk apa-apa yang pengguna
       sedang tunggu. */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   Reset
   Padding dan sempadan mesti dikira ke dalam lebar. Tanpa ini, medan
   `width:100%` dengan padding terkeluar daripada bekasnya.
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

/* ==========================================================================
   Asas
   ========================================================================== */
.ss-root {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--ink-800);
    -webkit-font-smoothing: antialiased;
}

/* Nombor mesti berbaris menegak dalam jadual keputusan supaya perbezaan
   magnitud kelihatan sekali pandang. */
.ss-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ==========================================================================
   Tipografi
   ========================================================================== */
.ss-title {
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink-900);
    margin: 0;
}

.ss-subtitle {
    font-size: var(--text-base);
    color: var(--ink-500);
    margin: var(--space-1) 0 0;
}

.ss-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--ink-700);
    margin-bottom: var(--space-2);
}

/* Label kecil di atas kumpulan medan. Huruf besar sepenuhnya hanya
   dibenarkan di sini, di mana teksnya satu atau dua patah perkataan. */
.ss-eyebrow {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-500);
}

.ss-help {
    font-size: var(--text-sm);
    color: var(--ink-500);
}

/* ==========================================================================
   Medan borang
   ========================================================================== */
.ss-field {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: var(--text-md);
    color: var(--ink-900);
    background: var(--paper);
    border: 1px solid var(--ink-300);
    border-radius: var(--radius-md);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.ss-field::placeholder {
    color: var(--ink-400);
}

.ss-field:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: var(--ring);
}

.ss-field:disabled {
    background: var(--ink-100);
    color: var(--ink-500);
    cursor: not-allowed;
}

.ss-field[aria-invalid="true"] {
    border-color: var(--alert-600);
}

/* Medan dengan butang di dalamnya (contoh: togol lihat kata laluan). */
.ss-field-group {
    position: relative;
    display: block;
}

.ss-field-group .ss-field {
    padding-right: 2.75rem;
}

.ss-field-affix {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--ink-500);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.ss-field-affix:hover {
    color: var(--ink-700);
    background: var(--ink-100);
}

.ss-field-affix:focus-visible {
    outline: none;
    color: var(--brand-600);
    box-shadow: var(--ring);
}

/* ==========================================================================
   Butang
   ========================================================================== */
.ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 550;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.ss-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.ss-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ss-btn-primary {
    color: var(--paper);
    background: var(--brand-600);
}

.ss-btn-primary:hover:not(:disabled) {
    background: var(--brand-700);
}

.ss-btn-secondary {
    color: var(--ink-700);
    background: var(--paper);
    border-color: var(--ink-300);
}

.ss-btn-secondary:hover:not(:disabled) {
    background: var(--ink-050);
    border-color: var(--ink-400);
}

.ss-btn-ghost {
    color: var(--ink-600);
    background: transparent;
}

.ss-btn-ghost:hover:not(:disabled) {
    color: var(--ink-900);
    background: var(--ink-100);
}

.ss-btn-danger {
    color: var(--paper);
    background: var(--alert-600);
}

.ss-btn-danger:hover:not(:disabled) {
    background: var(--alert-700);
}

.ss-btn-block {
    width: 100%;
}

/* ==========================================================================
   Permukaan
   ========================================================================== */
.ss-card {
    background: var(--paper);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.ss-card-pad {
    padding: var(--space-5);
}

.ss-divider {
    height: 1px;
    background: var(--ink-200);
    border: 0;
    margin: var(--space-5) 0;
}

/* ==========================================================================
   Mesej
   ========================================================================== */
.ss-note {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}

.ss-note-info {
    color: var(--info-600);
    background: var(--info-100);
    border-color: color-mix(in srgb, var(--info-600) 22%, transparent);
}

.ss-note-alert {
    color: var(--alert-700);
    background: var(--alert-100);
    border-color: color-mix(in srgb, var(--alert-600) 24%, transparent);
}

.ss-note-watch {
    color: var(--watch-700);
    background: var(--watch-100);
    border-color: color-mix(in srgb, var(--watch-600) 26%, transparent);
}

.ss-note-normal {
    color: var(--normal-600);
    background: var(--normal-100);
    border-color: color-mix(in srgb, var(--normal-600) 22%, transparent);
}

/* ==========================================================================
   Lencana status klinikal
   ========================================================================== */
.ss-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    border-radius: var(--radius-sm);
}

.ss-badge-normal { color: var(--normal-600); background: var(--normal-100); }
.ss-badge-watch  { color: var(--watch-700);  background: var(--watch-100); }
.ss-badge-alert  { color: var(--alert-700);  background: var(--alert-100); }
.ss-badge-info   { color: var(--info-600);   background: var(--info-100); }
.ss-badge-muted  { color: var(--ink-600);    background: var(--ink-100); }

/* ==========================================================================
   Atribusi pengendali

   Audex ialah perisiannya; Akasia Medicare Sdn Bhd yang mengendalikannya.
   Pekerja syarikat klien yang log masuk untuk melihat rekod pendengaran
   mereka sepatutnya nampak siapa bertanggungjawab ke atas data itu.
   ========================================================================== */
.ss-powered {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--ink-500);
}

/* Menggunakan akasia-mark.png, bukan logo penuh. Logo penuh ialah lencana
   bulat dengan nama syarikat melengkung mengelilinginya; pada saiz ini teks
   itu menjadi cincang kelabu. Tanda tengah dibaca sebagai bentuk, dan label
   teks di sebelahnya menyampaikan nama. */
.ss-powered img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.ss-powered strong {
    font-weight: 600;
    color: var(--ink-600);
}

/* Pada permukaan gelap, teks perlu lebih cerah untuk kekal terbaca. */
.ss-powered-dark {
    color: var(--ink-400);
}

.ss-powered-dark strong {
    color: var(--ink-300);
}

/* ==========================================================================
   Kebolehcapaian
   ========================================================================== */

/* Kelihatan hanya apabila difokus melalui papan kekunci. */
.ss-skip-link {
    position: absolute;
    left: var(--space-4);
    top: calc(var(--space-4) * -4);
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    color: var(--paper);
    background: var(--ink-900);
    border-radius: var(--radius-md);
    transition: top 0.15s ease;
}

.ss-skip-link:focus {
    top: var(--space-4);
}

.ss-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hormati tetapan sistem. Beberapa pengguna mengalami pening dengan
   gerakan, dan tiada satu pun animasi di sini menyampaikan maklumat. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}