/* Tehran Jonoob — Admin dashboard styles
 * Standalone (no shared CSS with the public site). Matches the internal
 * HR/automation portal: royal-blue base + gold accents + IRANSansX.
 */

/* ===== IRANSansX (relative path so it resolves the same as styles.css) ===== */
@font-face { font-family: "IRANSansX"; src: url("fonts/IRANSansX-Thin.woff2") format("woff2"), url("fonts/IRANSansX-Thin.woff") format("woff"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("fonts/IRANSansX-Light.woff2") format("woff2"), url("fonts/IRANSansX-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("fonts/IRANSansX-Regular.woff2") format("woff2"), url("fonts/IRANSansX-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("fonts/IRANSansX-Medium.woff2") format("woff2"), url("fonts/IRANSansX-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("fonts/IRANSansX-DemiBold.woff2") format("woff2"), url("fonts/IRANSansX-DemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("fonts/IRANSansX-Bold.woff2") format("woff2"), url("fonts/IRANSansX-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("fonts/IRANSansX-ExtraBold.woff2") format("woff2"), url("fonts/IRANSansX-ExtraBold.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSansX"; src: url("fonts/IRANSansX-Black.woff2") format("woff2"), url("fonts/IRANSansX-Black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* Light "smoky grey" theme (matches the public v3 site). The var names
     are kept (--ink* = surfaces, --bone* = text) but the VALUES are now
     light: --ink* are grey/white surfaces, --bone* are dark text. */
  --ink:        #E8E9EC;   /* page background — smoky grey */
  --ink-2:      #FFFFFF;   /* header, cards, sections — white */
  --ink-3:      #F1F2F4;   /* inputs, buttons, nested panels — light grey */
  --ink-4:      #E4E6EA;   /* hover / pressed */
  --bone:       #181A1D;   /* primary text — near-black */
  --bone-2:     #45484D;   /* secondary text */
  --bone-3:     #6E7179;   /* muted text */
  --bone-4:     #9B9EA6;   /* most muted */

  /* Brand accents — gold primary, royal/navy secondary (unchanged) */
  --gold:       #c8963e;
  --gold-hi:    #d6a64f;
  --gold-soft:  #b8862e;
  --royal:      #1e3a8a;
  --royal-hi:   #2845a8;

  /* Aliases so existing selectors stay valid */
  --flame:      var(--gold);
  --flame-hi:   var(--gold-hi);
  --rust:       var(--gold-soft);

  --line:       rgba(20, 22, 26, 0.10);   /* hairlines — dark on light now */
  --line-2:     rgba(20, 22, 26, 0.16);
  --danger:     #c4503b;                   /* slightly deeper for light-bg contrast */
  --ok:         #2E9E63;                   /* darkened green for light-bg contrast */

  --font-sans:    'IRANSansX', 'Manrope', system-ui, sans-serif;
  --font-fa:      'IRANSansX', 'Tahoma', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IRANSansX', monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-fa);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html[dir="ltr"] body { font-family: var(--font-sans); }

a { color: var(--flame); text-decoration: none; }
a:hover { color: var(--flame-hi); }

/* ─── Top-level layout ───
 * Base = header + body (the reporter panel). The admin panel adds
 * `.with-side`: a vertical tab rail down the INLINE-START edge — the
 * right side in the RTL UI — beside the body. */
.adm-app.full {
  display: grid;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "header"
    "body";
  height: 100vh;
  overflow: hidden;
}
.adm-app.full.with-side {
  grid-template-columns: 244px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "header header"
    "tabs   body";
}

/* ─── Header ─── */
.adm-header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  z-index: 5;
}
.adm-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
}
.adm-header .brand .mark {
  width: 26px; height: 26px; border-radius: 6px;
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  display: inline-flex; align-items: center; justify-content: center;
  color: #14213D; font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
}
.adm-header .brand .brand-logo {
  height: 30px;
  width: auto;
  object-fit: contain;
  background: #fff;
  padding: 3px 4px;
  border-radius: 6px;
}
.adm-header .sep { width: 1px; height: 24px; background: var(--line); }
.adm-header .title {
  font-size: 13px; color: var(--bone-3);
}
.adm-header .spacer { flex: 1; }

.adm-btn {
  font-family: var(--font-fa);
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--ink-3);
  color: var(--bone);
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-decoration: none;
}
html[dir="ltr"] .adm-btn { font-family: var(--font-sans); }
.adm-btn:hover { background: var(--ink-4); border-color: var(--bone-3); }
.adm-btn.primary {
  background: var(--flame); color: #14213D;
  border-color: transparent; font-weight: 600;
}
.adm-btn.primary:hover { background: var(--flame-hi); }
.adm-btn.danger {
  background: transparent;
  border-color: rgba(216, 98, 76, 0.4);
  color: var(--danger);
}
.adm-btn.danger:hover { background: rgba(216, 98, 76, 0.1); border-color: var(--danger); }
.adm-btn.ghost { background: transparent; }
.adm-btn.small { padding: 5px 9px; font-size: 11px; }
.adm-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ─── Tab rail (vertical side nav — right edge in RTL) ─── */
.adm-tabbar {
  grid-area: tabs;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 12px 18px;
  background: var(--ink-2);
  border-inline-end: 1px solid var(--line);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.adm-tabbar::-webkit-scrollbar { width: 8px; }
.adm-tabbar::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.adm-tabbar-cap {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--bone-4);
  padding: 2px 12px 10px;
}
/* Group header — names the PUBLIC page the tabs below it edit. */
.adm-tabbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 4px 4px;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-soft);
  white-space: nowrap;
}
.adm-tabbar-group::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.adm-tabbar-cap + .adm-tabbar-group { margin-top: 2px; }
.adm-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-inline-start: 3px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--bone-2);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.adm-tab:hover { color: var(--bone); background: var(--ink-3); }
.adm-tab.active {
  color: var(--gold-soft);
  background: rgba(200, 150, 62, 0.12);
  border-inline-start-color: var(--flame);
  font-weight: 700;
}
.adm-tab .tab-icon { font-size: 17px; line-height: 1; }
.adm-tab .tab-badge {
  background: var(--flame);
  color: #14213D;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  margin-inline-start: auto;
}

