/* =========================================================
   FREST SIDEBAR + LAYOUT — FINAL STABLE VERSION
   (Typography Optimized for Ministry Systems)
   ========================================================= */

/* ===============================
   1. SIDEBAR WIDTH (SYNC WITH FREST)
   =============================== */
body {
    font-family: "Cairo", "Tajawal", "Rubik", sans-serif;
    font-size: 0.9rem; /* Base readability */
}

.menu-sub .menu-item.active > .menu-link::before {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background: #5a8dee;
    border-radius: 50%;
}

/* ===============================
   2. CONTENT FULL WIDTH
   =============================== */
.layout-page .container-xxl {
    max-width: 100% !important;
}

.content-wrapper {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/*.bg-menu-theme .menu-text {
    color: #a9d3f5 !important;
}*/

/* ===============================
   3. MENU TYPOGRAPHY (PROFESSIONAL HIERARCHY)
   =============================== */

/* Main menu items */
.menu-inner > .menu-item > .menu-link {
    font-size: 0.8rem; /* was 0.85 */
    font-weight: 700;
}

/* First level submenu */
.menu-sub .menu-link {
    font-size: 0.75rem; /* was 0.78 */
    font-weight: 600;
}

/* Deep submenu */
.menu-sub .menu-sub .menu-link {
    font-size: 0.72rem;
    font-weight: 500;
}

/* Tables / grids */
.table {
    font-size: 0.80rem; /* improved readability */
}

    /* Optional: table headers slightly stronger */
    .table thead th {
        font-size: 0.813rem;
        font-weight: 700;
    }

/* Prevent wrapping */
.menu .menu-link div,
.menu .menu-title,
.menu .menu-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===============================
   4. SPACING (TIGHT + CLEAN)
   =============================== */
.menu-link {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Hierarchy indentation */
.menu-sub > .menu-item > .menu-link {
    padding-right: 1.3rem;
}

.menu-sub .menu-sub .menu-link {
    padding-right: 2.2rem;
    color: #6b7a90;
}

/* ===============================
   5. HOVER EFFECT (VISIBLE + CLEAN)
   =============================== */
.menu-link {
    transition: all 0.15s ease;
}

    .menu-link:hover {
        background: #eef4ff;
        color: #2f5bea;
    }

/* ===============================
   6. ACTIVE STATE (DOT + COLOR)
   =============================== */
.menu-sub .menu-item.active > .menu-link {
    position: relative;
    font-weight: 700;
    color: #2f5bea;
}

    .menu-sub .menu-item.active > .menu-link::before {
        content: "";
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        height: 5px;
        background: #5a8dee;
        border-radius: 50%;
    }

/* ===============================
   7. DARK MODE SAFE
   =============================== */
.dark-style .menu-link:hover,
html[data-theme="dark"] .menu-link:hover {
    background: rgba(90, 141, 238, 0.2);
}

.dark-style .menu-sub .menu-sub .menu-link,
html[data-theme="dark"] .menu-sub .menu-sub .menu-link {
    color: #a9b4c7;
}

/* ===============================
   8. SWEETALERT FIX
   =============================== */
.swal2-container {
    z-index: 100000 !important;
}

/* ===============================
   9. OPTIONAL POLISH (additive only — does NOT touch widths or Frest layout)
   Comment out this block if it causes any issue.
   =============================== */

/* Smoother active item — visible accent without changing dimensions */
.menu-inner > .menu-item.active > .menu-link {
    background: rgba(90, 141, 238, 0.08);
    color: #2f5bea !important;
}

    .menu-inner > .menu-item.active > .menu-link .menu-icon {
        color: #2f5bea !important;
    }

/* Subtle scrollbar inside the menu */
#layout-menu .menu-inner::-webkit-scrollbar {
    width: 6px;
}

#layout-menu .menu-inner::-webkit-scrollbar-thumb {
    background: rgba(90, 141, 238, 0.25);
    border-radius: 3px;
}

    #layout-menu .menu-inner::-webkit-scrollbar-thumb:hover {
        background: rgba(90, 141, 238, 0.45);
    }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .menu-link {
        transition: none;
    }
}