/* =====================================================================
   mac-theme.css — Tema global bergaya macOS untuk seluruh website.
   Dimuat paling akhir di _header.blade.php agar menimpa CSS bawaan tema.
   Untuk menonaktifkan: hapus <link> mac-theme.css di _header.blade.php.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) DESIGN TOKENS — aksen biru macOS, palet sistem Apple (hijau/oranye/
      merah kalem), background Apple-gray, radius membulat, bayangan lembut.
   --------------------------------------------------------------------- */
:root {
    /* Aksen biru macOS */
    --color-primary: #0A84FF;
    --color-secondary: #0A84FF;
    --bg-primary: #0A84FF;
    --bg-secondary: #0A84FF;
    --bg-primary-hover: #0060DF;
    --bg-secondary-hover: #0060DF;
    --color-primary-rgba: 10, 132, 255;
    --color-secondary-rgba: 10, 132, 255;

    /* Palet semantik sistem Apple — lebih kalem dari bawaan tema */
    --color-success: #34C759;
    --color-info: #32ADE6;
    --color-warning: #FF9500;
    --color-danger: #FF3B30;
    --bg-success: #34C759;
    --bg-info: #32ADE6;
    --bg-warning: #FF9500;
    --bg-danger: #FF3B30;
    --bg-success-hover: #248A3D;
    --bg-info-hover: #1B8FCC;
    --bg-warning-hover: #D97D00;
    --bg-danger-hover: #D70015;
    --color-success-rgba: 52, 199, 89;
    --color-info-rgba: 50, 173, 230;
    --color-warning-rgba: 255, 149, 0;
    --color-danger-rgba: 255, 59, 48;

    --color-menu-hover: #0A84FF;
    --color-menu-active: #0A84FF;
    --bgcolor-add-listing-button: #0A84FF;
    --bgcolor-add-listing-button-hover: #0060DF;
    --color-breadcrumb-link-hover: #0A84FF;

    /* Background khas Apple */
    --body: #f5f5f7;
    --contents-bg: #f5f5f7;
    --main-content: #f5f5f7;

    /* Warna teks khas Apple */
    --mac-text: #1d1d1f;
    --mac-text-secondary: #6e6e73;

    /* Token tambahan gaya Mac */
    --mac-radius-lg: 14px;   /* kartu / panel */
    --mac-radius-md: 10px;   /* tombol / input */
    --mac-radius-sm: 8px;    /* item menu / pill kecil */
    --mac-border: 1px solid rgba(0, 0, 0, .08);
    --mac-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -14px rgba(15, 23, 42, .10);
    --mac-shadow-md: 0 4px 16px rgba(15, 23, 42, .08), 0 12px 40px -12px rgba(15, 23, 42, .14);
    --mac-transition: .16s ease;

    /* Urutan penting: Inter SEBELUM Segoe UI — di Windows, Segoe UI selalu
       terpasang sehingga Inter (yang dimuat dari Google Fonts) tak pernah
       terpakai jika ditaruh setelahnya. Mac tetap dapat SF Pro asli. */
    --mac-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   2) FONT & TIPOGRAFI — San Francisco di macOS, Inter di Windows.
      Ikon (uil / fa / wi / line-awesome) dikecualikan agar tidak rusak.
   --------------------------------------------------------------------- */
html body,
body *:not(i):not(.uil):not([class^="uil-"]):not([class*=" uil-"]):not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not([class^="wi-"]):not([class^="las"]):not([class^="lar"]):not([class^="lab"]) {
    font-family: var(--mac-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

body {
    background: var(--body);
}

/* Judul lebih pekat & rapat, khas tipografi Apple */
h1, h2, h3, h4, h5, h6 {
    color: var(--mac-text);
    letter-spacing: -0.02em;
}

/* Angka tabular di tabel — NIM, nilai, dan jam sejajar antar-baris */
.table td,
.table th,
table.dataTable td,
table.dataTable th {
    font-variant-numeric: tabular-nums;
}

/* Seleksi teks biru macOS */
::selection {
    background: rgba(var(--color-primary-rgba), .25);
    color: inherit;
}

/* Ring fokus keyboard ala macOS (pengganti box-shadow yang dimatikan) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(var(--color-primary-rgba), .40);
    outline-offset: 1px;
}

/* Checkbox, radio & range mengikuti aksen biru */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--color-primary);
}

/* ---------------------------------------------------------------------
   3) KARTU & PANEL — sudut membulat, border tipis, bayangan berlapis lembut.
   --------------------------------------------------------------------- */
.card,
.mahasiswa-table-card,
.khs-table-card,
.ap-widget,
.atbd-card {
    border: var(--mac-border) !important;
    border-radius: var(--mac-radius-lg) !important;
    box-shadow: var(--mac-shadow-sm) !important;
    background: #ffffff;
}

