/* Compact controls and consistent form surfaces. */
@media screen {
  :root { --control-radius: 10px; --control-focus: #188bd3; }
  button, .button { -webkit-tap-highlight-color: transparent; }
  button.primary, button.secondary, button.danger, .button, .modal-action,
  .welcome .button.light {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 36px; padding: 8px 13px; border-radius: var(--control-radius);
    font-size: 12px; font-weight: 600; line-height: 1.35; max-width: 100%;
    white-space: normal; text-decoration: none; border: 1px solid #c7dfef;
    box-shadow: 0 2px 5px #174c7810;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  button.primary, .modal-action { background: linear-gradient(120deg,#1762af,#249ed2); color: #fff; border-color: transparent; }
  .button, button.secondary { background: #f5faff; color: #195c95; }
  button.danger { background: #eaf2fa; color: #294e77; }
  button.primary:hover, .modal-action:hover { background: linear-gradient(120deg,#125592,#168bbd); }
  .button:hover, button.secondary:hover, button.danger:hover { background: #e5f2fc; border-color: #8ac5e7; }
  button:enabled:hover, .button:hover { box-shadow: 0 4px 10px #174c7818; }
  button:enabled:active, .button:active { transform: translateY(1px); }
  button:focus-visible, .button:focus-visible { outline: 3px solid #80c8f2; outline-offset: 3px; }
  button:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; transform: none; }
  .ui-icon { flex: 0 0 auto; width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; vertical-align: middle; }
  .sidebar .ui-icon { width: 19px; height: 19px; }
  .top-page-action { padding: 12px 16px; }
  .top-page-action .modal-action { width: auto; }
  .application-dialog { width: min(720px,calc(100vw - 32px)); max-height: calc(100dvh - 40px); border: 1px solid #d7e7f3; border-radius: 18px; padding: 0; overflow: auto; box-shadow: 0 24px 70px #153e6b35; }
  .application-dialog[open] { animation: form-enter .2s ease-out; }
  .application-dialog::backdrop { background: #13334f66; backdrop-filter: blur(4px); animation: backdrop-enter .18s ease-out; }
  .dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: linear-gradient(110deg,#edf6ff,#f5fcff); border-bottom: 1px solid #dbeaf5; }
  .dialog-heading h2 { margin: 0; font-size: 17px; line-height: 1.4; }
  .dialog-close { display: inline-flex; justify-content: center; align-items: center; width: 34px; height: 34px; min-width: 34px; border-radius: 50%; background: #fff; border: 1px solid #cfe1ef; color: #315e80; font-size: 22px; cursor: pointer; }
  .dialog-form-body, .application-dialog > form { padding: 20px; }
  .dialog-form-body form { margin: 0; }
  .form-grid { gap: 16px; }
  form label { font-size: 12px; font-weight: 600; color: #35536d; }
  form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), form select, form textarea { border-radius: 10px; border: 1px solid #ccddea; background: #fbfdff; color: #20334d; padding: 10px 12px; font: inherit; font-size: 13px; min-width: 0; transition: border-color .18s,box-shadow .18s,background-color .18s; }
  form input:focus, form select:focus, form textarea:focus { border-color: var(--control-focus); box-shadow: 0 0 0 3px #229ad21a; outline: none; background: #fff; }
  form input:disabled, form select:disabled, form textarea:disabled { background: #edf2f6; color: #748596; }
  form[aria-busy=true] { cursor: progress; }
  .control-spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: control-spin .7s linear infinite; }
  td .button, td button { min-height: 32px; padding: 6px 10px; font-size: 11px; }
  @keyframes form-enter { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
  @keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
  @keyframes control-spin { to { transform: rotate(360deg); } }
  @media(max-width:600px) { .application-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); } .dialog-heading,.dialog-form-body,.application-dialog > form { padding: 16px; } .application-dialog .form-grid { grid-template-columns: minmax(0,1fr); } }
  @media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }
}
@media screen {
  .sidebar { background: linear-gradient(160deg,#102746 0%,#1b4873 58%,#4383ae 100%); border: 0; box-shadow: 5px 0 24px #173d6612; }
  .sidebar .brand, .sidebar .sidebar-bottom { border-color: transparent; }
  .sidebar .brand, .sidebar .brand small, .sidebar .nav-label, .sidebar .sidebar-bottom, .sidebar .sidebar-bottom small { color: #e5f3ff; }
  .sidebar nav a { color: #e5f3ff; border: 0; box-shadow: none; }
  .sidebar nav a:hover, .sidebar nav a.active { background: #ffffff1c; color: #fff; border: 0; }
  button.primary,button.secondary,button.danger,.button,.modal-action,.welcome .button.light { border: 0; min-height: 34px; padding: 7px 12px; }
  button:focus-visible,.button:focus-visible { outline: 0; box-shadow: 0 0 0 3px #80c8f280; }
  .welcome { padding: 16px 20px; border: 0; min-height: 0; gap: 16px; margin-bottom: 18px; box-shadow: none; }
  .welcome .eyebrow { font-size: 9px; letter-spacing: 1.3px; }
  .welcome h2 { font-size: 20px; margin: 4px 0; }
  .welcome p { margin: 0; font-size: 12px; }
  .welcome .button.light { font-size: 11px; min-height: 32px; padding: 7px 11px; }
  .holiday-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; }
  .holiday-actions form { margin: 0; }
  .holiday-actions .button { min-height: 30px; padding: 6px 9px; font-size: 11px; border-radius: 8px; }
  .holiday-actions .ui-icon { width: 14px; height: 14px; }
  @media(max-width:600px) { .welcome { padding: 14px 16px; flex-wrap: wrap; } .welcome h2 { font-size: 18px; } }
}
@media screen {
  .action-dialog { width: min(460px,calc(100vw - 24px)); border-radius: 14px; }
  .action-dialog .dialog-heading { padding: 14px 16px; }
  .action-dialog .dialog-heading h2 { font-size: 16px; }
  .action-dialog .dialog-form-body { padding: 16px; }
  .action-dialog .form-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .action-dialog textarea { min-height: 100px; width: 100%; resize: vertical; }
  .application-dialog .actions, .application-dialog .form-actions { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
  .application-dialog .actions > button, .application-dialog .form-actions > button { width: auto; margin: 0; flex: 0 0 auto; }
}

@media screen { .topbar { border: 0; border-top: 0; box-shadow: 0 2px 10px #173d6608; background: linear-gradient(110deg,#f8fcff,#edf7ff); } }
@media screen {
  .application-dialog.detail-dialog { width: min(820px,calc(100vw - 28px)); }
  .application-dialog.detail-dialog .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .detail-dialog .coc-selection { grid-column: 1 / -1; padding: 12px; }
  .detail-dialog .coc-option { padding: 8px 10px; margin: 5px 0; }
  .detail-dialog .coc-option small { font-size: 12px; }
  .detail-dialog .cto-total { padding: 8px 10px; }
  .application-dialog .dialog-heading { position: sticky; top: 0; z-index: 3; }
  .application-dialog.journal-dialog { width: min(1440px,calc(100vw - 28px)); max-width: calc(100vw - 28px); }
  .journal-dialog .dialog-form-body { padding: 14px 16px; }
  .journal-opening-balances { padding: 0; margin-bottom: 10px; }
  .journal-month-table { width: 100%; min-width: 1040px; table-layout: fixed; }
  .journal-month-table th { white-space: normal; font-size: 10px; line-height: 1.4; padding: 8px 5px; }
  .journal-month-table td { font-size: 12px; padding: 8px 5px; height: auto; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  .journal-month-table th:first-child,.journal-month-table td:first-child { width: 120px; }
  .journal-month-table th:nth-last-child(1),.journal-month-table th:nth-last-child(2) { width: 145px; }
  .journal-month-table td:nth-last-child(2),.journal-month-table td:nth-last-child(3) { min-width: 0; }
  .journal-month-table .modal-action { min-height: 28px; font-size: 10px; padding: 5px 7px; }
  .journal-month-table .modal-action .ui-icon { width: 13px; height: 13px; }
  .journal-dialog .table-wrap { overflow: auto; }
  .journal-dialog .journal-month-table thead th { position: sticky; top: 0; }
  .journal-index-table td:first-child { white-space: nowrap; }
  @media(max-width:650px) { .application-dialog.detail-dialog .form-grid { grid-template-columns: minmax(0,1fr); } .application-dialog.journal-dialog { width: calc(100vw - 16px); } }
}
@media screen {
  .detail-dialog .coc-selection { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 10px; }
  .detail-dialog .coc-selection > p,.detail-dialog .coc-selection > .cto-total { grid-column: 1 / -1; margin: 4px 0; }
  .detail-dialog .coc-option { margin: 0; }
  @media(max-width:650px) { .detail-dialog .coc-selection { grid-template-columns: minmax(0,1fr); } }
}
@media screen {
  .queue-tabs { display: grid; grid-template-columns: repeat(auto-fit,minmax(155px,1fr)); gap: 10px; width: 100%; margin: 16px 0; }
  .queue-tabs > a { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 15px 13px; border: 0; border-radius: 12px; background: #f0f7fd; color: #245475; min-height: 62px; font-size: 12px; font-weight: 600; box-shadow: 0 3px 12px #143f6610; text-decoration: none; }
  .queue-tabs > a.selected { background: linear-gradient(120deg,#1762af,#249ed2); color: white; box-shadow: 0 4px 14px #1762af26; }
  .queue-tabs > a > span { margin-left: auto; }
  @media(max-width:700px) {
    .queue-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .queue-tabs > a { padding: 12px 10px; font-size: 11px; }
    .journal-dialog .journal-month-table { display: block; min-width: 0; width: 100%; table-layout: auto; }
    .journal-month-table thead { display: none; }
    .journal-month-table tbody { display: block; }
    .journal-month-table tr.journal-empty-month { display: none; }
    .journal-month-table tr.journal-populated { display: flex; flex-direction: column; gap: 0; background: #f8fbff; border-radius: 12px; margin-bottom: 12px; border: 1px solid #dceaf5; padding: 10px 12px; }
    .journal-month-table td { display: block; width: 100% !important; padding: 7px 0; border: 0; min-width: 0; }
    .journal-month-table td.journal-empty-value { display: none; }
    .journal-month-table td.journal-value { display: flex; justify-content: space-between; gap: 14px; }
    .journal-month-table td.journal-value::before { content: attr(data-label); font-weight: 600; flex: 0 0 45%; }
    .journal-month-table td:first-child { order: 2; }
    .journal-month-table td:nth-child(2) { font-size: 14px; font-weight: 700; color: #195c95; }
  }
}
@media screen {
  .actions-first-table th:first-child,.actions-first-table td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 3px 0 8px #173d6608; }
  .actions-first-table th:first-child { background: #edf5fc; z-index: 2; }
  .journal-mobile-empty { display: none; }
  @media(max-width:700px) { .journal-mobile-empty { display: block; } .journal-month-table.actions-first-table th:first-child,.journal-month-table.actions-first-table td:first-child { position: static; background: transparent; box-shadow: none; } }
}

@media screen { .login-password-control { display: flex; align-items: stretch; gap: 6px; } .login-password-control input { flex: 1; min-width: 0; width: 100%; } .login-password-control .password-toggle { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; min-width: 40px; } }

@media screen { .coc-summary { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:10px; } .coc-summary-card { margin:0;padding:18px;background:linear-gradient(120deg,#edf6ff,#f5fcff);border:0; } .coc-summary-card span { display:flex;align-items:center;gap:8px;font-size:12px;color:#315e80; } .coc-summary-card strong { display:block;font-size:28px;color:#195c95;margin:8px 0;line-height:1.2; } .coc-summary-card small { color:#607b91; } @media(max-width:600px) { .coc-summary { grid-template-columns:minmax(0,1fr); } } }
@media screen {
  a.coc-summary-card { position: relative; display: block; text-decoration: none; border: 1px solid #d9ebf7; border-radius: 16px; background: linear-gradient(130deg,#fff,#eef8ff); transition: transform .18s,box-shadow .18s,border-color .18s; }
  a.coc-summary-card:hover { transform: translateY(-2px); border-color: #82c7e9; box-shadow: 0 8px 22px #195c9514; text-decoration: none; }
  a.coc-summary-card.selected { background: linear-gradient(125deg,#174e89,#2397c6); border-color: transparent; }
  a.coc-summary-card.selected span,a.coc-summary-card.selected strong,a.coc-summary-card.selected small { color: #fff; }
  .coc-summary-card .coc-card-link { display: flex; justify-content: space-between; margin-top: 14px; font-size: 11px; color: #1e72a4; }
  .comp-table-panel .comp-record-table { width: 100%; min-width: 660px !important; table-layout: auto; }
  .comp-record-table th,.comp-record-table td { padding: 12px 14px; vertical-align: top; }
  .comp-record-table td.comp-note-cell { white-space: normal; overflow-wrap: anywhere; min-width: 220px; max-width: 680px; }
  .comp-record-table.actions-first-table th:first-child,.comp-record-table.actions-first-table td:first-child { width: 150px; min-width: 150px; }
  .comp-record-table .note-full { margin: 0 0 8px; }
  .comp-record-table .balance-label { display: inline-flex; margin-top: 6px; }
  @media(prefers-reduced-motion:reduce) { a.coc-summary-card:hover { transform: none; } }
}