/* =====================================================================
   free-alkhalidi admin - TailAdmin-derived design system (self-contained)
   No build step, no runtime CDN. Real TailAdmin v2 tokens reimplemented as
   plain CSS so the bundle deploys by Direct Upload and works behind Access.
   RTL is handled with logical properties (margin-inline / inset-inline), so
   the same rules serve Arabic (dir=rtl) and English (dir=ltr).
   ===================================================================== */

:root {
  /* brand */
  --brand-25:#f2f7ff; --brand-50:#ecf3ff; --brand-100:#dde9ff; --brand-200:#c2d6ff;
  --brand-300:#9cb9ff; --brand-400:#7592ff; --brand-500:#465fff; --brand-600:#3641f5;
  --brand-700:#2a31d8; --brand-800:#252dae; --brand-900:#262e89;
  /* gray */
  --gray-50:#f9fafb; --gray-100:#f2f4f7; --gray-200:#e4e7ec; --gray-300:#d0d5dd;
  --gray-400:#98a2b3; --gray-500:#667085; --gray-600:#475467; --gray-700:#344054;
  --gray-800:#1d2939; --gray-900:#101828; --gray-950:#0c111d;
  /* status */
  --success-500:#12b76a; --success-bg:#ecfdf3; --success-fg:#027a48; --success-bd:#a6f4c5;
  --warning-500:#f79009; --warning-bg:#fffaeb; --warning-fg:#b54708; --warning-bd:#fedf89;
  --error-500:#f04438;   --error-bg:#fef3f2;   --error-fg:#b42318;   --error-bd:#fecdca;
  --info-bg:#eff8ff;     --info-fg:#175cd3;     --info-bd:#b2ddff;

  --bg:var(--gray-50);
  --surface:#ffffff;
  --border:var(--gray-200);
  --text:var(--gray-800);
  --text-muted:var(--gray-500);
  --text-dim:var(--gray-400);

  --r-xs:6px; --r-sm:8px; --r:10px; --r-lg:12px; --r-2xl:16px; --r-3xl:20px; --r-full:999px;
  --shadow-sm:0 1px 2px 0 rgba(16,24,40,.05);
  --shadow:0 1px 3px 0 rgba(16,24,40,.10),0 1px 2px -1px rgba(16,24,40,.06);
  --shadow-lg:0 12px 16px -4px rgba(16,24,40,.08),0 4px 6px -2px rgba(16,24,40,.03);
  --shadow-card:0 1px 3px 0 rgba(16,24,40,.06);

  --sidebar-w:280px;
  --topbar-h:64px;
  --font:"Outfit","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,
         "Noto Sans","Noto Sans Arabic","Noto Naskh Arabic",Tahoma,"Geeza Pro",sans-serif;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { margin:0; font-weight:600; color:var(--gray-900); letter-spacing:-.01em; }
h1 { font-size:1.375rem; }
h2 { font-size:1.125rem; }
h3 { font-size:.975rem; }
p { margin:0; }
a { color:var(--brand-600); text-decoration:none; }
a:hover { text-decoration:underline; }
button { font-family:inherit; }
:focus-visible { outline:2px solid var(--brand-400); outline-offset:2px; border-radius:var(--r-xs); }
img { max-width:100%; display:block; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:var(--r-full); border:2px solid var(--bg); }

/* ---------------------------------------------------------------- layout */
.app { display:flex; min-height:100vh; }

.sidebar {
  position:fixed; inset-block:0; inset-inline-start:0;
  width:var(--sidebar-w); background:var(--surface);
  border-inline-end:1px solid var(--border);
  display:flex; flex-direction:column;
  z-index:50; transform:translateX(0);
  transition:transform .22s ease;
}
.sidebar__brand {
  display:flex; align-items:center; gap:.7rem;
  height:var(--topbar-h); padding-inline:1.25rem;
  border-bottom:1px solid var(--border); flex:none;
}
.sidebar__logo {
  width:38px; height:38px; border-radius:var(--r-lg); flex:none;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:1rem;
  box-shadow:var(--shadow-sm);
}
.sidebar__title { font-weight:600; color:var(--gray-900); font-size:.95rem; line-height:1.15; }
.sidebar__title small { display:block; color:var(--text-muted); font-weight:400; font-size:.72rem; }
.sidebar__nav { padding:1rem .75rem; overflow-y:auto; flex:1; }
.nav-group-label {
  font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-dim); padding:.5rem .75rem .35rem;
}
.nav-item {
  display:flex; align-items:center; gap:.7rem; width:100%;
  padding:.62rem .75rem; margin-bottom:2px; border-radius:var(--r-lg);
  color:var(--gray-600); font-weight:500; font-size:.9rem;
  background:none; border:none; cursor:pointer; text-align:start;
  transition:background .14s,color .14s;
}
.nav-item:hover { background:var(--gray-50); color:var(--gray-900); }
.nav-item.active { background:var(--brand-50); color:var(--brand-700); }
.nav-item.active .nav-item__ic { color:var(--brand-600); }
.nav-item__ic { width:20px; height:20px; flex:none; color:var(--gray-400); }
.nav-item__badge {
  margin-inline-start:auto; min-width:20px; height:20px; padding:0 6px;
  border-radius:var(--r-full); background:var(--error-500); color:#fff;
  font-size:.7rem; font-weight:600; display:grid; place-items:center;
}
.sidebar__foot { padding:.75rem; border-top:1px solid var(--border); flex:none; }