.adm-tab-body {
  grid-area: body;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ─── Generic collection two-pane layout ─── */
.adm-coll-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: 100%;
  overflow: hidden;
}
.adm-coll-sidebar {
  background: var(--ink-2);
  border-inline-end: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.adm-coll-side-head {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.adm-coll-side-head .label {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--bone-3);
  text-transform: uppercase;
}
html[dir="rtl"] .adm-coll-side-head .label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.adm-coll-list {
  list-style: none;
  margin: 0;
  padding: 6px 6px 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  flex: 1;
}
.adm-coll-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.adm-coll-item:hover { background: var(--ink-3); }
.adm-coll-item.active {
  background: var(--ink-3);
  border-color: var(--flame);
}
.adm-coll-item .pi-thumb {
  width: 44px; height: 44px;
  border-radius: 6px;
  background: var(--ink-4);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--bone-3);
}
.adm-coll-item .pi-thumb.circle { border-radius: 50%; }
.adm-coll-item .pi-thumb img { width:100%; height:100%; object-fit: cover; display:block; }
.adm-coll-item .pi-thumb.empty::before {
  content: '∅';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--bone-4); font-size: 18px;
}
.adm-coll-item .pi-thumb.date-chip,
.adm-coll-item .pi-thumb.year-chip,
.adm-coll-item .pi-thumb.code-chip,
.adm-coll-item .pi-thumb.stat-chip,
.adm-coll-item .pi-thumb.job-tag {
  font-family: var(--font-fa);
  flex-direction: column;
  text-align: center;
  background: var(--ink-3);
  border: 1px solid var(--line);
}
.adm-coll-item .pi-thumb.code-chip { font-family: var(--font-mono); font-size: 9px; }
.adm-coll-item .pi-thumb.stat-chip span { font-size: 12px; font-weight: 700; color: var(--flame); }
.adm-coll-item .pi-thumb.stat-chip small { font-size: 8px; color: var(--bone-3); font-weight: 400; }
.adm-coll-item .pi-thumb.job-tag { font-size: 18px; color: var(--flame); }
.adm-coll-item .pi-thumb.year-chip span { font-size: 11px; color: var(--flame); }
.adm-coll-item .pi-body { min-width: 0; }
.adm-coll-item .pi-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-coll-item .pi-sub {
  font-size: 11px;
  color: var(--bone-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-coll-item .pi-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  white-space: nowrap;
}
.adm-coll-item .pi-badge.ongoing { color: var(--flame); border-color: rgba(200,150,62,0.4); }
.adm-coll-item .pi-badge.completed { color: var(--ok); border-color: rgba(143,219,168,0.4); }

/* Up/down reorder buttons — appear on hover at the end of each row. */
.adm-coll-reorder {
  display: none;
  gap: 3px;
  align-items: center;
}
.adm-coll-item:hover .adm-coll-reorder,
.adm-coll-item.active .adm-coll-reorder {
  display: inline-flex;
}
.adm-coll-reorder .adm-btn.small {
  padding: 2px 7px;
  font-size: 11px;
  line-height: 1;
}
.adm-coll-empty {
  padding: 18px 14px;
  color: var(--bone-3);
  font-size: 12.5px;
  text-align: center;
  line-height: 1.7;
}

.adm-coll-item.msg { grid-template-columns: 44px 1fr auto; }
.adm-coll-item.msg.unread { background: rgba(200,150,62,0.06); }
.adm-coll-item.msg .unread-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--flame);
  border-radius: 50%;
  margin-inline-end: 6px;
  vertical-align: middle;
}
.adm-coll-item .pi-thumb.msg-tag { font-size: 16px; color: var(--bone-3); }
.adm-coll-item .pi-clip { font-size: 13px; opacity: 0.8; align-self: center; }

