/* admin.houtia.org — RTL admin UI, same palette as the public site. No inline styles anywhere. */
:root {
  --green-900: #163f22; --green-800: #1d5a2e; --green-700: #237a38; --green-100: #e4f0e6; --green-050: #f1f7f2;
  --orange: #e2801c; --orange-soft: #fbe9d6; --red: #a33a2f; --red-soft: #f7dedb;
  --sand: #f6f2e9; --paper: #fffdf9; --ink: #1b211c; --muted: #59635b; --line: #e2dccf;
  --font: "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--sand); }
a { color: var(--green-700); }
h1 { font-size: 1.6rem; margin: 0 0 1rem; color: var(--green-900); }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; color: var(--green-900); }
img { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: .75rem 0; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: .85em; direction: ltr; unicode-bidi: isolate; }
.center { text-align: center; }

/* layout */
.top { display: flex; align-items: center; gap: 1rem; padding: .5rem 1.25rem; background: var(--green-900); color: #dfeee2; }
.top .brand { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-weight: 700; }
.top .brand img { width: 32px; height: 32px; }
.top .who { margin-inline-start: auto; color: #cfe3d3; }
.top .ext { color: #fff; text-decoration: none; font-size: .9rem; }
.top form { margin: 0; }
.shell { display: grid; grid-template-columns: 230px 1fr; min-height: calc(100vh - 3rem); }
.side { background: var(--paper); border-inline-end: 1px solid var(--line); padding: 1rem .75rem; display: flex; flex-direction: column; gap: .15rem; }
.side a { display: block; padding: .55rem .8rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }
.side a:hover { background: var(--green-050); }
.side a[aria-current="page"] { background: var(--green-100); color: var(--green-900); border-inline-start: 3px solid var(--orange); }
.content { padding: 1.5rem 2rem 3rem; max-width: 1100px; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { flex-direction: row; flex-wrap: wrap; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .side hr { display: none; }
  .content { padding: 1rem; }
}

/* auth */
body.auth { display: grid; place-items: center; min-height: 100vh; }
.auth-main { width: min(420px, 100% - 2rem); }
.auth-card { text-align: center; }
.auth-card h1 { font-size: 1.25rem; }
.auth-logo { margin: 0 auto .5rem; }
.auth-card label { text-align: start; }

/* cards, tables, forms */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
table.card { padding: 0; border-collapse: separate; border-spacing: 0; overflow: hidden; width: 100%; }
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { text-align: start; padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list th { background: var(--green-050); color: var(--muted); font-weight: 600; font-size: .9rem; }
table.list tr:last-child td { border-bottom: 0; }
td.actions, th.actions { text-align: end; white-space: nowrap; }
td.actions form { display: inline; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; text-decoration: none; color: var(--ink); }
.stat b { display: block; font-size: 1.7rem; color: var(--green-800); line-height: 1.1; }
.stat span { color: var(--muted); font-size: .9rem; }
.stat.warn b { color: var(--orange); }

.form label { display: block; margin-bottom: .9rem; font-weight: 600; }
.form label small { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; }
.form input:not([type=checkbox]):not([type=radio]), .form textarea, .form select, .auth-card input {
  display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem; font: inherit; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
.auth-card label { display: block; margin-bottom: .9rem; font-weight: 600; }
.form textarea { min-height: 8rem; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus, .auth-card input:focus { outline: 2px solid var(--green-700); outline-offset: 1px; border-color: var(--green-700); }
.form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.25rem; }
.form .check { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.form .check input { width: 1.1rem; height: 1.1rem; margin: 0; }
.form .days { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .3rem; }
.form fieldset { border: 1px solid var(--line); border-radius: 8px; padding: .75rem 1rem 0; margin: 0 0 1rem; }
.form legend { padding: 0 .4rem; color: var(--green-800); font-weight: 700; }
.form .actions, .actions { display: flex; gap: .6rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }
.lang-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lang-pair [dir="ltr"] input, .lang-pair [dir="ltr"] textarea { direction: ltr; text-align: left; }
@media (max-width: 720px) { .lang-pair { grid-template-columns: 1fr; } }
.help { font-size: .85rem; color: var(--muted); }
.thumb { width: 90px; height: 68px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.thumb.round { width: 64px; height: 64px; border-radius: 50%; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.photos figure { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: .5rem; }
.photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }
.photos figcaption { font-size: .85rem; margin-top: .35rem; }

/* buttons + badges + flashes */
.btn { display: inline-block; padding: .55rem 1.1rem; border-radius: 8px; border: 1px solid var(--green-700); background: var(--paper); color: var(--green-800); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--green-050); }
.btn.primary { background: var(--green-700); color: #fff; }
.btn.primary:hover { background: var(--green-900); }
.btn.danger { border-color: var(--red); color: var(--red); }
.btn.danger:hover { background: var(--red-soft); }
.btn.ghost { border-color: rgba(255,255,255,.4); background: transparent; color: #fff; }
.btn.small { padding: .3rem .7rem; font-size: .88rem; }
.badge { display: inline-block; font-size: .78rem; padding: .1rem .55rem; border-radius: 999px; background: var(--green-100); color: var(--green-800); font-weight: 600; }
.badge.gray { background: #eee7d9; color: var(--muted); }
.badge.orange { background: var(--orange-soft); color: #7a4410; }
.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid var(--line); background: var(--paper); }
.flash.success { background: var(--green-050); border-color: #bcd9c2; color: var(--green-900); }
.flash.error { background: var(--red-soft); border-color: #e7b9b3; color: var(--red); }
.flash.warn { background: var(--orange-soft); border-color: #ead3b3; color: #4a3115; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
pre.log { background: #1b211c; color: #dfeee2; padding: 1rem; border-radius: 8px; overflow: auto; direction: ltr; text-align: left; font-size: .85rem; max-height: 24rem; }