/* Chandramauli Trust MIS — interface styles */

:root {
  --maroon-900: #1c1008;
  --maroon-700: #3a2114;
  --maroon-600: #4a2814;
  --gold: #e2a63c;
  --gold-dark: #d0951f;
  --gold-badge-bg: #f6e6c3;
  --gold-badge-text: #7a5313;
  --cream: #f7efe0;
  --cream-card: #faf3e6;
  --ink: #2c1a0e;
  --brown: #8a6a44;
  --brown-light: #a3825a;
  --border: #efe2c9;
  --border-light: #e6d8ba;
  --divider: #f0e2c4;
  --divider-light: #f6efdd;
  --green: #276a35;
  --green-bg: #dcefdd;
  --red: #a13a2f;
  --red-bg: #fbe8e4;
  --radius: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.serif { font-family: Georgia, "Times New Roman", serif; font-weight: normal; }
.muted { color: var(--brown); font-size: 14px; }
.small { font-size: 12px; }
.eyebrow { font-size: 10px; letter-spacing: .15em; color: var(--brown-light); margin-bottom: 4px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- auth */

.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--maroon-600), var(--maroon-900));
}

.auth-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 40px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

.auth-card h1 { font-size: 26px; margin: 0 0 6px; }
.auth-brand { margin-bottom: 24px; }
.auth-brand .mark {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-size: 20px; margin-bottom: 12px;
}
.auth-brand .name { font-family: Georgia, serif; font-size: 20px; }
.auth-brand .sub { font-size: 10px; letter-spacing: .2em; color: var(--gold-badge-text); }

