/* ==========================================================================
   Clinic Dashboard — Design Tokens
   ========================================================================== */

:root {

    /* ============================================================
       الألوان الأساسية — Logo Color
       ============================================================ */

    --clr-primary: #06BBCC;
    --clr-primary-dark: #058A98;
    --clr-primary-light: #E3F9FB;

    /* ============================================================
       الخلفيات والأسطح
       ============================================================ */

    --clr-bg: #F5FAFB;
    --clr-surface: #FFFFFF;

    /* Sidebar */
    /* --clr-sidebar: #063E45; */
    --clr-sidebar: #058A98;
    --clr-sidebar-hover: #06BBCC;

    /* ============================================================
       النصوص
       ============================================================ */

    --clr-text: #172326;
    --clr-text-muted: #68777A;
    --clr-text-on-dark: #EAFBFC;

    /* ============================================================
       ألوان دلالية
       ============================================================ */

    --clr-accent: #F0A83A;
    --clr-accent-light: #FFF3DE;

    --clr-danger: #D9534F;
    --clr-danger-light: #FBE9E8;

    --clr-success: #36A269;
    --clr-success-light: #E6F5ED;

    /* ============================================================
       Borders
       ============================================================ */

    --clr-border: #DDEBED;

    /* ============================================================
       المقاييس
       ============================================================ */

    --sidebar-w: 272px;
    --sidebar-w-collapsed: 84px;

    --header-h: 72px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;

    /* Shadow مبني على لون اللوجو */
    --shadow-soft: 0 8px 24px rgba(6, 187, 204, 0.10);

    --transition: 0.25s ease;
}


* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    font-family: 'Cairo', sans-serif;
    background: var(--clr-bg);
    color: var(--clr-text);
    font-size: 15px;
    line-height: 1.6;
}

a {
    text-decoration: none;
}


/* ==========================================================================
   Loading Overlay
   ========================================================================== */

.loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--clr-bg);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition);
}

.loading-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--clr-primary-light);
    border-top-color: var(--clr-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================================
   App Shell
   ========================================================================== */

.app-wrapper {
    display: flex;
    min-height: 100vh;
}

.main-wrapper {
    flex: 1;
    margin-right: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-right var(--transition);
}

.app-wrapper.is-collapsed .main-wrapper {
    margin-right: var(--sidebar-w-collapsed);
}

.content-wrapper {
    padding: 28px 32px 48px;
    flex: 1;
}


/* عنصر ظهور واحد منظّم عند تحميل الصفحة */

.page-enter {
    animation: page-enter 0.35s ease both;
}

@keyframes page-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-enter {
        animation: none;
    }
}


/* ==========================================================================
   Page Head
   ========================================================================== */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.page-head__title {
    font-size: 26px;
    font-weight: 700;
    color: var(--clr-text);
    margin: 0 0 4px;
}

.page-head__subtitle {
    color: var(--clr-text-muted);
    font-size: 14px;
    margin: 0;
}

.breadcrumb-trail {
    /* display: flex; */
    gap: 6px;
    font-size: 13px;
    color: var(--clr-text-muted);
    margin-bottom: 6px;
}

.breadcrumb-trail a {
    color: var(--clr-text-muted);
}

.breadcrumb-trail a:hover {
    color: var(--clr-primary);
}

.breadcrumb-trail span:last-child {
    color: var(--clr-primary);
    font-weight: 600;
}


/* ==========================================================================
   الأزرار
   ========================================================================== */

.btn-clinic {
    background: var(--clr-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    font-weight: 600;
    font-size: 14px;
    transition: background var(--transition), transform var(--transition);
}

.btn-clinic:hover {
    background: var(--clr-primary-dark);
    color: #fff;
}

.btn-clinic:active {
    transform: translateY(1px);
}

.btn-clinic-outline {
    background: transparent;
    color: var(--clr-primary);
    border: 1.5px solid var(--clr-primary);
    border-radius: var(--radius-sm);
    padding: 9px 20px;
    font-weight: 600;
    font-size: 14px;
    transition: all var(--transition);
}

.btn-clinic-outline:hover {
    background: var(--clr-primary-light);
    color: var(--clr-primary-dark);
}


/* ==========================================================================
   بطاقات المحتوى العامة
   ========================================================================== */

.panel {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 22px;
}

.panel__title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 16px;
}


/* ==========================================================================
   Data Table wrapper
   ========================================================================== */

.table-panel {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 20px;
    overflow-x: auto;
}

table.dataTable thead th {
    color: var(--clr-text-muted);
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid var(--clr-border) !important;
}

table.dataTable tbody td {
    font-size: 14px;
    vertical-align: middle;
}


/* ==========================================================================
   Status Badges
   ========================================================================== */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}

.status-badge--success {
    background: var(--clr-success-light);
    color: var(--clr-success);
}

.status-badge--danger {
    background: var(--clr-danger-light);
    color: var(--clr-danger);
}

.status-badge--accent {
    background: var(--clr-accent-light);
    color: #9C6A16;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991.98px) {

    .main-wrapper {
        margin-right: 0;
    }

    .app-wrapper.is-collapsed .main-wrapper {
        margin-right: 0;
    }

    .content-wrapper {
        padding: 20px 16px 40px;
    }
}