/* ==========================================================================
   Site-wide theme: fonts + brand color, matched to the MyExams "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);
}
#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;
}