/* Inbox filter pills (همه / پیام‌ها / درخواست شغل) */
.adm-msg-filters {
  display: flex;
  gap: 6px;
  padding: 8px 10px 4px;
}
.adm-msg-filter {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  font-family: var(--font-fa);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bone-3);
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.adm-msg-filter:hover { color: var(--bone); }
.adm-msg-filter.active {
  background: rgba(200,150,62,0.14);
  color: var(--flame);
  border-color: rgba(200,150,62,0.5);
}
.adm-msg-filter-count {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ink-4);
  color: var(--bone-3);
}
.adm-msg-filter.active .adm-msg-filter-count { background: rgba(200,150,62,0.2); color: var(--flame); }

/* Type chip in the detail header */
.adm-type-chip {
  font-family: var(--font-fa);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  white-space: nowrap;
}
.adm-type-chip.job { color: var(--flame); border-color: rgba(200,150,62,0.45); background: rgba(200,150,62,0.1); }
.adm-type-chip.msg { color: var(--bone-3); }

/* Résumé block in a job-application detail view */
.adm-resume-block {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.adm-resume-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: 10px;
}
.adm-resume-icon { font-size: 24px; flex: 0 0 auto; }
.adm-resume-info { flex: 1; min-width: 0; }
.adm-resume-name {
  font-family: var(--font-fa);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-resume-size {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bone-3);
  margin-top: 2px;
}
.adm-resume-preview {
  width: 100%;
  height: 460px;
  margin-top: 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
}
.adm-resume-empty {
  padding: 14px 16px;
  background: var(--ink-2);
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  color: var(--bone-3);
  font-size: 12.5px;
  line-height: 1.7;
}

.adm-coll-main {
  overflow-y: auto;
  padding: 22px 30px 60px;
  background: var(--ink);
}
.adm-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%;
  color: var(--bone-3);
  gap: 14px;
  text-align: center;
  padding: 60px 24px;
}
.adm-empty .icon { font-size: 48px; opacity: 0.4; }

/* ─── Editor ─── */
.adm-editor {
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.adm-editor-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.adm-editor-head h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  flex: 1;
  min-width: 220px;
}
.adm-editor-head .id-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bone-3);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-2);
}

/* ─── Save bar — explicit «ثبت تغییرات» gate, pinned to the bottom of the
   editor pane. It sits at the end of the scrolling editor area and sticks to
   the viewport bottom so it stays reachable however long the form is. ─── */
.adm-savebar {
  position: sticky;
  bottom: 0;
  /* Pull out to the scroll-container's padding edges so the bar spans the
     full editor pane (the panes use 22px/30px padding; -16px..-30px clears it
     on each side without exceeding the container). */
  margin: 18px -30px -60px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 30px;
  background: var(--ink-2);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -8px 24px -16px rgba(20, 22, 26, 0.35);
}
.adm-savebar.is-dirty {
  border-top-color: var(--flame);
  background: linear-gradient(0deg, var(--ink-2), var(--ink-2)), rgba(200, 150, 62, 0.05);
}
.adm-savebar-note {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bone-3);
  white-space: nowrap;
}
.adm-savebar.is-dirty .adm-savebar-note { color: var(--flame); }
.adm-savebar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}
/* On the org-chart tab the savebar sits at the end of .adm-org (which has no
   side padding), so neutralise the negative side margins there. */
.adm-org > .adm-savebar { margin-inline: 0; margin-bottom: 0; }
@media (max-width: 980px) {
  .adm-savebar { margin-inline: -16px; padding-inline: 16px; }
}

