/* ================================================================
   v1 churchlife — shared modernization design system
   ----------------------------------------------------------------
   Loaded by every modernized page AFTER bootstrap.min.css + style.css.
   Pages keep only truly page-specific styles in their inline <style>.

   See docs/plans/2026-06-05-v1-modern-design.md for the design rationale.

   Note: this file is parsed by browsers, not by SiteMesh. The XHTML
   constraints that bite inline <style> blocks (no literal <tag>, no
   CSS comments containing angle brackets) do not apply here. Inline
   CSS in PHP pages still needs to follow those rules.
   ================================================================ */


/* ============================================================
   1. Design tokens
   ============================================================ */
:root {
    /* Brand */
    --primary: #337ab7;
    --primary-dark: #285e8e;
    --primary-darker: #1f4870;
    --primary-light: #4a90d9;
    --primary-gradient: linear-gradient(135deg, #4a90d9 0%, #337ab7 100%);

    /* Neutrals */
    --text: #2c3e50;
    --text-muted: #6c757d;
    --text-soft: #8b95a3;
    --bg: #f4f6f9;
    --surface: #fff;
    --surface-soft: #fafbfd;
    --surface-mute: #f4f7fb;

    /* Borders */
    --border: #e3e8ee;
    --border-soft: #eef1f4;
    --border-stronger: #cfdcec;

    /* Accents */
    --success: #28a745;
    --success-bg: #e3f5e6;
    --success-text: #1e7a3a;
    --danger: #d9534f;
    --danger-bg: #fbe7e7;
    --danger-text: #a8302d;
    --info: #17a2b8;
    --info-dark: #117a8b;

    /* Radius / shadow */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.06);

    /* Typography */
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
}


/* ============================================================
   2. Base body + reset for modernized regions
   ============================================================ */
body {
    background: var(--bg);
    font-family: var(--font-stack);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.page-wrap *, .page-card *, .form-card *, .tab-toolbar *, .abgne_tab * {
    box-sizing: border-box;
}


/* ============================================================
   3. Layout primitives — card / header / actions
   ============================================================ */
.page-wrap {
    max-width: 1280px;
    margin: 18px auto;
    padding: 0 16px;
}
.page-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 18px;
}
.page-header {
    padding: 16px 22px;
    background: var(--primary-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.page-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.page-title .title-meta {
    font-weight: 400;
    opacity: 0.82;
    margin-left: 10px;
    font-size: 13px;
}
.page-actions {
    display: inline-flex;
    gap: 8px;
}


/* ============================================================
   4. Tabs — override tabs.css 2010 image-background style
   ============================================================ */
.abgne_tab {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}
.abgne_tab ul.tabs {
    background: transparent;
    border-bottom: 2px solid var(--border);
    height: auto;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.abgne_tab ul.tabs li {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    float: none;
    overflow: visible;
}
.abgne_tab ul.tabs li a {
    background: transparent !important;
    padding: 12px 20px !important;
    color: var(--text-muted) !important;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    display: inline-block;
    text-decoration: none;
}
.abgne_tab ul.tabs li a:hover { color: var(--primary) !important; }
.abgne_tab ul.tabs li.active a {
    color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
    font-weight: 600;
}
.abgne_tab div.tab_container {
    background: transparent;
    border: 0;
    margin-top: 18px;
}
.abgne_tab div.tab_container .tab_content { padding: 0; }
.abgne_tab .b1, .abgne_tab .b2, .abgne_tab .b3, .abgne_tab .b4, .abgne_tab .b5 { display: none; }


/* ============================================================
   5. Toolbar — filter / search / action bar
   ============================================================ */
.tab-toolbar {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 14px 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.tab-toolbar .toolbar-search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tab-toolbar .toolbar-search input[type="text"] {
    width: 200px;
    padding: 7px 12px;
    border: 1px solid var(--border-stronger);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: var(--surface);
    font-family: inherit;
}
.tab-toolbar .toolbar-search input[type="text"]:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
}
.tab-toolbar .filter-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tab-toolbar .toolbar-spacer { flex: 1; }
.tab-toolbar .toolbar-actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* hide the legacy serch.gif icon wherever it appears */
.tab-toolbar span.serch img[src*="serch.gif"],
#register-toolbar span.serch img,
#toolbar span.serch img { display: none; }


/* ============================================================
   6. Inputs — text / date / select / textarea
   ============================================================ */
.form-row input[type="text"],
.form-row input[type="date"],
.form-row input[type="password"],
.form-row input[type="email"],
.form-row input[type="number"],
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
}
.form-row input[readonly],
.form-row input:disabled,
.form-row select:disabled,
.form-row textarea:disabled {
    background: var(--bg);
    color: var(--text-muted);
}
.form-row textarea {
    resize: vertical;
    min-height: 160px;
}

/* custom select caret (URL-encoded SVG so SiteMesh wouldn't choke if this
   somehow got inlined into a PHP page; as an external .css it is browser-only) */
.form-row select,
.tab-toolbar select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 30px;
}
.tab-toolbar select {
    padding: 7px 28px 7px 12px;
    border: 1px solid var(--border-stronger);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background-color: var(--surface);
    color: var(--text);
    cursor: pointer;
    min-width: 110px;
    font-family: inherit;
}
.tab-toolbar select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
}

