/* ==========================================================================
   Site-wide theme: fonts + brand color, matched to the MyExam "sekolah"
   brand family (see also resources/views/landing.blade.php, which defines
   the same tokens for its own standalone stylesheet). Overrides the
   Skote admin theme's baked-in colors/fonts rather than replacing it —
   app.min.css hardcodes hex values throughout (no CSS custom properties
   to hook into), so every rule below is a direct, !important override
   of the specific classes those hardcoded colors show up on.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap');

:root {
    --brand-primary: #1a1a1a;
    --brand-primary-dark: #000000;
    --brand-primary-tint: rgba(26, 26, 26, 0.08);
    --brand-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
    --brand-font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--brand-font-body) !important;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: var(--brand-font-heading) !important;
}

/* Card/button shape + shadow, measured directly off cekolah.id's own
   rendered dashboard (computed styles, not guessed): 12px card radius, a
   near-invisible 8%-black hairline border instead of Bootstrap's default
   grey, and a barely-there shadow rather than a hard drop-shadow. */
.card {
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 2px 2px rgba(0,0,0,.04) !important;
}
.card-body {
    padding: 1.5rem !important;
}
.btn {
    border-radius: 8px !important;
    font-weight: 500;
}

/* The blanket .btn radius above beats Bootstrap's own btn-group rules
   (they carry no !important), so a split button's two halves render as
   two separate full pills instead of one joined shape unless the inner
   corners are squared off again here. */
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn.dropdown-toggle-split:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.btn-group > .btn:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.form-control, .form-select {
    border-radius: 8px !important;
}

.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
}
.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.text-primary { color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.badge.bg-primary { background-color: var(--brand-primary) !important; }
a:not(.btn) { color: var(--brand-primary); }
.nav-pills .nav-link.active { background-color: var(--brand-primary) !important; }
.page-item.active .page-link { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; }

.form-control, .form-select, .form-check-input {
    border: 1px solid #b4bfd0 !important;
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 0.15rem var(--brand-primary-tint) !important;
}

.form-check-input:checked {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* Clear & balanced table borders */
.table-bordered,
.table-bordered th,
.table-bordered td {
    border: 1px solid #ced4da !important;
}

.table-bordered thead th,
.table-bordered thead td {
    border-bottom-width: 1.5px !important;
    border-bottom-color: #adb5bd !important;
    background-color: #f8f9fa;
}

/* Fix DataTables layout alignment */
div.dataTables_wrapper div.dataTables_length {
    text-align: left !important;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: right !important;
}

div.dataTables_wrapper div.dataTables_paginate {
    text-align: right !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: flex-end !important;
}

div.dataTables_wrapper div.dataTables_info {
    text-align: left !important;
    padding-top: 0.85em;
}

/* Auth Pages Background */
.authentication-bg,
.auth-panel-bg {
    background-color: #f5f6f8 !important;
}

.auth-panel-bg .card {
    border-radius: 0.75rem !important;
    border: none !important;
    box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03) !important;
}

/* Modal Backdrop Fixing (Soft, clean dim like target app) */
.modal-backdrop {
    --bs-backdrop-opacity: 0.25 !important;
    z-index: 1040 !important;
    opacity: 0.25 !important;
    background-color: rgba(15, 23, 42, 0.6) !important;
}

.modal-backdrop.show {
    opacity: 0.25 !important;
}

/* Hide duplicated backdrop if Bootstrap creates multiple */
.modal-backdrop + .modal-backdrop {
    display: none !important;
    opacity: 0 !important;
}

.modal {
    z-index: 1050 !important;
}

/* Settings Navigation Menu */
.nav-settings.card {
    padding: 1.5rem 1.25rem;
    min-width: 230px;
    border-radius: 0.75rem !important;
    border: none !important;
    box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03) !important;
}

.nav-settings .mail-list {
    margin-top: 0;
}

.nav-settings .mail-list a {
    display: flex;
    align-items: center;
    color: #74788d;
    line-height: 1.5;
    padding: 0.65rem 0.5rem;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    border-radius: 0.25rem;
    transition: all 0.2s ease-in-out;
}

.nav-settings .mail-list a:hover {
    color: var(--brand-primary);
}

.nav-settings .mail-list a.active,
.nav-settings .mail-list a.router-link-active,
.nav-settings .mail-list a.router-link-exact-active {
    color: var(--brand-primary) !important;
    font-weight: 600;
}

.nav-settings .mail-list a i {
    font-size: 16px;
    width: 24px;
    display: inline-flex;
    align-items: center;
}

/* Card Radio Styles */
.card-radio-label {
    display: block;
    cursor: pointer;
    margin-bottom: 0;
}

.card-radio-input {
    display: none !important;
}

