/* ═══════════════════════════════════════════════
   Ocean Pharmacist — Main CSS
   Medical Blue + Navy + Teal | RTL Arabic
═══════════════════════════════════════════════ */

:root {
  --navy:        #0f2453;
  --blue:        #1a3a6b;
  --blue-mid:    #1e4fa0;
  --blue-light:  #3b73d4;
  --teal:        #0e8c7a;
  --teal-light:  #14b39b;
  --white:       #ffffff;
  --gray-50:     #f8fafc;
  --gray-100:    #f1f5f9;
  --gray-200:    #e2e8f0;
  --gray-400:    #94a3b8;
  --gray-600:    #475569;
  --gray-800:    #1e293b;
  --success:     #16a34a;
  --success-bg:  #dcfce7;
  --warning:     #d97706;
  --warning-bg:  #fef3c7;
  --danger:      #dc2626;
  --danger-bg:   #fee2e2;
  --info:        #0284c7;
  --info-bg:     #e0f2fe;
  --radius:      12px;
  --radius-sm:   8px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow:      0 4px 16px rgba(15,36,83,.10);
  --shadow-lg:   0 8px 32px rgba(15,36,83,.16);
  --transition:  all .2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { direction: rtl; font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', 'Tajawal', system-ui, sans-serif;
  background: var(--gray-50);
  color: var(--gray-800);
  line-height: 1.6;
  min-height: 100vh;
}
h1 { font-size: 1.75rem; font-weight: 700; color: var(--navy); }
h2 { font-size: 1.4rem;  font-weight: 700; color: var(--blue); }
h3 { font-size: 1.15rem; font-weight: 600; color: var(--blue); }
p  { color: var(--gray-600); }

/* ── Header ── */
.app-header {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 60%, var(--teal) 100%);
  color: var(--white);
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
}
.logo-wrap  { display: flex; align-items: center; gap: .75rem; }
.logo-text  { font-size: 1.15rem; font-weight: 700; }
.logo-sub   { font-size: .75rem; opacity: .8; }
.header-badge {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  padding: .25rem .85rem;
  font-size: .8rem;
}

/* ── Layout ── */
.page-content { padding: 2rem 1.25rem; max-width: 1300px; margin: 0 auto; }
.section-title { margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 2px solid var(--gray-200); }

/* ── Cards ── */
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.card-title  { font-size: 1rem; font-weight: 600; color: var(--blue); }