.card .card-header {
    border-top-left-radius: var(--mac-radius-lg) !important;
    border-top-right-radius: var(--mac-radius-lg) !important;
    background: transparent;
    border-bottom: var(--mac-border);
    padding: 18px 22px;
}

.card .card-header h1,
.card .card-header h2,
.card .card-header h3,
.card .card-header h4,
.card .card-header h5,
.card .card-header h6 {
    color: var(--mac-text);
    font-weight: 600;
}

.card .card-body {
    padding: 22px;
}

/* ---------------------------------------------------------------------
   4) TOMBOL — bentuk membulat, press-down halus (tanpa efek melayang),
      kilau gradien tipis di tombol solid khas push-button macOS.
   --------------------------------------------------------------------- */
.btn,
.dt-button,
button.btn {
    border-radius: var(--mac-radius-md) !important;
    transition: var(--mac-transition) !important;
    box-shadow: none !important;
}

/* macOS: tombol tidak melayang saat hover, tapi "tertekan" saat klik */
.btn:active:not(:disabled),
.dt-button:active {
    transform: scale(.98);
}

.btn-primary,
.bg-primary {
    background-color: var(--color-primary) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)) !important;
    border-color: var(--color-primary) !important;
}

.btn-primary:hover {
    background-color: var(--bg-primary-hover) !important;
    border-color: var(--bg-primary-hover) !important;
}

/* Tombol sekunder gaya mac: putih, border tipis, teks gelap */
.btn-light,
.btn-white,
.btn-default,
.btn-outline-light,
.btn-outline-secondary {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
    color: var(--mac-text) !important;
}

.btn-light:hover,
.btn-white:hover,
.btn-default:hover,
.btn-outline-light:hover,
.btn-outline-secondary:hover {
    background: #f5f5f7 !important;
    border-color: rgba(0, 0, 0, .16) !important;
    color: var(--mac-text) !important;
}

/* ---------------------------------------------------------------------
   5) FORM CONTROL — input/select bergaya macOS.
   --------------------------------------------------------------------- */
.form-control,
.form-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
input.form-control,
textarea.form-control {
    border: var(--mac-border) !important;
    border-radius: var(--mac-radius-md) !important;
    transition: var(--mac-transition) !important;
    background: #fff;
}

.form-control::placeholder,
.form-select::placeholder {
    color: #a1a1a6;
}

.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgba), .18) !important;
}

/* Panel pilihan Select2 — membulat, item aktif biru macOS */
.select2-dropdown {
    border: var(--mac-border) !important;
    border-radius: var(--mac-radius-md) !important;
    box-shadow: var(--mac-shadow-md) !important;
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background: var(--color-primary) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------
   6) HEADER & SIDEBAR — efek frosted glass (kaca buram) khas macOS.
   --------------------------------------------------------------------- */
.header-top,
.navbar,
header .navbar,
.top-menu {
    background: rgba(255, 255, 255, .72) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: var(--mac-border);
    box-shadow: none !important;
}

.sidebar,
.left-sidebar-wrap,
.mobile-author-actions,
aside.sidebar {
    background: rgba(255, 255, 255, .78) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-right: var(--mac-border);
}

/* ---------------------------------------------------------------------
   6b) MENU SIDEBAR — pill membulat ala Finder: hover abu lembut, item
       aktif tint biru. Selector mengikuti DOM tema (ul.sidebar_nav);
       dikecualikan saat .collapsed agar mode ikon-bulat bawaan tak rusak.
   --------------------------------------------------------------------- */

/* Matikan blok highlight kotak penuh bawaan tema */
.sidebar__menu-group ul.sidebar_nav li.active {
    background-color: transparent !important;
}

/* Item level-1 — pill dengan inset kiri-kanan */
.sidebar:not(.collapsed) .sidebar__menu-group ul.sidebar_nav > li > a {
    margin: 2px 10px;
    padding: 9px 12px;
    border-radius: var(--mac-radius-sm);
    transition: background var(--mac-transition), color var(--mac-transition);
}

.sidebar:not(.collapsed) .sidebar__menu-group ul.sidebar_nav > li > a:hover {
    background: rgba(0, 0, 0, .045);
}

.sidebar:not(.collapsed) .sidebar__menu-group ul.sidebar_nav > li > a.active {
    background: rgba(var(--color-primary-rgba), .12);
}

/* Sub-menu — pill lebih kecil, teks sejajar dengan teks induk */
.sidebar:not(.collapsed) .sidebar__menu-group ul.sidebar_nav li ul {
    padding: 2px 0 10px 0;
}

.sidebar:not(.collapsed) .sidebar__menu-group ul.sidebar_nav li ul li > a {
    margin: 1px 10px 1px 46px;
    padding: 7px 12px;
    border-radius: var(--mac-radius-sm);
    font-size: 13.5px;
    transition: background var(--mac-transition), color var(--mac-transition);
}