/* ---------------------------------------------------------------- shell */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 256px; flex-shrink: 0;
  background: linear-gradient(to bottom, var(--maroon-700), var(--maroon-900));
  color: #e6d3ae;
  display: flex; flex-direction: column;
}
.sidebar-head {
  padding: 24px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(90,58,34,.5);
}
.sidebar-head .mark {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-family: Georgia, serif;
}
.sidebar-head .name { font-family: Georgia, serif; font-size: 18px; color: #f3e6cc; line-height: 1.1; }
.sidebar-head .sub { font-size: 9px; letter-spacing: .2em; color: var(--gold); }

.sidebar nav { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px;
  color: #e6d3ae; text-decoration: none; font-size: 14px;
}
.sidebar nav a:hover { background: #4a2f1c; }
.sidebar nav a.active { background: var(--gold); color: var(--ink); font-weight: 600; }
.sidebar nav a svg { width: 17px; height: 17px; flex-shrink: 0; }

.sidebar-foot { padding: 16px; border-top: 1px solid rgba(90,58,34,.5); }
.sidebar-foot .who { font-size: 14px; color: #f3e6cc; }
.sidebar-foot .handle { font-size: 12px; color: #a3825a; margin-bottom: 12px; }
.sidebar-foot a { color: #e6d3ae; font-size: 14px; text-decoration: none; }
.sidebar-foot a:hover { color: #fff; }

.main { flex: 1; padding: 32px; overflow-x: hidden; }

.page-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.page-head .title { display: flex; align-items: center; gap: 12px; }
.page-head h1 { font-family: Georgia, serif; font-size: 24px; margin: 0; line-height: 1.2; }
.page-head .mark {
  width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-size: 14px;
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: #7a4a26; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}

/* ---------------------------------------------------------------- cards */

.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(60,30,10,.06); padding: 20px; margin-bottom: 16px;
}
.card h2, .card h3 { font-family: Georgia, serif; font-weight: normal; margin: 0 0 16px; }
.card h2 { font-size: 18px; }
.card h3 { font-size: 16px; }

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.stat .label { font-size: 12px; color: var(--brown); }
.stat .value { font-family: Georgia, serif; font-size: 24px; margin-top: 8px; }
.stat .sub { font-size: 12px; color: var(--brown-light); margin-top: 4px; }

.hero {
  border-radius: var(--radius); padding: 32px; margin-bottom: 24px;
  background: linear-gradient(135deg, var(--maroon-700), var(--maroon-900));
  color: #f3e6cc; display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 20px;
}
.hero h2 { font-family: Georgia, serif; font-size: 26px; margin: 8px 0; font-weight: normal; }
.hero p { color: #c9ab7e; font-size: 14px; margin: 0 0 20px; }
.hero .eyebrow { color: var(--gold); }
.hero .emblem {
  width: 120px; height: 120px; border-radius: 50%;
  border: 2px solid rgba(226,166,60,.4);
  display: flex; align-items: center; justify-content: center; font-size: 36px;
}

/* selectable tiles (data entry flow) */
.tile {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; text-decoration: none; color: inherit; display: block;
}
.tile:hover { border-color: var(--gold); }
.tile .icon {
  width: 44px; height: 44px; border-radius: 12px; background: var(--cream-card);
  color: #8a4a24; display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.tile .name { font-family: Georgia, serif; font-size: 18px; }
.tile .meta { font-size: 12px; color: var(--brown-light); margin-top: 4px; }

/* ---------------------------------------------------------------- forms */

label { display: block; font-size: 12px; color: var(--brown-light); margin-bottom: 4px; }
label input, label select, label textarea { margin-top: 6px; }

input, select, textarea {
  width: 100%; border: 1px solid var(--border-light); border-radius: 12px;
  padding: 10px 14px; font-size: 16px; color: var(--ink); background: #fff;
  font-family: inherit; max-width: 100%;
  min-width: 0;            /* lets the field shrink inside grid/flex parents */
  min-height: 46px;        /* same height as every other control */
}

/* Date and time fields need extra help.
   iOS Safari gives them an intrinsic width and ignores width:100%, which is
   why they used to sit narrower than the text boxes beside them. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  background-color: #fff;
  line-height: 1.2;
  /* iOS ignores vertical padding on these, so center the text instead */
  text-align: left;
}

/* Stop the value block from centring itself in the field on WebKit */
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}

/* Push the little calendar/clock icon to the right edge */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  margin-left: auto;
  opacity: .55;
  cursor: pointer;
}

/* Safari adds inner spin/clear buttons that throw off the alignment */
input[type="date"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button,
input[type="time"]::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
}

/* Grid and flex children default to min-width:auto, so a wide control can
   refuse to shrink and push the form sideways. */
.row > label,
.grid > *,
.stack > label { min-width: 0; }
.row, .grid { min-width: 0; }
@media (min-width: 821px) { input, select, textarea { font-size: 14px; } }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold);
}
textarea { resize: vertical; min-height: 80px; }

.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 20px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  font-family: inherit;
}
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { background: var(--gold-dark); }
.btn-ghost { background: #fff; border-color: var(--border-light); color: var(--ink); }
.btn-ghost:hover { background: var(--cream-card); }
.btn-danger { background: #fff; border-color: #e6c9c0; color: var(--red); }
.btn-danger:hover { background: var(--red-bg); }
.btn-sm { padding: 6px 12px; font-size: 12px; }

.checks { border: 1px solid var(--border-light); border-radius: 12px; padding: 16px; max-height: 240px; overflow-y: auto; }
.checks .group-name { font-weight: 600; font-size: 14px; color: var(--ink); margin: 12px 0 8px; }
.checks .group-name:first-child { margin-top: 0; }
.checks label {
  display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink);
  margin-bottom: 6px; cursor: pointer;
}
.checks input[type=checkbox] { width: auto; margin: 0; }

/* ---------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left; font-size: 12px; font-weight: normal; color: var(--brown-light);
  border-bottom: 1px solid var(--divider); padding-bottom: 8px;
}
tbody td { padding: 10px 0; border-bottom: 1px solid var(--divider-light); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
td.strong { font-weight: 500; }
td.dim, th.dim { color: var(--brown); }
.empty { text-align: center; color: var(--brown-light); padding: 32px 0; }

/* ---------------------------------------------------------------- bits */

.badge { font-size: 12px; padding: 4px 10px; border-radius: 999px; font-weight: 500; display: inline-block; }
.badge-gold { background: var(--gold-badge-bg); color: var(--gold-badge-text); }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-grey { background: #f0e9db; color: var(--brown); }
.badge-red { background: var(--red-bg); color: var(--red); }

.notice { padding: 12px 16px; border-radius: 12px; font-size: 14px; margin-bottom: 16px; }
.notice-error { background: var(--red-bg); color: var(--red); }
.notice-ok { background: var(--green-bg); color: var(--green); }
.notice-warn { background: var(--gold-badge-bg); color: var(--gold-badge-text); }

.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; font-size: 14px; }
.crumbs a, .crumbs span { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--brown-light); }
.crumbs .on { background: var(--gold-badge-bg); color: var(--gold-badge-text); font-weight: 500; }
.crumbs .sep { color: var(--border); padding: 0; }

.bar-track { height: 8px; border-radius: 999px; background: var(--divider); overflow: hidden; margin: 12px 0 8px; }
.bar-fill { height: 100%; background: var(--green); }

.status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 6px; }

/* charts (inline SVG, no external library) */
.chart { width: 100%; height: auto; }
.chart .axis { stroke: var(--divider); stroke-width: 1; }
.chart .label { font-size: 10px; fill: var(--brown); }
.chart .bar-a { fill: #8a4a24; }
.chart .bar-b { fill: var(--gold); }
.chart .line { fill: none; stroke: var(--gold); stroke-width: 2.5; }

/* calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 12px; color: var(--brown-light); text-align: center; margin-bottom: 8px; }
.cal-cell { min-height: 84px; border: 1px solid var(--divider); border-radius: 8px; padding: 6px; }
.cal-cell.blank { border-color: transparent; }
.cal-cell.today { background: #fbf0da; }
.cal-cell .num { font-size: 12px; color: var(--brown); margin-bottom: 4px; }
.cal-cell.today .num { color: #a1651a; font-weight: 600; }
.cal-event {
  font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-event.approved { background: var(--green-bg); color: var(--green); }
.cal-event.pending { background: var(--gold-badge-bg); color: var(--gold-badge-text); }

/* modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(28,16,8,.5); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
/* Author CSS beats the browser's built-in [hidden] rule, so restore it
   explicitly — without this the dialogs can never be closed. */
.modal-backdrop[hidden] { display: none; }
.modal {
  background: #fff; border-radius: var(--radius); width: 100%; max-width: 560px;
  max-height: 88vh; overflow-y: auto; padding: 24px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-head h3 { font-family: Georgia, serif; font-size: 20px; margin: 0; font-weight: normal; }
.modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--brown); line-height: 1; }

.split { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 360px; } }