/* ── Stats ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  display: flex; align-items: center; gap: 1rem;
  transition: var(--transition);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-icon { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; }
.stat-icon.blue   { background:#dbeafe; color:var(--blue-mid); }
.stat-icon.teal   { background:#ccfbf1; color:var(--teal); }
.stat-icon.green  { background:var(--success-bg); color:var(--success); }
.stat-icon.orange { background:var(--warning-bg); color:var(--warning); }
.stat-icon.red    { background:var(--danger-bg);  color:var(--danger);  }
.stat-icon.purple { background:#ede9fe; color:#7c3aed; }
.stat-value { font-size:1.75rem; font-weight:800; color:var(--navy); line-height:1.1; }
.stat-label { font-size:.8rem; color:var(--gray-600); margin-top:.2rem; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1.25rem; border-radius:var(--radius-sm);
  font-size:.9rem; font-weight:600; border:none; cursor:pointer;
  transition:var(--transition); text-decoration:none; white-space:nowrap; font-family:inherit;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary  { background:var(--blue-mid);  color:var(--white); }
.btn-primary:hover:not(:disabled)  { background:var(--navy); }
.btn-teal     { background:var(--teal);       color:var(--white); }
.btn-teal:hover:not(:disabled)     { background:var(--teal-light); }
.btn-success  { background:var(--success);    color:var(--white); }
.btn-success:hover:not(:disabled)  { background:#15803d; }
.btn-danger   { background:var(--danger);     color:var(--white); }
.btn-danger:hover:not(:disabled)   { background:#b91c1c; }
.btn-outline  { background:transparent; color:var(--blue-mid); border:1.5px solid var(--blue-mid); }
.btn-outline:hover:not(:disabled)  { background:var(--blue-mid); color:var(--white); }
.btn-gray     { background:var(--gray-200);   color:var(--gray-800); }
.btn-sm  { padding:.35rem .85rem; font-size:.8rem; }
.btn-lg  { padding:.8rem 2rem;   font-size:1rem; }
.btn-block { width:100%; justify-content:center; }
.btn-icon { padding:.45rem .7rem; }

/* ── Badges ── */
.badge { display:inline-flex; align-items:center; padding:.2rem .65rem; border-radius:20px; font-size:.75rem; font-weight:600; }
.badge-pending  { background:var(--warning-bg); color:var(--warning); }
.badge-approved { background:var(--success-bg); color:var(--success); }
.badge-rejected { background:var(--danger-bg);  color:var(--danger);  }
.badge-main     { background:var(--info-bg);     color:var(--info);    }
.badge-complete { background:#ede9fe;            color:#7c3aed;        }
.badge-blue     { background:#dbeafe;            color:var(--blue-mid);}
.badge-purple   { background:#ede9fe;            color:#7c3aed;        }

/* ── Forms ── */
.form-group { margin-bottom:1.1rem; }
.form-label { display:block; font-size:.875rem; font-weight:600; margin-bottom:.4rem; color:var(--gray-800); }
.form-control {
  width:100%; padding:.6rem 1rem; border:1.5px solid var(--gray-200);
  border-radius:var(--radius-sm); font-size:.9rem; color:var(--gray-800);
  background:var(--white); transition:var(--transition); outline:none;
  font-family:inherit; direction:rtl;
}
.form-control:focus { border-color:var(--blue-light); box-shadow:0 0 0 3px rgba(59,115,212,.12); }
select.form-control {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left .75rem center; padding-left:2.5rem;
}
.input-group { display:flex; gap:.5rem; }
.input-group .form-control { flex:1; }

/* ── Table ── */
.table-wrapper { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--gray-200); }
table { width:100%; border-collapse:collapse; font-size:.875rem; }
thead th {
  background:var(--blue); color:var(--white);
  padding:.85rem 1rem; text-align:right;
  font-weight:600; white-space:nowrap;
}
tbody tr { border-bottom:1px solid var(--gray-100); transition:background .15s; }
tbody tr:hover { background:var(--gray-50); }
tbody td { padding:.75rem 1rem; vertical-align:middle; }
tbody tr:last-child { border-bottom:none; }
.table-actions { display:flex; gap:.4rem; }

/* ── Progress ── */
.progress { height:8px; background:var(--gray-200); border-radius:99px; overflow:hidden; }
.progress-bar { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--teal),var(--blue-light)); transition:width .4s ease; }
.progress-labeled { display:flex; align-items:center; gap:.75rem; }
.progress-labeled .progress { flex:1; }
.progress-pct { font-size:.8rem; font-weight:700; color:var(--blue-mid); min-width:38px; text-align:left; }