.scrim {
  position:fixed; inset:0; background:rgba(16,24,40,.45);
  z-index:40; opacity:0; pointer-events:none; transition:opacity .2s;
}

.main {
  flex:1; min-width:0; margin-inline-start:var(--sidebar-w);
  display:flex; flex-direction:column;
}
.topbar {
  position:sticky; top:0; z-index:30; height:var(--topbar-h);
  background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:.75rem; padding-inline:1rem;
}
.topbar__title { font-weight:600; font-size:1.05rem; color:var(--gray-900); }
.topbar__spacer { flex:1; }
.icon-btn {
  width:40px; height:40px; border-radius:var(--r-lg); border:1px solid var(--border);
  background:var(--surface); color:var(--gray-600); display:grid; place-items:center;
  cursor:pointer; flex:none; transition:background .14s;
}
.icon-btn:hover { background:var(--gray-50); }
.icon-btn svg { width:20px; height:20px; }
.hamburger { display:none; }

.userchip {
  display:flex; align-items:center; gap:.55rem; padding:.3rem .5rem .3rem .35rem;
  border:1px solid var(--border); border-radius:var(--r-full); background:var(--surface);
  cursor:pointer;
}
.userchip:hover { background:var(--gray-50); }
.avatar {
  width:32px; height:32px; border-radius:var(--r-full); flex:none;
  background:var(--brand-100); color:var(--brand-700);
  display:grid; place-items:center; font-weight:600; font-size:.8rem;
}
.userchip__meta { line-height:1.1; text-align:start; }
.userchip__meta b { font-size:.82rem; color:var(--gray-800); display:block;
  max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.userchip__meta span { font-size:.7rem; color:var(--text-muted); }

.content { padding:1.25rem; max-width:1280px; width:100%; margin:0 auto; }
.page-head { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem; }
.page-head h1 { flex:1 1 auto; }
.page-sub { color:var(--text-muted); font-size:.85rem; margin-top:.15rem; }

/* ---------------------------------------------------------------- grid */
.grid { display:grid; gap:1rem; }
.grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.grid.auto { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.grid.media { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
@media (max-width:1100px){ .grid.cols-4{grid-template-columns:repeat(2,1fr);} .grid.cols-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr;} }

/* ---------------------------------------------------------------- card */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2xl); box-shadow:var(--shadow-card);
}
.card.pad { padding:1.25rem; }
.card__head {
  display:flex; align-items:center; gap:.6rem; padding:1rem 1.25rem;
  border-bottom:1px solid var(--border);
}
.card__head h2 { flex:1; }
.card__body { padding:1.25rem; }
.card__body.tight { padding:.75rem; }

