/* ── Fonts ─────────────────────────────────────────────────── */
@font-face {
    font-family: "CLusail";
    src: url("/fonts/Lusail/Lusail-Regular.otf") format("opentype"),
         url("/fonts/Lusail/Lusail-Regular.woff") format("woff"),
         url("/fonts/Lusail/Lusail-Regular.woff2") format("woff2"),
         url("/fonts/Lusail/Lusail-Regular.ttf") format("truetype");
    font-weight: normal; font-style: normal; font-display: block;
}
@font-face {
    font-family: "CLusail";
    src: url("/fonts/Lusail/Lusail-Medium.otf") format("opentype"),
         url("/fonts/Lusail/Lusail-Medium.woff") format("woff"),
         url("/fonts/Lusail/Lusail-Medium.woff2") format("woff2"),
         url("/fonts/Lusail/Lusail-Medium.ttf") format("truetype");
    font-weight: 500; font-style: normal; font-display: block;
}
@font-face {
    font-family: "CLusail";
    src: url("/fonts/Lusail/Lusail-Light.otf") format("opentype"),
         url("/fonts/Lusail/Lusail-Light.woff") format("woff"),
         url("/fonts/Lusail/Lusail-Light.woff2") format("woff2"),
         url("/fonts/Lusail/Lusail-Light.ttf") format("truetype");
    font-weight: 300; font-style: normal; font-display: block;
}
@font-face {
    font-family: "CLusail";
    src: url("/fonts/Lusail/Lusail-Bold.otf") format("opentype"),
         url("/fonts/Lusail/Lusail-Bold.woff") format("woff"),
         url("/fonts/Lusail/Lusail-Bold.woff2") format("woff2"),
         url("/fonts/Lusail/Lusail-Bold.ttf") format("truetype");
    font-weight: bold; font-style: normal; font-display: block;
}

/* ── Radio colour palette ─────────────────────────────────────
   --radio-dark   : #062b2b   deep teal-black
   --radio-mid    : #1b6b68   teal
   --radio-light  : #0a3d3d   mid teal
   --radio-gold   : #f0d58a   golden accent
   --radio-gold2  : #e8c86a   golden darker
──────────────────────────────────────────────────────────────── */

/* ── Body ────────────────────────────────────────────────────── */
body {
    font-family: "CLusail", sans-serif;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    direction: rtl;
    text-align: right;
}

#app {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Navbar ───────────────────────────────────────────────────── */
.navbar {
    background: linear-gradient(90deg, #021f1f 0%, #062b2b 55%, #0a3d3d 100%);
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
    padding-top: 0;
    padding-bottom: 0;
    min-height: 52px;
}

.navbar .nav-link {
    color: rgba(255,255,255,.88) !important;
    font-size: 14px;
    font-weight: 500;
    padding: .65rem 1rem !important;
    border-radius: 8px;
    transition: background .18s ease, color .18s ease;
    display: flex;
    align-items: center;
    gap: 7px;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #f0d58a !important;
    background: rgba(240,213,138,.1);
}

.navbar .nav-link.active-nav {
    color: #f0d58a !important;
    background: rgba(240,213,138,.12);
}

.nav-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(240,213,138,.18);
    border: 1.5px solid rgba(240,213,138,.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    color: #f0d58a;
}

.navbar .dropdown-toggle::after { opacity: .65; margin-right: 2px; }

.navbar .dropdown-menu {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.13);
    padding: 6px;
    min-width: 210px;
    text-align: right;
    margin-top: 6px !important;
}

.navbar .dropdown-menu .dropdown-header {
    font-size: 12px;
    font-weight: 700;
    color: #6c757d;
    letter-spacing: .5px;
    padding: 6px 12px 4px;
    text-transform: uppercase;
}

.navbar .dropdown-menu .dropdown-item {
    color: #1f2937;
    font-size: 13.5px;
    font-weight: 500;
    padding: 9px 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background .15s ease;
}

.navbar .dropdown-menu .dropdown-item i {
    color: #1b6b68;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    background: rgba(27,107,104,.08);
    color: #062b2b;
}

