/**
 * Amaysha Portal - Modern Executive UI & Design System
 */

:root {
  --bg: #f6f8fb;
  --card: #ffffff;
  --ink: #0b1220;
  --ink-light: #1c2938;
  --muted: #44546a;
  --line: #d8e0ea;
  --line-light: #eef2f7;

  /* Brand Colors */
  --pri: #0284c7;
  --pri-hover: #0369a1;
  --pri-light: #e0f2fe;
  --pri-dark: #075985;

  /* Status Colors */
  --ok: #059669;
  --ok-bg: #ecfdf5;
  --ok-border: #a7f3d0;

  --warn: #d97706;
  --warn-bg: #fffbeb;
  --warn-border: #fde68a;

  --err: #e11d48;
  --err-bg: #fff1f2;
  --err-border: #fecdd3;

  --info: #2563eb;
  --info-bg: #eff6ff;
  --info-border: #bfdbfe;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--pri);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--pri-hover);
  text-decoration: underline;
}

/* ---------------- Sticky Topbar ---------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, #0d243e 0%, #123c60 55%, #0e4a73 100%);
  border-bottom: 3px solid #0284c7;
  padding: 12px 28px;
  box-shadow: 0 6px 18px rgba(10, 30, 55, 0.28);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: -0.3px;
}
.brand:hover { text-decoration: none; color: #7dd3fc; }

.logo {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #22a7e0 0%, #38bdf8 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.45);
}

nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
nav a {
  color: #cfe0ef;
  font-weight: 600;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 7px;
  transition: all 0.15s ease;
}
nav a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  text-decoration: none;
}

.who {
  font-size: 13px;
  font-weight: 600;
  color: #e7eef6;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
}

.tag {
  background: rgba(251, 191, 36, 0.18);
  color: #fcd34d;
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.topbar .btn-sm {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.32);
  padding: 7px 15px;
  border-radius: 8px;
}
.topbar .btn-sm:hover {
  background: #ffffff !important;
  color: #0d243e !important;
  border-color: #ffffff;
  transform: translateY(-1px);
}

.navpill {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 10px;
  background: #f59e0b;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 2px 5px rgba(245, 158, 11, 0.45);
}

/* ---------------- Layout & Wrappers ---------------- */
.wrap {
  max-width: 1240px;
  margin: 24px auto;
  padding: 0 20px;
}
.wrap.narrow {
  max-width: 480px;
}
/* Wide data-management pages: more white-card space without stretching forms. */
.wrap.wrap-wide {
  width: 100%;
  max-width: 1600px;
}
.table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  border-radius: 8px;
}
.table-scroll > table { display: table; overflow: visible; }
.billing-table { min-width: 1320px; }
.billing-table .mono { white-space: nowrap; }
.billing-table .billing-student { min-width: 145px; }
.billing-table .billing-date { min-width: 112px; }
.billing-table .billing-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 180px;
  align-items: center;
}
.mini.mail-reset { background: #e0f2fe; border-color: #7dd3fc; color: #075985; }
.mini.mail-reset:hover { background: #bae6fd; border-color: #0284c7; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  box-shadow: var(--shadow-md);
}

h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.4px;
  margin: 0 0 6px 0;
}
h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.2px;
  margin: 0 0 14px 0;
}
.sub {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 20px 0;
}

/* ---------------- Form Controls ---------------- */
label {
  display: block;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 6px;
}
.req { color: var(--err); }

input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number],
input[type=date],
select,
textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  transition: all 0.15s ease;
}

::placeholder {
  color: #46586f;
  opacity: 1;
  font-weight: 500;
  letter-spacing: 0.2px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--pri);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
  background: #ffffff;
}

input[type=file] {
  width: 100%;
  padding: 10px;
  border: 1.5px dashed #b6c4d4;
  border-radius: 9px;
  background: #f4f7fb;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-light);
  cursor: pointer;
}
input[type=file]:hover {
  border-color: var(--pri);
  background: #eef7fe;
}
input[type=file]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
input[type=file]::file-selector-button:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
}

.field {
  margin-bottom: 16px;
}
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.hint {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  margin-top: 5px;
  line-height: 1.45;
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff !important;
  border: 0;
  padding: 10px 18px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
  transition: all 0.15s ease;
  text-decoration: none !important;
}
.btn:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  box-shadow: 0 4px 8px rgba(2, 132, 199, 0.35);
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}

.btn.wide { width: 100%; }

.btn.ghost {
  background: #ffffff !important;
  color: var(--ink-light) !important;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.btn.ghost:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1;
  color: var(--ink) !important;
}

.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pri);
  color: #fff !important;
  padding: 6px 13px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none !important;
}
.btn-sm:hover {
  background: var(--pri-hover);
  transform: translateY(-1px);
}
.btn-sm.ghost {
  background: #fff !important;
  color: var(--ink-light) !important;
  border: 1px solid var(--line);
}
.btn-sm.ghost:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1;
  color: var(--ink) !important;
}

