/**
 * Al-Nasr Travels - Premium Theme Stylesheet
 * Brand Colors:
 * - Emerald Green: #009846
 * - Royal Purple:  #5c2d91
 * - Electric Cyan: #00aeef
 */

:root {
    --an-green: #009846;
    --an-green-dark: #007a37;
    --an-green-light: #00b955;
    --an-green-subtle: #eaf8f0;
    --an-green-glow: rgba(0, 152, 70, 0.25);

    --an-purple: #5c2d91;
    --an-purple-dark: #472172;
    --an-purple-light: #7b3ebf;
    --an-purple-subtle: #f4ecfa;
    --an-purple-glow: rgba(92, 45, 145, 0.25);

    --an-cyan: #00aeef;
    --an-cyan-dark: #0091c7;
    --an-cyan-light: #34c4f8;
    --an-cyan-subtle: #e6f7fd;
    --an-cyan-glow: rgba(0, 174, 239, 0.25);

    --an-dark: #0f172a;
    --an-slate: #1e293b;
    --an-muted: #64748b;
    --an-border: #e2e8f0;
    --an-bg: #f8fafc;
    --an-card-bg: #ffffff;

    --bs-primary: #009846 !important;
    --bs-primary-rgb: 0, 152, 70 !important;
}

/* ════ Typography & Base ════ */
body {
    background-color: var(--an-bg) !important;
    color: #1e293b;
}

/* ════ Topbar Styling ════ */
.topbar-custom {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.04) !important;
}

.topbar-partner-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.95));
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.topbar-partner-logo:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.topbar-partner-logo img {
    height: 38px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.05));
}

/* ════ Sidebar Styling ════ */
.app-sidebar-menu {
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.03) !important;
}

.app-sidebar-menu .logo-box {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#side-menu > li > a {
    color: #475569 !important;
    font-weight: 500;
    font-size: 13.5px;
    border-radius: 8px;
    margin: 2px 10px;
    padding: 9px 14px;
    transition: all 0.2s ease;
}

#side-menu > li > a:hover {
    color: var(--an-green) !important;
    background-color: var(--an-green-subtle) !important;
}

#side-menu > li > a i,
#side-menu > li > a svg {
    color: #64748b;
    font-size: 18px;
    width: 22px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin-right: 6px;
    transition: color 0.2s ease;
}

#side-menu > li > a:hover i,
#side-menu > li > a:hover svg {
    color: var(--an-green) !important;
}

#side-menu > li.active > a,
#side-menu > li.menuitem-active > a {
    background: linear-gradient(135deg, var(--an-green), var(--an-green-light)) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px var(--an-green-glow);
    font-weight: 600;
}

#side-menu > li.active > a i,
#side-menu > li.active > a svg,
#side-menu > li.menuitem-active > a i,
#side-menu > li.menuitem-active > a svg {
    color: #ffffff !important;
}

.nav-second-level li a {
    color: #64748b !important;
    padding: 7px 15px 7px 28px !important;
    border-radius: 6px;
    margin: 2px 8px;
    font-size: 13px;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease;
}

.nav-second-level li a i,
.nav-second-level li a svg,
.sidebar-icon-svg {
    font-size: 16px;
    width: 20px;
    height: 16px;
    text-align: center;
    margin-right: 9px;
    color: #94a3b8;
    fill: currentColor;
    transition: color 0.2s ease, fill 0.2s ease;
    flex-shrink: 0;
}

.nav-second-level li a:hover {
    color: var(--an-green) !important;
    background: var(--an-green-subtle) !important;
}

.nav-second-level li a:hover i,
.nav-second-level li.active a i,
.nav-second-level li a:hover svg,
.nav-second-level li.active a svg,
.nav-second-level li a:hover .sidebar-icon-svg,
.nav-second-level li.active a .sidebar-icon-svg {
    color: var(--an-green) !important;
    fill: var(--an-green) !important;
}