/* radio + checkbox groups */
.radio-group {
    display: inline-flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}
.radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
}
.radio-group input[type="radio"],
.radio-group input[type="checkbox"] {
    margin: 0;
}


/* ============================================================
   7. Form layout — form-card / form-body / form-row
   ============================================================ */
.form-card {
    max-width: 920px;
    margin: 24px auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.form-header {
    padding: 16px 24px;
    background: var(--primary-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.form-header .header-title {
    font-size: 16px;
    font-weight: 600;
    opacity: 0.95;
}
.form-body { padding: 8px 0; }
.form-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    padding: 14px 24px;
    align-items: start;
    border-bottom: 1px solid var(--border-soft);
}
.form-row:last-child { border-bottom: none; }
.form-row .label {
    font-weight: 500;
    color: var(--text);
    font-size: 14px;
    padding-top: 8px;
    text-align: right;
}
.form-row .field { min-width: 0; }


/* ============================================================
   8. Buttons — .btn-modern + scoped overrides
   ============================================================ */
.btn-modern,
.tab-toolbar .toolbar-actions .btn,
.tab-toolbar .toolbar-actions button,
.form-header .btn,
.page-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border-stronger);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--primary);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.06s;
    text-decoration: none;
    font-family: inherit;
}
.btn-modern:hover,
.tab-toolbar .toolbar-actions .btn:hover,
.tab-toolbar .toolbar-actions button:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.btn-modern.btn-primary,
.tab-toolbar .toolbar-actions .btn-primary,
.form-header .btn-primary {
    background: var(--primary-gradient);
    color: #fff;
    border-color: var(--primary);
}
.btn-modern.btn-primary:hover,
.tab-toolbar .toolbar-actions .btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-darker);
}

.btn-modern.btn-success,
.tab-toolbar .toolbar-actions .btn-success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.btn-modern.btn-success:hover,
.tab-toolbar .toolbar-actions .btn-success:hover {
    background: var(--success-text);
    border-color: var(--success-text);
}

.btn-modern.btn-info,
.tab-toolbar .toolbar-actions .btn-info {
    background: var(--info);
    color: #fff;
    border-color: var(--info);
}
.btn-modern.btn-info:hover,
.tab-toolbar .toolbar-actions .btn-info:hover {
    background: var(--info-dark);
    border-color: var(--info-dark);
}

.btn-modern.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
}
.btn-modern.btn-ghost:hover {
    background: var(--surface-soft);
    color: var(--text);
    border-color: var(--border-stronger);
}

/* page-header "primary on dark" button — white pill, primary text */
.page-header .page-actions button,
.form-header > button.btn-primary,
.form-header > button.btn {
    background: rgba(255, 255, 255, 0.96);
    color: var(--primary-dark);
    border-color: transparent;
    padding: 7px 16px;
    border-radius: var(--radius-md);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.page-header .page-actions button:hover,
.form-header > button.btn-primary:hover {
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    color: var(--primary-dark);
}
.page-header .page-actions button:active,
.form-header > button.btn-primary:active {
    transform: translateY(1px);
}


/* ============================================================
   9. Tables — .modern-table + BS3 polish
   ============================================================ */
.modern-table,
#register-table.table,
#table.table,
.fixed-header.table,
.fixed-header2.table,
.fixed-body.table {
    background: var(--surface);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: 14px;
}
.modern-table,
#register-table.table {
    width: 100%;
}
/* #table.table keeps its inline width:1%; table-layout:fixed so the
   sticky .fixed-header.table (cloned from it) stays aligned column-by-column */