.adm-section {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
}
.adm-section.nested {
  background: var(--ink-3);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.adm-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 10px; flex-wrap: wrap;
}
.adm-section-head h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--flame);
  margin: 0;
}
.adm-section-head .hint {
  font-size: 11px;
  color: var(--bone-3);
}

.adm-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.adm-fields.single { grid-template-columns: 1fr; }
.adm-field { display: flex; flex-direction: column; gap: 6px; }
.adm-field.full { grid-column: 1 / -1; }
.adm-field label {
  font-size: 11px;
  color: var(--bone-3);
}
.adm-field input,
.adm-field textarea,
.adm-field select {
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--bone);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  width: 100%;
  transition: border-color 0.15s ease;
}
.adm-field textarea { min-height: 80px; }
.adm-field input:focus,
.adm-field textarea:focus,
.adm-field select:focus {
  outline: none;
  border-color: var(--flame);
}
.adm-field .field-pair {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 8px;
}
.adm-field .field-pair .tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--bone-3);
  text-align: center;
  padding: 6px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ink-3);
}
.adm-field .field-pair .tag.fa { color: var(--flame); border-color: rgba(200,150,62,0.3); }

/* ─── Project gallery editor ─── */
.adm-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.adm-image-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.adm-image-card .img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ink-3);
}
.adm-image-card .img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.adm-image-card .img-index {
  position: absolute; top: 8px;
  font-family: var(--font-mono); font-size: 10px;
  background: rgba(10,13,20,0.78);
  border: 1px solid var(--line-2);
  border-radius: 999px; padding: 3px 8px;
  color: var(--bone);
}
html[dir="ltr"] .adm-image-card .img-index { left: 8px; }
html[dir="rtl"] .adm-image-card .img-index { right: 8px; }

.adm-image-card .img-actions {
  position: absolute; bottom: 8px; left: 8px; right: 8px;
  display: flex; gap: 6px; justify-content: space-between;
}
.adm-image-card .img-actions .group { display: flex; gap: 4px; }
.adm-img-btn {
  border: 1px solid var(--line-2);
  background: rgba(10,13,20,0.78);
  color: var(--bone);
  width: 28px; height: 28px; border-radius: 6px;
  cursor: pointer; font-size: 13px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); transition: all 0.15s ease;
}
.adm-img-btn:hover { background: var(--ink-4); border-color: var(--bone-3); }
.adm-img-btn.del:hover { background: var(--danger); border-color: transparent; color: #14213D; }
.adm-img-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.adm-image-card .caption-block {
  padding: 9px 11px;
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--line);
}
.adm-image-card .caption-block .cap-label {
  font-size: 10px; color: var(--bone-3);
}
.adm-image-card input.cap-input {
  width: 100%; background: var(--ink); border: 1px solid var(--line);
  color: var(--bone); border-radius: 6px; padding: 5px 8px;
  font-family: inherit; font-size: 12px;
}
.adm-image-card input.cap-input:focus { outline: none; border-color: var(--flame); }

.adm-image-upload {
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--line-2);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: var(--bone-3);
  transition: all 0.2s ease;
  background: var(--ink-2);
}
.adm-image-upload:hover,
.adm-image-upload.drag-over {
  border-color: var(--flame); color: var(--flame);
  background: rgba(200,150,62,0.06);
}
.adm-image-upload .plus { font-size: 28px; line-height: 1; }
.adm-image-upload .lbl { font-size: 11px; }

/* ─── Single-image picker ─── */
.adm-image-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adm-image-picker-label {
  font-size: 11px;
  color: var(--bone-3);
}
.adm-image-picker-area {
  position: relative;
  width: 100%;
  background: var(--ink-2);
  border: 2px dashed var(--line-2);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}
.adm-image-picker-area.has-image { border-style: solid; }
.adm-image-picker-area:hover,
.adm-image-picker-area.drag-over {
  border-color: var(--flame);
}
.adm-image-picker-area img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-image-picker-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; color: var(--bone-3);
}
.adm-image-picker-empty .plus { font-size: 36px; line-height: 1; }
.adm-image-picker-empty .lbl { font-size: 11px; }
.adm-image-picker-actions { display: flex; gap: 6px; }
.adm-image-picker-hint { font-size: 10px; color: var(--bone-4); }