.mdi-kaaba {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23000' d='M60 120l228 71.2L516 120 288 48.8 60 120zM278.5 1.5c6.2-1.9 12.9-1.9 19.1 0l256 80C566.9 85.6 576 98 576 112l0 16s0 0 0 0l0 21.2L292.8 237.7c-3.1 1-6.4 1-9.5 0L0 149.2 0 128l0-16C0 98 9.1 85.6 22.5 81.5l256-80zm23.9 266.8L576 182.8l0 46.5-52.8 16.5c-8.4 2.6-13.1 11.6-10.5 20s11.6 13.1 20 10.5L576 262.8 576 400c0 14-9.1 26.4-22.5 30.5l-256 80c-6.2 1.9-12.9 1.9-19.1 0l-256-80C9.1 426.4 0 414 0 400L0 262.8l43.2 13.5c8.4 2.6 17.4-2.1 20-10.5s-2.1-17.4-10.5-20L0 229.2l0-46.5 273.7 85.5c9.3 2.9 19.3 2.9 28.6 0zm-185.5-2.6c-8.4-2.6-17.4 2.1-20 10.5s2.1 17.4 10.5 20l64 20c8.4 2.6 17.4-2.1 20-10.5s-2.1-17.4-10.5-20l-64-20zm352 30.5c8.4-2.6 13.1-11.6 10.5-20s-11.6-13.1-20-10.5l-64 20c-8.4 2.6-13.1 11.6-10.5 20s11.6 13.1 20 10.5l64-20zm-224 9.5c-8.4-2.6-17.4 2.1-20 10.5s2.1 17.4 10.5 20l38.5 12c9.3 2.9 19.3 2.9 28.6 0l38.5-12c8.4-2.6 13.1-11.6 10.5-20s-11.6-13.1-20-10.5l-38.5 12c-3.1 1-6.4 1-9.5 0l-38.5-12z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23000' d='M60 120l228 71.2L516 120 288 48.8 60 120zM278.5 1.5c6.2-1.9 12.9-1.9 19.1 0l256 80C566.9 85.6 576 98 576 112l0 16s0 0 0 0l0 21.2L292.8 237.7c-3.1 1-6.4 1-9.5 0L0 149.2 0 128l0-16C0 98 9.1 85.6 22.5 81.5l256-80zm23.9 266.8L576 182.8l0 46.5-52.8 16.5c-8.4 2.6-13.1 11.6-10.5 20s11.6 13.1 20 10.5L576 262.8 576 400c0 14-9.1 26.4-22.5 30.5l-256 80c-6.2 1.9-12.9 1.9-19.1 0l-256-80C9.1 426.4 0 414 0 400L0 262.8l43.2 13.5c8.4 2.6 17.4-2.1 20-10.5s-2.1-17.4-10.5-20L0 229.2l0-46.5 273.7 85.5c9.3 2.9 19.3 2.9 28.6 0zm-185.5-2.6c-8.4-2.6-17.4 2.1-20 10.5s2.1 17.4 10.5 20l64 20c8.4 2.6 17.4-2.1 20-10.5s-2.1-17.4-10.5-20l-64-20zm352 30.5c8.4-2.6 13.1-11.6 10.5-20s-11.6-13.1-20-10.5l-64 20c-8.4 2.6-13.1 11.6-10.5 20s11.6 13.1 20 10.5l64-20zm-224 9.5c-8.4-2.6-17.4 2.1-20 10.5s2.1 17.4 10.5 20l38.5 12c9.3 2.9 19.3 2.9 28.6 0l38.5-12c8.4-2.6 13.1-11.6 10.5-20s-11.6-13.1-20-10.5l-38.5 12c-3.1 1-6.4 1-9.5 0l-38.5-12z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.mdi-kaaba::before {
    content: "" !important;
}

.nav-second-level li.active a {
    color: var(--an-green) !important;
    font-weight: 600;
    background: var(--an-green-subtle) !important;
    border-left: 3px solid var(--an-green);
}

.menu-title {
    color: #94a3b8 !important;
    font-size: 11px !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    padding: 12px 20px 6px !important;
}

/* ════ Primary Buttons & Badges ════ */
.btn-primary {
    background: linear-gradient(135deg, var(--an-green) 0%, var(--an-green-light) 100%) !important;
    border-color: var(--an-green) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px var(--an-green-glow) !important;
    font-weight: 600;
    transition: all 0.25s ease !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, var(--an-green-dark) 0%, var(--an-green) 100%) !important;
    border-color: var(--an-green-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px var(--an-green-glow) !important;
    color: #ffffff !important;
}

.btn-purple {
    background: linear-gradient(135deg, var(--an-purple) 0%, var(--an-purple-light) 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px var(--an-purple-glow) !important;
    font-weight: 600;
}

.btn-purple:hover {
    background: linear-gradient(135deg, var(--an-purple-dark) 0%, var(--an-purple) 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.btn-cyan {
    background: linear-gradient(135deg, var(--an-cyan) 0%, var(--an-cyan-light) 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px var(--an-cyan-glow) !important;
    font-weight: 600;
}

.btn-cyan:hover {
    background: linear-gradient(135deg, var(--an-cyan-dark) 0%, var(--an-cyan) 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.btn-outline-primary {
    color: var(--an-green) !important;
    border-color: var(--an-green) !important;
}

.btn-outline-primary:hover {
    background-color: var(--an-green) !important;
    border-color: var(--an-green) !important;
    color: #ffffff !important;
}

/* ════ Badges ════ */
.badge-alnasar-green {
    background-color: var(--an-green-subtle);
    color: var(--an-green-dark);
    border: 1px solid rgba(0, 152, 70, 0.25);
    font-weight: 600;
}

.badge-alnasar-purple {
    background-color: var(--an-purple-subtle);
    color: var(--an-purple);
    border: 1px solid rgba(92, 45, 145, 0.25);
    font-weight: 600;
}

.badge-alnasar-cyan {
    background-color: var(--an-cyan-subtle);
    color: var(--an-cyan-dark);
    border: 1px solid rgba(0, 174, 239, 0.25);
    font-weight: 600;
}

/* ════ Form Controls ════ */
.form-control:focus,
.form-select:focus {
    border-color: var(--an-green) !important;
    box-shadow: 0 0 0 0.2rem var(--an-green-glow) !important;
}

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

/* ════ Cards & Panels ════ */
.card {
    border: 1px solid var(--an-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03) !important;
}

/* ════ Pagination ════ */
.page-item.active .page-link {
    background-color: var(--an-green) !important;
    border-color: var(--an-green) !important;
}

/* ════ Links ════ */
a {
    color: var(--an-green);
}
a:hover {
    color: var(--an-green-dark);
}