/* =========================================================
   وصلة – Shared stylesheet
   Used by: dashboard (index.html) and the login page (login.html)
   ========================================================= */
  :root{
    --brand-950:#023047;   /* active nav bg */
    --brand-800:#0077B6;   /* sidebar / primary brand color (solid, no gradient) */
    --brand-700:#0096C7;   /* hover shade */
    --brand-100:#E3F2FB;   /* light tint for icon chips */
    --amber:#F4A425;
    --amber-dark:#c9860f;

    --ink:#1e2b30;
    --muted:#8a97a0;
    --bg:#f2f4f7;
    --card-border:#e7ebee;
    --green:#1fae63;
    --green-soft:#e7f9ef;
    --red:#e34d4d;
    --red-soft:#fdeaea;
  }

  *{ font-family: "Tajawal", sans-serif; }

  body{
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
  }

  /* ===== Layout ===== */
  .app-shell{
    display:flex;
    min-height:100vh;
  }

  /* ===== Sidebar (solid color, no gradient) ===== */
  .sidebar{
    width: 250px;
    flex-shrink:0;
    background: var(--brand-800);
    color:#d7ecf7;
    display:flex;
    flex-direction:column;
    padding: 18px 14px;
    overflow:hidden;
    transition: width .25s ease, padding .25s ease;
  }
  .sidebar.collapsed{
    width:0;
    padding-inline:0;
    border:0;
  }
  .sidebar > *{ width:222px; } /* keep inner content from reflowing while collapsing */

  .sidebar-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding: 10px 0 22px;
    border-bottom: 1px solid rgba(255,255,255,.18);
    margin-bottom: 14px;
  }
  .sidebar-brand .brand-icon{
    font-size:2rem;
    color:#8fe0ff;
  }
  .sidebar-brand .brand-name{
    font-weight:800;
    font-size: 1.35rem;
    color:#fff;
    letter-spacing: .5px;
  }
  .sidebar-brand small{
    display:block;
    font-size:.62rem;
    color:#bfe4f5;
    text-align:center;
    margin-top:-4px;
  }
  .sidebar-label{
    text-align:center;
    font-size:.72rem;
    color:#bfe4f5;
    margin-bottom:10px;
  }
  .nav-scroll{
    flex:1;
    overflow-y:auto;
  }
  .side-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 10px 14px;
    border-radius: 10px;
    color:#e2f2fa;
    text-decoration:none;
    font-size:.92rem;
    font-weight:500;
    margin-bottom:4px;
    transition: background .15s ease, color .15s ease;
  }
  .side-link i{ font-size:1.05rem; width:20px; text-align:center; }
  .side-link:hover{
    background: rgba(255,255,255,.12);
    color:#fff;
  }
  .side-link.active{
    background: var(--brand-950);
    color:#fff;
    border-inline-end: 3px solid #8fe0ff;
    box-shadow: 0 4px 10px rgba(2,48,71,.35);
  }
  .sidebar-divider{
    height:1px;
    background: rgba(255,255,255,.22);
    margin: 8px 4px 10px;
  }
  .sidebar-footer{
    margin-top:10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.18);
  }
  .logout-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    text-align:center;
    background: rgba(255,255,255,.12);
    color:#fff;
    border:1px solid rgba(255,255,255,.3);
    padding:10px;
    border-radius:10px;
    font-weight:700;
    font-size:.85rem;
  }
  .logout-btn:hover{ background: rgba(255,255,255,.2); color:#fff; }

  /* ===== Main ===== */
  .main{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
  }

  /* Topbar: rightmost -> sidebar toggle icon, then the action buttons.
     Leftmost -> notifications + logged-in user. */
  .topbar{
    background:#fff;
    border-bottom:1px solid var(--card-border);
    padding: 12px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }
  .topbar .actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .btn-outline-soft{
    border:1px solid #d7dee3;
    color:#4a5a62;
    background:#fff;
    font-weight:600;
    font-size:.85rem;
  }
  .btn-outline-soft:hover{ background:#f5f7f9; color:#1e2b30;}
  .btn-brand{
    background: var(--brand-800);
    border-color: var(--brand-800);
    color:#fff;
    font-weight:700;
    font-size:.85rem;
  }
  .btn-brand:hover{ background:#00618f; border-color:#00618f; color:#fff;}

  .sidebar-toggle-btn{
    width:40px;height:40px;
    border-radius:10px;
    background:#f4f6f8;
    border:none;
    color:#4a5a62;
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;
    flex-shrink:0;
  }
  .sidebar-toggle-btn:hover{ background:#e9edf0; color:var(--brand-800); }

  .user-chip{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .user-chip img{
    width:42px;height:42px;border-radius:50%;object-fit:cover;
    border:2px solid #eef2f4;
  }
  .user-chip .name{ font-weight:700; font-size:.9rem; margin-bottom:0;}
  .user-chip .role{ font-size:.75rem; color:var(--muted); margin-bottom:0;}
  .bell-btn{
    position:relative;
    width:40px;height:40px;
    border-radius:50%;
    background:#f4f6f8;
    border:none;
    display:flex;align-items:center;justify-content:center;
    color:#5b6b72;
  }
  .bell-btn .dot{
    position:absolute; top:8px; inset-inline-start:10px;
    width:8px;height:8px;background:var(--red); border-radius:50%;
    border:1.5px solid #fff;
  }

  /* Content */
  .content{
    padding: 22px 24px 40px;
    flex:1;
  }
  .page-title{
    font-weight:800;
    font-size:1.35rem;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .page-title i{ color:var(--brand-800); font-size:1.2rem; }

  /* Stat cards */
  .stat-card{
    background:#fff;
    border:1px solid var(--card-border);
    border-radius:14px;
    padding: 14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    height:100%;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .stat-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,40,45,.06); }
  .stat-card.active-card{
    border-color: var(--brand-800);
    box-shadow: 0 0 0 3px rgba(0,119,182,.14);
  }
  .stat-card .num{ font-weight:800; font-size:1.35rem; }
  .stat-card .label{ font-size:.78rem; color:var(--muted); font-weight:600; }
  .stat-icon{
    width:42px;height:42px;
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:1.15rem;
    flex-shrink:0;
  }
  .icon-admin{ background:#fdeaf7; color:#d94fb0;}
  .icon-nurse{ background:#e6f6ff; color:#20a4e0;}
  .icon-lab{ background:#fff4e0; color:#e5a020;}
  .icon-pharma{ background:#fff9df; color:#d8b400;}
  .icon-doctor{ background:#e6f9ee; color:#1fae63;}
  .icon-staff{ background: var(--brand-100); color: var(--brand-800);}

  /* Filter bar */
  .filter-card{
    background:#fff;
    border:1px solid var(--card-border);
    border-radius:14px;
    padding:16px;
    margin: 20px 0 16px;
  }
  .search-row{ display:flex; gap:10px; align-items:center; }
  .search-input-wrap{ position:relative; flex:1; }
  .search-input-wrap input{
    padding-inline-end:40px;
    border-radius:10px;
    border:1px solid #dfe5e9;
    height:44px;
  }
  .search-input-wrap i{
    position:absolute; inset-inline-end:14px; top:50%; transform:translateY(-50%);
    color:var(--muted);
  }
  .filter-toggle-btn{
    width:44px;height:44px;
    border-radius:10px;
    background: var(--brand-800);
    border:none;
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .filters-row{
    display:flex;
    gap:10px;
    margin-top:14px;
    flex-wrap:wrap;
  }
  .filters-row .form-select{
    border-radius:10px;
    border:1px solid #dfe5e9;
    font-size:.85rem;
    color:#5b6b72;
    min-width:130px;
    flex:1;
  }
  .filters-row .form-select:focus, .search-input-wrap input:focus{
    border-color: var(--brand-700);
    box-shadow: 0 0 0 .2rem rgba(0,119,182,.15);
  }

  /* Table */
  .table-card{
    background:#fff;
    border:1px solid var(--card-border);
    border-radius:14px;
    overflow:hidden;
  }
  table.staff-table{ margin-bottom:0; }
  table.staff-table thead th{
    background:#f8fafb;
    color:#5b6b72;
    font-weight:700;
    font-size:.82rem;
    border-bottom:1px solid var(--card-border);
    padding: 14px 12px;
    white-space:nowrap;
  }
  table.staff-table tbody td{
    padding: 10px 12px;
    vertical-align:middle;
    font-size:.86rem;
    border-bottom:1px solid #f1f3f5;
    white-space:nowrap;
  }
  table.staff-table tbody tr:hover{ background:#fafcfd; }

  .emp-cell{ display:flex; align-items:center; gap:10px; }
  .emp-cell img{
    width:36px;height:36px;border-radius:50%;object-fit:cover;
  }
  .emp-cell .emp-name{ font-weight:700; font-size:.86rem; }

  .status-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding: 4px 12px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
  }
  .status-pill.active{ background:var(--green-soft); color:var(--green); }
  .status-pill.inactive{ background:var(--red-soft); color:var(--red); }
  .status-pill.pending{ background:#fff4e0; color:#e5a020; }
  .status-pill.failed{ background:var(--red-soft); color:var(--red); }
  .status-pill.suspended{ background:var(--red-soft); color:var(--red); }
  .status-pill .dot{ width:6px;height:6px;border-radius:50%; background:currentColor; }

  .action-icons{ display:flex; gap:6px; }
  .action-icon{
    width:30px;height:30px;
    border-radius:8px;
    border:none;
    display:flex;align-items:center;justify-content:center;
    font-size:.85rem;
  }
  .action-icon.delete{ background:#fdeaea; color:var(--red); }
  .action-icon.edit{ background:#fff4e0; color:#e5a020; }
  .action-icon.add{ background:#e7f9ef; color:var(--green); }
  .action-icon.view{ background: var(--brand-100); color: var(--brand-800); }
  .action-icon.more{ background:#f4f6f8; color:#5b6b72; }

  .btn-view-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 14px;
    border-radius:8px;
    border:none;
    background: var(--brand-100);
    color: var(--brand-800);
    font-size:.8rem;
    font-weight:700;
  }
  .btn-view-pill:hover{ background:#d3e9f7; color:var(--brand-800); }

  /* Pagination footer */
  .table-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    padding: 14px 16px;
    border-top:1px solid var(--card-border);
  }
  .per-page-select{
    width:auto;
    border-radius:8px;
    border:1px solid #dfe5e9;
    font-size:.82rem;
  }
  .page-btn{
    min-width:34px;height:34px;
    border-radius:8px;
    border:1px solid #dfe5e9;
    background:#fff;
    color:#5b6b72;
    font-size:.82rem;
    font-weight:600;
  }
  .page-btn.active{
    background: var(--brand-800);
    border-color: var(--brand-800);
    color:#fff;
  }
  .goto-btn{
    background: var(--brand-800);
    border:none;
    color:#fff;
    font-weight:700;
    border-radius:8px;
    font-size:.82rem;
  }
  .goto-btn:hover{ background:#00618f; color:#fff; }

  @media (max-width: 767px){
    .content{ padding:16px; }
    .sidebar{ position:fixed; inset-inline-end:0; top:0; bottom:0; z-index:1050; }
  }

/* =========================================================
   Auth / Login page
   Split layout: brand panel (right, under dir="rtl") + form (left)
   Reuses the same brand variables/tokens as the dashboard above.
   ========================================================= */

.auth-shell{
  min-height:100vh;
  display:flex;
}

/* Brand panel */
.auth-brand{
  width: 46%;
  max-width:560px;
  flex-shrink:0;
  background: var(--brand-800);
  color:#eaf6fd;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 48px 44px;
  position:relative;
  overflow:hidden;
}
.auth-brand::before{
  content:"";
  position:absolute;
  width:420px;height:420px;
  border-radius:50%;
  background: rgba(255,255,255,.06);
  inset-inline-end:-140px;
  top:-160px;
}
.auth-brand::after{
  content:"";
  position:absolute;
  width:300px;height:300px;
  border-radius:50%;
  background: rgba(2,48,71,.35);
  inset-inline-start:-120px;
  bottom:-120px;
}
.auth-brand-top{ position:relative; z-index:1; }
.auth-brand-mid{ position:relative; z-index:1; }
.auth-brand-bottom{ position:relative; z-index:1; }

.auth-logo{
  display:flex;
  align-items:center;
  gap:10px;
}
.auth-logo i{ font-size:2.1rem; color:#8fe0ff; }
.auth-logo span{
  font-weight:800;
  font-size:1.5rem;
  color:#fff;
  letter-spacing:.5px;
}

.auth-headline{
  font-weight:800;
  font-size:1.9rem;
  line-height:1.5;
  color:#fff;
  margin: 28px 0 14px;
}
.auth-sub{
  font-size:.95rem;
  color:#cdeaf8;
  line-height:1.9;
  max-width:400px;
}

.auth-feature-list{
  list-style:none;
  padding:0;
  margin: 30px 0 0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.auth-feature-list li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.9rem;
  color:#eaf6fd;
}
.auth-feature-list .feature-icon{
  width:36px;height:36px;
  border-radius:10px;
  background: rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  color:#8fe0ff;
  font-size:1.05rem;
  flex-shrink:0;
}

.auth-brand-bottom{
  font-size:.78rem;
  color:#bfe4f5;
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:16px;
}

/* Form side */
.auth-form-side{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 32px 24px;
  background:#f8fafb;
}
.auth-form-card{
  width:100%;
  max-width:400px;
}
.auth-form-title{
  font-weight:800;
  font-size:1.55rem;
  color:var(--ink);
  margin-bottom:6px;
}
.auth-form-hint{
  color:var(--muted);
  font-size:.88rem;
  margin-bottom:28px;
}

.auth-label{
  font-weight:700;
  font-size:.85rem;
  color:var(--ink);
  margin-bottom:6px;
  display:block;
}
.auth-input-wrap{ position:relative; margin-bottom:18px; }
.auth-input-wrap .form-control{
  height:48px;
  border-radius:10px;
  border:1px solid #dfe5e9;
  padding-inline-start:44px;
  padding-inline-end:16px;
  font-size:.92rem;
}
.auth-input-wrap .form-control:focus{
  border-color: var(--brand-700);
  box-shadow: 0 0 0 .2rem rgba(0,119,182,.15);
}
.auth-input-wrap .field-icon{
  position:absolute;
  inset-inline-start:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:1.05rem;
}
.auth-input-wrap .toggle-visibility{
  position:absolute;
  inset-inline-end:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  background:none;
  border:none;
  font-size:1.05rem;
  padding:0;
  cursor:pointer;
}
.auth-input-wrap .toggle-visibility:hover{ color:var(--brand-800); }

.auth-row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
  font-size:.85rem;
}
.auth-row-between .form-check-label{ color:#5b6b72; }
.auth-row-between a{
  color: var(--brand-800);
  text-decoration:none;
  font-weight:600;
}
.auth-row-between a:hover{ text-decoration:underline; }

.btn-auth-submit{
  width:100%;
  height:48px;
  border-radius:10px;
  background: var(--brand-800);
  border:none;
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  transition: background .15s ease;
}
.btn-auth-submit:hover{ background:#00618f; color:#fff; }

.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 24px 0;
  color:var(--muted);
  font-size:.8rem;
}
.auth-divider::before, .auth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background: var(--card-border);
}

.auth-footer-note{
  text-align:center;
  font-size:.86rem;
  color:var(--muted);
  margin-top:6px;
}
.auth-footer-note a{
  color: var(--brand-800);
  font-weight:700;
  text-decoration:none;
}
.auth-footer-note a:hover{ text-decoration:underline; }

.auth-error{
  display:none;
  align-items:center;
  gap:8px;
  background: var(--red-soft);
  color: var(--red);
  border-radius:10px;
  padding:10px 14px;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:18px;
}
.auth-error.show{ display:flex; }

@media (max-width: 900px){
  .auth-brand{ display:none; }
  .auth-form-side{ width:100%; }
}

/* =========================================================
   Shared page header (title + page-specific action buttons)
   Used at the top of the content area on every inner page.
   ========================================================= */
.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
}
.page-header .back-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:1.35rem;
}
.page-header .back-title i{ color: var(--brand-800); font-size:1.2rem; }
.page-header .back-title a{ color: inherit; text-decoration:none; display:flex; align-items:center; }
.page-header .actions{ display:flex; gap:10px; flex-wrap:wrap; }

.btn-outline-danger-soft{
  border:1px solid #f3c9c9;
  color: var(--red);
  background:#fff;
  font-weight:600;
  font-size:.85rem;
}
.btn-outline-danger-soft:hover{ background: var(--red-soft); color: var(--red); }

/* =========================================================
   Permissions page: employee info card
   ========================================================= */
.info-card{
  background:#fff;
  border:1px solid var(--card-border);
  border-radius:14px;
  padding: 18px;
  margin-bottom:16px;
}
.info-field{ margin-bottom: 16px; }
.info-field .info-label{
  font-size:.78rem;
  font-weight:700;
  color: var(--muted);
  margin-bottom:6px;
}
.info-field .info-value{
  border:1px solid #e3e8eb;
  border-radius:10px;
  padding: 10px 14px;
  font-size:.88rem;
  font-weight:600;
  color: var(--ink);
  background:#fafbfc;
}
.info-field .info-value.status-pill{
  display:inline-flex;
  background:none;
  border:none;
  padding:0;
}

/* =========================================================
   Permissions page: permissions table card
   ========================================================= */
.perm-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 18px;
  border-bottom:1px solid var(--card-border);
  flex-wrap:wrap;
  gap:10px;
}
.perm-card-header .title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:1rem;
}
.perm-card-header .title i{ color: var(--brand-800); font-size:1.05rem; }
.perm-settings-btn{
  width:34px;height:34px;
  border-radius:9px;
  border:1px solid var(--card-border);
  background:#fff;
  color: var(--brand-800);
  display:flex;align-items:center;justify-content:center;
}
.perm-settings-btn:hover{ background: var(--brand-100); }

.perm-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding: 14px 18px;
  border-bottom:1px solid var(--card-border);
}
.perm-toolbar-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--card-border);
  background:#fff;
  border-radius:9px;
  padding: 7px 12px;
  font-size:.8rem;
  font-weight:600;
  color:#5b6b72;
}
.perm-toolbar-btn:hover{ filter:brightness(.97); }
.perm-toolbar-btn i{ font-size:.95rem; }
.perm-toolbar-btn.tb-all{ color: var(--brand-800); border-color:#bfe0f2; background: var(--brand-100); }
.perm-toolbar-btn.tb-view{ color: var(--brand-800); }
.perm-toolbar-btn.tb-add{ color: var(--green); }
.perm-toolbar-btn.tb-delete{ color: var(--red); }
.perm-toolbar-btn.tb-edit{ color:#e5a020; }
.perm-toolbar-btn.tb-approve{ color:#7c5cff; }
.perm-toolbar-btn.tb-hide{ color: var(--muted); }

.action-icon.hide{ background:#eef1f3; color: var(--muted); }
.action-icon.approve{ background:#efe9ff; color:#7c5cff; }

.dept-icon-cell{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.dept-icon-chip{
  width:34px;height:34px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
  flex-shrink:0;
}
.chevron-btn{
  border:none;
  background:none;
  color: var(--muted);
  font-size:1rem;
  transition: transform .15s ease;
}
.chevron-btn.rotated{ transform: rotate(180deg); }

.dept-name-cell{ font-weight:700; font-size:.86rem; }
.dept-count{ font-weight:700; color:#5b6b72; }

/* =========================================================
   Permissions page: empty state (shown before any permission
   has been added) and the "Add permission" modal checklist.
   ========================================================= */
.perm-empty-state{
  text-align:center;
  padding: 48px 20px;
  color: var(--muted);
}
.perm-empty-state i{
  font-size:2.2rem;
  color: var(--brand-800);
  background: var(--brand-100);
  width:64px;height:64px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
}
.perm-empty-state p{
  font-weight:700;
  color: var(--ink);
  margin-bottom:4px;
  font-size:.95rem;
}
.perm-empty-state span{ font-size:.82rem; }

.dept-icon-chip.sm{
  width:28px;height:28px;
  border-radius:8px;
  font-size:.85rem;
}

.permission-select-all{
  padding-bottom:10px;
  margin-bottom:8px;
  border-bottom:1px solid var(--card-border);
  font-weight:700;
  font-size:.88rem;
}

.permission-list{
  max-height:360px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.permission-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-radius:10px;
  cursor:pointer;
  margin-bottom:0;
}
.permission-item:hover{ background:#f6f9fb; }
.permission-item-main{
  display:flex;
  align-items:center;
  gap:12px;
}
.permission-item-name{
  font-weight:600;
  font-size:.88rem;
  color: var(--ink);
}

/* =========================================================
   Dashboard page (dashboard.php)
   KPI cards, charts, activity feed, apps list, world map.
   ========================================================= */

.dash-card{
  background:#fff;
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:18px;
  height:100%;
}
.dash-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:16px;
}
.dash-card-header .title{
  font-weight:800;
  font-size:.98rem;
  color:var(--ink);
}
.dash-card-header .view-all{
  font-size:.8rem;
  font-weight:700;
  color:var(--brand-800);
  text-decoration:none;
}
.dash-card-header .view-all:hover{ text-decoration:underline; }
.dash-card-header .period-select{
  width:auto;
  border-radius:8px;
  border:1px solid #dfe5e9;
  font-size:.8rem;
  color:#5b6b72;
  padding:6px 30px 6px 10px;
}

/* KPI cards (row 1) */
.kpi-card{
  background:#fff;
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:16px 18px;
  height:100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.kpi-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,40,45,.06); }
.kpi-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}
.kpi-icon{
  width:44px;height:44px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;
  flex-shrink:0;
}
.kpi-icon.c-blue{ background:#e3f2fb; color:#2596e0; }
.kpi-icon.c-purple{ background:#efe9ff; color:#7c5cff; }
.kpi-icon.c-green{ background:var(--green-soft); color:var(--green); }
.kpi-icon.c-teal{ background:#e0f5f5; color:#0d9488; }
.kpi-icon.c-amber{ background:#fff4e0; color:#e5a020; }
.kpi-icon.c-cyan{ background:#e6f9ff; color:#0aa5c2; }
.kpi-icon.c-red{ background:var(--red-soft); color:var(--red); }
.kpi-value{ font-weight:800; font-size:1.5rem; line-height:1.2; }
.kpi-label{ font-size:.8rem; color:var(--muted); font-weight:600; margin-top:2px; }
.kpi-trend{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-top:12px;
  border-top:1px solid #f1f3f5;
  font-size:.78rem;
}
.kpi-trend .change{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-weight:700;
}
.kpi-trend .change.up{ color:var(--green); }
.kpi-trend .change.down{ color:var(--red); }
.kpi-trend .period{ color:var(--muted); }
.kpi-trend .chev{ color:var(--muted); margin-inline-start:auto; }

/* Bookings overview card */
.overview-figure{ display:flex; align-items:baseline; gap:10px; margin-bottom:2px; }
.overview-figure .big-num{ font-weight:800; font-size:1.7rem; }
.overview-figure-label{ font-size:.8rem; color:var(--muted); font-weight:600; margin-bottom:10px; }
.chip-change{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background: var(--green-soft);
  color: var(--green);
  font-weight:700;
  font-size:.76rem;
  padding:3px 9px;
  border-radius:999px;
}

/* Donut card */
.donut-wrap{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center; }
.donut-canvas-box{ position:relative; width:150px; height:150px; flex-shrink:0; }
.donut-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  pointer-events:none;
}
.donut-center .num{ font-weight:800; font-size:1.15rem; }
.donut-center .lbl{ font-size:.7rem; color:var(--muted); }
.chart-legend{ display:flex; flex-direction:column; gap:10px; min-width:150px; }
.chart-legend-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.82rem; }
.chart-legend-item .dot-label{ display:flex; align-items:center; gap:8px; color:#5b6b72; font-weight:600; }
.chart-legend-item .legend-dot{ width:9px;height:9px;border-radius:50%; flex-shrink:0; }
.chart-legend-item .val{ font-weight:800; }

/* Activity feed */
.activity-list{ display:flex; flex-direction:column; gap:16px; }
.activity-item{ display:flex; align-items:flex-start; gap:12px; }
.activity-icon{
  width:36px;height:36px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
  flex-shrink:0;
}
.activity-icon.c-green{ background:var(--green-soft); color:var(--green); }
.activity-icon.c-blue{ background:#e3f2fb; color:#2596e0; }
.activity-icon.c-amber{ background:#fff4e0; color:#e5a020; }
.activity-icon.c-purple{ background:#efe9ff; color:#7c5cff; }
.activity-body{ flex:1; min-width:0; }
.activity-body .a-title{ font-weight:700; font-size:.85rem; }
.activity-body .a-sub{ font-size:.78rem; color:var(--muted); }
.activity-time{ font-size:.74rem; color:var(--muted); white-space:nowrap; }

/* Apps list card */
.app-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #f1f3f5;
}
.app-row:last-child{ border-bottom:none; padding-bottom:0; }
.app-icon{
  width:38px;height:38px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;
  flex-shrink:0;
}
.app-icon.android{ background:#e7f9ef; color:#3ddc84; }
.app-icon.ios{ background:#eef1f3; color:#1e2b30; }
.app-icon.web{ background:#e3f2fb; color:#2596e0; }
.app-icon.desktop{ background:#efe9ff; color:#7c5cff; }
.app-name-main{ font-weight:800; font-size:.86rem; }
.app-name-sub{ font-size:.76rem; color:var(--muted); }
.app-meta{ text-align:start; margin-inline-start:auto; }
.app-meta .app-users{ font-size:.74rem; color:var(--muted); margin-top:3px; }
.app-version{ font-size:.72rem; color:var(--muted); font-weight:600; }

/* Metric tiles (2x2 grid) */
.metric-tile{
  background:#fafbfc;
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:14px 10px;
  text-align:center;
}
.metric-tile i{ font-size:1.2rem; color:var(--brand-800); margin-bottom:8px; display:inline-block; }
.metric-tile .m-val{ font-weight:800; font-size:1.05rem; }
.metric-tile .m-lbl{ font-size:.72rem; color:var(--muted); margin-top:2px; }

/* Country distribution list */
.country-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.country-row:last-child{ margin-bottom:0; }
.country-flag{ font-size:1.2rem; line-height:1; flex-shrink:0; }
.country-row .country-name{ font-size:.82rem; font-weight:600; white-space:nowrap; }
.country-row .country-bar{
  flex:1;
  height:6px;
  border-radius:999px;
  background:#eef1f3;
  overflow:hidden;
}
.country-row .country-bar-fill{
  height:100%;
  border-radius:999px;
  background: var(--brand-800);
}
.country-row .country-pct{ font-size:.8rem; font-weight:800; width:44px; text-align:end; flex-shrink:0; }

/* World map card */
.worldmap-card .dash-card-header{ margin-bottom:6px; }
.worldmap-body{ display:flex; align-items:stretch; gap:10px; }
.worldmap-legend{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:.68rem;
  color:var(--muted);
  padding:6px 0;
  flex-shrink:0;
}
.worldmap-legend .gradient-bar{
  width:8px;
  flex:1;
  border-radius:999px;
  background: linear-gradient(to bottom, var(--brand-800), #cfe9f5);
  min-height:120px;
}
.worldmap-canvas-wrap{ flex:1; min-width:0; min-height:220px; }
.jvm-tooltip{ font-family:"Tajawal",sans-serif; }

@media (max-width: 991px){
  .worldmap-body{ flex-direction:column; }
  .worldmap-legend{ flex-direction:row; }
  .worldmap-legend .gradient-bar{ width:100%; height:8px; min-height:0; }
}

/* =========================================================
   Topbar: messages icon + user-chip dropdown (logout menu)
   ========================================================= */
.user-chip-btn{
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
}
.user-chip-btn:hover .name{ color: var(--brand-800); }
.user-chip-caret{
  font-size:.7rem;
  color: var(--muted);
  margin-inline-start:2px;
}
.user-dropdown-menu{
  border:1px solid var(--card-border);
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(20,40,45,.12);
  padding:8px;
  min-width:200px;
  margin-top:10px !important;
}
.user-dropdown-menu .dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:8px;
  padding:9px 12px;
  font-size:.88rem;
  font-weight:600;
  color:#4a5a62;
}
.user-dropdown-menu .dropdown-item i{ font-size:1rem; width:18px; text-align:center; color:var(--muted); }
.user-dropdown-menu .dropdown-item:hover{ background:#f5f7f9; color:var(--ink); }
.user-dropdown-menu .dropdown-item.text-danger{ color: var(--red) !important; }
.user-dropdown-menu .dropdown-item.text-danger i{ color: var(--red); }
.user-dropdown-menu .dropdown-item.text-danger:hover{ background: var(--red-soft); }
.user-dropdown-menu .dropdown-divider{ margin:6px 4px; }

/* ===== Payment gateways page ===== */
.section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 24px 0 14px;
}
.section-header .title{
  font-weight:800;
  font-size:1.05rem;
}
.section-header .section-icon-btn{
  width:34px;height:34px;
  border-radius:9px;
  background:#fff;
  border:1px solid var(--card-border);
  color:#8a97a0;
  display:flex;align-items:center;justify-content:center;
}

.gateway-card{
  background:#fff;
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:16px;
  height:100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.gateway-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,40,45,.06); }
.gateway-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:14px;
}
.gateway-icon-box{
  width:46px;height:46px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  flex-shrink:0;
}
.gateway-name{
  font-weight:800;
  font-size:.95rem;
  margin: 2px 0 12px;
}
.gateway-stats{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}
.gateway-stat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.8rem;
}
.gateway-stat .g-label{ color:var(--muted); font-weight:600; }
.gateway-stat .g-value{ font-weight:800; }
.gateway-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:12px;
  border-top:1px solid #f1f3f5;
}
.gateway-manage-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:8px;
  border:1px solid #d7dee3;
  background:#fff;
  color:#4a5a62;
  font-size:.8rem;
  font-weight:700;
}
.gateway-manage-btn:hover{ background:#f5f7f9; color:#1e2b30; }

/* Brand-colored switch (used for gateway on/off + similar toggles) */
.form-switch .form-check-input{
  width:2.4em;
  height:1.3em;
  cursor:pointer;
}
.form-switch .form-check-input:checked{
  background-color: var(--brand-800);
  border-color: var(--brand-800);
}
.form-switch .form-check-input:focus{
  box-shadow: 0 0 0 .2rem rgba(0,119,182,.15);
  border-color: var(--brand-700);
}