.stat { display:flex; flex-direction:column; gap:.85rem; }
.stat__top { display:flex; align-items:center; justify-content:space-between; }
.stat__icon {
  width:44px; height:44px; border-radius:var(--r-2xl); display:grid; place-items:center;
  background:var(--brand-50); color:var(--brand-600);
}
.stat__icon svg { width:22px; height:22px; }
.stat__icon.green{background:var(--success-bg);color:var(--success-fg);}
.stat__icon.amber{background:var(--warning-bg);color:var(--warning-fg);}
.stat__icon.red{background:var(--error-bg);color:var(--error-fg);}
.stat__icon.gray{background:var(--gray-100);color:var(--gray-600);}
.stat__num { font-size:1.85rem; font-weight:700; color:var(--gray-900); line-height:1; }
.stat__label { color:var(--text-muted); font-size:.82rem; margin-top:.3rem; }

/* ---------------------------------------------------------------- badges */
.badge {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.18rem .55rem; border-radius:var(--r-full);
  font-size:.72rem; font-weight:600; line-height:1.3;
  border:1px solid transparent; white-space:nowrap;
}
.badge.gray{background:var(--gray-100);color:var(--gray-600);}
.badge.green{background:var(--success-bg);color:var(--success-fg);border-color:var(--success-bd);}
.badge.amber{background:var(--warning-bg);color:var(--warning-fg);border-color:var(--warning-bd);}
.badge.red{background:var(--error-bg);color:var(--error-fg);border-color:var(--error-bd);}
.badge.blue{background:var(--info-bg);color:var(--info-fg);border-color:var(--info-bd);}
.badge.brand{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-200);}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.badge.lang{background:var(--gray-50);color:var(--gray-700);border-color:var(--border);
  text-transform:uppercase; font-size:.66rem; letter-spacing:.03em;}

/* ---------------------------------------------------------------- buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.6rem 1rem; border-radius:var(--r-lg); font-size:.88rem; font-weight:600;
  border:1px solid transparent; cursor:pointer; background:var(--brand-500); color:#fff;
  transition:background .14s,box-shadow .14s,opacity .14s; line-height:1.2;
}
.btn:hover{background:var(--brand-600); text-decoration:none;}
.btn:active{background:var(--brand-700);}
.btn svg{width:16px;height:16px;}
.btn.sm{padding:.42rem .7rem; font-size:.8rem;}
.btn.block{width:100%;}
.btn.secondary{background:var(--surface); color:var(--gray-700); border-color:var(--border);}
.btn.secondary:hover{background:var(--gray-50);}
.btn.ghost{background:transparent; color:var(--gray-600); border-color:transparent;}
.btn.ghost:hover{background:var(--gray-100);}
.btn.danger{background:var(--error-500);}
.btn.danger:hover{background:#d92d20;}
.btn.success{background:var(--success-500);}
.btn.success:hover{background:#039855;}
.btn:disabled{opacity:.55; cursor:not-allowed;}
.btn-row{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;}
.btn-row.end{justify-content:flex-end;}

/* ---------------------------------------------------------------- forms */
.field{display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem;}
.field label{font-size:.82rem; font-weight:600; color:var(--gray-700);}
.field .hint{font-size:.74rem; color:var(--text-muted);}
.input,.select,.textarea{
  width:100%; padding:.62rem .75rem; border:1px solid var(--gray-300);
  border-radius:var(--r-lg); font-size:.9rem; font-family:inherit; color:var(--gray-800);
  background:var(--surface); transition:border-color .14s,box-shadow .14s;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--brand-400); box-shadow:0 0 0 3px var(--brand-50);
}
.textarea{resize:vertical; min-height:96px; line-height:1.55;}
.textarea.tall{min-height:180px;}
.select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center; padding-inline-end:2rem;}
[dir=rtl] .select{background-position:left .7rem center;}
.checkrow{display:flex; align-items:center; gap:.55rem; margin-bottom:1rem;}
.checkrow input{width:18px; height:18px; accent-color:var(--brand-500);}
.checkrow label{font-size:.86rem; color:var(--gray-700); font-weight:500;}
.file-drop{
  border:1.5px dashed var(--gray-300); border-radius:var(--r-2xl);
  padding:1.5rem 1rem; text-align:center; color:var(--text-muted); cursor:pointer;
  background:var(--gray-50); transition:border-color .14s,background .14s;
}
.file-drop:hover{border-color:var(--brand-400); background:var(--brand-25);}
.file-drop.has{border-style:solid; border-color:var(--success-bd); background:var(--success-bg); color:var(--success-fg);}
.file-drop svg{width:28px; height:28px; margin:0 auto .4rem; color:var(--gray-400);}

