/*
  Excel Care Medical Center CRM - Design System
  ------------------------------------------------
  Single source of truth for brand tokens and shared components. Replaces the
  color/layout rules previously split across excelcare_global_responsive_v55_phase5.css,
  xcelcare-premium-ui.css, and the inline <style> block inside includes/sidebar.php,
  which independently defined slightly different values for the same things
  (sidebar width, body padding, primary blue) and fought each other via !important.
  This file is loaded last in <head> and is the one that should win visually.
  It does not touch data, sessions, tokens, permissions, or any PHP logic.
*/

@import url('https://fonts.googleapis.com/css2?family=Changa:wght@500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root{
  /* ---- Brand colors (Excel Care visual identity) ---- */
  --color-primary: #1283C2;
  --color-primary-dark: #0E6A9E;
  --color-secondary: #3AC4E3;
  --color-navy: #163246;
  --color-white: #FFFFFF;
  --color-bg: #F4F7F9;
  --color-surface: #FFFFFF;
  --color-border: #D9E2E8;
  --color-border-strong: #C3D0D8;
  --color-text-primary: #163246;
  --color-text-secondary: #607583;
  --color-text-muted: #8CA0AC;

  /* ---- Semantic colors ---- */
  --color-success: #1A9C6B;
  --color-success-bg: #E4F6EE;
  --color-warning: #C77B12;
  --color-warning-bg: #FBF0DF;
  --color-error: #D64545;
  --color-error-bg: #FBE9E9;
  --color-info: #1283C2;
  --color-info-bg: #E7F4FA;

  /* ---- Typography ---- */
  --font-heading: 'Changa', 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Changa', Tahoma, Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14.5px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 32px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Shape / elevation ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(22,50,70,.06);
  --shadow-md: 0 10px 26px rgba(22,50,70,.08);
  --shadow-lg: 0 20px 45px rgba(22,50,70,.12);

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- Control sizing ---- */
  --input-height: 44px;
  --button-height: 44px;
  --button-height-sm: 36px;
  --table-row-py: 12px;

  /* ---- Layout ---- */
  --sidebar-width: 264px;
  --header-height: 64px;

  /* ---- Z-index scale ---- */
  --z-sidebar: 1000;
  --z-sidebar-toggle: 1200;
  --z-dropdown: 1400;
  --z-modal-backdrop: 1600;
  --z-modal: 1700;
  --z-toast: 1800;
}

/* ============ Base ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{
  margin:0;
  min-height:100%;
  background:var(--color-bg) !important;
  color:var(--color-text-primary) !important;
  font-family:var(--font-body) !important;
}
body{overflow-x:hidden !important}
h1,h2,h3,h4,.xc-heading{font-family:var(--font-heading);font-weight:var(--fw-bold);color:var(--color-navy)}
a{color:var(--color-primary)}
::selection{background:var(--color-secondary);color:var(--color-navy)}

/* Focus visibility for keyboard navigation (WCAG) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2.5px solid var(--color-secondary);
  outline-offset:2px;
}

/* ============ Layout shell ============ */
.main{
  margin-right:var(--sidebar-width) !important;
  margin-left:0 !important;
  padding:var(--space-6) !important;
  min-height:100vh;
  max-width:100%;
  min-width:0;
}
body:has(.xc-sidebar){background:var(--color-bg) !important;}
@media(max-width:1000px){
  .main{margin-right:0 !important;padding:var(--space-3) !important;padding-bottom:90px !important;}
}