/* ============================================================
   MOBILE / RESPONSIVE
   ============================================================ */

/* Top bar and drawer are desktop-hidden by default. */
.mobile-bar { display: none; }
.drawer-scrim { display: none; }
.avatar-sm { width: 32px; height: 32px; font-size: 11px; }

img, svg, table { max-width: 100%; }
body { -webkit-text-size-adjust: 100%; }

@media (max-width: 820px) {

  /* --- top bar --- */
  .mobile-bar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 40;
    padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
    background: linear-gradient(to right, var(--maroon-700), var(--maroon-900));
    color: #f3e6cc;
  }
  .mobile-bar-title {
    flex: 1; display: flex; align-items: center; gap: 8px;
    font-family: Georgia, serif; font-size: 17px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .mobile-bar-title .mark {
    width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0;
  }
  .menu-btn {
    width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(255,255,255,.1);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; cursor: pointer; flex-shrink: 0; padding: 0;
  }
  .menu-btn span { display: block; width: 18px; height: 2px; background: #f3e6cc; border-radius: 2px; }

  /* --- drawer --- */
  .shell { flex-direction: row; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 264px; max-width: 82vw;
    z-index: 60; transform: translateX(-100%);
    transition: transform .22s ease; overflow-y: auto;
    padding-top: env(safe-area-inset-top);
  }
  .sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.45); }
  .drawer-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(20,12,6,.55);
  }
  .drawer-scrim[hidden] { display: none; }
  .sidebar nav a { padding: 13px 14px; }   /* comfortable touch targets */

  /* --- main column --- */
  .main { padding: 16px; width: 100%; }
  .page-head { display: none; }            /* the top bar replaces it on mobile */

  /* --- hero --- */
  .hero { padding: 22px 18px; }
  .hero h2 { font-size: 21px; }
  .hero .emblem { display: none; }
  .hero .actions .btn { flex: 1 1 auto; }

  /* --- cards and type --- */
  .card { padding: 16px; border-radius: 14px; }
  .stat .value { font-size: 21px; }
  .card h2 { font-size: 17px; }

  /* --- tables become stacked cards --- */
  .table-wrap { overflow-x: visible; }
  .table-wrap table, .table-wrap thead, .table-wrap tbody,
  .table-wrap th, .table-wrap td, .table-wrap tr { display: block; }
  .table-wrap thead { position: absolute; left: -9999px; }   /* headers move into each row */
  .table-wrap tr {
    border: 1px solid var(--divider); border-radius: 12px;
    padding: 10px 12px; margin-bottom: 10px; background: #fff;
  }
  .table-wrap td {
    border: 0; padding: 5px 0; display: flex; gap: 12px;
    align-items: baseline; justify-content: space-between; text-align: right;
  }
  .table-wrap td::before {
    content: attr(data-label); flex: 0 0 42%;
    text-align: left; color: var(--brown-light); font-size: 12px;
  }
  .table-wrap td:empty { display: none; }
  .table-wrap td.right { text-align: right; }
  .table-wrap .empty { display: block; text-align: center; }
  .table-wrap .empty::before { content: none; }

  /* --- calendar --- */
  .cal-cell { min-height: 58px; padding: 4px; border-radius: 6px; }
  .cal-cell .num { font-size: 11px; }
  .cal-event { font-size: 9px; padding: 1px 4px; }
  .cal-head { font-size: 10px; }
  .cal-grid { gap: 2px; }

  /* --- modals go near full screen --- */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0;
    padding: 20px 18px; padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  /* --- buttons and forms --- */
  .btn { padding: 12px 16px; }
  .actions .btn { flex: 1 1 auto; }
  .crumbs { font-size: 13px; gap: 4px; }
  .checks { max-height: 44vh; }
}