.fixed-header.table,
.fixed-header2.table,
.fixed-body.table {
    border-radius: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    margin: 0;
}
.modern-table thead th,
#register-table.table > thead > tr > th,
#table.table > thead > tr > th,
.fixed-header.table > thead > tr > th,
.fixed-header2.table > thead > tr > th {
    background: var(--surface-mute);
    color: #4a5b6e;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    border: 0;
    border-bottom: 2px solid var(--border);
    padding: 12px 14px;
    vertical-align: middle;
    text-align: left;
}
.modern-table tbody td,
#register-table.table > tbody > tr > td,
#table.table > tbody > tr > td,
.fixed-body.table > tbody > tr > td {
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    padding: 12px 14px;
    vertical-align: middle;
    font-size: 14px;
    color: var(--text);
}
.modern-table tbody tr:hover,
#register-table.table > tbody > tr:hover,
#table.table > tbody > tr:hover {
    background: #f5faff;
}
.modern-table tbody tr.r1,
#table.table-striped > tbody > tr:nth-of-type(odd),
#register-table.table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--surface-soft);
}
.modern-table tbody tr.r1:hover { background: #f5faff; }

/* roll-call check cells (used by #table in index.php / register.php) */
#table .check-cell { text-align: center; }
#table .check-cell:hover { background: #eef5fb; cursor: pointer; }
#table .check-cell input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    vertical-align: middle;
}
#table .check-cell.c-hover { background: #d6e9fa; }
#table thead .check-all { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
#table thead .summary {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-soft);
    margin-top: 4px;
}

/* table responsive wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ============================================================
   10. Status pills
   ============================================================ */
.status-pill,
.status-enabled,
.status-disabled {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.status-enabled { background-color: var(--success-bg); color: var(--success-text); }
.status-enabled::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    margin-right: 6px;
}
.status-disabled { background-color: var(--danger-bg); color: var(--danger-text); }
.status-disabled::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--danger);
    margin-right: 6px;
}


/* ============================================================
   11. Pagination
   ============================================================ */
.modern-pagination,
.register-pagination {
    text-align: center;
    padding: 14px 16px 18px;
    background: var(--surface-soft);
    border-top: 1px solid var(--border-soft);
}
.modern-pagination a, .modern-pagination strong,
.register-pagination a, .register-pagination strong {
    display: inline-block;
    min-width: 32px;
    padding: 6px 10px;
    margin: 0 2px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    transition: background 0.15s, color 0.15s;
}
.modern-pagination a, .register-pagination a {
    background: var(--surface);
    color: #4a5b6e;
    border: 1px solid var(--border);
}
.modern-pagination a:hover, .register-pagination a:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.modern-pagination strong, .register-pagination strong {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    font-weight: 600;
}
.modern-pagination .page-info, .register-pagination .page-info {
    margin-left: 14px;
    color: var(--text-soft);
    font-size: 13px;
}


/* ============================================================
   11b. jPaginate (used by index/register/meetings/users/visit_list/attendace_report)
   ============================================================ */
/* Footer card: only when it wraps a jPag-style pagination div (not Bootstrap nav).
   The jPaginate plugin (lib/jPaginate/jquery.paginate.js):
   - injects INLINE color/background/border styles from its paginate() options on
     every <a> and .jPag-current — our rules need !important to win;
   - measures rendered <li> widths to size a horizontally-scrolling strip
     (ul width, overflow:hidden viewport, absolute left for the front controls)
     — so the strip must stay a single float-left line; never flex/wrap it. */
#footer:has(> div#pagination) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    margin: 10px 0 16px;
    box-shadow: var(--shadow-sm);
}

.jPaginate {
    position: relative;
    color: var(--text-muted);
    font-size: 13px;
    flex: 0 1 auto;
    height: auto !important;
    width: auto !important;
    min-height: 34px;
    /* reserve room for the absolutely-positioned 上一頁/下一頁/最後 group,
       whose `left` the plugin computes to sit just right of the strip */
    padding-right: 212px;
}