/* ============ Sidebar (single authoritative definition) ============ */
.xc-sidebar{
  position:fixed !important;
  inset-inline-end:0;
  right:0;
  top:0;
  width:var(--sidebar-width) !important;
  height:100vh;
  background:var(--color-surface) !important;
  border-left:1px solid var(--color-border) !important;
  padding:var(--space-5) var(--space-4);
  z-index:var(--z-sidebar);
  overflow-y:auto;
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
}
body{padding-right:0 !important;} /* .main already carries the offset via margin-right */
.xc-brand{display:flex;align-items:center;justify-content:center;padding:var(--space-2) 0 var(--space-5);}
.xc-brand img{max-width:180px;height:auto;display:block;}
.xc-user-card{
  display:flex;gap:var(--space-3);align-items:center;
  background:var(--color-info-bg);border-radius:var(--radius-md);
  padding:var(--space-3);margin-bottom:var(--space-5);
}
.xc-user-card .avatar{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  background:var(--color-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);
}
.xc-user-card strong{display:block;color:var(--color-navy);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.xc-user-card small{display:block;color:var(--color-text-secondary);font-weight:var(--fw-medium);font-size:var(--fs-xs)}
.xc-menu{flex:1 1 auto;overflow-y:auto;}
.xc-menu a{
  display:flex;align-items:center;gap:var(--space-3);
  padding:11px 12px;border-radius:var(--radius-md);
  text-decoration:none;color:var(--color-text-primary);font-weight:var(--fw-medium);
  margin-bottom:2px;position:relative;font-size:var(--fs-sm);
  transition:background-color .15s ease,color .15s ease;
}
.xc-menu a:hover{background:var(--color-info-bg);color:var(--color-primary-dark)}
.xc-menu a.active{background:var(--color-primary);color:#fff}
.xc-menu a.active .xc-icon{color:#fff}
.xc-menu .ico{width:22px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary)}
.xc-menu a.active .ico{color:#fff}
.xc-menu .badge{
  position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%);
  background:var(--color-error);color:#fff;border-radius:var(--radius-pill);
  min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:var(--fw-bold);padding:0 6px;
}
.logout{
  display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  margin-top:var(--space-4);background:var(--color-error-bg);color:var(--color-error);
  border-radius:var(--radius-md);padding:var(--space-3);text-decoration:none;font-weight:var(--fw-semibold);
}
.xc-sidebar-toggle{
  display:none;position:fixed;top:12px;right:12px;z-index:var(--z-sidebar-toggle);
  border:0;background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);
  width:44px;height:44px;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
}
@media(max-width:1000px){
  body{padding-right:0 !important}
  .xc-sidebar-toggle{display:flex}
  .xc-sidebar{transform:translateX(110%);transition:transform .2s ease;width:min(86vw,300px) !important}
  body.xc-sidebar-open .xc-sidebar{transform:translateX(0)}
  body.xc-sidebar-open::after{content:"";position:fixed;inset:0;background:rgba(22,50,70,.35);z-index:calc(var(--z-sidebar) - 1)}
}

/* ============ Topbar / page header ============ */
.topbar{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-6);margin-bottom:var(--space-5);
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
  box-shadow:var(--shadow-sm);flex-wrap:wrap;
}
.topbar h1{margin:0;font-size:var(--fs-xl)}
.topbar p{margin:6px 0 0;color:var(--color-text-secondary);font-weight:var(--fw-medium)}
.admin-chip{
  background:var(--color-info-bg);color:var(--color-primary-dark);border-radius:var(--radius-pill);
  padding:10px 16px;font-weight:var(--fw-semibold);font-size:var(--fs-sm);
}

