/* ============================================================================
   CE admin — light mode of the CE Network design

   The member app (member.css) is the design: a deep-blue ground, one violet →
   blue accent gradient, 18–20px cards, pill chips, the SF/system face at
   tight tracking. This file is that design with the ground turned white, put
   over the admin shell (app.css) so the back end reads as the same product
   the members use.

   It is a skin, not a rewrite: every selector here already exists in app.css
   or in the admin pages, and it only restates colour, radius, type and
   spacing. Layout rules (the sidebar grid, the mobile bottom bar, the
   dropdown positioning) are left to app.css. Scoped to body.ce-admin-light,
   which the two admin layouts set.
   ========================================================================= */
body.ce-admin-light {
  /* Light translation of member.css tokens. Ink is the member app's modal
     ground (#12163A), so text carries the same blue-black as the dark UI. */
  --al-bg:       #F6F7FC;
  --al-card:     #FFFFFF;
  --al-surface:  #F1F2FA;
  --al-border:   rgba(18, 22, 58, 0.10);
  --al-border-2: rgba(18, 22, 58, 0.16);
  --al-text:     #12163A;
  --al-muted:    rgba(18, 22, 58, 0.62);
  --al-faint:    rgba(18, 22, 58, 0.42);
  --al-accent:   #8B5CF6;
  --al-accent-2: #2D3FE7;
  --al-green:    #15A052;
  --al-amber:    #C77700;
  --al-pink:     #DB1B67;
  --al-shadow:   0 1px 2px rgba(18, 22, 58, 0.05), 0 8px 24px rgba(18, 22, 58, 0.06);
  --al-radius:   18px;
  --al-radius-s: 12px;

  background: var(--al-bg);
  color: var(--al-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.ce-admin-light h1, body.ce-admin-light h2, body.ce-admin-light h3,
body.ce-admin-light h4, body.ce-admin-light h5, body.ce-admin-light .h3,
body.ce-admin-light .btn, body.ce-admin-light .on-sb__text,
body.ce-admin-light .on-nav__dropdown, body.ce-admin-light .table th,
body.ce-admin-light input, body.ce-admin-light select, body.ce-admin-light textarea {
  font-family: inherit;
}
body.ce-admin-light a { color: var(--al-accent-2); }

/* ---- sidebar ------------------------------------------------------------ */
body.ce-admin-light .on-sb {
  background: var(--al-card);
  border-right: 1px solid var(--al-border);
  border-top-right-radius: 0;
}
/* The school-coloured borders are a member thing; admins get the clean edge. */
body.ce-admin-light .on-sb.uwi, body.ce-admin-light .on-sb.utech,
body.ce-admin-light .on-sb.cmu, body.ce-admin-light .on-sb.mico,
body.ce-admin-light .on-sb.edna, body.ce-admin-light .on-sb.other {
  border-top: 0; border-right: 1px solid var(--al-border);
}
body.ce-admin-light .on-sb__logo { display: flex; align-items: center; padding: 0 28px; height: 92px; }
body.ce-admin-light .on-sb__logo a { display: flex; align-items: baseline; gap: 6px; }
body.ce-admin-light .on-sb__logo img, body.ce-admin-light .on-nav__logo img { display: none; }
body.ce-admin-light .on-nav__logo .al-brand { font-size: 17px; }
/* The wordmark as the member app sets it: "The" quiet, "CE Network" in the
   accent gradient. Text, so it is crisp on white and never a washed-out PNG. */
body.ce-admin-light .al-brand { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
body.ce-admin-light .al-brand small {
  font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--al-muted); margin-right: 5px;
}
body.ce-admin-light .al-brand b {
  font-weight: 800;
  background: linear-gradient(135deg, var(--al-accent), var(--al-accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.ce-admin-light .on-sb__links { padding: 6px 12px 12px; }
body.ce-admin-light .on-sb__link {
  display: flex; align-items: center; gap: 12px;
  width: auto; padding: 11px 14px; margin-bottom: 3px;
  border-radius: 13px; color: var(--al-muted); font-size: 13.5px;
}
body.ce-admin-light .on-sb__link:hover { background: var(--al-surface); color: var(--al-text); }
/* Active: the member app's active pill — accent tint, accent edge — not a
   solid block. */
body.ce-admin-light .on-sb__link.active,
body.ce-admin-light .on-sb__link.active:hover {
  background: color-mix(in srgb, var(--al-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--al-accent) 34%, transparent);
  color: var(--al-text);
}
body.ce-admin-light .on-sb__icon {
  width: 32px; height: 32px; margin: 0; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; background: var(--al-surface); color: var(--al-muted);
}
body.ce-admin-light .on-sb__link.active .on-sb__icon {
  background: linear-gradient(135deg, var(--al-accent), var(--al-accent-2));
  color: #fff; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}
body.ce-admin-light .on-sb__icon.color--danger { color: var(--al-pink); }
body.ce-admin-light .on-sb__text { font-weight: 600; }
body.ce-admin-light .on-sb__notification-dot { background: var(--al-pink); }

/* ---- topbar ------------------------------------------------------------- */
body.ce-admin-light .on-nav { padding: 18px 0 8px; }
body.ce-admin-light .on-nav__burger, body.ce-admin-light .on-nav__notification-bell { color: var(--al-text); }
body.ce-admin-light .on-nav__burger:hover, body.ce-admin-light .on-nav__notification-bell:hover { color: var(--al-accent); }
body.ce-admin-light .on-nav__notification { border-right: 1px solid var(--al-border); }
body.ce-admin-light .on-nav__notification-count { background: var(--al-pink); color: #fff; }
/* CE Points / XP figures as the quiet stat chips the member wallet uses. */
body.ce-admin-light .on-nav__info h5 {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--al-faint) !important; margin: 0 0 2px;
}
body.ce-admin-light .on-nav__info .font--bold { font-weight: 800; font-variant-numeric: tabular-nums; }
body.ce-admin-light .on-nav__signifier { background: linear-gradient(135deg, var(--al-accent), var(--al-accent-2)) !important; }
body.ce-admin-light .on-nav__dropdown {
  background: var(--al-card); border: 1px solid var(--al-border); border-radius: var(--al-radius);
  box-shadow: var(--al-shadow); filter: none; overflow: hidden;
}
body.ce-admin-light .on-nav__userinfo { background: var(--al-surface); }
body.ce-admin-light .on-nav__username { color: var(--al-text); font-weight: 700; }
body.ce-admin-light .on-nav__email { color: var(--al-muted); }
body.ce-admin-light .on-nav__link { color: var(--al-text); border-radius: 10px; }
body.ce-admin-light .on-nav__link:hover { background: var(--al-surface); }
body.ce-admin-light .on-nav__section { border-color: var(--al-border); }

/* ---- page ---------------------------------------------------------------- */
body.ce-admin-light .on-main { padding: 0 32px 24px; }
body.ce-admin-light .on-main__heading {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em; text-transform: none;
  color: var(--al-text); margin: 16px 0 18px !important;
}
body.ce-admin-light .on-header { margin-bottom: 20px; }
body.ce-admin-light .on-heading h2, body.ce-admin-light .h3 {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--al-text);
}

/* ---- cards ---------------------------------------------------------------- */
body.ce-admin-light .card,
body.ce-admin-light .table--container,
body.ce-admin-light .ce-admin .acard {
  background: var(--al-card); border: 1px solid var(--al-border);
  border-radius: var(--al-radius); box-shadow: var(--al-shadow);
}
body.ce-admin-light .card { padding: 22px 24px; margin-bottom: 20px; }
body.ce-admin-light .card.shadow { box-shadow: var(--al-shadow) !important; }
body.ce-admin-light .table--container { padding: 6px 18px; }
/* The wedge stage on the wheel manage page and every other inner panel. */
body.ce-admin-light .card .card-body { background: var(--al-surface); border-radius: 14px; padding: 18px; }
body.ce-admin-light .card .card-body h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; }

/* ---- buttons ------------------------------------------------------------- */
body.ce-admin-light .btn {
  border-radius: 13px; font-weight: 700; letter-spacing: -0.005em; font-size: 13px;
  padding: 11px 18px; border: 1px solid transparent; transition: filter 0.15s ease, background 0.15s ease;
}
body.ce-admin-light .btn--primary,
body.ce-admin-light .btn--gradient {
  background: linear-gradient(135deg, var(--al-accent), var(--al-accent-2)); color: #fff;
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.28);
}
body.ce-admin-light .btn--primary:hover, body.ce-admin-light .btn--gradient:hover {
  background: linear-gradient(135deg, var(--al-accent), var(--al-accent-2)); filter: brightness(1.06); color: #fff;
}
/* Inverted buttons are the ghosts: white, bordered, ink text. */
body.ce-admin-light .btn--invert,
body.ce-admin-light .btn--inverted,
body.ce-admin-light .btn--secondary {
  background: var(--al-card); border-color: var(--al-border-2); color: var(--al-text); box-shadow: none;
}
body.ce-admin-light .btn--invert:hover, body.ce-admin-light .btn--secondary:hover { background: var(--al-surface); color: var(--al-text); }
body.ce-admin-light .btn--invert.btn--primary { color: var(--al-accent-2); border-color: color-mix(in srgb, var(--al-accent) 40%, transparent); }
body.ce-admin-light .btn--invert.btn--primary:hover { background: color-mix(in srgb, var(--al-accent) 8%, #fff); }
body.ce-admin-light .btn--success { background: var(--al-green); color: #fff; }
body.ce-admin-light .btn--success:hover { background: #128A47; }
body.ce-admin-light .btn--invert.btn--success { background: rgba(21, 160, 82, 0.08); border-color: rgba(21, 160, 82, 0.35); color: var(--al-green); }
body.ce-admin-light .btn--danger { background: var(--al-pink); color: #fff; }
body.ce-admin-light .btn--danger:hover { background: #B8155A; }
body.ce-admin-light .btn--invert.btn--danger { background: rgba(219, 27, 103, 0.07); border-color: rgba(219, 27, 103, 0.35); color: var(--al-pink); }
body.ce-admin-light .btn--warning { background: #FFB547; color: var(--al-text); }
body.ce-admin-light .btn--dark { background: var(--al-text); color: #fff; }
body.ce-admin-light .btn--number { background: var(--al-pink); }
/* The wedge-insert buttons on the wheel manage page: small tinted squares. */
body.ce-admin-light .add-prize { border-radius: 11px; padding: 9px 12px; margin-right: 4px; }
body.ce-admin-light .add-prize.btn--inverted.btn--success { background: var(--al-green); color: #fff; }

/* ---- forms ---------------------------------------------------------------- */
body.ce-admin-light .input, body.ce-admin-light input:not([type=checkbox]):not([type=radio]):not([type=file]),
body.ce-admin-light select, body.ce-admin-light textarea {
  background: var(--al-card); border: 1px solid var(--al-border-2); border-radius: var(--al-radius-s);
  color: var(--al-text); height: 46px; padding: 0 14px; font-size: 14px;
}
body.ce-admin-light textarea { height: auto; min-height: 130px; padding: 12px 14px; }
body.ce-admin-light .input:focus, body.ce-admin-light input:focus,
body.ce-admin-light select:focus, body.ce-admin-light textarea:focus {
  outline: none; border-color: var(--al-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-accent) 18%, transparent);
}
body.ce-admin-light .input--label, body.ce-admin-light label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--al-faint);
}
body.ce-admin-light .form--group small { display: block; font-size: 11.5px; color: var(--al-muted); margin-top: 6px; line-height: 1.5; }
body.ce-admin-light input[type=search] { border-radius: 100px; padding: 0 16px; }

/* A field never grows past the cell that holds it. The form grid already
   lets cells shrink (min-width: 0); this stops the control itself from
   forcing the cell wider than its column. */
body.ce-admin-light input, body.ce-admin-light select, body.ce-admin-light textarea { max-width: 100%; }

/* Native date and time pickers. Safari on iPad and iPhone gives
   input[type=date|time] an intrinsic width, centres the value, and until
   appearance is reset ignores the width the grid hands it. On the activity
   form that ran the start date, end date and start time together over each
   other's cells. Reset the chrome, hand the box to the grid, and left-align
   the value so it reads like the text field beside it. The picker is
   unchanged: tapping still opens the native wheel. */
body.ce-admin-light input[type=date],
body.ce-admin-light input[type=time],
body.ce-admin-light input[type=datetime-local],
body.ce-admin-light input[type=month] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0; box-sizing: border-box;
  height: 46px; line-height: 44px; padding: 0 14px;
  text-align: left; background-image: none;
}
body.ce-admin-light input::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; margin: 0; }
body.ce-admin-light input::-webkit-datetime-edit { padding: 0; }
body.ce-admin-light input::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }

/* Touch. iOS zooms the page into any field set under 16px the moment it is
   focused, and stays zoomed. Pointer devices keep the 14px of the design;
   touch gets 16px, which is also the easier size to hit. */
@media (pointer: coarse) {
  body.ce-admin-light .input, body.ce-admin-light input:not([type=checkbox]):not([type=radio]):not([type=file]),
  body.ce-admin-light select, body.ce-admin-light textarea { font-size: 16px; }
}
/* No double-tap-to-zoom delay on the things people tap. */
body.ce-admin-light .btn, body.ce-admin-light .ce-admin .abtn, body.ce-admin-light .ce-admin .ce-linkbtn,
body.ce-admin-light .ce-admin .ce-rowbtn, body.ce-admin-light .on-nav__userimg,
body.ce-admin-light .on-nav__link, body.ce-admin-light .on-sb__link { touch-action: manipulation; }

/* ---- tables --------------------------------------------------------------- */
body.ce-admin-light .table { border-spacing: 0; }
body.ce-admin-light .table th {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--al-faint); background: var(--al-card); border-bottom: 1px solid var(--al-border);
  padding: 12px 12px;
}
body.ce-admin-light .table td {
  padding: 13px 12px; border-bottom: 1px solid var(--al-border); color: var(--al-text); font-size: 13.5px;
  vertical-align: middle;
}
body.ce-admin-light .table tbody tr:last-child td { border-bottom: 0; }
body.ce-admin-light .table tbody tr:hover td { background: var(--al-surface); }
body.ce-admin-light .table-bordered, body.ce-admin-light .table-bordered th, body.ce-admin-light .table-bordered td { border-color: var(--al-border) !important; }
body.ce-admin-light .table-prizes { color: var(--al-text) !important; }

/* ---- chips: tags, badges, pills ------------------------------------------- */
body.ce-admin-light .tag, body.ce-admin-light .badge, body.ce-admin-light .ce-admin .pill {
  border-radius: 100px; font-weight: 800; font-size: 11px; letter-spacing: 0.02em;
  padding: 5px 11px; min-width: 0; border: 1px solid transparent; white-space: nowrap;
}
body.ce-admin-light .badge.badge-dark { color: #fff; }
body.ce-admin-light .tag--primary { background: color-mix(in srgb, var(--al-accent) 12%, #fff); border-color: color-mix(in srgb, var(--al-accent) 35%, transparent); color: var(--al-accent-2); }
body.ce-admin-light .tag--success { background: rgba(21, 160, 82, 0.10); border-color: rgba(21, 160, 82, 0.35); color: var(--al-green); }
body.ce-admin-light .tag--warning { background: rgba(199, 119, 0, 0.10); border-color: rgba(199, 119, 0, 0.35); color: var(--al-amber); }
body.ce-admin-light .tag--danger { background: rgba(219, 27, 103, 0.08); border-color: rgba(219, 27, 103, 0.35); color: var(--al-pink); }
body.ce-admin-light .tag--dark { background: var(--al-surface); border-color: var(--al-border-2); color: var(--al-text); }
body.ce-admin-light .stock_count { color: var(--al-muted); font-size: 12px; }

/* ---- alerts --------------------------------------------------------------- */
body.ce-admin-light .alert { border-radius: 14px; font-size: 13px; font-weight: 600; padding: 13px 16px; }
body.ce-admin-light .alert--success { background: rgba(21, 160, 82, 0.10); border-color: rgba(21, 160, 82, 0.3); color: #0F7A3D; }
body.ce-admin-light .alert--danger { background: rgba(219, 27, 103, 0.08); border-color: rgba(219, 27, 103, 0.3); color: #A8124E; }
body.ce-admin-light .alert--primary { background: color-mix(in srgb, var(--al-accent) 10%, #fff); border-color: color-mix(in srgb, var(--al-accent) 30%, transparent); color: var(--al-accent-2); }
body.ce-admin-light .alert--warning { background: rgba(199, 119, 0, 0.10); border-color: rgba(199, 119, 0, 0.3); color: #8A5300; }

/* ---- modals --------------------------------------------------------------- */
body.ce-admin-light .modal { background: rgba(18, 22, 58, 0.55); backdrop-filter: blur(4px); }
body.ce-admin-light .modal .card, body.ce-admin-light .modal__content { border-radius: 20px; }

/* ---- the Tailwind-built admin screens (appv2: dashboard overview etc.) ----
   Only the surfaces: cards get the design's radius and edge, grounds get the
   page tint. Nothing about spacing or layout. */
body.ce-admin-light .bg-white.rounded-lg,
body.ce-admin-light .bg-white.rounded-md {
  border-radius: var(--al-radius); border: 1px solid var(--al-border); box-shadow: var(--al-shadow);
}
body.ce-admin-light .bg-gray-50 { background: var(--al-surface); }
body.ce-admin-light .text-gray-900 { color: var(--al-text); }
body.ce-admin-light .text-gray-700 { color: var(--al-text); }
body.ce-admin-light .text-gray-500, body.ce-admin-light .text-gray-400 { color: var(--al-muted); }
body.ce-admin-light .text-blue-600, body.ce-admin-light .text-blue-500, body.ce-admin-light .text-blue-800 { color: var(--al-accent-2); }
body.ce-admin-light .rounded-full.bg-blue-600, body.ce-admin-light .bg-blue-600 {
  background: linear-gradient(135deg, var(--al-accent), var(--al-accent-2));
}

/* ---- the CE admin screens (admin-ce.css) take the same accent ---------- */
body.ce-admin-light .ce-admin {
  --a-page: var(--al-card); --a-surface: var(--al-surface); --a-border: var(--al-border);
  --a-text: var(--al-text); --a-muted: var(--al-muted); --a-accent: var(--al-accent-2);
  --a-good: var(--al-green); --a-bad: var(--al-pink);
}
body.ce-admin-light .ce-admin .abtn { background: linear-gradient(135deg, var(--al-accent), var(--al-accent-2)); border-radius: 13px; }
body.ce-admin-light .ce-admin .abtn--ghost { background: var(--al-card); }
body.ce-admin-light .ce-admin .abtn--danger { background: var(--al-card); }

/* ---- mobile: the bottom bar keeps app.css layout, takes the skin --------- */
@media screen and (max-width: 720px) {
  body.ce-admin-light .on-sb { border-right: 0; border-top: 1px solid var(--al-border) !important; }
  body.ce-admin-light .on-sb__link { border-radius: 0; margin: 0; }
  body.ce-admin-light .on-sb__link.active, body.ce-admin-light .on-sb__link.active:hover { box-shadow: none; background: none; }
  body.ce-admin-light .on-sb__icon { width: 28px; height: 28px; }
  body.ce-admin-light .on-main { padding: 0 16px 24px; }
}