.mini {
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink-light);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.mini:hover {
  border-color: var(--pri);
  color: var(--pri);
}
.mini.ok {
  background: #059669;
  border-color: #059669;
  color: #ffffff;
}
.mini.ok:hover { background: #047857; }
.mini.warn {
  background: #d97706;
  border-color: #d97706;
  color: #ffffff;
}
.mini.warn:hover { background: #b45309; }
.mini.bad {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #e11d48;
}
.mini.bad:hover {
  background: #e11d48;
  border-color: #e11d48;
  color: #ffffff;
}

/* ---------------- Flash & Alert Boxes ---------------- */
.flash {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid;
}
.flash.ok {
  background: var(--ok-bg);
  color: #065f46;
  border-color: var(--ok-border);
}
.flash.err {
  background: var(--err-bg);
  color: #9f1239;
  border-color: var(--err-border);
}
.flash.warn {
  background: var(--warn-bg);
  color: #92400e;
  border-color: var(--warn-border);
}

.errbox {
  background: var(--err-bg);
  border: 1px solid var(--err-border);
  color: #9f1239;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  margin-bottom: 18px;
}
.errbox ul { margin: 6px 0 0 18px; padding: 0; }

/* ---------------- Tables ---------------- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  margin-top: 8px;
}
th, td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
th {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2b3a4d;
  background: #eef2f7;
  border-top: 1px solid var(--line);
}
th:first-child { border-top-left-radius: 8px; }
th:last-child { border-top-right-radius: 8px; }

tr:hover td {
  background-color: #f8fafc;
}

/* ---------------- Badges & Pills ---------------- */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.badge.good { background: var(--ok-bg); color: #065f46; border: 1px solid var(--ok-border); }
.badge.warn { background: var(--warn-bg); color: #92400e; border: 1px solid var(--warn-border); }
.badge.bad  { background: var(--err-bg); color: #9f1239; border: 1px solid var(--err-border); }
.badge.info { background: var(--info-bg); color: #1e40af; border: 1px solid var(--info-border); }

.pill {
  display: inline-block;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 600;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
  color: #475569;
}

/* ---------------- Stats Grid ---------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.stat {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.stat b {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.5px;
}
.stat span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

/* ---------------- Footer ---------------- */
.foot {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 30px 20px;
  border-top: 1px solid var(--line);
  margin-top: 40px;
  background: #ffffff;
}
.center { text-align: center; font-size: 14px; margin-top: 16px; }

/* ---------------- Searchable Dropdown ---------------- */
.ss-wrap { position: relative; display: block; }
select.ss-native {
  position: absolute !important;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  left: 12px;
  bottom: 6px;
}
.ss-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff;
  font: inherit;
  font-size: 14px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ss-btn:hover { border-color: #cbd5e1; }
.ss-wrap.ss-open .ss-btn, .ss-btn:focus {
  outline: 0;
  border-color: var(--pri);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}
.ss-btn.ss-empty .ss-btn-t { color: #5a6b80; }
.ss-btn-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-caret { color: #44546a; font-size: 11px; flex: none; transition: transform 0.2s; }
.ss-wrap.ss-open .ss-caret { transform: rotate(180deg); }

.ss-pop {
  position: absolute;
  z-index: 999;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
  padding: 8px;
  max-height: 340px;
  display: flex;
  flex-direction: column;
}
.ss-pop[hidden] { display: none; }
.ss-search {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  font: inherit;
  font-size: 13.5px;
}
.ss-search:focus { outline: 0; border-color: var(--pri); background: #ffffff; }
.ss-count { font-size: 11px; color: var(--muted); padding: 6px 4px 4px; }
.ss-list { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ss-opt {
  padding: 9px 12px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13.5px;
}
.ss-opt + .ss-opt { margin-top: 1px; }
.ss-opt.ss-active { background: #f0f9ff; color: var(--pri); }
.ss-opt.ss-sel { font-weight: 700; color: var(--pri); }
.ss-opt.ss-sel::after { content: ' ✓'; color: var(--pri); }
.ss-none { padding: 14px 10px; color: var(--muted); font-size: 13px; text-align: center; }

/* ---------------- Global Readability Overrides ----------------
   Inline "watermark-grey" texts used across pages → dark, eye-friendly ink.
   (#94a3b8 intentionally untouched — used on dark hero cards where light is correct.) */
[style*="color:#64748b"] { color: #334155 !important; }
[style*="color:#a1a1aa"] { color: #44566c !important; }

/* Disabled email actions remain readable, but must never look successful. */
.btn:disabled, .mini:disabled, .btn:disabled:hover, .mini:disabled:hover {
  background: #e2e8f0 !important;
  color: #334155 !important;
  border-color: #b6c4d4;
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
input:disabled {
  color: #334155;
  background: #f1f5f9;
  opacity: 1;
  cursor: not-allowed;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 768px) {
  .wrap { padding: 0 14px; margin: 16px auto; }
  .grid2 { grid-template-columns: 1fr; }
  .topbar { padding: 10px 16px; }
  .card { padding: 18px 14px; border-radius: 12px; }
  table { display: block; overflow-x: auto; }
}