.navbar .dropdown-menu .dropdown-item.text-danger { color: #dc3545 !important; }
.navbar .dropdown-menu .dropdown-item.text-danger i { color: #dc3545 !important; }
.navbar .dropdown-menu .dropdown-item.text-danger:hover { background: rgba(220,53,69,.07); }

.navbar .dropdown-divider { border-color: rgba(0,0,0,.06); margin: 4px 6px; }

/* ═══════════════════════════════════════════════════════════════
   Radio Header (Bootstrap-independent)
═══════════════════════════════════════════════════════════════ */
.rh {
    background: linear-gradient(90deg, #021f1f 0%, #062b2b 55%, #0a3d3d 100%);
    border-bottom: 2px solid rgba(240,213,138,.15);
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.rh-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    gap: 1rem;
}

/* Logo */
.rh-logo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    flex-shrink: 0;
}
.rh-logo:hover { text-decoration: none; }

.rh-logo-icon {
    width: 36px;
    height: 36px;
    background: rgba(240,213,138,.14);
    border: 1.5px solid rgba(240,213,138,.28);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f0d58a;
    font-size: 1rem;
    flex-shrink: 0;
}

.rh-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 3px;
}

.rh-logo-ar {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}

.rh-logo-en {
    color: rgba(240,213,138,.50);
    font-size: 0.62rem;
    letter-spacing: .09em;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* Desktop nav */
.rh-nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
    justify-content: center;
}

.rh-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255,255,255,.82);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.42rem 0.85rem;
    border-radius: 7px;
    transition: color .18s, background .18s;
    white-space: nowrap;
}
.rh-link:hover,
.rh-link:focus { color: #f0d58a; background: rgba(240,213,138,.1); text-decoration: none; }
.rh-link.rh-active { color: #f0d58a !important; background: rgba(240,213,138,.12); }
.rh-link-sm { font-size: 0.82rem; }

/* Actions (right side) */
.rh-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* User menu */
.rh-user-menu { position: relative; }

.rh-user-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(240,213,138,.13);
    border: 1.5px solid rgba(240,213,138,.22);
    border-radius: 8px;
    padding: 0.32rem 0.75rem;
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    font-family: inherit;
    transition: background .18s, border-color .18s;
}
.rh-user-btn:hover { background: rgba(240,213,138,.22); border-color: rgba(240,213,138,.38); }

.rh-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(240,213,138,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f0d58a;
    font-size: 11px;
    flex-shrink: 0;
}

.rh-username {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rh-chevron { font-size: 10px; opacity: .65; }

.rh-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.14);
    padding: 6px;
    z-index: 1050;
}
.rh-dropdown.rh-show { display: block; }