/* ============ Cards ============ */
.card{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-5);box-shadow:var(--shadow-sm);
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:var(--button-height);padding:0 var(--space-4);border:0;border-radius:var(--radius-md);
  background:var(--color-primary);color:#fff;text-decoration:none;
  font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-sm);
  cursor:pointer;transition:filter .15s ease, transform .05s ease;
}
.btn:hover{filter:brightness(0.94)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;filter:none}
.btn.light,.btn.secondary{background:var(--color-info-bg);color:var(--color-primary-dark)}
.btn.green,.btn.success{background:var(--color-success);color:#fff}
.btn.red,.btn.danger{background:var(--color-error);color:#fff}
.btn.outline{background:transparent;color:var(--color-primary);border:1.5px solid var(--color-primary)}
.btn.sm{height:var(--button-height-sm);padding:0 var(--space-3);font-size:var(--fs-xs)}
.btn .xc-icon{width:18px;height:18px}

/* ============ Status badges (also matches the .xc-status-* classes the
   existing xcelcare-premium-ui.js already auto-tags onto short status text,
   which previously had no matching CSS rule and rendered unstyled) ============ */
.badge-status,.xc-auto-status{
  display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);
  padding:5px 12px;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  background:var(--color-info-bg);color:var(--color-primary-dark);
}
.badge-status.success,.xc-status-success{background:var(--color-success-bg);color:var(--color-success)}
.badge-status.warning,.xc-status-warning{background:var(--color-warning-bg);color:var(--color-warning)}
.badge-status.danger,.xc-status-danger{background:var(--color-error-bg);color:var(--color-error)}
.badge-status.info,.xc-status-info{background:var(--color-info-bg);color:var(--color-primary-dark)}
.badge-status.neutral{background:#EEF2F4;color:var(--color-text-secondary)}

/* ============ Alerts / notices ============ */
.notice,.wa-notice,.xc-alert{border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin:var(--space-3) 0;font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.notice.ok,.wa-notice.ok,.xc-alert.success{background:var(--color-success-bg);color:var(--color-success)}
.notice.err,.wa-notice.err,.xc-alert.error{background:var(--color-error-bg);color:var(--color-error)}
.xc-alert.warning{background:var(--color-warning-bg);color:var(--color-warning)}
.xc-alert.info{background:var(--color-info-bg);color:var(--color-primary-dark)}

/* ============ Forms ============ */
label{font-weight:var(--fw-semibold);color:var(--color-text-primary);font-size:var(--fs-sm)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=time],input[type=tel],input[type=search],select,textarea{
  width:100%;height:var(--input-height);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);
  padding:0 var(--space-3);font-family:var(--font-body);font-size:var(--fs-base);color:var(--color-text-primary);
  background:var(--color-surface);transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{height:auto;min-height:100px;padding:var(--space-3);}
input:focus,select:focus,textarea:focus{
  border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px rgba(18,131,194,.14);
}
input::placeholder,textarea::placeholder{color:var(--color-text-muted)}
.field-required::after{content:" *";color:var(--color-error)}
.field-error{color:var(--color-error);font-size:var(--fs-xs);font-weight:var(--fw-medium);margin-top:4px}

/* ============ Tables ============ */
.table-wrap,.xc-table-wrap,.xc-auto-table-wrap{width:100%;overflow:auto;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th,td{padding:var(--table-row-py) var(--space-3);text-align:right;vertical-align:middle;border-bottom:1px solid var(--color-border)}
th{background:var(--color-info-bg);color:var(--color-primary-dark);font-weight:var(--fw-semibold);position:sticky;top:0;z-index:1}
tbody tr:hover{background:#FAFCFD}
.table-empty,.empty,.wa-empty{text-align:center;color:var(--color-text-secondary);font-weight:var(--fw-medium);padding:var(--space-8) !important}

/* ============ Skeleton / loading states ============ */
.xc-skeleton{position:relative;overflow:hidden;background:#E7ECEF;border-radius:var(--radius-sm)}
.xc-skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:xc-skeleton-sweep 1.3s ease-in-out infinite;
}
@keyframes xc-skeleton-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.xc-spinner{
  width:18px;height:18px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;
  display:inline-block;animation:xc-spin .7s linear infinite;
}
.xc-spinner.dark{border-color:rgba(18,131,194,.25);border-top-color:var(--color-primary)}
@keyframes xc-spin{to{transform:rotate(360deg)}}

/* ============ Icon base ============ */
.xc-icon{width:20px;height:20px;flex:0 0 auto;color:currentColor}

/* ============ Footer ============ */
.xc-footer{
  margin-right:var(--sidebar-width);text-align:center;color:var(--color-text-muted);
  font-size:var(--fs-xs);padding:var(--space-5) var(--space-3);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
}
.xc-footer img{height:34px;width:auto;opacity:.85}
@media(max-width:1000px){.xc-footer{margin-right:0}}

.ltr{direction:ltr;text-align:left}

/* =========================================================
   Excel Care CRM — Desktop Sidebar Layout Fix
   Prevents the fixed sidebar from covering page content.
   ========================================================= */
@media (min-width:1001px){

  body:has(.xc-sidebar) .main,
  .xc-sidebar ~ .main{
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;

    margin-right:var(--sidebar-width) !important;
    margin-left:0 !important;
  }
}