.sidebar:not(.collapsed) .sidebar__menu-group ul.sidebar_nav li ul li > a:hover {
    background: rgba(0, 0, 0, .04);
    color: var(--color-primary);
}

.sidebar:not(.collapsed) .sidebar__menu-group ul.sidebar_nav li ul li.active > a,
.sidebar:not(.collapsed) .sidebar__menu-group ul.sidebar_nav li ul li > a.active {
    background: rgba(var(--color-primary-rgba), .12);
    color: var(--color-primary);
}

/* ---------------------------------------------------------------------
   7) DROPDOWN & MODAL — menu translucent ber-blur khas macOS,
      item hover biru aksen dengan teks putih.
   --------------------------------------------------------------------- */
.dropdown-menu {
    border: var(--mac-border) !important;
    border-radius: var(--mac-radius-md) !important;
    box-shadow: var(--mac-shadow-md) !important;
    padding: 6px;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
}

.dropdown-menu .dropdown-item {
    border-radius: var(--mac-radius-sm);
    transition: var(--mac-transition);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--color-primary);
    color: #fff !important;
}

.modal-content {
    border: var(--mac-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--mac-shadow-md) !important;
}

.modal-backdrop.show {
    opacity: .35;
}

/* ---------------------------------------------------------------------
   8) NAV-TABS — segmented control khas macOS: wadah abu membulat,
      tab aktif putih menonjol dengan bayangan halus.
   --------------------------------------------------------------------- */
.nav-tabs {
    display: inline-flex;
    flex-wrap: nowrap;
    background: rgba(0, 0, 0, .05);
    border: 0 !important;
    border-radius: var(--mac-radius-md);
    padding: 3px;
    gap: 2px;
    margin-bottom: 18px;
}

/* Matikan garis bawah indikator bawaan tema */
.nav-tabs:after {
    display: none !important;
}

.nav-tabs .nav-item {
    margin: 0 !important;
}

.nav-tabs .nav-link {
    border: 0 !important;
    border-radius: var(--mac-radius-sm) !important;
    padding: 6px 14px !important;
    font-size: 13px;
    font-weight: 500;
    color: #3a3a3c !important;
    background: transparent !important;
    transition: var(--mac-transition);
}

.nav-tabs .nav-link:hover {
    color: var(--mac-text) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background: #ffffff !important;
    color: var(--mac-text) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 1px rgba(0, 0, 0, .04) !important;
}

/* ---------------------------------------------------------------------
   9) PAGINATION (Bootstrap/Laravel) — pill senada dengan DataTables.
   --------------------------------------------------------------------- */
.pagination {
    gap: 4px;
}

.pagination .page-link {
    min-width: 32px;
    border: 1px solid transparent !important;
    border-radius: var(--mac-radius-sm) !important;
    background: transparent;
    color: var(--mac-text-secondary);
    font-size: 13px;
    padding: 6px 11px;
    transition: var(--mac-transition);
    box-shadow: none !important;
}

.pagination .page-link:hover {
    background: rgba(0, 0, 0, .045);
    color: var(--mac-text);
}

.pagination .page-item.active .page-link {
    background: var(--color-primary) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.pagination .page-item.disabled .page-link {
    background: transparent;
    color: rgba(0, 0, 0, .25);
}

/* ---------------------------------------------------------------------
   10) ALERT & BADGE — tint lembut tanpa border, palet Apple.
   --------------------------------------------------------------------- */
.alert {
    border: 0 !important;
    border-radius: 12px !important;
}

.alert-primary {
    background: rgba(var(--color-primary-rgba), .10) !important;
    color: #0060DF !important;
}

.alert-info {
    background: rgba(var(--color-info-rgba), .12) !important;
    color: #0071A4 !important;
}

.alert-success {
    background: rgba(var(--color-success-rgba), .12) !important;
    color: #1E8A3C !important;
}

.alert-warning {
    background: rgba(var(--color-warning-rgba), .14) !important;
    color: #9A5B00 !important;
}

.alert-danger {
    background: rgba(var(--color-danger-rgba), .10) !important;
    color: #D70015 !important;
}

.badge {
    border-radius: 999px;
}

.progress {
    border-radius: 999px;
    background: rgba(0, 0, 0, .06);
}

.progress-bar {
    border-radius: 999px;
}

/* ---------------------------------------------------------------------
   11) SWEETALERT — dialog membulat senada dengan modal macOS.
   --------------------------------------------------------------------- */
.swal2-popup {
    border-radius: 16px !important;
    box-shadow: var(--mac-shadow-md) !important;
}

.swal2-popup .swal2-styled {
    border-radius: var(--mac-radius-md) !important;
}

/* ---------------------------------------------------------------------
   12) SCROLLBAR tipis membulat ala macOS.
   --------------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .28) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .24);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .38);
    background-clip: content-box;
}