.rh-dd-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border-radius: 8px;
    color: #1f2937;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s;
}
.rh-dd-item:hover { background: rgba(6,43,43,.06); color: #062b2b; text-decoration: none; }
.rh-dd-item i { color: #1b6b68; width: 16px; text-align: center; flex-shrink: 0; }

.rh-dd-danger { color: #dc3545 !important; }
.rh-dd-danger i { color: #dc3545 !important; }
.rh-dd-danger:hover { background: rgba(220,53,69,.07) !important; }

.rh-dd-divider { border: none; border-top: 1px solid rgba(0,0,0,.06); margin: 4px 6px; }

/* Mobile toggler — hidden on desktop */
.rh-toggler {
    display: none;
    background: rgba(240,213,138,.12);
    border: 1.5px solid rgba(240,213,138,.2);
    border-radius: 7px;
    color: rgba(255,255,255,.88);
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background .18s;
    line-height: 1;
}
.rh-toggler:hover { background: rgba(240,213,138,.22); }

/* Mobile nav panel */
.rh-mobile-nav {
    display: none;
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 0.5rem 0 0.65rem;
}
.rh-mobile-nav.rh-open { display: block; }

.rh-mobile-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255,255,255,.82);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.58rem 0.5rem;
    border-radius: 7px;
    transition: color .18s, background .18s;
}
.rh-mobile-link:hover { color: #f0d58a; background: rgba(240,213,138,.1); text-decoration: none; }

/* Responsive */
@media (max-width: 767px) {
    .rh-nav          { display: none; }
    .rh-actions .rh-link { display: none; }
    .rh-toggler      { display: flex; align-items: center; justify-content: center; }
    .rh-logo-en      { display: none; }
}

/* ── Main / Footer ───────────────────────────────────────────── */
main { flex: 1; }

footer {
    background: linear-gradient(90deg, #021f1f 0%, #062b2b 100%);
    color: rgba(255,255,255,.75);
    padding: 15px 0;
    text-align: center;
    border-top: 1px solid rgba(240,213,138,.15);
}

footer a { color: #f0d58a; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
    padding: 5px 15px;
    margin-bottom: 10px;
    background-color: #1b6b68;
    color: white;
    border: none;
    transition: background-color .3s, box-shadow .3s;
}
.btn:hover { background-color: #062b2b; box-shadow: 0 4px 8px rgba(0,0,0,.2); }

.btn-info  { background-color: #1b6b68; border-color: #1b6b68; }
.btn-info:hover { background-color: #062b2b; }

.btn-primary { background-color: #1b6b68; border-color: #1b6b68; }
.btn-primary:hover { background-color: #062b2b; border-color: #062b2b; }

.btn-add-report {
    background-color: #1b6b68;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color .3s, box-shadow .3s;
}
.btn-add-report:hover { background-color: #062b2b; box-shadow: 0 4px 8px rgba(0,0,0,.2); }

.btn-action { background-color: #1b6b68; color: #fff; border: none; padding: 5px 8px; margin: 2px; border-radius: 3px; font-size: 14px; transition: background-color .3s; }
.btn-edit   { background-color: #0a3d3d; }
.btn-delete { background-color: #8a1538; }

/* ── Tables ───────────────────────────────────────────────────── */
.table-custom {
    width: 100%;
    border-collapse: collapse;
    background-color: #f5fbfb;
    border: 1px solid #b2d8d8;
    border-radius: 5px;
}
.table-custom thead { background-color: #062b2b; color: white; font-weight: bold; }
.table-custom th, .table-custom td { padding: 8px; border: 1px solid #ddd; text-align: right; }
.table-custom th { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-custom td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-custom tr:nth-child(even) { background-color: #e8f5f5; }
.table-custom tr:nth-child(odd)  { background-color: #ffffff; }
.table-custom tr { height: 40px; }
.table-dark { background-color: #062b2b; }

/* ── Pagination ───────────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; padding: 15px; list-style: none; border-radius: 5px; }
.pagination li { margin: 0 5px; }
.pagination a, .pagination span {
    display: block; padding: 8px 12px; text-decoration: none;
    background-color: #f2f2f2; border: 1px solid #ddd; color: #333;
    border-radius: 5px; transition: background-color .3s, color .3s;
}
.pagination a:hover { background-color: #1b6b68; color: white; }
.pagination .active span { background-color: #062b2b; color: white; border-color: #062b2b; }
.pagination .disabled span { background-color: #f2f2f2; color: #ccc; cursor: not-allowed; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
    border: 2px solid #b2d8d8;
    background-color: transparent;
    display: flex; flex-direction: column; justify-content: space-between;
    transition: background-color .3s;
}
.card:hover { background-color: rgba(27,107,104,.04); }
.card-body { text-align: center; flex: 1; }
.card-icon { font-size: 40px; color: #1b6b68; margin-bottom: 10px; }

/* ── Page header ─────────────────────────────────────────────── */
.page-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #b2d8d8; }
.page-title  { font-size: 24px; color: #062b2b; font-weight: bold; }

/* ── Misc layout ─────────────────────────────────────────────── */
.custom-container { width: 95%; max-width: 1400px; margin: 0 auto; padding: 0 15px; }

.wide-container {
    width: 95%; max-width: 1400px; margin: 0 auto; padding: 15px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,.08);
    border-radius: 8px;
}

@media (max-width: 768px) {
    .wide-container { width: 100%; font-size: 14px; }
    .btn-container  { flex-direction: column; align-items: flex-end; }
    .table-custom th, .table-custom td { white-space: normal; }
}