* { box-sizing: border-box; }
body.admin {
  margin: 0; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  direction: rtl; background: #f4f6f8; color: #2b2b2b;
  min-height: 100vh;
}
a { color: #2c7a4d; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Layout ===== */
.sidebar {
  position: fixed; top: 0; right: 0; width: 240px; height: 100vh;
  background: #1f2a24; color: #d8d8d8;
  padding: 1.25rem; overflow-y: auto;
}
.admin-main { margin-right: 240px; padding: 1.5rem 2rem; }
@media (max-width: 800px) {
  .sidebar { position: static; width: 100%; height: auto; }
  .admin-main { margin-right: 0; padding: 1rem; }
}

.sidebar-brand { display: flex; gap: .75rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid #333; }
.sidebar-brand .mark {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: #c9a84c; color: #000; border-radius: 50%;
  font-family: 'Amiri', serif; font-size: 22px; font-weight: 700;
}
.sidebar-brand strong { display: block; color: #fff; }
.sidebar-brand small { color: #999; font-size: .8rem; }

.sidebar-nav { display: flex; flex-direction: column; gap: .15rem; margin-top: 1rem; }
.sidebar-nav a, .sidebar-nav button {
  display: block; padding: .6rem .85rem; border-radius: 6px;
  color: #d8d8d8; font-size: .95rem; background: none; border: none;
  font-family: inherit; text-align: right; cursor: pointer; width: 100%;
}
.sidebar-nav a:hover, .sidebar-nav button:hover { background: #2c3932; color: #fff; text-decoration: none; }
.sidebar-nav a.active { background: #2c7a4d; color: #fff; }
.sidebar-nav hr { border: none; border-top: 1px solid #333; margin: .75rem 0; }
.logout-form { margin-top: .5rem; }
.logout-form button { color: #ff7e7e; }

.admin-topbar { background: #fff; border-radius: 10px; padding: 1rem 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.admin-topbar h1 { margin: 0; font-size: 1.3rem; color: #1f5a38; }

.admin-content { background: #fff; border-radius: 10px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.05); }

/* ===== Dashboard ===== */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card {
  background: #fff; border: 1px solid #eee; border-radius: 10px;
  padding: 1.5rem; text-align: center; color: #333;
  transition: transform .15s;
}
.stat-card:hover { transform: translateY(-2px); text-decoration: none; }
.stat-card.alert { border-color: #d32f2f; background: #ffebee; }
.stat-icon { font-size: 2rem; display: block; }
.stat-value { font-size: 2.2rem; font-weight: 700; color: #1f5a38; display: block; }
.stat-label { color: #666; font-size: .9rem; }

.quick-actions h2 { color: #1f5a38; font-size: 1.15rem; margin-bottom: .75rem; }
.actions-grid { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ===== Buttons ===== */
.btn {
  display: inline-block; padding: .55rem 1.15rem; border-radius: 6px;
  font-weight: 600; border: 2px solid transparent; cursor: pointer;
  transition: all .15s; text-decoration: none; font-family: inherit; font-size: .95rem;
}
.btn-primary { background: #2c7a4d; color: #fff; border-color: #2c7a4d; }
.btn-primary:hover { background: #1f5a38; color: #fff; text-decoration: none; }
.btn-ghost { background: transparent; color: #2c7a4d; border-color: #2c7a4d; }
.btn-ghost:hover { background: #2c7a4d; color: #fff; }
.btn-danger { background: #d32f2f; color: #fff; border-color: #d32f2f; }
.btn-block { width: 100%; display: block; }

/* ===== Tables ===== */
.toolbar { margin-bottom: 1rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.toolbar .muted { margin: 0; font-size: .85rem; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: .75rem; text-align: right; border-bottom: 1px solid #eee; }
.admin-table th { background: #f8f9fa; font-weight: 700; color: #1f5a38; font-size: .9rem; }
.admin-table td a { color: #2c7a4d; font-weight: 600; }
.admin-table .actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.admin-table .actions a, .admin-table .actions button {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: #2c7a4d;
}
.link-danger { color: #d32f2f !important; }

.tabs { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 2px solid #eee; }
.tabs a {
  padding: .5rem 1rem; color: #666; font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.tabs a.active { color: #2c7a4d; border-color: #2c7a4d; }
.tabs a:hover { text-decoration: none; color: #1f5a38; }

/* ===== Forms ===== */
.admin-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.admin-form label { display: block; margin-bottom: .25rem; font-weight: 600; color: #333; }
.admin-form label.full { grid-column: 1 / -1; }
.admin-form label.inline { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.admin-form input[type="text"], .admin-form input[type="password"], .admin-form input[type="number"], .admin-form input[type="file"], .admin-form textarea {
  width: 100%; padding: .55rem .85rem; border: 1px solid #ddd; border-radius: 6px;
  font-family: inherit; font-size: 1rem; background: #fff; margin-top: .3rem;
}
.admin-form textarea { font-family: 'Cairo', sans-serif; line-height: 1.7; resize: vertical; }
.admin-form input:focus, .admin-form textarea:focus { outline: none; border-color: #2c7a4d; box-shadow: 0 0 0 3px rgba(44,122,77,.15); }
.admin-form small { display: block; color: #888; margin-top: .25rem; font-size: .82rem; }
.admin-form .form-actions { margin-top: 1.25rem; grid-column: 1 / -1; display: flex; gap: .5rem; }
.admin-form .req { color: #d32f2f; }
@media (max-width: 700px) { .admin-form .form-grid { grid-template-columns: 1fr; } }

.preview-pane {
  padding: 1rem; background: #fafafa; border: 1px dashed #ccc; border-radius: 6px;
  min-height: 100px;
}
.preview-pane strong { color: #1f5a38; display: block; margin-bottom: .5rem; }
.markdown { line-height: 1.7; }
.markdown h1, .markdown h2, .markdown h3 { color: #1f5a38; }
.markdown ul, .markdown ol { padding-inline-start: 1.5em; }
.markdown blockquote { border-inline-start: 4px solid #c9a84c; background: #fffbe6; padding: .5rem 1rem; margin: 1rem 0; }
.markdown code { background: #f0eee8; padding: .1em .4em; border-radius: 3px; }

/* ===== Flash ===== */
.flash-stack { margin-bottom: 1rem; }
.flash { padding: .85rem 1.25rem; border-radius: 6px; margin-bottom: .5rem; font-weight: 600; }
.flash-success { background: #e8f5e9; color: #1f5a38; border-right: 4px solid #2c7a4d; }
.flash-error { background: #ffebee; color: #7a1d1d; border-right: 4px solid #d32f2f; }
.flash-info { background: #e3f2fd; color: #1565c0; border-right: 4px solid #1565c0; }

/* ===== Login ===== */
.login-page { display: grid; place-items: center; min-height: 100vh; padding: 1rem; background: linear-gradient(135deg, #e8f5e9, #f4f6f8); }
.login-card { background: #fff; padding: 2.5rem; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.08); width: 100%; max-width: 400px; }
.login-brand { text-align: center; margin-bottom: 1.5rem; }
.login-brand .mark {
  width: 60px; height: 60px; display: grid; place-items: center; margin: 0 auto;
  background: #2c7a4d; color: #fff; border-radius: 50%;
  font-family: 'Amiri', serif; font-size: 32px; font-weight: 700;
}
.login-brand h1 { color: #1f5a38; margin: 1rem 0 .25rem; font-size: 1.4rem; }
.login-brand p { color: #888; margin: 0; }
.login-card label { display: block; margin-bottom: 1rem; font-weight: 600; }
.login-card input { width: 100%; padding: .7rem; border: 1px solid #ddd; border-radius: 6px; margin-top: .3rem; font-size: 1rem; }
.login-card input:focus { outline: none; border-color: #2c7a4d; }
.login-footer { text-align: center; margin-top: 1.25rem; font-size: .9rem; }

/* ===== Submission detail ===== */
.submission-detail .sub-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .5rem 1rem; background: #f8f9fa; padding: 1rem; border-radius: 8px; margin: 1rem 0;
}
.submission-story {
  white-space: pre-wrap; background: #fff; border: 1px solid #eee;
  padding: 1.25rem; border-radius: 8px; margin-bottom: 1rem; line-height: 1.9;
}
.action-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.action-row form { display: flex; gap: .5rem; align-items: center; }
.action-row input[type="text"] { padding: .5rem; border: 1px solid #ddd; border-radius: 6px; min-width: 200px; }
.danger-form { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #eee; }

.muted { color: #888; }
.center { text-align: center; }
code { background: #f0eee8; padding: .1em .4em; border-radius: 3px; font-size: .92em; }