/*
  SchoolSuite365 Mobile-First Platform Layer
  Final shared UI consolidation for phones, tablets, laptops and desktops.
  Official print surfaces are intentionally excluded.
*/

@media screen {
  :root {
    --ss-bg: #f5fff8;
    --ss-surface: rgba(255, 255, 255, 0.94);
    --ss-surface-solid: #ffffff;
    --ss-ink: #0f172a;
    --ss-muted: #5d7464;
    --ss-line: rgba(0, 96, 45, 0.14);
    --ss-primary: #007a39;
    --ss-primary-2: #005c2b;
    --ss-success: #008b43;
    --ss-warning: #d97706;
    --ss-danger: #dc2626;
    --ss-radius-sm: 10px;
    --ss-radius-md: 14px;
    --ss-radius-lg: 18px;
    --ss-radius-xl: 24px;
    --ss-touch: 44px;
    --ss-shadow-soft: 0 8px 22px rgba(0, 73, 33, 0.08);
  }

  html[data-theme="dark"] {
    --ss-bg: #022611;
    --ss-surface: rgba(2, 54, 24, 0.94);
    --ss-surface-solid: #06371b;
    --ss-ink: #edfdf2;
    --ss-muted: #a9cbb1;
    --ss-line: rgba(158, 255, 191, 0.22);
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body.tailwind-erp {
    color: var(--ss-ink) !important;
    background:
      radial-gradient(circle at top left, rgba(0, 122, 57, 0.15), transparent 28rem),
      radial-gradient(circle at top right, rgba(135, 241, 47, 0.13), transparent 30rem),
      var(--ss-bg) !important;
  }

  body.tailwind-erp :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid rgba(0, 154, 70, 0.34) !important;
    outline-offset: 2px !important;
  }

  body.tailwind-erp :where(button, .button, .btn, input, select, textarea, .icon-button, .logout-link, .table-actions a) {
    min-height: var(--ss-touch);
  }

  body.tailwind-erp :where(input, select, textarea) {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--ss-line) !important;
    border-radius: var(--ss-radius-md) !important;
    background: var(--ss-surface-solid) !important;
    color: var(--ss-ink) !important;
    font-size: 16px;
  }

  body.tailwind-erp :where(.form-grid, .filters, .records-filter, form.panel, .report-filter-panel, .settings-form-grid) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    min-width: 0;
  }

  body.tailwind-erp :where(.panel, .records-panel, .detail-panel, .chart-panel, .focus-panel, .profile-card, .card, .settings-section-card, .table-toolbar, .table-pager):not(.pos-receipt):not(.result-sheet):not(.score-sheet-document):not(.broadsheet-document):not(.id-card-sheet):not(.certificate-sheet) {
    border: 1px solid var(--ss-line) !important;
    border-radius: var(--ss-radius-xl) !important;
    background: var(--ss-surface) !important;
    color: var(--ss-ink) !important;
    box-shadow: var(--ss-shadow-soft) !important;
  }

  body.tailwind-erp :where(.panel-title h1, .panel-title h2, .panel-title h3, .card-title, .title, h1, h2, h3) {
    color: var(--ss-ink);
    letter-spacing: 0;
  }

  body.tailwind-erp :where(.muted, .text-muted, small, .helper-text, .description) {
    color: var(--ss-muted);
  }

  body.tailwind-erp .topbar.tw-topbar {
    position: sticky !important;
    top: 0;
    z-index: 60;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 54px !important;
    padding: 7px 9px !important;
  }

  body.tailwind-erp .topbar-school {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  body.tailwind-erp .topbar-school img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
  }

  body.tailwind-erp .topbar-school > span {
    display: grid;
    min-width: 0;
  }

  body.tailwind-erp .topbar-school strong,
  body.tailwind-erp .topbar-school small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.tailwind-erp .topbar-school strong {
    max-width: 45vw;
    color: var(--ss-ink) !important;
    font-size: 0.82rem !important;
  }

  body.tailwind-erp .topbar-school small {
    max-width: 44vw;
    font-size: 0.66rem !important;
  }

  body.tailwind-erp .tw-user-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
  }

  body.tailwind-erp .tw-user-actions :where(.tw-action-pill, .offline-sync-button, .offline-status) {
    min-height: 36px;
    padding: 7px 9px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 0.74rem;
  }

  body.tailwind-erp .tw-user-actions .offline-status,
  body.tailwind-erp .tw-user-actions .developer-subscription-badge {
    display: none;
  }

  body.tailwind-erp .menu-button {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  body.tailwind-erp .sidebar {
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.sidebar-open {
    overflow: hidden !important;
    touch-action: none;
  }

  body.sidebar-open .sidebar {
    touch-action: pan-y;
  }

  body.tailwind-erp .sidebar-nav a,
  body.tailwind-erp .nav-section-title {
    min-height: 42px;
  }

  body.tailwind-erp .nav-section:not(.open) .nav-links {
    display: none;
  }

  body.tailwind-erp :where(.dashboard-grid, .dashboard-feature-grid, .kpi-grid, .stats-grid, .settings-tiles, .module-grid, .feature-grid, .profile-summary-grid, .results-summary-grid, .portal-actions, .quick-actions) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    min-width: 0;
  }

  body.tailwind-erp :where(.settings-tiles a, .module-grid a, .quick-actions a, .dashboard-feature-card, .kpi-grid article, .profile-summary-grid article, .results-summary-grid article) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.tailwind-erp :where(.table-shell, .table-responsive, .table-scroll, .responsive-table, .records-table-wrap, .profile-table-scroll, .report-table-scroll, .data-table-wrap, .managed-table-wrap, .whatsapp-table-wrap, .records-panel) {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.tailwind-erp table.erp-responsive-table,
  body.tailwind-erp table.erp-mobile-table,
  body.tailwind-erp :where(.table-shell, .table-responsive, .table-scroll, .responsive-table, .records-table-wrap, .profile-table-scroll, .report-table-scroll, .data-table-wrap, .managed-table-wrap, .whatsapp-table-wrap, .records-panel) table {
    width: 100% !important;
    min-width: 620px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto;
  }

  body.tailwind-erp table th {
    background: #f1f5f9 !important;
    color: #334155 !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    text-transform: uppercase;
  }

  body.tailwind-erp table td {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 0.76rem !important;
  }

  html[data-theme="dark"] body.tailwind-erp table th {
    background: #1e293b !important;
    color: #e2e8f0 !important;
  }

  html[data-theme="dark"] body.tailwind-erp table td {
    background: #0f172a !important;
    color: #e2e8f0 !important;
  }

  body.tailwind-erp .table-toolbar {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px !important;
    margin-bottom: 8px;
  }

  body.tailwind-erp .table-toolbar :where(label, input, select, button) {
    width: 100%;
  }

  body.tailwind-erp .table-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
  }

  body.tailwind-erp .swal-lite-backdrop {
    padding: 12px;
  }

  body.tailwind-erp .swal-lite {
    width: min(100%, 420px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    border-radius: 24px;
  }

  body.tailwind-erp .ai-assistant {
    z-index: 80;
  }

  body.tailwind-erp .ai-assistant-panel {
    width: min(94vw, 420px) !important;
    max-height: min(78vh, 640px) !important;
    overflow: hidden;
  }

  body.tailwind-erp .ai-assistant-messages {
    overflow-y: auto;
  }

  /* Shared operational form table: keeps form semantics while improving scan speed. */
  body.tailwind-erp form.erp-form-modern {
    display: block !important;
    min-width: 0;
  }

  body.tailwind-erp form.erp-form-modern.panel,
  body.tailwind-erp form.erp-form-modern.form-card,
  body.tailwind-erp form.erp-form-modern.settings-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.tailwind-erp form.erp-form-modern > .panel-title {
    margin: 0 0 10px !important;
  }

  body.tailwind-erp .erp-form-table-shell {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--ss-line);
    border-radius: 16px;
    background: var(--ss-surface-solid);
  }

  body.tailwind-erp .erp-form-table {
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    border-collapse: collapse !important;
    table-layout: fixed;
    background: transparent !important;
  }

  body.tailwind-erp .erp-form-table tr {
    display: table-row !important;
    background: transparent !important;
  }

  body.tailwind-erp .erp-form-table th,
  body.tailwind-erp .erp-form-table td {
    display: table-cell !important;
    background: transparent !important;
    color: var(--ss-ink) !important;
    text-align: left !important;
    vertical-align: top !important;
  }

  body.tailwind-erp .erp-form-table .erp-form-section-row th {
    display: table-cell !important;
    padding: 9px 12px !important;
    border: 0 !important;
    background: linear-gradient(100deg, rgba(0, 122, 57, 0.13), rgba(135, 241, 47, 0.12)) !important;
    color: var(--ss-ink) !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    letter-spacing: 0;
    text-transform: none !important;
  }

  body.tailwind-erp .erp-form-section-row th > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  body.tailwind-erp .erp-form-section-row th > span::before {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--ss-primary);
    box-shadow: 0 0 0 4px rgba(0, 122, 57, 0.14);
    content: '';
  }

  body.tailwind-erp .erp-form-section-row small {
    float: right;
    margin-left: 10px;
    color: var(--ss-muted) !important;
    font-size: 0.65rem !important;
    font-weight: 800;
  }

  body.tailwind-erp .erp-form-table .erp-form-fields-row > td {
    width: 50%;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ss-line) !important;
  }

  body.tailwind-erp .erp-form-table .erp-form-fields-row > td + td {
    border-left: 1px solid var(--ss-line) !important;
  }

  body.tailwind-erp .erp-form-table .erp-form-field-wide {
    width: 100%;
  }

  body.tailwind-erp .erp-form-table label,
  body.tailwind-erp .erp-form-table fieldset {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
    color: var(--ss-ink) !important;
    font-size: 0.73rem;
    font-weight: 850;
  }

  body.tailwind-erp .erp-form-table fieldset {
    padding: 0;
    border: 0;
  }

  body.tailwind-erp .erp-form-table legend {
    margin-bottom: 2px;
    color: var(--ss-ink) !important;
    font-size: 0.73rem;
    font-weight: 850;
  }

  body.tailwind-erp .erp-form-table :where(input, select, textarea) {
    min-height: 42px;
    padding: 9px 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }

  body.tailwind-erp .erp-form-table textarea {
    min-height: 88px;
    resize: vertical;
  }

  body.tailwind-erp .erp-form-table :where(input, select, textarea):focus {
    border-color: rgba(15, 118, 110, 0.72) !important;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.13) !important;
  }

  body.tailwind-erp .erp-form-table .check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--ss-line);
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.86);
    font-size: 0.72rem;
  }

  body.tailwind-erp .erp-form-table .check input {
    width: 18px;
    min-width: 18px;
    min-height: 18px;
    margin: 0;
  }

  body.tailwind-erp .erp-form-table :where(.field-hint, label small, small) {
    color: var(--ss-muted) !important;
    font-size: 0.66rem !important;
    font-weight: 600;
    line-height: 1.35;
  }

  body.tailwind-erp .erp-form-actions-row td {
    padding: 10px 12px !important;
    border: 0 !important;
    background: rgba(248, 250, 252, 0.76) !important;
  }

  body.tailwind-erp .erp-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  body.tailwind-erp .erp-form-actions :where(button, .button) {
    width: auto;
    min-width: 148px;
  }

  html[data-theme="dark"] body.tailwind-erp .erp-form-table-shell {
    background: #0f172a;
  }

  html[data-theme="dark"] body.tailwind-erp .erp-form-section-row th,
  html[data-theme="dark"] body.tailwind-erp .erp-form-actions-row td {
    background: rgba(30, 41, 59, 0.82) !important;
  }

  html[data-theme="dark"] body.tailwind-erp .erp-form-table .check {
    background: rgba(30, 41, 59, 0.74);
  }
}

