﻿/* =====================================================================
   eMIS - grids, toolbars and forms of the pages converted from DevExpress
   (ASPxGridView -> asp:GridView, ASPxFormLayout -> Bootstrap rows).
   Linked by Admin/MasterAdmin.master, SchoolsPortal/SchoolsMasterPage.master
   and the public pages that use it. Plain CSS, no build step.
   ===================================================================== */

/* ── card around a grid or a form ─────────────────────────────────── */
.emis-card { background:#fff; border:1px solid #e5e9f2; border-radius:4px; padding:18px; margin-bottom:18px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.emis-card-title { font-size:15px; font-weight:700; color:#1c2b46; margin:0 0 4px; }
.emis-card-sub { font-size:12.5px; color:#8094ae; margin:0 0 14px; }

/* ── toolbar: search on the left, downloads on the right ──────────── */
.emis-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.emis-toolbar .emis-search { display:flex; gap:8px; flex:1 1 280px; max-width:560px; }
.emis-toolbar .emis-search .form-control, .emis-toolbar .emis-search .form-select { min-width:0; }
.emis-toolbar .emis-export { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.emis-toolbar .emis-export .lbl { font-size:12px; color:#8094ae; margin-right:2px; }
.emis-export .btn { font-size:12.5px; padding:5px 11px; border-radius:4px; }
.emis-count { font-size:12.5px; color:#8094ae; }

/* ── the grid ─────────────────────────────────────────────────────── */
.emis-grid-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid #e5e9f2; border-radius:4px; background:#fff; }
.emis-grid { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; background:#fff; margin:0; }
.emis-grid > tbody > tr > th, .emis-grid > thead > tr > th, .emis-grid th { background:#f5f7fb; color:#364a63; font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; padding:10px 12px; border-bottom:1px solid #e5e9f2; white-space:nowrap; text-align:left; }
.emis-grid th a { color:inherit; text-decoration:none; }
.emis-grid th a:hover { color:#1d4ed8; }
.emis-grid th.sorted-asc a:after { content:" \25B2"; font-size:9px; color:#1d4ed8; }
.emis-grid th.sorted-desc a:after { content:" \25BC"; font-size:9px; color:#1d4ed8; }
.emis-grid td { padding:9px 12px; border-bottom:1px solid #eef1f6; vertical-align:middle; color:#364a63; }
.emis-grid tr:last-child td { border-bottom:0; }
.emis-grid tr:hover > td { background:#f8faff; }
.emis-grid .n, .emis-grid td.n, .emis-grid th.n { text-align:right; font-variant-numeric:tabular-nums; }
.emis-grid .c { text-align:center; }
.emis-grid .nowrap { white-space:nowrap; }
.emis-grid .sub { display:block; font-size:11.5px; color:#8094ae; }
.emis-grid .act { white-space:nowrap; text-align:right; }
.emis-grid .act .btn { padding:3px 9px; font-size:12px; border-radius:4px; }
.emis-grid img.thumb { width:44px; height:44px; object-fit:cover; border-radius:4px; border:1px solid #e5e9f2; }
.emis-grid tr.row-warn > td { background:#fffbeb; }
.emis-grid tr.row-bad > td { background:#fef2f2; }
.emis-grid tr.row-ok > td { background:#f0fdf4; }
.emis-grid tr.emis-pager > td { border:0; background:#fff !important; padding:10px 8px; }

/* pager (GridView PagerStyle CssClass="emis-pager") */
.emis-pager table { margin:0 auto; border-collapse:separate; }
.emis-pager td { border:0 !important; padding:0 !important; background:transparent !important; }
.emis-pager a, .emis-pager span { display:inline-block; min-width:32px; height:32px; line-height:30px; padding:0 8px; text-align:center; border-radius:4px; margin:0 2px; font-size:13px; color:#526484; text-decoration:none; border:1px solid #e5e9f2; background:#fff; }
.emis-pager span { background:#1d4ed8; color:#fff; border-color:#1d4ed8; font-weight:600; }
.emis-pager a:hover { background:#eef4ff; color:#1d4ed8; }

.emis-empty { padding:36px 12px; text-align:center; color:#8094ae; font-size:13.5px; }
.emis-empty .ico { font-size:30px; display:block; margin-bottom:6px; opacity:.6; }

/* ── badges ───────────────────────────────────────────────────────── */
.emis-badge { display:inline-block; padding:2px 9px; border-radius:4px; font-size:11.5px; font-weight:600; line-height:1.6; white-space:nowrap; }
.emis-badge.ok { background:#e6f6ee; color:#15803d; }
.emis-badge.warn { background:#fff4e5; color:#b45309; }
.emis-badge.bad { background:#fdecea; color:#b91c1c; }
.emis-badge.info { background:#e8f0fe; color:#1d4ed8; }
.emis-badge.muted { background:#f1f5f9; color:#64748b; }

/* ── forms (ASPxFormLayout replacements) ──────────────────────────── */
.emis-form .form-label { font-size:12.5px; font-weight:600; color:#344357; margin-bottom:4px; }
.emis-form .form-text { font-size:11.5px; }
.emis-form-section { border:1px solid #e5e9f2; border-radius:4px; padding:16px 16px 6px; margin-bottom:16px; background:#fff; }
.emis-form-section > .ttl { font-weight:700; font-size:12.5px; color:#1d4ed8; margin:0 0 12px; text-transform:uppercase; letter-spacing:.05em; }
.emis-form .form-check { padding-top:6px; }
.emis-form .req:after { content:" *"; color:#dc2626; }
.emis-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; padding-top:6px; }

/* ── captcha ──────────────────────────────────────────────────────── */
.emis-captcha { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.emis-captcha img { border:1px solid #dbe2ef; border-radius:4px; height:54px; width:170px; }
.emis-captcha .new { font-size:12.5px; }

@media (max-width: 576px) {
  .emis-grid th, .emis-grid td { padding:8px; }
  .emis-card { padding:14px; }
  .emis-toolbar .emis-search { max-width:none; }
}
