/* Admin area — builds on app.css tokens */

.admin-body { background: #f4f5f7; }

.admin-header {
  background: var(--navy); /* arabicsap.com heading slate #2f3f50 — flat, no gradient */
  color: #fff; padding: .7rem 0;
}
.admin-header .brand-logo { background: #fff; padding: 4px; border-radius: 4px; width: 42px; height: auto; }
.admin-header .brand-text strong, .admin-header .brand-text small { color: #fff; }
.admin-header .brand-text small { opacity: .75; }
.admin-header-inner { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.admin-header .brand { margin-inline-end: auto; }
.admin-nav { display: flex; gap: .2rem; flex-wrap: wrap; align-items: center; }
.admin-nav > a {
  position: relative; color: rgba(255,255,255,.85); padding: .5rem 1rem; border-radius: 8px;
  font-size: .88rem; font-weight: 700; transition: background .15s ease, color .15s ease;
}
.admin-nav > a:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Grouped dropdown menus — a small "flyout" panel per domain area */
.admin-nav-group { position: relative; }
.admin-nav-toggle {
  display: flex; align-items: center; gap: .4rem;
  background: none; border: none; cursor: pointer; font-family: var(--font);
  color: rgba(255,255,255,.85); padding: .5rem 1rem; border-radius: 8px;
  font-size: .88rem; font-weight: 700; letter-spacing: .1px;
  transition: background .15s ease, color .15s ease;
}
.admin-nav-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }
.admin-nav-caret {
  font-size: .6rem; opacity: .75; transition: transform .2s cubic-bezier(.4,0,.2,1);
  transform: translateY(1px);
}
.admin-nav-group.is-open .admin-nav-toggle { background: rgba(255,255,255,.14); color: #fff; }
.admin-nav-group.is-open .admin-nav-caret { transform: rotate(180deg) translateY(-1px); opacity: 1; }

.admin-nav-dropdown {
  position: absolute; inset-inline-start: -.5rem; top: calc(100% + 12px);
  background: #fff; border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(24, 33, 43, .28), 0 4px 12px rgba(24, 33, 43, .08), 0 0 0 1px rgba(24, 33, 43, .045);
  min-width: 240px; padding: .5rem; z-index: 50;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px) scale(.97); transform-origin: top center;
  transition: opacity .16s ease, transform .16s cubic-bezier(.2,.9,.3,1.1), visibility .16s;
}
/* Little pointer triangle connecting the panel back to its trigger button */
.admin-nav-dropdown::before {
  content: ""; position: absolute; top: -5px; inset-inline-start: 22px;
  width: 10px; height: 10px; background: #fff;
  transform: rotate(45deg); border-radius: 2px;
  box-shadow: -3px -3px 6px -4px rgba(24, 33, 43, .18);
}
.admin-nav-group.is-open .admin-nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1);
}
.admin-nav-dropdown-label {
  display: block; color: var(--muted); font-size: .68rem; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase; padding: .4rem .85rem .55rem;
  margin-bottom: .3rem; border-bottom: 1px solid var(--line);
}
.admin-nav-dropdown a {
  position: relative; display: block; color: var(--navy); padding: .62rem .85rem .62rem 1.1rem;
  border-radius: 9px; font-size: .87rem; font-weight: 600; white-space: nowrap;
  transition: background .12s ease, color .12s ease, padding-inline-start .12s ease;
}
.admin-nav-dropdown a::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 3px; background: var(--blue); transition: height .14s ease;
}
.admin-nav-dropdown a:hover {
  background: var(--blue-soft); color: var(--blue-hover); padding-inline-start: 1.3rem;
}
.admin-nav-dropdown a:hover::before { height: 60%; }
.admin-nav-dropdown a + a { margin-top: 1px; }
.admin-user { display: flex; align-items: center; gap: .8rem; }
.admin-user-name { display: flex; flex-direction: column; line-height: 1.2; font-size: .85rem; font-weight: 700; }
.admin-user-name small { font-weight: 400; opacity: .7; font-size: .7rem; }
.admin-user .btn-ghost { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.3); }
.btn-sm { padding: .4rem .9rem; font-size: .8rem; }