/* ─── Background tab ─── */
.adm-bg-tab {
  padding: 24px 30px 60px;
  overflow-y: auto;
  height: 100%;
}
.adm-bg-head {
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.adm-bg-head h2 {
  font-size: 18px; font-weight: 700; margin: 0 0 6px;
}
.adm-bg-head p {
  margin: 0; color: var(--bone-3); font-size: 13px; line-height: 1.7;
}
.adm-bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.adm-bg-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.adm-bg-card-thumb {
  aspect-ratio: 16 / 10;
  background-color: var(--ink-3);
  background-size: cover;
  background-position: center;
  position: relative;
}
.overridden-badge {
  position: absolute; top: 10px;
  font-family: var(--font-mono); font-size: 9px;
  background: var(--flame); color: #14213D;
  padding: 3px 8px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.1em;
}
html[dir="ltr"] .overridden-badge { left: 10px; }
html[dir="rtl"] .overridden-badge { right: 10px; }

.adm-bg-video-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ink-2), var(--ink));
  color: var(--flame);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  font-weight: 700;
}
.adm-bg-card-body {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.adm-bg-card-title { font-size: 14px; font-weight: 600; }
.adm-bg-card-sub { font-size: 11px; color: var(--bone-3); font-family: var(--font-mono); margin-bottom: 8px; }
.adm-bg-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ─── Texts tab ─── */
.adm-texts-tab {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100%;
  overflow: hidden;
}
/* Single-pane variant (Settings has no side menu): the editor fills the
   whole width + height. Higher specificity (.single) wins over the
   responsive grid overrides below, so it stays full-width on every size. */
.adm-texts-tab.single { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.adm-texts-side {
  background: var(--ink-2);
  border-inline-end: 1px solid var(--line);
  padding: 12px 8px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
}
.adm-texts-side-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--bone-2);
  text-align: start;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: all 0.15s ease;
}
.adm-texts-side-btn:hover { background: var(--ink-3); color: var(--bone); }
.adm-texts-side-btn.active {
  background: var(--ink-3);
  border-color: var(--flame);
  color: var(--flame);
}
.adm-texts-main {
  overflow-y: auto;
  padding: 22px 30px 60px;
  background: var(--ink);
}

/* ─── Color picker grid (Settings → Theme) ─── */
.adm-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.adm-color-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.adm-color-row input[type="color"] {
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink);
  cursor: pointer;
  padding: 0;
}
.adm-color-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.adm-color-info label {
  font-size: 11.5px;
  color: var(--bone);
  font-weight: 500;
}
.adm-color-info input[type="text"] {
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--bone);
  border-radius: 6px;
  padding: 5px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  width: 100%;
}
.adm-color-info input[type="text"]:focus {
  outline: none;
  border-color: var(--flame);
}
.adm-color-info .hint {
  font-size: 10.5px;
  color: var(--bone-3);
}

/* ─── Toast & modals ─── */
.adm-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--bone);
  z-index: 200;
  box-shadow: 0 8px 28px rgba(11,19,38,0.16);
  animation: adm-toast-in 0.25s ease;
}
.adm-toast.ok { border-color: rgba(143,219,168,0.4); color: var(--ok); }
.adm-toast.err { border-color: rgba(216,98,76,0.5); color: var(--danger); }
@keyframes adm-toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.adm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 8, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 250;
  padding: 24px;
}
.adm-modal {
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 22px;
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(11,19,38,0.22);
}
.adm-modal h3 { margin: 0; font-size: 16px; }
.adm-modal p { margin: 0; color: var(--bone-2); font-size: 13px; line-height: 1.6; }
.adm-modal .actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.adm-modal textarea {
  background: var(--ink); border: 1px solid var(--line);
  color: var(--bone); border-radius: 8px; padding: 10px 12px;
  min-height: 200px;
  font-family: var(--font-mono); font-size: 11px;
  line-height: 1.5; resize: vertical;
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .adm-app.full { grid-template-rows: 56px 1fr; }
  /* Side nav collapses to an icon rail — still vertical, still on the right. */
  .adm-app.full.with-side { grid-template-columns: 60px 1fr; }
  .adm-tabbar { padding: 10px 7px 14px; }
  .adm-tabbar-cap { display: none; }
  /* Icon rail: group names become thin separator lines. */
  .adm-tabbar-group {
    margin: 8px 6px;
    padding: 0;
    height: 1px;
    font-size: 0;
    background: var(--line-2);
  }
  .adm-tabbar-group::after { display: none; }
  .adm-header { padding: 0 14px; gap: 8px; }
  .adm-header .title { display: none; }
  .adm-tab { justify-content: center; padding: 11px 6px; }
  .adm-tab .tab-label { display: none; }
  .adm-tab .tab-badge { position: absolute; top: 3px; inset-inline-end: 3px; margin: 0; }
  .adm-coll-layout { grid-template-columns: 220px 1fr; }
  .adm-coll-main { padding: 16px 16px 40px; }
  .adm-texts-tab { grid-template-columns: 160px 1fr; }
  .adm-fields { grid-template-columns: 1fr; }
  .adm-bg-tab { padding: 16px; }
}
@media (max-width: 620px) {
  .adm-coll-layout { grid-template-columns: 1fr; grid-template-rows: 180px 1fr; }
  .adm-coll-sidebar { border-inline-end: none; border-bottom: 1px solid var(--line); }
  .adm-texts-tab { grid-template-columns: 1fr; grid-template-rows: 160px 1fr; }
  .adm-texts-side { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; border-bottom: 1px solid var(--line); border-inline-end: none; }
  .adm-texts-side-btn { white-space: nowrap; }
}