/* Side controls — keep the plugin's absolute model (JS sets front `left`) */
.jPag-control-back,
.jPag-control-front {
    position: absolute;
    top: 0;
}
.jPag-control-back { left: 0; }
.jPag-control-front {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
/* reorder 最後/上一頁/下一頁 (plugin DOM order) into 上一頁/下一頁/最後 */
a.jPag-prev { order: 1; }
a.jPag-next { order: 2; }
a.jPag-last { order: 3; }

a.jPag-first,
a.jPag-last,
a.jPag-prev,
a.jPag-next {
    display: inline-block;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 12px !important;
    background: #fff !important;
    color: #4a5b6e !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box;
}
a.jPag-first { margin-right: 6px !important; }
a.jPag-first:hover,
a.jPag-last:hover,
a.jPag-prev:hover,
a.jPag-next:hover {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}

/* Page number strip — single line; plugin sets ul width + viewport width inline */
ul.jPag-pages {
    margin: 0 !important;
    padding: 0;
    list-style: none;
}
ul.jPag-pages li {
    display: block;
    float: left;
    margin: 0 !important;
    padding: 0 !important;
}
ul.jPag-pages li a,
ul.jPag-pages li span.jPag-current {
    display: inline-block;
    min-width: 32px;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 6px !important;
    margin: 0 3px !important;
    text-align: center;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    float: none !important;
    box-sizing: border-box;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
ul.jPag-pages li a {
    background: #fff !important;
    color: #4a5b6e !important;
    border: 1px solid var(--border) !important;
    cursor: pointer;
}
ul.jPag-pages li a:hover {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
ul.jPag-pages li span.jPag-current {
    /* background-image paints over the plugin's inline background-color */
    background-image: linear-gradient(135deg, #4a90d9 0%, #337ab7 100%);
    color: #fff !important;
    border: 1px solid var(--primary) !important;
    font-weight: 600;
    cursor: default;
    box-shadow: 0 2px 4px rgba(74, 144, 217, 0.25);
}

/* Hide the plugin's « » strip-scroll arrows (click-to-page auto-centers the strip;
   最先/最後 still jump-scroll to either end) */
ul.jPag-pages li span.jPag-previous,
ul.jPag-pages li span.jPag-next,
ul.jPag-pages li span.jPag-previous-img,
ul.jPag-pages li span.jPag-next-img,
span.jPag-sprevious,
span.jPag-snext,
span.jPag-sprevious-img,
span.jPag-snext-img {
    display: none !important;
}

/* Page-size limit (radio-as-pills) — paired with #footer above */
#footer > #limit,
#footer > span#limit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    flex: 0 0 auto;
    line-height: 1;
}
#footer > #limit input[type="radio"],
#footer > span#limit input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}
#footer > #limit label,
#footer > span#limit label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 30px;
    padding: 0 10px;
    margin: 0 2px;
    background: #fff;
    color: #4a5b6e;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
#footer > #limit label:hover,
#footer > span#limit label:hover {
    background: var(--surface-mute);
    border-color: #b3d4f5;
}
#footer > #limit input[type="radio"]:checked + label,
#footer > span#limit input[type="radio"]:checked + label {
    background: linear-gradient(135deg, #4a90d9 0%, #337ab7 100%);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 2px 4px rgba(74,144,217,0.3);
    font-weight: 600;
}

/* Mobile: page-size pills drop below; the pagination strip scrolls sideways
   inside the card (the plugin's JS-computed widths can't reflow) */
@media (max-width: 720px) {
    #footer:has(> div#pagination) {
        gap: 12px;
        padding: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #footer > #limit,
    #footer > span#limit {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
    }
}


/* ============================================================
   12. Empty state
   ============================================================ */
.empty-state,
#register-list-panel .empty-row td {
    text-align: center;
    padding: 36px 16px;
    color: var(--text-soft);
    font-size: 14px;
}


/* ============================================================
   13. Mobile breakpoint (≤ 720px)
   ============================================================ */
@media (max-width: 720px) {
    .page-wrap, .abgne_tab { padding: 0 10px; margin: 12px auto; }
    .page-header { padding: 14px 16px; }
    .page-title { font-size: 16px; }

    .form-card { margin: 12px; border-radius: var(--radius-md); }
    .form-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 14px 16px;
    }
    .form-row .label {
        text-align: left;
        padding-top: 0;
        color: var(--text-muted);
        font-size: 13px;
    }
    .form-header { padding: 14px 16px; }

    .tab-toolbar { padding: 12px; }
    .tab-toolbar .toolbar-search { width: 100%; }
    .tab-toolbar .toolbar-search input[type="text"] { width: 100%; }
    .tab-toolbar select { flex: 1; min-width: 0; }
    .tab-toolbar .filter-group { width: 100%; }
    .tab-toolbar .toolbar-actions { width: 100%; justify-content: flex-end; }

    .abgne_tab ul.tabs li a { padding: 10px 14px !important; font-size: 14px; }

    .modern-table thead th,
    .modern-table tbody td,
    #register-table.table > thead > tr > th,
    #register-table.table > tbody > tr > td,
    #table.table > thead > tr > th,
    #table.table > tbody > tr > td { padding: 10px 8px; font-size: 13px; }

    .modern-pagination a, .modern-pagination strong,
    .register-pagination a, .register-pagination strong {
        min-width: 28px; padding: 5px 8px;
    }
    .modern-pagination .page-info, .register-pagination .page-info {
        display: block; margin: 8px 0 0;
    }
}