/* ---------------------------------------------------------------- segmented */
.seg{display:inline-flex; background:var(--gray-100); border-radius:var(--r-lg); padding:3px; gap:2px; flex-wrap:wrap;}
.seg button{
  border:none; background:none; padding:.4rem .8rem; border-radius:var(--r);
  font-size:.8rem; font-weight:600; color:var(--gray-600); cursor:pointer;
}
.seg button.on{background:var(--surface); color:var(--brand-700); box-shadow:var(--shadow-sm);}

/* ---------------------------------------------------------------- list rows */
.list{display:flex; flex-direction:column;}
.row-item{
  display:flex; align-items:center; gap:.85rem; padding:.95rem 1.1rem;
  border-bottom:1px solid var(--border);
}
.row-item:last-child{border-bottom:none;}
.row-item__main{flex:1; min-width:0;}
.row-item__title{font-weight:600; color:var(--gray-800); font-size:.92rem;
  overflow:hidden; text-overflow:ellipsis;}
.row-item__meta{color:var(--text-muted); font-size:.78rem; margin-top:.2rem;
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;}
.row-item__actions{display:flex; gap:.4rem; align-items:center; flex:none;}

/* table that collapses to cards on phones */
.table{width:100%; border-collapse:collapse; font-size:.86rem;}
.table th{
  text-align:start; font-weight:600; color:var(--text-muted); font-size:.74rem;
  text-transform:uppercase; letter-spacing:.03em; padding:.7rem 1rem;
  border-bottom:1px solid var(--border); background:var(--gray-50);
}
.table td{padding:.85rem 1rem; border-bottom:1px solid var(--border); color:var(--gray-700);}
.table tr:last-child td{border-bottom:none;}