/* ── Alerts ── */
.alert { padding:.85rem 1.1rem; border-radius:var(--radius-sm); margin-bottom:1rem; font-size:.9rem; display:flex; align-items:center; gap:.6rem; }
.alert-success { background:var(--success-bg); color:var(--success); border:1px solid #86efac; }
.alert-error   { background:var(--danger-bg);  color:var(--danger);  border:1px solid #fca5a5; }
.alert-info    { background:var(--info-bg);    color:var(--info);    border:1px solid #7dd3fc; }
.alert-warning { background:var(--warning-bg); color:var(--warning); border:1px solid #fcd34d; }

/* ── Loading ── */
.spinner { display:inline-block; width:20px; height:20px; border:2.5px solid var(--gray-200); border-top-color:var(--blue-mid); border-radius:50%; animation:spin .7s linear infinite; }
.spinner-lg { width:36px; height:36px; border-width:3.5px; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-overlay { position:fixed; inset:0; background:rgba(15,36,83,.45); display:flex; align-items:center; justify-content:center; z-index:9999; }
.loading-box { background:var(--white); padding:2rem 2.5rem; border-radius:var(--radius); text-align:center; box-shadow:var(--shadow-lg); }

/* ── Toast ── */
#toast-container { position:fixed; bottom:1.5rem; left:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem; pointer-events:none; }
.toast {
  padding:.85rem 1.25rem; border-radius:var(--radius-sm); color:var(--white);
  font-size:.875rem; font-weight:600; box-shadow:var(--shadow); max-width:340px;
  animation:slideUp .25s ease; display:flex; align-items:center; gap:.6rem;
}
.toast.success { background:var(--success); }
.toast.error   { background:var(--danger);  }
.toast.info    { background:var(--blue-mid); }
.toast.warning { background:var(--warning); }
@keyframes slideUp { from { transform:translateY(20px); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* ── Empty State ── */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--gray-400); }
.empty-state .empty-icon { font-size:3rem; margin-bottom:1rem; }
.empty-state p { font-size:.95rem; }

/* ── Modal ── */
.modal-overlay { position:fixed; inset:0; background:rgba(15,36,83,.5); display:flex; align-items:center; justify-content:center; z-index:1000; padding:1rem; }
.modal { background:var(--white); border-radius:var(--radius); max-width:700px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
.modal-header { padding:1.25rem 1.5rem; border-bottom:1px solid var(--gray-200); display:flex; align-items:center; justify-content:space-between; }
.modal-body   { padding:1.5rem; }
.modal-footer { padding:1rem 1.5rem; border-top:1px solid var(--gray-200); display:flex; gap:.75rem; justify-content:flex-end; }
.modal-close  { background:none; border:none; font-size:1.25rem; cursor:pointer; color:var(--gray-400); line-height:1; padding:.25rem; border-radius:4px; }
.modal-close:hover { color:var(--danger); }

/* ── Filters Bar ── */
.filters-bar { background:var(--white); border-radius:var(--radius); padding:1rem 1.25rem; box-shadow:var(--shadow-sm); border:1px solid var(--gray-200); margin-bottom:1.5rem; }
.filters-row { display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-end; }
.filters-row .form-group { margin-bottom:0; min-width:160px; flex:1; }

/* ── Pagination ── */
.pagination { display:flex; gap:.35rem; align-items:center; justify-content:center; margin-top:1.5rem; }
.page-btn { padding:.4rem .75rem; border-radius:var(--radius-sm); border:1.5px solid var(--gray-200); background:var(--white); cursor:pointer; font-size:.85rem; transition:var(--transition); }
.page-btn:hover   { border-color:var(--blue-mid); color:var(--blue-mid); }
.page-btn.active  { background:var(--blue-mid); color:var(--white); border-color:var(--blue-mid); }
.page-btn:disabled { opacity:.4; cursor:not-allowed; }

/* ── Image Thumbnails ── */
.thumb-grid { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.thumb { position:relative; width:72px; height:72px; border-radius:8px; overflow:hidden; border:2px solid var(--gray-200); cursor:pointer; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb .thumb-badge { position:absolute; top:2px; right:2px; background:var(--blue-mid); color:var(--white); font-size:.6rem; padding:1px 5px; border-radius:4px; font-weight:700; }
.thumb-main { border-color:var(--teal); }

/* ── Responsive ── */
@media (max-width:768px) {
  .stats-grid { grid-template-columns:1fr 1fr; }
  .filters-row { flex-direction:column; }
  .filters-row .form-group { min-width:100%; }
}
@media (max-width:480px) {
  .stats-grid { grid-template-columns:1fr; }
  .page-content { padding:1rem .75rem; }
}