@media screen and (min-width: 640px) {
  body.tailwind-erp :where(.dashboard-grid, .dashboard-feature-grid, .kpi-grid, .stats-grid, .settings-tiles, .module-grid, .feature-grid, .profile-summary-grid, .results-summary-grid, .portal-actions, .quick-actions) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.tailwind-erp :where(.form-grid, .filters, .records-filter, form.panel, .report-filter-panel, .settings-form-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.tailwind-erp .table-toolbar {
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto auto auto !important;
    align-items: end;
  }
}

@media screen and (min-width: 980px) {
  body.tailwind-erp .topbar-school strong {
    max-width: 34vw;
    font-size: 0.92rem !important;
  }

  body.tailwind-erp .topbar-school small {
    max-width: 34vw;
  }

  body.tailwind-erp .tw-user-actions .offline-status,
  body.tailwind-erp .tw-user-actions .developer-subscription-badge {
    display: inline-flex;
  }

  body.tailwind-erp :where(.dashboard-grid, .dashboard-feature-grid, .kpi-grid, .stats-grid, .settings-tiles, .module-grid, .feature-grid, .profile-summary-grid, .results-summary-grid, .portal-actions, .quick-actions) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.tailwind-erp :where(.form-grid, .filters, .records-filter, form.panel, .report-filter-panel, .settings-form-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1280px) {
  body.tailwind-erp :where(.dashboard-feature-grid, .settings-tiles, .module-grid, .feature-grid, .portal-actions, .quick-actions) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media screen and (max-width: 640px) {
  body.tailwind-erp {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  body.tailwind-erp .topbar.tw-topbar {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  body.tailwind-erp .tw-user-actions :where(.tw-action-pill span, .offline-sync-button span) {
    display: none;
  }

  body.tailwind-erp .tw-user-actions :where(.tw-action-pill, .offline-sync-button) {
    width: 38px;
    min-height: 38px;
    padding: 0;
    justify-content: center;
  }

  body.tailwind-erp .tw-user-actions .offline-sync-button,
  body.tailwind-erp .tw-user-actions a[href$="/profile.php"] {
    display: none;
  }

  body.tailwind-erp .topbar-school strong {
    max-width: 40vw;
  }

  body.tailwind-erp table.erp-responsive-table,
  body.tailwind-erp table.erp-mobile-table,
  body.tailwind-erp :where(.table-shell, .table-responsive, .table-scroll, .responsive-table, .records-table-wrap, .profile-table-scroll, .report-table-scroll, .data-table-wrap, .managed-table-wrap, .whatsapp-table-wrap, .records-panel) table {
    min-width: 560px !important;
  }

  body.tailwind-erp table th,
  body.tailwind-erp table td {
    padding: 5px 6px !important;
    font-size: 0.66rem !important;
  }

  body.tailwind-erp .erp-form-table-shell {
    border-radius: 14px;
  }

  body.tailwind-erp .erp-form-table,
  body.tailwind-erp .erp-form-table tbody,
  body.tailwind-erp .erp-form-table tr,
  body.tailwind-erp .erp-form-table th,
  body.tailwind-erp .erp-form-table td {
    display: block !important;
    width: 100% !important;
  }

  body.tailwind-erp .erp-form-table .erp-form-section-row th {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px !important;
  }

  body.tailwind-erp .erp-form-section-row small {
    float: none;
    margin-left: 0;
  }

  body.tailwind-erp .erp-form-table .erp-form-fields-row > td {
    padding: 9px 10px !important;
    border-left: 0 !important;
  }

  body.tailwind-erp .erp-form-table .erp-form-fields-row > td + td {
    border-left: 0 !important;
  }

  body.tailwind-erp .erp-form-actions-row td {
    padding: 9px 10px !important;
  }

  body.tailwind-erp .erp-form-actions {
    justify-content: stretch;
  }

  body.tailwind-erp .erp-form-actions :where(button, .button) {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tailwind-erp *,
  body.tailwind-erp *::before,
  body.tailwind-erp *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/*
  SchoolSuite365 identity: deep forest green, emerald, lime accents and white.
  This intentionally sits last so older module styles inherit one consistent brand.
*/
@media screen {
  :root {
    --brand-forest: #004b22;
    --brand-deep: #005c2b;
    --brand-emerald: #007a39;
    --brand-vivid: #00a84a;
    --brand-lime: #8df12d;
    --brand-mist: #effff3;
    --bg: #f5fff8;
    --surface: rgba(255, 255, 255, .95);
    --surface-2: #f3fff6;
    --card: rgba(255, 255, 255, .96);
    --ink: #102a18;
    --muted: #5d7464;
    --line: rgba(0, 96, 45, .14);
    --primary: #007a39;
    --primary-2: #005c2b;
    --primary-soft: #e7faec;
    --success: #008b43;
    --info: #007a39;
    --tw-brand: #007a39;
    --tw-brand-strong: #005c2b;
    --tw-ink: #102a18;
    --tw-muted: #5d7464;
    --tw-line: rgba(0, 96, 45, .16);
    --tw-surface: rgba(255, 255, 255, .92);
  }

  html[data-theme="dark"] {
    --bg: #022611;
    --surface: rgba(2, 54, 24, .94);
    --surface-2: #06371b;
    --card: rgba(3, 64, 29, .94);
    --ink: #edfdf2;
    --muted: #a9cbb1;
    --line: rgba(158, 255, 191, .22);
    --primary-soft: rgba(82, 216, 111, .14);
  }

  body.tailwind-erp,
  body.login-page {
    accent-color: var(--brand-emerald);
  }

  body.offline-page {
    color: #102a18;
    background:
      radial-gradient(circle at top left, rgba(0, 168, 74, .16), transparent 30rem),
      radial-gradient(circle at bottom right, rgba(141, 241, 45, .14), transparent 28rem),
      #f5fff8 !important;
  }

  body.offline-page .panel {
    border-color: rgba(0, 122, 57, .16) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 16px 38px rgba(0, 73, 33, .10) !important;
  }

  body.tailwind-erp {
    background:
      radial-gradient(circle at 10% -8%, rgba(0, 168, 74, .16), transparent 30rem),
      radial-gradient(circle at 90% 0%, rgba(141, 241, 45, .13), transparent 28rem),
      linear-gradient(135deg, #f8fffa 0%, #effff3 54%, #f9fffb 100%) !important;
  }

  html[data-theme="dark"] body.tailwind-erp {
    background:
      radial-gradient(circle at 12% -8%, rgba(0, 168, 74, .20), transparent 30rem),
      radial-gradient(circle at 88% 2%, rgba(141, 241, 45, .12), transparent 28rem),
      linear-gradient(135deg, #022611, #06371b 55%, #004b22) !important;
  }

  body.tailwind-erp :where(.button.primary, .btn-primary, .primary-button, .submit-button, button[type="submit"]):not(.danger):not(.danger-button) {
    border-color: #007a39 !important;
    background: linear-gradient(135deg, #008b43, #005c2b) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(0, 105, 47, .18) !important;
  }

  body.tailwind-erp :where(.button.primary, .btn-primary, .primary-button, .submit-button, button[type="submit"]):not(.danger):not(.danger-button):hover {
    border-color: #005c2b !important;
    background: linear-gradient(135deg, #00a84a, #007a39) !important;
  }

  body.tailwind-erp :where(.sidebar, .app-sidebar, #sidebar) {
    background: linear-gradient(180deg, #005c2b 0%, #004b22 48%, #023117 100%) !important;
  }

  body.tailwind-erp :where(.sidebar a.active, .app-sidebar a.active, #sidebar a.active, .sidebar .active > a, .app-sidebar .active > a) {
    background: linear-gradient(135deg, rgba(141, 241, 45, .28), rgba(0, 168, 74, .28)) !important;
    box-shadow: inset 3px 0 0 #8df12d !important;
  }

  body.tailwind-erp :where(.tw-school-brand, .topbar-school, .school-brand) {
    border-color: rgba(0, 122, 57, .18) !important;
    background: rgba(239, 255, 243, .82) !important;
  }

  body.login-page {
    background:
      linear-gradient(135deg, rgba(239, 255, 243, .92), rgba(255, 255, 255, .88) 48%, rgba(245, 255, 248, .94)),
      url("../images/bg.png") center / cover no-repeat !important;
  }

  body.login-page::before {
    background:
      radial-gradient(circle at 10% 10%, rgba(0, 122, 57, .20), transparent 28%),
      radial-gradient(circle at 90% 18%, rgba(141, 241, 45, .17), transparent 30%),
      linear-gradient(90deg, rgba(0, 122, 57, .055) 1px, transparent 1px),
      linear-gradient(0deg, rgba(0, 122, 57, .05) 1px, transparent 1px) !important;
    background-size: auto, auto, 34px 34px, 34px 34px !important;
  }

  .login-hero {
    background:
      linear-gradient(145deg, rgba(0, 122, 57, .94), rgba(0, 75, 34, .94)),
      linear-gradient(135deg, #008b43, #005c2b) !important;
  }

  .login-page :where(.login-button, .login-submit, button[type="submit"]) {
    background: linear-gradient(135deg, #008b43, #005c2b) !important;
    border-color: #007a39 !important;
    color: #ffffff !important;
  }

  body.offline-page .button {
    border-color: #007a39 !important;
    background: linear-gradient(135deg, #008b43, #005c2b) !important;
    color: #ffffff !important;
  }

  .login-page :where(a:not(.button)) {
    color: #006b31;
  }

  .login-hero :where(a, .login-copy, .login-copy h1, .login-copy p) {
    color: #ffffff;
  }

  .developer-login-page,
  .developer-console-page,
  .subscription-block-page {
    background:
      radial-gradient(circle at top left, rgba(0, 168, 74, .22), transparent 34%),
      radial-gradient(circle at bottom right, rgba(141, 241, 45, .16), transparent 34%),
      linear-gradient(135deg, #effff3, #ffffff 54%, #f3fff6) !important;
  }

  .developer-console-page {
    background:
      radial-gradient(circle at 8% 8%, rgba(0, 168, 74, .24), transparent 32%),
      radial-gradient(circle at 92% 22%, rgba(141, 241, 45, .15), transparent 28%),
      #f3fff6 !important;
  }

  .developer-login-brand-panel,
  .developer-sidebar {
    background: linear-gradient(160deg, #00642e, #004b22 58%, #023117) !important;
  }

  .developer-login-logo {
    background: linear-gradient(135deg, #8df12d, #00a84a 48%, #007a39) !important;
  }

  body.tailwind-erp table:not(.result-score-table):not(.results-broadsheet-table):not(.score-sheet-table):not(.pos-receipt-table):not(.id-card-table) th {
    background: linear-gradient(135deg, #004b22, #007a39) !important;
  }

  body.tailwind-erp :where(.modern-dashboard-hero, .page-hero, .compact-hero, .admin-command-dashboard .admin-hero, .whatsapp-hero) {
    background:
      radial-gradient(circle at 12% 16%, rgba(255, 255, 255, .22), transparent 18rem),
      linear-gradient(135deg, #007a39, #004b22 56%, #00642e) !important;
  }

  .tw-footer a {
    color: #006b31 !important;
  }

  /* Final visual enforcement for legacy navigation and action components. */
  :root {
    --erp-brand: #007a39;
    --erp-brand-2: #005c2b;
    --erp-brand-soft: #e7faec;
    --erp-ink: #102a18;
    --erp-muted: #5d7464;
    --erp-line: rgba(0, 96, 45, .16);
    --erp-surface: rgba(255, 255, 255, .95);
    --erp-surface-solid: #ffffff;
  }

  body.tailwind-erp .sidebar.tw-sidebar,
  body.tailwind-erp .sidebar,
  body.tailwind-erp #sidebar {
    background:
      radial-gradient(circle at 14% 0, rgba(141, 241, 45, .18), transparent 25%),
      radial-gradient(circle at 88% 7%, rgba(0, 168, 74, .28), transparent 27%),
      linear-gradient(180deg, #00642e 0%, #004b22 48%, #023117 100%) !important;
    border-right-color: rgba(220, 255, 229, .16) !important;
    box-shadow: 16px 0 44px rgba(0, 55, 25, .22) !important;
  }

  body.tailwind-erp .sidebar .brand,
  body.tailwind-erp .sidebar .tw-brand-card {
    border-color: rgba(220, 255, 229, .18) !important;
    background: rgba(255, 255, 255, .09) !important;
    box-shadow: 0 12px 30px rgba(0, 40, 18, .16) !important;
  }

  body.tailwind-erp .sidebar .brand-mark {
    border-color: rgba(255, 255, 255, .72) !important;
    background: linear-gradient(135deg, #ffffff, #e4ffe9 58%, #a5f53d) !important;
    color: #00642e !important;
    box-shadow: 0 12px 26px rgba(0, 45, 20, .2) !important;
  }

  body.tailwind-erp .sidebar .sidebar-status,
  body.tailwind-erp .sidebar .tw-sidebar-status {
    border-color: rgba(141, 241, 45, .30) !important;
    background: linear-gradient(135deg, rgba(0, 168, 74, .33), rgba(255, 255, 255, .08)) !important;
  }

  body.tailwind-erp .sidebar .sidebar-status > .icon {
    border-color: rgba(141, 241, 45, .36) !important;
    background: rgba(141, 241, 45, .15) !important;
    color: #dffff0 !important;
  }

  body.tailwind-erp .sidebar .nav-section,
  body.tailwind-erp .sidebar .tw-nav-section {
    border-color: rgba(255, 255, 255, .10) !important;
    background: rgba(255, 255, 255, .045) !important;
  }

  body.tailwind-erp .sidebar .nav-section.open,
  body.tailwind-erp .sidebar .tw-nav-section.open {
    border-color: rgba(141, 241, 45, .30) !important;
    background: rgba(0, 168, 74, .17) !important;
    box-shadow: inset 0 0 0 1px rgba(141, 241, 45, .08) !important;
  }

  body.tailwind-erp .sidebar .nav-section-title {
    border: 1px solid transparent !important;
    background: transparent !important;
    color: rgba(243, 255, 247, .86) !important;
    box-shadow: none !important;
  }

  body.tailwind-erp .sidebar .nav-section-title:hover,
  body.tailwind-erp .sidebar .nav-section.open .nav-section-title {
    border-color: rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .10) !important;
    color: #ffffff !important;
  }

  body.tailwind-erp .sidebar .nav-section-meta {
    background: rgba(141, 241, 45, .18) !important;
    color: #ffffff !important;
  }

  body.tailwind-erp .sidebar .sidebar-nav a {
    border-color: transparent !important;
    background: transparent !important;
    color: rgba(243, 255, 247, .85) !important;
  }

  body.tailwind-erp .sidebar .sidebar-nav a:hover {
    border-color: rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .11) !important;
    color: #ffffff !important;
  }

  body.tailwind-erp .sidebar .sidebar-nav a.active {
    border-color: rgba(255, 255, 255, .45) !important;
    background: linear-gradient(135deg, #00a84a, #007a39) !important;
    box-shadow: 0 12px 26px rgba(0, 45, 20, .27) !important;
    color: #ffffff !important;
  }

  body.tailwind-erp .sidebar .nav-icon {
    background: rgba(255, 255, 255, .10) !important;
    color: rgba(243, 255, 247, .94) !important;
  }

  body.tailwind-erp .sidebar .sidebar-nav a:hover .nav-icon,
  body.tailwind-erp .sidebar .sidebar-nav a.active .nav-icon {
    background: #ffffff !important;
    color: #007a39 !important;
  }

  body.tailwind-erp :where(.topbar, .tw-topbar) {
    border-bottom-color: rgba(0, 96, 45, .14) !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 10px 28px rgba(0, 73, 33, .08) !important;
  }

  body.tailwind-erp :where(.topbar-school, .tw-school-brand) {
    border-color: rgba(0, 122, 57, .18) !important;
    background: #f1fff5 !important;
  }

  body.tailwind-erp :where(.topbar-school strong, .tw-school-brand strong) {
    color: #005c2b !important;
  }

  body.tailwind-erp :where(.topbar-school small, .tw-school-brand small) {
    color: #5d7464 !important;
  }

  body.tailwind-erp :where(.button, .btn, .btn-primary, .primary-button, .action-button, .submit-button, button, input[type="submit"]):not(.ghost):not(.secondary):not(.outline):not(.light):not(.icon-button):not(.menu-button):not(.nav-section-title):not(.danger):not(.danger-button):not(.delete):not([data-action="delete"]) {
    border-color: #007a39 !important;
    background: linear-gradient(135deg, #008b43, #005c2b) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(0, 105, 47, .18) !important;
  }

  body.tailwind-erp :where(.button, .btn, .btn-primary, .primary-button, .action-button, .submit-button, button, input[type="submit"]):not(.ghost):not(.secondary):not(.outline):not(.light):not(.icon-button):not(.menu-button):not(.nav-section-title):not(.danger):not(.danger-button):not(.delete):not([data-action="delete"]):hover {
    border-color: #005c2b !important;
    background: linear-gradient(135deg, #00a84a, #007a39) !important;
  }

  body.tailwind-erp :where(.button.ghost, .button.secondary, .btn-secondary, .icon-button, .menu-button, .tw-action-pill, .logout-link) {
    border-color: rgba(0, 122, 57, .18) !important;
    background: #ffffff !important;
    color: #006b31 !important;
    box-shadow: 0 5px 14px rgba(0, 73, 33, .06) !important;
  }

  body.tailwind-erp :where(.button.ghost, .button.secondary, .btn-secondary, .icon-button, .menu-button, .tw-action-pill, .logout-link):hover {
    border-color: rgba(0, 122, 57, .34) !important;
    background: #effff3 !important;
    color: #005c2b !important;
  }

  body.tailwind-erp :where(input, select, textarea):focus {
    border-color: #008b43 !important;
    box-shadow: 0 0 0 4px rgba(0, 168, 74, .13) !important;
  }

  body.tailwind-erp :where(.badge, .pill, .status-badge, .status-paid, .payment-status.paid, .success-badge) {
    border-color: rgba(0, 122, 57, .20) !important;
    background-color: #e7faec !important;
    color: #00642e !important;
  }

  body.tailwind-erp :where(thead th, .table thead th) {
    background: linear-gradient(135deg, #005c2b, #007a39) !important;
    color: #ffffff !important;
  }

  body.tailwind-erp :where(tbody tr):hover {
    background: rgba(0, 168, 74, .055) !important;
  }

  /* Topbar: resilient school identity layout with explicit primary actions. */
  body.tailwind-erp .topbar.tw-topbar,
  body.tailwind-erp .app-topbar {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 64px !important;
    padding: 8px 14px !important;
    max-width: 100%;
  }

  body.tailwind-erp .topbar .topbar-menu-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-height: 42px !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 92, 43, .14) !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #008b43, #005c2b) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(0, 89, 40, .18) !important;
    flex: 0 0 42px;
  }

  body.tailwind-erp .topbar .topbar-menu-button:hover,
  body.tailwind-erp .topbar .topbar-menu-button:focus-visible {
    background: linear-gradient(135deg, #00a84a, #007a39) !important;
    color: #ffffff !important;
  }

  body.tailwind-erp .topbar .topbar-school.tw-school-brand {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    flex: 1 1 auto;
    width: auto;
    max-width: none !important;
    min-width: 0;
    padding: 6px 10px 6px 7px !important;
    border: 1px solid rgba(0, 122, 57, .17) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #ffffff, #effff3) !important;
  }

  body.tailwind-erp .topbar .topbar-school img,
  body.tailwind-erp .topbar .topbar-school-fallback {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: 1px solid rgba(0, 122, 57, .16);
    border-radius: 11px;
    background: #ffffff;
    color: #007a39;
    font-size: .64rem;
    font-weight: 900;
    line-height: 1;
    object-fit: contain;
    box-shadow: 0 5px 12px rgba(0, 73, 33, .08);
  }

  body.tailwind-erp .topbar .topbar-school-copy {
    display: grid !important;
    min-width: 0;
    max-width: none !important;
    gap: 2px;
  }

  body.tailwind-erp .topbar .topbar-school-name {
    display: block !important;
    width: 100%;
    max-width: none !important;
    overflow: hidden !important;
    overflow-wrap: normal;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #005c2b !important;
    font-size: .84rem !important;
    font-weight: 900 !important;
    line-height: 1.18 !important;
  }

  body.tailwind-erp .topbar .topbar-school-context {
    display: block !important;
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    color: #5d7464 !important;
    font-size: .65rem !important;
    font-weight: 750;
    line-height: 1.18;
  }

  body.tailwind-erp .topbar .tw-user-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 6px !important;
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    min-width: max-content;
  }

  body.tailwind-erp .topbar .header-profile-action,
  body.tailwind-erp .topbar .header-logout-action {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px !important;
    padding: 8px 11px !important;
    border: 1px solid rgba(0, 92, 43, .18) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #008b43, #005c2b) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(0, 89, 40, .16) !important;
  }

  body.tailwind-erp .topbar .header-logout-action {
    background: linear-gradient(135deg, #007a39, #004b22) !important;
  }

  body.tailwind-erp .topbar .header-profile-action :where(span, svg, .icon),
  body.tailwind-erp .topbar .header-logout-action :where(span, svg, .icon) {
    color: #ffffff !important;
    fill: currentColor;
  }

  body.tailwind-erp .topbar .header-profile-action:hover,
  body.tailwind-erp .topbar .header-logout-action:hover {
    border-color: rgba(141, 241, 45, .72) !important;
    background: linear-gradient(135deg, #00a84a, #007a39) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 23px rgba(0, 89, 40, .23) !important;
  }

  body.tailwind-erp .topbar .header-profile-action:hover :where(span, svg, .icon),
  body.tailwind-erp .topbar .header-logout-action:hover :where(span, svg, .icon) {
    color: #ffffff !important;
  }

  body.tailwind-erp .topbar .offline-sync-button.tw-action-pill {
    border-color: rgba(0, 122, 57, .20) !important;
    background: #effff3 !important;
    color: #006b31 !important;
  }

  @media (max-width: 1100px) {
    body.tailwind-erp .topbar .developer-subscription-badge,
    body.tailwind-erp .topbar .offline-status {
      display: none !important;
    }

    body.tailwind-erp .topbar .offline-sync-button.tw-action-pill {
      width: 38px;
      min-height: 38px !important;
      padding: 0 !important;
    }

    body.tailwind-erp .topbar .offline-sync-button.tw-action-pill > span {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
    }
  }

  @media (max-width: 760px) {
    body.tailwind-erp .topbar.tw-topbar,
    body.tailwind-erp .app-topbar {
      display: flex !important;
      flex-flow: row nowrap !important;
      gap: 6px !important;
      min-height: 58px !important;
      padding: 7px 8px !important;
    }

    body.tailwind-erp .topbar .topbar-menu-button {
      width: 38px;
      min-height: 38px !important;
      border-radius: 11px !important;
      flex-basis: 38px;
    }

    body.tailwind-erp .topbar .topbar-school.tw-school-brand {
      gap: 7px;
      padding: 5px 7px 5px 5px !important;
      border-radius: 12px !important;
    }

    body.tailwind-erp .topbar .topbar-school img,
    body.tailwind-erp .topbar .topbar-school-fallback {
      width: 32px;
      height: 32px;
      min-width: 32px;
      border-radius: 9px;
    }

    body.tailwind-erp .topbar .topbar-school-name {
      font-size: .72rem !important;
      line-height: 1.14 !important;
      white-space: nowrap !important;
    }

    body.tailwind-erp .topbar .topbar-school-context {
      display: none !important;
    }

    body.tailwind-erp .topbar .tw-user-actions {
      gap: 4px !important;
    }

    body.tailwind-erp .topbar .header-profile-action,
    body.tailwind-erp .topbar .header-logout-action {
      width: 36px;
      min-height: 36px !important;
      padding: 0 !important;
      border-radius: 11px !important;
    }

    body.tailwind-erp .topbar .header-profile-action span,
    body.tailwind-erp .topbar .header-logout-action span {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
    }

    body.tailwind-erp .topbar .offline-sync-button.tw-action-pill {
      display: none !important;
    }
  }

  /* Compact, touch-friendly command system for every ERP module. */
  body.tailwind-erp :where(.button, .btn, .btn-primary, .btn-secondary, .primary-button, .action-button, .submit-button, button):not(.nav-section-title):not(.icon-button):not(.menu-button):not(.topbar-menu-button) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px !important;
    padding: 7px 11px !important;
    border-radius: 10px !important;
    font-size: .76rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    touch-action: manipulation;
  }

  body.tailwind-erp :where(.button, .btn, .btn-primary, .btn-secondary, .primary-button, .action-button, .submit-button, button):not(.nav-section-title):not(.icon-button):not(.menu-button):not(.topbar-menu-button) :where(svg, .icon) {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
  }

  body.tailwind-erp :where(.button.mini, .btn-sm, .button.small, .btn-small) {
    min-height: 32px !important;
    padding: 5px 8px !important;
    border-radius: 9px !important;
    font-size: .69rem !important;
  }

  body.tailwind-erp :where(.table-actions, .action-stack, .action-buttons, .record-actions, .receipt-actions) {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center;
    gap: 4px !important;
    min-width: max-content;
  }

  body.tailwind-erp :where(.table-actions, .action-stack, .action-buttons, .record-actions, .receipt-actions) > form {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
  }

  body.tailwind-erp :where(.table-actions, .action-stack, .action-buttons, .record-actions, .receipt-actions) .action-icon-button,
  body.tailwind-erp :where(td[data-label="Action"], td[data-label="Actions"]) .action-icon-button {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 1px solid rgba(0, 122, 57, .18) !important;
    border-radius: 9px !important;
    background: #effff3 !important;
    color: #006b31 !important;
    box-shadow: 0 4px 10px rgba(0, 73, 33, .08) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: translateZ(0);
  }

  body.tailwind-erp :where(.table-actions, .action-stack, .action-buttons, .record-actions, .receipt-actions) .action-icon-button .action-svg,
  body.tailwind-erp :where(td[data-label="Action"], td[data-label="Actions"]) .action-icon-button .action-svg,
  body.tailwind-erp :where(.table-actions, .action-stack, .action-buttons, .record-actions, .receipt-actions) .action-icon-button svg {
    width: 16px !important;
    height: 16px !important;
    color: currentColor !important;
    stroke: currentColor !important;
  }

  body.tailwind-erp .action-icon-button.action-view,
  body.tailwind-erp .action-icon-button.action-approve,
  body.tailwind-erp .action-icon-button.action-assign,
  body.tailwind-erp .action-icon-button.action-pay {
    border-color: rgba(0, 122, 57, .18) !important;
    background: #e7faec !important;
    color: #006b31 !important;
  }

  body.tailwind-erp .action-icon-button.action-edit,
  body.tailwind-erp .action-icon-button.action-upload,
  body.tailwind-erp .action-icon-button.action-export,
  body.tailwind-erp .action-icon-button.action-print {
    border-color: rgba(0, 139, 67, .22) !important;
    background: #f4fff6 !important;
    color: #007a39 !important;
  }

  body.tailwind-erp .action-icon-button.action-suspend {
    border-color: rgba(217, 119, 6, .22) !important;
    background: #fff9eb !important;
    color: #a85f00 !important;
  }

  body.tailwind-erp .action-icon-button.action-delete {
    border-color: rgba(185, 28, 28, .20) !important;
    background: #fff1f2 !important;
    color: #b42318 !important;
  }

  body.tailwind-erp .action-icon-button:hover,
  body.tailwind-erp .action-icon-button:focus-visible {
    background: linear-gradient(135deg, #008b43, #005c2b) !important;
    border-color: #007a39 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 15px rgba(0, 89, 40, .20) !important;
    transform: translateY(-1px) scale(1.03);
  }

  body.tailwind-erp .action-icon-button.action-delete:hover,
  body.tailwind-erp .action-icon-button.action-delete:focus-visible {
    border-color: #b42318 !important;
    background: #b42318 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 15px rgba(180, 35, 24, .18) !important;
  }

  @media (hover: hover) and (pointer: fine) {
    body.tailwind-erp .action-icon-button[data-action-label]::after {
      position: absolute;
      z-index: 90;
      bottom: calc(100% + 7px);
      left: 50%;
      padding: 5px 7px;
      border-radius: 7px;
      background: #023117;
      color: #ffffff;
      content: attr(data-action-label);
      font-size: .66rem;
      font-weight: 750;
      line-height: 1;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, 3px);
      transition: opacity .14s ease, transform .14s ease;
    }

    body.tailwind-erp .action-icon-button[data-action-label]:hover::after,
    body.tailwind-erp .action-icon-button[data-action-label]:focus-visible::after {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }

  @media (max-width: 760px) {
    body.tailwind-erp :where(.button, .btn, .btn-primary, .btn-secondary, .primary-button, .action-button, .submit-button, button):not(.nav-section-title):not(.icon-button):not(.menu-button):not(.topbar-menu-button) {
      min-height: 36px !important;
      padding: 6px 9px !important;
      border-radius: 9px !important;
      font-size: .72rem !important;
    }

    body.tailwind-erp :where(.table-actions, .action-stack, .action-buttons, .record-actions, .receipt-actions) .action-icon-button,
    body.tailwind-erp :where(td[data-label="Action"], td[data-label="Actions"]) .action-icon-button {
      width: 30px !important;
      min-width: 30px !important;
      height: 30px !important;
      min-height: 30px !important;
      border-radius: 8px !important;
    }

    body.tailwind-erp :where(.table-actions, .action-stack, .action-buttons, .record-actions, .receipt-actions) .action-icon-button .action-svg,
    body.tailwind-erp :where(td[data-label="Action"], td[data-label="Actions"]) .action-icon-button .action-svg,
    body.tailwind-erp :where(.table-actions, .action-stack, .action-buttons, .record-actions, .receipt-actions) .action-icon-button svg {
      width: 14px !important;
      height: 14px !important;
    }
  }
}