/* ===== Project phases editor (ProjectEditor) ===== */
.adm-phase-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px 14px;
  margin-bottom: 12px;
  background: var(--ink-3);
}
.adm-phase-row-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.adm-phase-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-soft);
  background: rgba(200, 150, 62, 0.12);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ===== Map location picker (ProjectEditor) ===== */
.adm-map-picker {
  margin-bottom: 16px;
}
.adm-map-svg {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  background: #c6ecff;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  cursor: crosshair;
  overflow: hidden;
}
.adm-map-marker { pointer-events: none; }
.adm-map-marker .dot {
  fill: var(--flame);
  stroke: #fff;
  stroke-width: 2;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}
.adm-map-marker .ring {
  fill: none;
  stroke: var(--flame);
  stroke-width: 2;
  opacity: 0.7;
}
.adm-map-pick-hint {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--bone-3);
  letter-spacing: 0.02em;
}
html[dir="rtl"] .adm-map-pick-hint { font-family: var(--font-fa); letter-spacing: 0; }

/* ===== Workforce tab (human-capital charts) ===== */
/* Fill the tab body and let the inner CollectionLayout own the scroll, so the
   pinned save bar inside it stays reachable. The subtabs/hint stay fixed; the
   wrapper holding the hint + collection two-pane flexes to fill the rest. */
.adm-wf-tab {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* The active sub-editor (Departments/Machinery/History) is a <div> wrapping a
   hint paragraph + the CollectionLayout. Make it flex so the layout can scroll. */
.adm-wf-tab > div:not(.adm-wf-subtabs) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.adm-wf-tab > div:not(.adm-wf-subtabs) > .adm-coll-layout {
  flex: 1;
  min-height: 0;
  height: auto;
}
.adm-wf-subtabs {
  display: flex;
  gap: 8px;
  padding: 14px 16px 0;
}
.adm-wf-subtab {
  flex: 1;
  padding: 9px 12px;
  font-family: var(--font-fa);
  font-size: 13px;
  font-weight: 600;
  color: var(--bone-3);
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.adm-wf-subtab:hover { color: var(--bone); }
.adm-wf-subtab.active {
  background: rgba(200, 150, 62, 0.14);
  color: var(--flame);
  border-color: rgba(200, 150, 62, 0.5);
}
.adm-wf-hint {
  margin: 12px 16px 0;
  padding: 10px 14px;
  font-family: var(--font-fa);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--bone-3);
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: 8px;
}
.adm-wf-hint b { color: var(--flame); font-weight: 700; }

/* Colour picker row used by the department editor */
.adm-color-row { display: flex; align-items: center; gap: 10px; }
.adm-color-row input[type="color"] {
  width: 46px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--ink-3);
  cursor: pointer;
}
.adm-color-hex {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.adm-color-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.adm-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(20,22,26,0.16);
  cursor: pointer;
  outline-offset: 2px;
}