.admin-main { flex: 1; padding: 1.6rem 0 3rem; }

.admin-title { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.admin-title h1 { font-size: 1.35rem; font-weight: 800; color: var(--navy); }

/* Stat tiles */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem; box-shadow: var(--shadow-soft); }
.stat-tile b { display: block; font-size: 1.7rem; color: var(--navy); }
.stat-tile span { color: var(--muted); font-size: .82rem; font-weight: 700; }
.stat-tile.is-accent { border-top: 4px solid var(--blue); }
.stat-tile.is-warn { border-top: 4px solid var(--gold); }
.stat-tile.is-ok { border-top: 4px solid var(--green); }
.stat-tile.is-danger { border-top: 4px solid var(--red); }

/* Tables */
.table-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; }
.table-scroll { overflow-x: auto; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.admin-table th {
  background: #f7fafd; color: var(--muted); font-size: .74rem; text-align: start;
  padding: .7rem .9rem; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.admin-table td { padding: .7rem .9rem; border-bottom: 1px solid #eef2f6; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: #fafcfe; }
.admin-table .cell-sub { display: block; color: var(--muted); font-size: .72rem; }

/* Status badges */
.badge { display: inline-block; padding: .18rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.badge-DRAFT, .badge-EMAIL_PENDING { background: #eceff3; color: #5c6b7a; }
.badge-COURSE_SELECTION { background: var(--blue-soft); color: var(--blue); }
.badge-PAYMENT_TYPE_SELECTION { background: #ede7f8; color: #6c3fc5; }
.badge-INSTALLMENT_DATA_PENDING { background: var(--amber-soft); color: var(--amber); }
.badge-READY_FOR_PAYMENT { background: var(--green-soft); color: var(--green); }
.badge-region-EGYPT { background: var(--green-soft); color: var(--green); }
.badge-region-INTERNATIONAL { background: var(--blue-soft); color: var(--blue); }
.badge-OPEN { background: var(--green-soft); color: var(--green); }
.badge-CLOSED, .badge-CANCELLED { background: var(--red-soft); color: var(--red); }
.badge-FULL { background: var(--amber-soft); color: var(--amber); }
.badge-mismatch { background: var(--amber-soft); color: var(--amber); }
.badge-PAYMENT_PENDING { background: #ede7f8; color: #6c3fc5; }
.badge-PAYMENT_REVIEW { background: var(--amber-soft); color: var(--amber); }
.badge-PAYMENT_CONFIRMED { background: var(--green-soft); color: var(--green); }
.badge-pay-PAID, .badge-pay-FIRST_INSTALLMENT_PAID { background: var(--green-soft); color: var(--green); }
.badge-pay-PENDING_REVIEW { background: var(--amber-soft); color: var(--amber); }
.badge-pay-INITIATED, .badge-pay-PENDING, .badge-pay-REDIRECTED, .badge-pay-PROCESSING { background: var(--blue-soft); color: var(--blue); }
.badge-pay-FAILED, .badge-pay-REJECTED, .badge-pay-CANCELLED, .badge-pay-EXPIRED, .badge-pay-REFUNDED { background: var(--red-soft); color: var(--red); }
.badge-danger { background: var(--red-soft); color: var(--red); }

.badge-int-COMPLETED { background: var(--green-soft); color: var(--green); }
.badge-int-QUEUED, .badge-int-PROCESSING, .badge-int-WORDPRESS_CREATED, .badge-int-PROFILE_SYNCED { background: var(--blue-soft); color: var(--blue); }
.badge-int-PARTIALLY_ENROLLED, .badge-int-COURSE_ENROLLMENT_PENDING, .badge-int-REQUIRES_ADMIN_REVIEW { background: var(--amber-soft); color: var(--amber); }
.badge-int-FAILED, .badge-int-NOT_STARTED { background: var(--red-soft); color: var(--red); }

.check-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.check-item { display: flex; align-items: center; gap: .45rem; font-weight: 400; font-size: .88rem; cursor: pointer; }
.check-item input { width: 17px; height: 17px; accent-color: var(--blue); }
.btn-danger { color: var(--red); border-color: #f5c6c0; }
.btn-danger:hover { color: #fff; background: var(--red); border-color: var(--red); }
.review-card { border-top: 4px solid var(--gold); }

/* Filters */
.filter-bar { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.1rem; align-items: center; }
.filter-bar select, .filter-bar input {
  font-family: var(--font); padding: .5rem .8rem; border: 1.5px solid var(--line);
  border-radius: 9px; font-size: .85rem; background: #fff;
}
.filter-bar input[type="text"] { min-width: 220px; }

/* Detail page */
.detail-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.3rem; align-items: start; }
.detail-stack { display: flex; flex-direction: column; gap: 1.3rem; }
.detail-card h2 { font-size: 1rem; color: var(--navy); margin-bottom: .9rem; border-bottom: 1px solid var(--line); padding-bottom: .6rem; }

/* Timeline */
.timeline { list-style: none; position: relative; padding-inline-start: 1.2rem; }
.timeline::before { content: ""; position: absolute; inset-block: 4px; inset-inline-start: 4px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 .9rem .2rem; font-size: .82rem; }
.timeline li::before {
  content: ""; position: absolute; inset-inline-start: -1.2rem; top: .35rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--blue); border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--blue-soft);
}
.timeline .tl-time { color: var(--muted); font-size: .7rem; display: block; direction: ltr; text-align: end; float: left; }
.timeline .tl-meta { color: var(--muted); font-size: .72rem; display: block; word-break: break-word; }

/* Login */
.login-card { max-width: 400px; margin: 3.5rem auto; text-align: center; }
.login-card .brand-logo { width: 64px; height: 64px; margin-bottom: .8rem; }
.login-card h1 { font-size: 1.25rem; color: var(--navy); margin-bottom: 1.2rem; }
.login-card .field { text-align: start; margin-bottom: 1rem; }
.login-card .btn { width: 100%; }

/* Pagination */
.pager { display: flex; gap: .4rem; justify-content: center; margin-top: 1.2rem; }
.pager a, .pager span {
  padding: .35rem .8rem; border-radius: 8px; border: 1px solid var(--line);
  font-size: .82rem; background: #fff; color: var(--muted);
}
.pager .is-current { background: var(--blue); border-color: var(--blue); color: #fff; }

@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* Round management — module cards with inline rounds */
.round-modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1.1rem; }
.round-module-card { padding: 1.3rem; display: flex; flex-direction: column; gap: .9rem; }
.round-module-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.round-module-head h2 { font-size: 1.02rem; color: var(--navy); margin: 0 0 .3rem; }
.round-module-desc { color: var(--muted); font-size: .82rem; margin: 0; max-width: 44ch; }
.round-module-price { display: flex; gap: .4rem; align-items: center; font-weight: 800; color: var(--navy); white-space: nowrap; font-size: .92rem; }
.round-module-price span:nth-child(2) { color: var(--muted); font-weight: 400; }
.round-list { display: flex; flex-direction: column; gap: .5rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.round-empty { color: var(--muted); font-size: .82rem; margin: 0; }
.round-row {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem .7rem; background: #f7fafd; border-radius: 8px;
}
.round-row-main { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .86rem; }
.round-row-main .round-code { color: var(--muted); font-family: monospace; }
.round-row-actions { display: flex; gap: .4rem; white-space: nowrap; }
.round-add-btn { align-self: flex-start; }

@media (max-width: 700px) {
  .round-modules-grid { grid-template-columns: 1fr; }
}