:root{
  --p-green:#0e5247;
  --p-green-deep:#0a382f;
  --p-green-700:#0c463c;
  --p-ink:#163029;
  --p-gold:#c0902f;
  --p-gold-bright:#d3a94b;
  --p-gold-soft:#e7d3a3;
  --p-cream:#f8f3e8;
  --p-sand:#efe6d3;
  --p-paper:#fdfaf3;
  --p-muted:#5d6b63;
  --p-line:#e3dac6;
  --p-line-soft:#ece3d2;

  /* accent — adjustable via tweak (green / gold / balanced) */
  --accent:#0e5247;
  --accent-2:#c0902f;

  --f-display:"Amiri", serif;
  --f-script:"Aref Ruqaa", serif;
  --f-body:"Tajawal", sans-serif;

  --radius:16px;
  --radius-sm:12px;
  --shadow-sm:0 4px 14px -10px rgba(10,56,47,.35);
  --shadow-md:0 18px 40px -28px rgba(10,56,47,.4);
  --shadow-lg:0 36px 70px -44px rgba(10,56,47,.5);

  --sidebar-w:268px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--f-body);
  color:var(--p-ink);
  background:var(--p-cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.25;color:var(--p-green-deep)}
button{font-family:inherit}
img{display:block;max-width:100%}
::selection{background:var(--p-gold-soft)}
input,textarea,select{font-family:inherit}
.app-root{min-height:100vh}