/* ─── Colors & appearance tab — per-zone editor + live site preview ─── */
.adm-colors-tab { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; height: 100%; overflow: hidden; }
.adm-colors-editor { overflow-y: auto; padding: 20px 22px 44px; }
.adm-colors-preview { display: flex; flex-direction: column; border-inline-start: 1px solid var(--line); min-width: 0; background: #eef0f4; }
.adm-colors-preview-bar { flex: 0 0 auto; padding: 9px 14px; font-size: 12px; font-weight: 700; color: var(--bone-2); background: var(--ink-2); border-bottom: 1px solid var(--line); letter-spacing: 0.02em; }
.adm-colors-frame { flex: 1 1 auto; width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.adm-colorzone { padding: 11px 0; border-bottom: 1px solid var(--line); }
.adm-colorzone-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.adm-colorzone-name { font-size: 12.5px; font-weight: 600; color: var(--bone); }
.adm-colorzone-jump { font-size: 10.5px; color: #B4791C; background: none; border: 0; cursor: pointer; padding: 2px 5px; border-radius: 5px; font-family: inherit; }
.adm-colorzone-jump:hover { background: rgba(200,150,62,0.14); }
.adm-colorzone-reset { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--bone-2); cursor: pointer; font-size: 15px; line-height: 1; }
.adm-colorzone-reset:disabled { opacity: 0.4; cursor: default; }
.adm-colorzone-reset:not(:disabled):hover { border-color: #C8963E; color: #B4791C; }
.adm-colors-actions { margin-top: 18px; }
.adm-btn-ghost { font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--bone-2); background: none; border: 1px solid var(--line); border-radius: 8px; padding: 9px 16px; cursor: pointer; }
.adm-btn-ghost:hover { border-color: var(--bone-3); color: var(--bone); }
@media (max-width: 860px) { .adm-colors-tab { grid-template-columns: 1fr; } .adm-colors-preview { display: none; } }

/* ───────────────────────────────────────────────────────────────────────
   ORG-CHART EDITOR (Managers tab) — draggable nodes + connectable edges
   ─────────────────────────────────────────────────────────────────────── */
.adm-org {
  display: flex; flex-direction: column; gap: 16px;
  /* Fill the tab body and scroll internally so the bottom save bar (sticky to
     this scroll container) is always reachable below the chart + side panel. */
  height: 100%;
  overflow-y: auto;
  padding: 16px;
}
.adm-org-body { flex: 1; }
.adm-org-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.adm-org-hint { font-size: 12.5px; color: var(--bone-3); }
.adm-btn.small.active { background: var(--gold); color: #14213D; border-color: var(--gold); }
.adm-org-body { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
.adm-org-canvas-wrap { min-width: 0; }
.adm-org-canvas {
  position: relative;
  /* Fit the whole chart in the viewport (height-capped) while keeping the
     same 1200×800 proportions as the public site → centred, no clipping. */
  height: clamp(460px, 70vh, 720px);
  aspect-ratio: 1200 / 800;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  background:
    radial-gradient(circle, var(--line-2) 1px, transparent 1.4px) 0 0 / 26px 26px,
    var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  user-select: none;
}
.adm-org-canvas.is-connect { cursor: crosshair; }
.adm-org-edges { position: absolute; inset: 0; width: 100%; height: 100%; }
.adm-org-edge { fill: none; stroke: var(--bone-4); stroke-width: 2.5; }
.adm-org-edge-del { fill: var(--ink-2); stroke: var(--line-2); stroke-width: 1; cursor: pointer; opacity: 0; transition: opacity .15s; }
.adm-org-edge-x { fill: var(--danger); font-size: 16px; font-weight: 700; cursor: pointer; opacity: 0; transition: opacity .15s; pointer-events: none; }
.adm-org-edges g:hover .adm-org-edge-del, .adm-org-edges g:hover .adm-org-edge-x { opacity: 1; }
.adm-org-edges g:hover .adm-org-edge { stroke: var(--danger); }
.adm-org-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px;
  width: 198px; padding: 9px 12px;
  background: var(--ink-2);
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  box-shadow: 0 8px 20px -12px rgba(11, 19, 38, 0.5);
  cursor: grab;
}
.adm-org-node:active { cursor: grabbing; }
.adm-org-node.is-active { border-color: var(--royal); box-shadow: 0 0 0 2px var(--royal); }
.adm-org-node.is-link { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.adm-org-canvas.is-connect .adm-org-node { cursor: pointer; }
.adm-org-node-photo {
  flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: #14213D; display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-weight: 700; font-size: 17px;
}
.adm-org-node-photo img { width: 100%; height: 100%; object-fit: cover; }
.adm-org-node-text { min-width: 0; }
.adm-org-node-name { font-size: 13px; font-weight: 700; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-org-node-role { font-size: 11px; color: var(--bone-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-org-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--bone-4); font-size: 14px; }
.adm-org-side {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 22px 26px;
  position: sticky; top: 12px;
  /* The editor (name/role/bio + photo) can be taller than the viewport — keep
     it pinned and scroll inside the panel so every field stays reachable. */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}
.adm-org-side .adm-editor-head { margin-top: 0; }
.adm-org-side-empty { padding: 54px 24px; text-align: center; color: var(--bone-3); font-size: 13.5px; line-height: 1.9; }
.adm-org-side-empty .icon { font-size: 38px; margin-bottom: 14px; opacity: 0.5; }
@media (max-width: 900px) {
  .adm-org-body { grid-template-columns: 1fr; }
}

/* ── Newsroom: login gate + reporter submissions inbox ──────────────── */
.adm-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg,#0e1830,#1a2a4a); padding: 24px; }
.adm-login-card { width: min(380px, 92vw); background: #fff; border-radius: 16px; padding: 34px 30px 30px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 14px; }
.adm-login-brand { font-family: 'Vazirmatn', sans-serif; font-weight: 800; font-size: 22px; color: #1a2a4a; text-align: center; }
.adm-login-card h1 { font-family: 'Vazirmatn', sans-serif; font-size: 18px; font-weight: 700; color: #223; margin: 0 0 6px; text-align: center; }
.adm-login-card label { display: flex; flex-direction: column; gap: 6px; font-family: 'Vazirmatn', sans-serif; font-size: 13px; color: #456; font-weight: 600; }
.adm-login-card input { padding: 11px 12px; border: 1px solid #cdd5e0; border-radius: 9px; font-size: 15px; font-family: inherit; }
.adm-login-card input:focus { outline: none; border-color: #C8963E; box-shadow: 0 0 0 3px rgba(200,150,62,.15); }
.adm-login-card a { color: #1a2a4a; font-weight: 700; }
.adm-login-err { background: #fde8e8; color: #b00020; padding: 9px 12px; border-radius: 8px; font-family: 'Vazirmatn', sans-serif; font-size: 13px; }
.adm-login-card .adm-btn.primary { margin-top: 6px; padding: 12px; font-size: 15px; justify-content: center; }
.adm-whoami { font-family: 'Vazirmatn', sans-serif; font-size: 13px; color: #ccd6e6; margin-inline-start: 6px; white-space: nowrap; }

.adm-sub-media { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 12px; }
.adm-sub-mediaitem { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.adm-sub-mediaitem img, .adm-sub-mediaitem video { width: 220px; height: 148px; object-fit: cover; border-radius: 10px; background: #eef1f6; display: block; }
.adm-sub-file { width: 220px; min-height: 56px; display: flex; align-items: center; justify-content: center; background: #eef1f6; border-radius: 10px; font-family: 'Vazirmatn', sans-serif; font-size: 13px; padding: 8px; text-align: center; }
.adm-sub-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rep-msg { margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-family: 'Vazirmatn', sans-serif; font-size: 13.5px; }
.rep-msg.ok { background: #e6f6ec; color: #137a3b; }
.rep-msg.err { background: #fde8e8; color: #b00020; }

/* ── Reporter panel — full-width compose + submissions ─────────────── */
.rep-main { padding: 22px clamp(16px, 3vw, 44px); }
.rep-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; max-width: 1600px; margin: 0 auto; }
.rep-fields3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rep-send { padding: 13px 30px; font-size: 15px; }
.rep-subs { display: flex; flex-direction: column; gap: 12px; max-height: 72vh; overflow-y: auto; padding: 2px; }
.rep-sub { border: 1px solid #e2e7ef; border-radius: 12px; padding: 12px 14px; background: #fbfcfe; }
.rep-sub-head { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.rep-chip { font-family: 'Vazirmatn', sans-serif; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.rep-chip.new { background: #fff3d6; color: #8a6526; }
.rep-chip.used { background: #e6f6ec; color: #137a3b; }
.rep-chip.archived { background: #eceff3; color: #5b6678; }
.rep-chip.cat { background: rgba(20,33,61,.08); color: #1a2a4a; }
.rep-sub-title { font-family: 'Vazirmatn', sans-serif; font-weight: 700; font-size: 15px; color: #1c2433; line-height: 1.5; }
.rep-sub-meta { font-family: 'Vazirmatn', sans-serif; font-size: 12px; color: #7a8699; margin-top: 3px; }
.rep-sub-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rep-sub-thumbs img, .rep-sub-thumbs video { width: 92px; height: 64px; object-fit: cover; border-radius: 8px; background: #eef1f6; }
.rep-sub-file { width: 92px; height: 64px; display: flex; align-items: center; justify-content: center; background: #eef1f6; border-radius: 8px; }
@media (max-width: 920px) {
  .rep-grid { grid-template-columns: 1fr; }
  .rep-fields3 { grid-template-columns: 1fr; }
  .rep-subs { max-height: none; }
}