/* Sign-in and installer screens on phones */
@media (max-width: 560px) {
  .auth-body { padding: 0; align-items: stretch; }
  .auth-card {
    padding: 28px 20px; border-radius: 0; max-width: 100%; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center; box-shadow: none;
  }
  .auth-card h1 { font-size: 23px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .main { padding: 12px; }
  .hero { padding: 18px 14px; }
  .hero h2 { font-size: 19px; }
  .table-wrap td::before { flex-basis: 46%; }
}

/* Landscape phones and small tablets: two stat columns rather than one */
@media (min-width: 560px) and (max-width: 820px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* Printing: drop the navigation entirely */
@media print {
  .sidebar, .mobile-bar, .drawer-scrim, .actions, .btn { display: none !important; }
  .main { padding: 0; }
  .card { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
}



/* ============================================================
   DONOR PORTAL
   ============================================================ */
.donor-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px; padding-top: max(14px, env(safe-area-inset-top));
  background: linear-gradient(to right, var(--maroon-700), var(--maroon-900));
  color: #f3e6cc; position: sticky; top: 0; z-index: 40;
}
.donor-brand { display: flex; align-items: center; gap: 10px; }
.donor-brand .mark {
  width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; flex-shrink: 0;
}
.donor-brand .name { font-family: Georgia, serif; font-size: 17px; display: block; line-height: 1.1; }
.donor-brand .sub { font-size: 9px; letter-spacing: .18em; color: var(--gold); display: block; }
.donor-bar-right { display: flex; align-items: center; gap: 12px; }
.donor-bar-right .btn-ghost {
  background: rgba(255,255,255,.12); border-color: rgba(226,166,60,.35); color: #f3e6cc;
}
.donor-main { max-width: 1000px; margin: 0 auto; padding: 24px; }
.donor-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px; max-width: 460px; margin: 32px auto;
  box-shadow: 0 1px 2px rgba(60,30,10,.06);
}
.donor-card h1 { font-size: 24px; margin: 0 0 6px; }

@media (max-width: 820px) {
  .donor-bar { padding: 12px 16px; }
  .donor-main { padding: 16px; }
  .donor-card { padding: 22px 18px; margin: 16px auto; }
  .donor-bar-right .small { display: none; }
}