/* Shared internal-screen components. No document/PDF or business-rule changes. */
@media screen {
  .app-shell main { font-size: 14px; line-height: 1.6; }
  .app-shell main :is(h1,h2,h3,h4,h5,h6) { line-height: 1.35; overflow-wrap: anywhere; }
  .app-shell main h5, .app-shell main h6 { font-size: 16px; color: #213d49; margin: 0 0 16px; }
  .app-shell main p { line-height: 1.65; }
  .app-shell main .card { min-width: 0; }
  .app-shell main .card-header { padding: 22px 24px; border-bottom: 1px solid #dde5e9; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .app-shell main .card-header :is(h2,h3,h4,h5,h6) { margin: 0; font-size: 17px; color: #213d49; }
  .app-shell main .card-body { padding: 24px; min-width: 0; }
  .app-shell main .card-body > :first-child { margin-top: 0; }
  .app-shell main .card-body > :last-child { margin-bottom: 0; }
  .app-shell main .btn, .app-shell main input[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 10px 16px; border-width: 1px; border-style: solid;
    font: 600 13px/1.45 var(--font-family, sans-serif); border-radius: 8px;
    white-space: normal; text-decoration: none; vertical-align: middle; max-width: 100%;
    height: auto; overflow-wrap: anywhere; cursor: pointer;
  }
  .app-shell main .btn-sm, .app-shell main input[type="submit"].btn-sm { min-height: 36px; padding: 7px 11px; font-size: 12px; }
  .app-shell main .btn > :is(i,svg,.icon) { flex-shrink: 0; }
  .app-shell main :is(.btn-primary,.btn-success) { background: #08755c; border-color: #08755c; color: #fff; }
  .app-shell main :is(.btn-primary,.btn-success):hover { background: #065c49; border-color: #065c49; color: #fff; transform: none; }
  .app-shell main :is(.btn-secondary,.btn-info,.btn-outline-primary,.btn-outline-secondary,.btn-outline-info,.btn-light) { background: #fff; border-color: #bdcfd5; color: #285663; }
  .app-shell main :is(.btn-secondary,.btn-info,.btn-outline-primary,.btn-outline-secondary,.btn-outline-info,.btn-light):hover { background: #edf5f3; border-color: #699c8d; color: #164f3e; }
  .app-shell main :is(.btn-warning,.btn-outline-warning) { background: #fff7e8; color: #74500a; border-color: #dfc58e; }
  .app-shell main :is(.btn-danger,.btn-outline-danger) { background: #fff3f2; color: #a52e29; border-color: #e6b7b3; }
  .app-shell main :is(.btn-danger,.btn-outline-danger):hover { background: #fbe3e1; color: #87241f; border-color: #cc827b; }
  .app-shell main :is(.btn:disabled,.btn.disabled,input[type="submit"]:disabled) { opacity: .55; cursor: not-allowed; pointer-events: none; }
  .app-shell main .btn-link { background: transparent; color: #246452; border-color: transparent; text-decoration: underline; }
  .app-shell main :is(input,select,textarea,.form-control) { font-size: 14px; line-height: 1.5; }
  .app-shell main :is(input[type="month"],input[type="datetime-local"],input[type="url"],.form-control) { box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 1px solid #cdd9df; border-radius: 7px; max-width: 100%; color: #263b48; background: #fff; }
  .app-shell main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), .app-shell main select { height: auto; min-height: 44px; }
  .app-shell main input::placeholder, .app-shell main textarea::placeholder { color: #6b7e88; opacity: 1; }
  .app-shell main label { font-size: 13px; line-height: 1.5; }
  .app-shell main .form-group { min-width: 0; margin-bottom: 18px; }
  .app-shell main .form-group > label { display: block; }
  .app-shell main .form-text { display: block; font-size: 12px; line-height: 1.6; margin-top: 7px; color: #5d737e; }
  .app-shell main .input-group { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; min-width: 0; }
  .app-shell main .input-group > :is(.form-control,input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"])) { flex: 1 1 110px; width: 1%; min-width: 100px; }
  /* An inset indicator stays visible even between tightly stacked fields. */
  .app-shell main :is(input,select,textarea):focus-visible { outline: 2px solid #08755c; outline-offset: -3px; }
  .app-shell main :is(input,select,textarea):focus { box-shadow: none; }
  .app-shell main .input-group + .input-group { margin-top: 12px; }
  .app-shell main .input-group-text { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 10px 12px; font-size: 13px; color: #3c5662; background: #f0f5f6; border: 1px solid #d5e0e5; border-radius: 7px; }
  .app-shell main .row { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; }
  .app-shell main .row > [class*="col-"] { box-sizing: border-box; min-width: 0; padding: 0; flex: 1 1 100%; }
  .app-shell main .d-flex, .app-shell main .d-sm-flex { display: flex; gap: 12px; flex-wrap: wrap; }
  .app-shell main .justify-content-between { justify-content: space-between; }
  .app-shell main .align-items-center { align-items: center; }
  .app-shell main .text-muted { color: #5d737e; }
  .app-shell main .text-success { color: #22634b; }
  .app-shell main .text-primary, .app-shell main .text-info { color: #285663; }
  .app-shell main .text-center { text-align: center; }
  .app-shell main .text-right { text-align: right; }
  .app-shell main .badge { display: inline-block; padding: 4px 9px; border-radius: 5px; font-size: 12px; line-height: 1.5; background: #eaf2ef; color: #2c614e; white-space: normal; }
  .app-shell main .alert { padding: 14px 18px; border: 1px solid #cfdee3; border-radius: 8px; margin: 16px 0; line-height: 1.6; }
  .app-shell main .alert-warning { color: #78541a; background: #fff8e9; border-color: #ead5a6; }
  .app-shell main .alert-info { background: #f0f6f8; color: #315d70; }
  .app-shell main .alert-danger { background: #fff3f2; color: #9d302b; border-color: #e6b7b3; }
  .app-shell main .alert-success { background: #edf7f1; color: #225b40; border-color: #c6ddce; }
  .app-shell .flashes { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; border: 0; background: transparent; }
  .app-shell .flashes > .flash-message { padding: 14px 18px; border: 1px solid #c6ddce; border-radius: 8px; background: #edf7f1; color: #225b40; line-height: 1.65; overflow-wrap: anywhere; }
  .app-shell .flashes > :is(.flash-error,.flash-danger) { background: #fff3f2; color: #9d302b; border-color: #e6b7b3; }
  .app-shell .flashes > .flash-warning { background: #fff8e9; color: #78541a; border-color: #ead5a6; }
  .app-shell .flashes > .flash-info { background: #f0f6f8; color: #315d70; border-color: #cfdee3; }
  .app-shell main table { font-size: 14px; line-height: 1.6; }
  .app-shell main th { font-size: 11px; line-height: 1.5; letter-spacing: .5px; font-weight: 600; text-align: left; }
  .app-shell main :is(td,th) { padding: 16px; vertical-align: middle; }
  .app-shell main td { overflow-wrap: anywhere; }
  .app-shell main .table-responsive { width: 100%; overflow-x: auto; scrollbar-width: thin; }
  .app-shell main .table-responsive > table { margin-top: 0; }
  .app-shell main td .action-buttons, .app-shell main .record-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .app-shell main td.action-buttons { display: table-cell; white-space: normal; min-width: 160px; }
  .app-shell main .record-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .app-shell main td.action-buttons > :is(.btn,form) { margin: 3px 4px 3px 0; }
  .app-shell main td form { margin: 0; padding: 0; min-width: 0; }
  .app-shell main hr { border: 0; border-top: 1px solid #dce6e9; margin: 24px 0; width: 100%; }
  .app-shell main .mb-0 { margin-bottom: 0; }
  .app-shell main .mb-3 { margin-bottom: 16px; }
  .app-shell main .mb-4 { margin-bottom: 24px; }
  .app-shell main .mt-3 { margin-top: 16px; }
  .app-shell main .mt-4 { margin-top: 24px; }
  .app-shell main .module-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
  .app-shell main .module-heading h1 { margin: 4px 0 10px; max-width: 780px; font-size: 28px; }
  .module-kicker { color: #367661; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
  .module-description { margin: 0; color: #536e7b; max-width: 740px; font-size: 14px; }
  .module-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
  .module-search { display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px; max-width: 480px; }
  .module-count { color: #59717c; font-size: 13px; margin: 0; }
  .app-shell main .module-table { min-width: 740px; }
  .app-shell main .module-records-table { min-width: 900px; }
  .app-shell main .search-bar { margin-bottom: 20px; }
  .app-shell main .module-table .record-actions { min-width: 290px; }
  .app-shell main .record-title { display: block; font-weight: 600; color: #244551; }
  .app-shell main .record-meta { display: block; font-size: 12px; color: #607784; margin-top: 4px; }
  .app-shell main .module-empty { text-align: center; padding: 38px 24px; color: #536e7b; }
  .module-empty strong { display: block; font-size: 16px; margin-bottom: 6px; color: #294e59; }
  .module-sections { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; padding: 14px; background: #edf4f2; border: 1px solid #d5e3dc; border-radius: 9px; }
  .module-sections a { color: #285e4d; padding: 6px 10px; text-decoration: none; border-radius: 5px; font-size: 13px; }
  .module-sections a:hover { background: #dcebe3; }
  .app-shell main .workspace-form h5[id] { scroll-margin-top: 24px; padding-top: 8px; }
  .app-shell main form.workspace-form { padding: 0; border: 0; box-shadow: none; background: transparent; }
  .app-shell main .workspace-form .table-responsive table { min-width: 800px; }
  .app-shell main .workspace-form td input { min-width: 108px; }
  .app-shell main .form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
  .app-shell main form.record-form { display: block; padding: 0; background: transparent; border: 0; box-shadow: none; }
  .app-shell main .record-form fieldset { min-width: 0; margin: 0 0 24px; padding: 24px; border: 1px solid #d9e4e7; border-radius: 10px; background: #fff; }
  .app-shell main .record-form legend { width: auto; padding: 0 8px; font-size: 16px; font-weight: 600; color: #244d59; }
  .app-shell main .record-form .record-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 24px; }
  .app-shell main .record-form .record-field { min-width: 0; }
  .app-shell main .record-form .record-field > label { display: block; margin: 0 0 8px; }
  .app-shell main .record-form .record-wide { grid-column: 1 / -1; }
  .app-shell main .record-form .record-help { margin: 8px 0 0; color: #536e7b; font-size: 13px; line-height: 1.65; }
  .app-shell main .record-form textarea { min-height: 140px; resize: vertical; }
  .app-shell main .record-form .form-actions { margin: 0; padding: 0 0 24px; }
  .app-shell main .record-form label.record-check { display: flex; align-items: center; gap: 10px; margin: 0; }
  .app-shell main .record-danger { padding: 16px 20px; border: 1px solid #e1c5c1; border-radius: 8px; margin-top: 12px; background: #fffafa; }
  .record-danger summary { color: #8f433c; font-size: 13px; cursor: pointer; }
  .app-shell main .record-danger p { font-size: 13px; color: #6f5551; }
  .app-shell main .record-danger form { border: 0; padding: 10px 0 0; background: transparent; box-shadow: none; margin: 0; }
  .salary-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin: 20px 0; padding: 18px; background: #f4f8f7; border-radius: 9px; }
  .salary-tools label { display: block; margin-bottom: 6px; }
  .salary-tools select { min-width: 200px; }
  .salary-field label { display: block; margin-bottom: 7px; }
  .app-shell main .salary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px 22px; }
  .salary-field { padding: 16px; border: 1px solid #d9e5e3; border-radius: 8px; background: #fff; min-width: 0; }
  .salary-submit { margin-top: 24px; padding-top: 20px; border-top: 1px solid #dce6e9; }
  @media (min-width: 768px) {
    .app-shell main .row > .col-md-4 { flex-basis: calc(33.333% - 14px); flex-grow: 0; }
    .app-shell main .row > .col-md-6 { flex-basis: calc(50% - 10px); flex-grow: 0; }
    .app-shell main .row > .col-md-8 { flex-basis: calc(66.666% - 7px); flex-grow: 0; }
    .app-shell main .row > .col-md-12 { flex-basis: 100%; }
  }
  @media (max-width: 1100px) { .app-shell main .salary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
  @media (max-width: 600px) {
    .app-shell main .record-form .record-grid { grid-template-columns: 1fr; }
    .app-shell main .record-form fieldset { padding: 18px; }
    .app-shell main .card-header, .app-shell main .card-body { padding: 18px; }
    .app-shell main .module-heading h1 { font-size: 24px; }
    .app-shell main .module-heading > .btn { width: 100%; }
    .app-shell main .salary-grid { grid-template-columns: 1fr; }
  }
}