/* ============ buttons ============ */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--f-body);font-weight:700;font-size:.98rem;padding:.72em 1.3em;border-radius:999px;cursor:pointer;border:1.5px solid transparent;transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s;white-space:nowrap}
.ui-btn svg{width:1.15em;height:1.15em;flex:none}
.ui-btn-sm{font-size:.86rem;padding:.55em 1em}
.ui-btn-green{background:var(--accent);color:#fff;box-shadow:0 10px 24px -14px color-mix(in srgb,var(--accent) 80%,#000)}
.ui-btn-green:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px color-mix(in srgb,var(--accent) 75%,#000)}
.ui-btn-gold{background:var(--p-gold);color:#fff;box-shadow:0 10px 24px -14px rgba(192,144,47,.75)}
.ui-btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(192,144,47,.85)}
.ui-btn-outline{background:#fff;color:var(--p-green);border-color:var(--p-line)}
.ui-btn-outline:hover{border-color:var(--p-gold);color:var(--p-gold);transform:translateY(-2px)}
.ui-btn-ghost{background:transparent;color:var(--p-muted);border-color:transparent}
.ui-btn-ghost:hover{background:#0e524710;color:var(--p-green)}
.ui-btn-danger{background:#fff;color:#b23b32;border-color:#e6c9c4}
.ui-btn-danger:hover{background:#b23b32;color:#fff;border-color:#b23b32;transform:translateY(-2px)}
.ui-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.ui-iconbtn{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;border:1px solid var(--p-line);background:#fff;color:var(--p-muted);cursor:pointer;transition:all .18s}
.ui-iconbtn svg{width:18px;height:18px}
.ui-iconbtn:hover{color:var(--p-green);border-color:var(--p-gold-soft);background:var(--p-cream)}
.ui-iconbtn.danger:hover{color:#b23b32;border-color:#e6c9c4;background:#fbf0ee}
.ui-iconbtn.active{color:var(--p-gold);border-color:var(--p-gold)}

/* ============ badges / tags ============ */
.ui-badge{display:inline-flex;align-items:center;gap:.45em;font-weight:700;font-size:.8rem;padding:.34em .8em;border-radius:999px;white-space:nowrap;line-height:1}
.ui-badge-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.ui-badge.ok{background:#e8f1ea;color:#1f7a52}
.ui-badge.warn{background:#fbf1dd;color:#a9781b}
.ui-badge.bad{background:#fbe9e6;color:#b23b32}
.ui-badge.muted{background:#eef0ec;color:#647067}
.ui-tag{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:.8rem;color:var(--p-green-deep);background:#0e52470a;border:1px solid var(--p-gold-soft);border-radius:999px;padding:.32em .8em}
.ui-tag svg{width:14px;height:14px;color:var(--p-gold)}
.ui-tag.gold{background:var(--p-gold);color:#fff;border-color:var(--p-gold)}

/* ============ avatar ============ */
.ui-avatar{flex:none;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,var(--p-green),var(--p-green-deep));color:var(--p-gold-bright);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;border:1px solid var(--p-line-soft)}
.ui-avatar img{width:100%;height:100%;object-fit:cover}

/* ============ modal ============ */
.ui-modal-scrim{position:fixed;inset:0;z-index:200;background:rgba(10,40,33,.5);backdrop-filter:blur(5px);display:flex;align-items:flex-start;justify-content:center;padding:clamp(16px,5vh,64px) 16px;overflow:auto;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.ui-modal{background:var(--p-paper);border-radius:22px;width:560px;max-width:100%;box-shadow:var(--shadow-lg);border:1px solid var(--p-line);overflow:hidden;animation:pop .24s cubic-bezier(.2,.9,.3,1.1)}
.ui-modal.wide{width:760px}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.ui-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:24px 26px 18px;border-bottom:1px solid var(--p-line-soft)}
.ui-modal-head h3{font-size:1.5rem;line-height:1.3}
.ui-modal-head p{color:var(--p-muted);font-size:.95rem;margin-top:4px}
.ui-modal-close{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--p-line);background:#fff;color:var(--p-muted);cursor:pointer;display:grid;place-items:center;transition:all .2s}
.ui-modal-close svg{width:18px;height:18px}
.ui-modal-close:hover{background:var(--p-gold);border-color:var(--p-gold);color:#fff;transform:rotate(90deg)}
.ui-modal-body{padding:24px 26px}
.ui-modal-foot{display:flex;justify-content:flex-end;gap:12px;padding:18px 26px;border-top:1px solid var(--p-line-soft);background:#fff8}

/* ============ form ============ */
.ui-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ui-field{display:flex;flex-direction:column;gap:8px}
.ui-field.full,.ui-imgpick.full{grid-column:1/-1}
.ui-field-label{font-weight:700;font-size:.92rem;color:var(--p-green-deep)}
.ui-field-hint{font-size:.82rem;color:var(--p-muted)}
.ui-input{width:100%;font-size:1rem;color:var(--p-ink);background:#fff;border:1.5px solid var(--p-line);border-radius:12px;padding:.72em .9em;transition:border-color .2s,box-shadow .2s}
.ui-input::placeholder{color:#a9b0a8}
.ui-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.ui-textarea{resize:vertical;min-height:104px;line-height:1.7}
.ui-select-wrap{position:relative}
.ui-select-wrap svg{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--p-muted);pointer-events:none}
.ui-select{appearance:none;padding-inline-start:40px;cursor:pointer}
.ui-imgpick{display:flex;flex-direction:column;gap:8px}
.ui-imgpick-row{display:flex;align-items:center;gap:16px}
.ui-imgpick-prev{width:120px;height:84px;flex:none;border-radius:12px;overflow:hidden;background:var(--p-cream);border:1.5px solid var(--p-line);display:grid;place-items:center;color:var(--p-gold)}
.ui-imgpick-prev.empty{border-style:dashed}
.ui-imgpick-prev img{width:100%;height:100%;object-fit:cover}
.ui-imgpick-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ============ page head ============ */
.ui-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.ui-pagehead-l{display:flex;align-items:flex-start;gap:16px}
.ui-pagehead-ic{width:52px;height:52px;flex:none;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000));color:var(--p-gold-bright);box-shadow:var(--shadow-sm)}
.ui-pagehead h1{font-size:clamp(1.7rem,3vw,2.2rem);display:flex;align-items:center;gap:14px}
.ui-pagehead-count{font-family:var(--f-body);font-size:1rem;font-weight:700;color:var(--p-gold);background:#fff;border:1px solid var(--p-gold-soft);border-radius:999px;padding:.1em .7em;line-height:1.6}
.ui-pagehead p{color:var(--p-muted);font-size:1.02rem;margin-top:4px}

/* ============ empty ============ */
.ui-empty{text-align:center;padding:64px 24px;display:flex;flex-direction:column;align-items:center;gap:8px}
.ui-empty-ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:#fff;border:1px solid var(--p-line);color:var(--p-gold);margin-bottom:8px;box-shadow:var(--shadow-sm)}
.ui-empty b{font-family:var(--f-display);font-size:1.35rem;color:var(--p-green-deep)}
.ui-empty span{color:var(--p-muted);max-width:380px}

/* ============ toolbar ============ */
.ui-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.ui-search{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--p-line);border-radius:12px;padding:.6em .9em;flex:1;min-width:200px;max-width:360px;transition:border-color .2s}
.ui-search:focus-within{border-color:var(--accent)}
.ui-search svg{width:18px;height:18px;color:var(--p-muted);flex:none}
.ui-search input{border:0;background:none;outline:none;width:100%;font-size:.98rem;color:var(--p-ink)}
.ui-segmented{display:inline-flex;background:#fff;border:1.5px solid var(--p-line);border-radius:12px;padding:4px;gap:2px}
.ui-segmented button{border:0;background:none;cursor:pointer;font-weight:700;font-size:.88rem;color:var(--p-muted);padding:.5em .9em;border-radius:8px;transition:all .18s;display:inline-flex;align-items:center;gap:.4em}
.ui-segmented button i{font-style:normal;font-size:.74rem;background:#eef0ec;color:var(--p-muted);border-radius:999px;padding:.05em .5em;line-height:1.5}
.ui-segmented button.on{background:var(--accent);color:#fff}
.ui-segmented button.on i{background:rgba(255,255,255,.25);color:#fff}
.ui-toolbar-right{margin-inline-start:auto;display:flex;gap:10px}

/* ============ generic card / table ============ */
.card{background:var(--p-paper);border:1px solid var(--p-line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.list-grid{display:grid;gap:16px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}

/* data table */
.ui-table{width:100%;border-collapse:collapse;background:var(--p-paper);border:1px solid var(--p-line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.ui-table th{text-align:start;font-weight:700;font-size:.84rem;color:var(--p-muted);padding:14px 18px;background:var(--p-cream);border-bottom:1px solid var(--p-line);white-space:nowrap}
.ui-table td{padding:14px 18px;border-bottom:1px solid var(--p-line-soft);font-size:.96rem;vertical-align:middle}
.ui-table tr:last-child td{border-bottom:0}
.ui-table tbody tr{transition:background .15s}
.ui-table tbody tr:hover{background:#0e52470a}
.ui-table .row-actions{display:flex;gap:8px;justify-content:flex-end}
.cell-strong{font-weight:700;color:var(--p-green-deep)}
.cell-person{display:flex;align-items:center;gap:12px}

/* responsive helper to turn tables into cards */
@media(max-width:760px){
  .ui-form-grid{grid-template-columns:1fr}
  .cols-2,.cols-3{grid-template-columns:1fr}
}