.card-radio {
    background-color: #fff;
    border: 2px solid #e9ecef;
    border-radius: 0.75rem;
    padding: 1.5rem 1rem;
    display: block;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.card-radio:hover {
    border-color: #ced4da;
    transform: translateY(-2px);
}

.card-radio-input:checked + .card-radio {
    border-color: #34c38f !important;
    background-color: rgba(52, 195, 143, 0.04);
    box-shadow: 0 0.5rem 1rem rgba(52, 195, 143, 0.12) !important;
}

.card-radio-label.text-danger .card-radio-input:not(:checked) + .card-radio,
.card-radio-label:not(.text-success) .card-radio {
    border-color: #eff2f7;
    background-color: #fcfcfd;
}

/* Ensure table-responsive doesn't hide/clip dropdown menus */
.table-responsive {
    overflow-x: auto;
    overflow-y: visible !important;
    min-height: 180px;
}

.table-responsive .dropdown-menu {
    z-index: 1060 !important;
}

/* Question list item & drag styles */
.question-list {
    position: relative;
}
.question-list.sortable-ghost {
    background-color: #d3e8fb !important;
    opacity: 0.8;
}
.question-list .drag-handle {
    cursor: grab !important;
    user-select: none;
}
.question-list .drag-icon {
    display: none;
    color: #74788d;
    font-size: 14px;
}
.question-list .q-number {
    display: inline-block;
}
.question-list:hover .drag-icon {
    display: inline-block;
}
.question-list:hover .q-number {
    display: none;
}
.cursor-pointer {
    cursor: pointer;
}
.hover-underline:hover {
    text-decoration: underline;
}

/* Sidebar: the Skote theme's default vertical-menu background is a
   hardcoded blue (#5b73e8) that doesn't go through --bs-sidebar-bg, so it
   isn't reachable by redefining that variable — overridden directly here
   instead, matched to the same clean white/near-black brand palette as
   everything else. */
.vertical-menu,
.navbar-brand-box,
.topnav {
    background-color: #ffffff !important;
    border-right: 1px solid rgba(0,0,0,.08);
}

/* Horizontal layout (supervisor portal): the brand box sits inside the
   colored topbar, so the white sidebar background above must not apply to
   it. The logo gets its own small white badge instead, keeping a dark or
   multicolor school logo readable on any theme color. */
body[data-layout="horizontal"] .navbar-brand-box {
    background-color: transparent !important;
    border-right: 0;
    padding-right: 1rem;
}
body[data-layout="horizontal"] .navbar-brand-box .logo img {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 4px;
    object-fit: contain;
    vertical-align: middle;
}
#sidebar-menu ul li a {
    color: #4b4b4b !important;
}
#sidebar-menu ul li a i {
    color: #7b8190 !important;
}
.vertical-menu #sidebar-menu > ul > li:hover > a,
.vertical-menu #sidebar-menu > ul > li:hover > a i,
.mm-active > a,
.mm-active > a i {
    color: var(--brand-primary) !important;
    background-color: var(--brand-primary-tint) !important;
}

/* Soft Background Utilities */
.bg-soft-primary {
    background-color: var(--brand-primary-tint) !important;
}
.bg-soft-secondary {
    background-color: rgba(116, 120, 141, 0.18) !important;
}
.bg-soft-success {
    background-color: rgba(52, 195, 143, 0.15) !important;
}
.bg-soft-info {
    background-color: rgba(80, 165, 241, 0.15) !important;
}
.bg-soft-warning {
    background-color: rgba(241, 180, 76, 0.15) !important;
}
.bg-soft-danger {
    background-color: rgba(244, 106, 106, 0.15) !important;
}
.bg-soft-dark {
    background-color: rgba(52, 58, 64, 0.15) !important;
}


/* Settings menu on a phone: a row of swipeable pills above the page instead
   of a seven-item list that fills the whole first screen. */
@media (max-width: 767.98px) {
    .nav-settings {
        margin-bottom: 12px;
    }
    .nav-settings .mail-list {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding: 8px;
        scrollbar-width: none;
    }
    .nav-settings .mail-list::-webkit-scrollbar {
        display: none;
    }
    .nav-settings .mail-list a {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 6px 12px;
        border-radius: 999px;
        background-color: var(--bs-tertiary-bg);
    }
    .nav-settings .mail-list a.active {
        background-color: var(--bs-primary);
        color: #fff !important;
    }
}

/* Mini (collapsed) sidebar: the theme paints the hovered item — the label
   that slides out beside the icon — with the dark sidebar colour, leaving
   dark text on navy. Keep it as white as the rest of the sidebar. The
   selectors repeat the theme's own attributes so they outrank its
   !important rule. */
body[data-sidebar][data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a {
    background-color: #ffffff !important;
    color: var(--brand-primary) !important;
    box-shadow: 0 2px 10px rgba(15, 34, 58, .12);
}
body[data-sidebar][data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a i {
    color: var(--brand-primary) !important;
}
body[data-sidebar][data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul ul {
    background-color: #ffffff !important;
    box-shadow: 0 6px 12px rgba(15, 34, 58, .12);
}
body[data-sidebar][data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > ul a {
    color: #4b4b4b !important;
}
body[data-sidebar][data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > ul a:hover {
    color: var(--brand-primary) !important;
}