/* ---------------------------------------------------------------- media grid */
.media-tile{
  border:1px solid var(--border); border-radius:var(--r-2xl); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-card); display:flex; flex-direction:column;
}
.media-tile__img{aspect-ratio:4/3; background:var(--gray-100); position:relative; overflow:hidden;}
.media-tile__img img{width:100%; height:100%; object-fit:cover;}
.media-tile__type{position:absolute; inset-block-start:.5rem; inset-inline-start:.5rem;}
.media-tile__body{padding:.7rem .8rem; display:flex; flex-direction:column; gap:.4rem;}
.media-tile__name{font-size:.78rem; color:var(--gray-700); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.media-tile__alt{font-size:.72rem; color:var(--text-muted); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:1.9em;}

/* ---------------------------------------------------------------- diff (approvals) */
.diff{display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.6rem;}
@media (max-width:560px){ .diff{grid-template-columns:1fr;} }
.diff__col{border:1px solid var(--border); border-radius:var(--r-lg); padding:.7rem .8rem; background:var(--gray-50); font-size:.82rem;}
.diff__col h4{font-size:.7rem; text-transform:uppercase; color:var(--text-dim); margin-bottom:.4rem; letter-spacing:.04em;}
.diff__col.after{background:var(--brand-25); border-color:var(--brand-200);}
.kv{display:flex; gap:.4rem; padding:.2rem 0; border-bottom:1px dashed var(--border);}
.kv:last-child{border-bottom:none;}
.kv b{color:var(--gray-600); font-weight:600; min-width:90px; flex:none;}
.kv span{color:var(--gray-800); word-break:break-word;}

/* ---------------------------------------------------------------- modal */
.modal-host{
  position:fixed; inset:0; background:rgba(16,24,40,.5);
  display:flex; align-items:flex-end; justify-content:center; z-index:60; padding:0;
  animation:fade .15s ease;
}
@media (min-width:640px){ .modal-host{align-items:center; padding:1.5rem;} }
.modal{
  background:var(--surface); width:100%; max-width:640px; max-height:92vh; overflow-y:auto;
  border-radius:var(--r-3xl) var(--r-3xl) 0 0; box-shadow:var(--shadow-lg);
  animation:slideup .22s cubic-bezier(.16,1,.3,1);
}
@media (min-width:640px){ .modal{border-radius:var(--r-3xl);} }
.modal__head{
  position:sticky; top:0; background:var(--surface); display:flex; align-items:center; gap:.75rem;
  padding:1.1rem 1.25rem; border-bottom:1px solid var(--border); z-index:1;
}
.modal__head h2{flex:1;}
.modal__body{padding:1.25rem;}
.modal__foot{position:sticky; bottom:0; background:var(--surface); padding:1rem 1.25rem;
  border-top:1px solid var(--border); display:flex; gap:.5rem; justify-content:flex-end; flex-wrap:wrap;}
@keyframes slideup{from{transform:translateY(24px); opacity:.6;} to{transform:translateY(0); opacity:1;}}
@keyframes fade{from{opacity:0;} to{opacity:1;}}

/* ---------------------------------------------------------------- toast */
.toast-host{position:fixed; inset-block-end:1rem; inset-inline:0; display:flex; flex-direction:column;
  align-items:center; gap:.5rem; z-index:80; pointer-events:none; padding-inline:1rem;}
.toast{
  background:var(--gray-900); color:#fff; padding:.7rem 1.1rem; border-radius:var(--r-full);
  font-size:.85rem; font-weight:500; box-shadow:var(--shadow-lg); max-width:520px;
  animation:slideup .2s ease; display:flex; align-items:center; gap:.5rem;
}
.toast.err{background:var(--error-500);}
.toast.ok{background:var(--success-500);}
.toast svg{width:16px; height:16px;}

/* ---------------------------------------------------------------- empty */
.empty{
  text-align:center; padding:3rem 1.25rem; color:var(--text-muted);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.empty__ic{width:56px; height:56px; border-radius:var(--r-2xl); background:var(--gray-100);
  display:grid; place-items:center; color:var(--gray-400);}
.empty__ic svg{width:26px; height:26px;}
.empty h3{color:var(--gray-700);}
.empty p{max-width:380px; font-size:.85rem;}

/* ---------------------------------------------------------------- misc */
.muted{color:var(--text-muted);} .dim{color:var(--text-dim);}
.row{display:flex; gap:.5rem; align-items:center;} .wrap{flex-wrap:wrap;}
.between{justify-content:space-between;}
.stack{display:flex; flex-direction:column; gap:.5rem;}
.spin{width:18px;height:18px;border:2px solid var(--gray-200);border-top-color:var(--brand-500);
  border-radius:50%; animation:rot .7s linear infinite; display:inline-block;}
@keyframes rot{to{transform:rotate(360deg);}}
.center-screen{min-height:100vh; display:grid; place-items:center; padding:1.5rem;}
.auth-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-3xl);
  box-shadow:var(--shadow-lg); padding:2rem 1.75rem; width:100%; max-width:400px; text-align:center;}
.auth-card .sidebar__logo{width:52px;height:52px;margin:0 auto 1rem; font-size:1.3rem;}
.note{background:var(--info-bg); border:1px solid var(--info-bd); color:var(--info-fg);
  border-radius:var(--r-lg); padding:.7rem .9rem; font-size:.82rem; line-height:1.5;}
.note.warn{background:var(--warning-bg); border-color:var(--warning-bd); color:var(--warning-fg);}
.skeleton{background:linear-gradient(90deg,var(--gray-100),var(--gray-200),var(--gray-100));
  background-size:200% 100%; animation:sh 1.2s infinite; border-radius:var(--r-lg);}
@keyframes sh{to{background-position:-200% 0;}}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1024px){
  .sidebar{transform:translateX(-100%); box-shadow:var(--shadow-lg);}
  [dir=rtl] .sidebar{transform:translateX(100%);}
  .app.nav-open .sidebar{transform:translateX(0);}
  .app.nav-open .scrim{opacity:1; pointer-events:auto;}
  .main{margin-inline-start:0;}
  .hamburger{display:grid;}
}
@media (max-width:560px){
  .content{padding:1rem .85rem;}
  .userchip__meta{display:none;}
  .row-item{flex-wrap:wrap;}
  .row-item__actions{width:100%; justify-content:flex-end;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important;}
}