/* Shared screen presentation. Printed documents keep their original styles. */
@media screen {
  :root {
    --ui-ink: #243b4c;
    --ui-teal: #176c68;
    --ui-muted: #647781;
    --ui-line: #dbe6e4;
    --ui-paper: #f3f7f7;
    --ui-soft: #dfeee9;
  }
  html { box-sizing: border-box; background: var(--ui-paper); }
  *, *::before, *::after { box-sizing: inherit; }
  body {
    margin: 0;
    padding: 24px;
    background: var(--ui-paper) !important;
    color: var(--ui-ink);
    font-family: "Microsoft JhengHei", "Noto Sans TC", sans-serif;
    font-size: 20px;
    line-height: 1.7;
    text-align: left;
  }
  a { color: var(--ui-teal); text-underline-offset: 4px; }
  a:hover { color: #104d4a; }
  :focus-visible { outline: 3px solid #b47820; outline-offset: 3px; }
  h1, h2, h3 { line-height: 1.45; color: var(--ui-ink); }
  h1 { font-size: clamp(28px, 3vw, 38px); }
  h2 { font-size: 28px; }
  h3 { font-size: 23px; }
  p { overflow-wrap: anywhere; }
  img { max-width: 100%; height: auto; }
  font, td, th, input, select, textarea, button { font-family: inherit !important; }
  font, span[style*="font-size"], p[style*="font-size"] {
    font-size: inherit !important;
    text-shadow: none !important;
  }
  font[size="5"], font[size="6"], font[size="7"] { font-size: 1.25em !important; }
  font[style*="32pt"], font[style*="26pt"] {
    font-size: clamp(26px, 3vw, 36px) !important;
    color: var(--ui-ink) !important;
    font-weight: 700;
  }
  font[color="#008080"], font[color="#3f7f00"], font[color="#0000FF"],
  font[color="#0000ff"] { color: var(--ui-teal); }
  /* Red status/error text is intentionally retained. */
  .ui-page-header {
    max-width: 1200px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ui-line);
  }
  .ui-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .ui-brand-mark {
    display: grid; place-items: center; flex: 0 0 48px;
    width: 48px; height: 48px; border-radius: 14px;
    background: var(--ui-teal); color: white; font-size: 28px; font-weight: 700;
  }
  .ui-brand strong { display: block; font-size: 23px; line-height: 1.4; }
  .ui-brand small { display: block; color: var(--ui-muted); font-size: 16px; letter-spacing: 2px; }
  .ui-page-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
  .ui-page-heading h1 { margin: 0; font-size: 26px; }
  .ui-area { color: var(--ui-teal); background: var(--ui-soft); padding: 4px 12px; border-radius: 6px; font-size: 16px; }
  #box, #main, #box_user {
    width: 100% !important; max-width: 1200px !important;
    min-width: 0 !important; min-height: 0 !important;
    margin: 0 auto 28px !important; padding: 28px !important;
    background: white !important; border: 1px solid var(--ui-line) !important;
    border-top: 3px solid var(--ui-teal) !important;
    border-radius: 14px !important; box-shadow: 0 6px 24px #243b4c06 !important;
  }
  body > section, .panel {
    background: white; border-color: var(--ui-line) !important; border-radius: 14px !important;
  }
  body > center, #box > center, form, fieldset { min-width: 0; max-width: 100%; }
  #box div[style*="width"], #main div[style*="width"] { max-width: 100%; }
  fieldset { border: 1px solid var(--ui-line); border-radius: 10px; padding: 20px; background: #f5f9f7 !important; color: var(--ui-ink) !important; }
  table { font-size: 18px; line-height: 1.65; border-spacing: 0; max-width: 100%; }
  td, th { overflow-wrap: anywhere; }
  .ui-layout-table, .ui-layout-table > tbody, .ui-layout-table > tbody > tr,
  .ui-layout-table > tbody > tr > td {
    display: block; width: 100% !important; min-width: 0 !important;
    height: auto !important; padding: 0; border: 0; background: transparent;
  }
  .CSSTableGenerator {
    width: 100% !important; max-width: 100%; min-width: 0;
    margin: 20px auto !important; padding: 0;
    border: 1px solid var(--ui-line) !important; border-radius: 10px !important;
    box-shadow: none !important; background: white;
  }
  .CSSTableGenerator table { width: 100%; height: auto !important; }
  .CSSTableGenerator td, .CSSTableGenerator th,
  .ui-data-table td, .ui-data-table th, .ui-detail-table td, .ui-form-table td {
    padding: 12px 14px; font-size: 18px;
    border: 1px solid var(--ui-line); text-shadow: none !important;
  }
  .CSSTableGenerator tr { background: white !important; }
  .CSSTableGenerator tr:nth-child(even) { background: #f5f9f8 !important; }
  .CSSTableGenerator tr:first-child > td, .CSSTableGenerator tr:first-child:hover > td,
  .ui-data-table th, #first_row > td {
    background: var(--ui-teal) !important; color: white !important;
    font-weight: 700; font-size: 20px; text-shadow: none !important; border-color: #377f7b !important;
  }
  .CSSTableGenerator tr:first-child > td font, #first_row font { color: inherit !important; }
  .ui-form-table td[bgcolor="#0099FF"], .ui-form-table td[bgcolor="#0099ff"] {
    background: #e6f0ed !important; color: var(--ui-teal) !important; font-weight: 700;
  }
  .ui-form-table td[bgcolor="#0099FF"] font, .ui-form-table td[bgcolor="#0099ff"] font {
    color: inherit !important;
  }
  .ui-form-table span[style*="background-color: #0099FF"] {
    background: var(--ui-soft) !important; color: var(--ui-teal) !important;
  }
  .ui-form-table, .ui-detail-table { width: 100% !important; table-layout: fixed; }
  .ui-application-columns col:nth-child(1) { width: 5%; }
  .ui-application-columns col:nth-child(2) { width: 15%; }
  .ui-application-columns col:nth-child(3) { width: 37%; }
  .ui-application-columns col:nth-child(4) { width: 13%; }
  .ui-application-columns col:nth-child(5) { width: 30%; }
  .ui-form-table td, .ui-detail-table td { height: auto !important; }
  .ui-table-scroll {
    width: 100%; max-width: 100%; min-width: 0; overflow-x: auto;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
  .ui-data-table {
    display: table; width: 100% !important;
    border-collapse: collapse; background: white;
  }
  .ui-data-table > tbody, .ui-data-table > thead { width: 100%; }
  .ui-data-table td, .ui-data-table th { min-width: 100px; }
  .ui-data-table td { max-width: 540px; }
  .ui-data-table th, .ui-data-table tr:first-child td { white-space: nowrap; }
  .ui-scroll-hint { margin: 8px 0; color: var(--ui-muted); font-size: 16px; text-align: left; }
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  select, textarea {
    max-width: 100%; min-height: 44px; padding: 8px 10px;
    border: 1px solid #a9c1bb; border-radius: 6px;
    background: white; color: var(--ui-ink) !important;
    font-size: 18px !important; line-height: 1.5;
  }
  textarea { width: 100%; min-height: 130px; resize: vertical; }
  input[type="checkbox"], input[type="radio"] {
    width: 20px; height: 20px; margin: 8px 5px;
    vertical-align: middle; accent-color: var(--ui-teal);
  }
  input[type="checkbox"] {
    appearance: auto;
    width: 28px; height: 28px;
    flex-shrink: 0; cursor: pointer;
  }
  @media (pointer: coarse) {
    input[type="checkbox"] { width: 32px; height: 32px; }
  }
  input[readonly], textarea[readonly] { background: #edf3f1 !important; }
  input:disabled, select:disabled, button:disabled { opacity: .6; cursor: not-allowed; }
  button, input[type="submit"], input[type="reset"], input[type="button"],
  a.btn, a[class^="btn_"] {
    min-height: 44px; max-width: 100%; padding: 9px 20px !important;
    border: 1px solid var(--ui-teal) !important; border-radius: 7px !important;
    background: var(--ui-teal) !important; color: white !important;
    font-size: 18px !important; font-weight: 600; line-height: 1.5;
    text-shadow: none !important; box-shadow: none !important; cursor: pointer;
    white-space: normal; vertical-align: middle; text-decoration: none;
  }
  button:hover, input[type="submit"]:hover, input[type="button"]:hover { filter: brightness(.92); }
  .btn_red, input.btn_red, button.btn_red { background: #a43b37 !important; border-color: #a43b37 !important; }
  input[type="reset"] { background: white !important; color: var(--ui-teal) !important; }
  /* These one-pixel inputs are existing programmatic dialog triggers. */
  input[type="button"][style*="width:1px"], input[type="button"][style*="width: 1px"] {
    min-height: 0 !important; padding: 0 !important; border: 0 !important;
    font-size: 1px !important; opacity: 0; pointer-events: none;
  }
  body.login-student { --ui-login-card: #e5f3e9; }
  body.login-school { --ui-login-card: #e5f0fa; }
  body.login-admin { --ui-login-card: #fbe7ec; }
  #box > table.role-login-card {
    width: 100% !important;
    max-width: 580px;
    margin: 0 auto;
    background: var(--ui-login-card);
    border: 1px solid var(--ui-line);
    border-radius: 14px;
    border-collapse: separate;
  }
  #box > table.role-login-card > tbody > tr > td {
    padding: clamp(12px, 2vw, 24px);
    border: 0 !important;
    background: transparent;
  }
  .ui-login #box { max-width: 860px !important; }
  .ui-login #box > .ui-layout-table > tbody > tr > td > p:first-of-type { margin-top: 0; }
  .ui-login img[src*="/s"][src$=".png"] { max-height: 64px; width: auto; max-width: 10%; object-fit: contain; }
  .ui-login input[type="button"][name="B1"] { height: auto !important; min-height: 52px; }
  .ui-login .ui-detail-table { max-width: 580px; margin: auto; }
  .role-login-title { margin: 24px 0 32px; text-align: center; font-size: 28px !important; }
  .role-login-form { display: grid; row-gap: 32px; width: 100%; max-width: 460px; margin: 0 auto; }
  .role-login-form .role-login-row { display: grid; grid-template-columns: 2.5em minmax(0, 1fr); align-items: center; gap: 16px; margin: 0; font-size: 28px; text-align: left; }
  .role-login-form .role-login-row label { white-space: nowrap; font-size: 28px !important; font-weight: 600; }
  .role-login-form input#id, .role-login-form input#pw { width: 100% !important; min-width: 0; min-height: 64px; box-sizing: border-box; font-size: 28px !important; }
  .role-login-form .role-login-actions { margin: 0; }
  .ui-login .role-login-actions input[name="B1"] { width: 100% !important; min-height: 52px; background: var(--ui-teal, #176c68) !important; color: #fff !important; text-shadow: none !important; box-shadow: none !important; }
  .ui-dialog, .ui-dialog .ui-widget-content { color: var(--ui-ink); font-family: inherit; font-size: 18px; }
  .ui-dialog { max-width: calc(100vw - 24px); border: 1px solid var(--ui-line); border-radius: 12px; box-shadow: 0 16px 50px #243b4c26; }
  .ui-dialog .ui-dialog-titlebar { background: var(--ui-soft); border: 0; color: var(--ui-teal); }
  .ui-dialog .ui-dialog-title { color: var(--ui-ink) !important; font-size: 20px !important; text-shadow: none !important; }
  .ui-dialog .ui-dialog-titlebar-close { min-height: 24px; padding: 0 !important; }
  .ui-dialog .ui-dialog-content { max-height: 70dvh !important; overflow: auto; background: white !important; }
  .ui-dialog .ui-dialog-buttonpane { background: white; border-color: var(--ui-line); }
  .datepick-popup, .ui-datepicker { max-width: calc(100vw - 24px); font-size: 16px; }
  .ui-menu-page {
    height: 100vh !important; height: 100dvh !important;
    padding: 0; display: flex; flex-direction: column; overflow: hidden !important;
  }
  .ui-menu-page .ui-page-header {
    width: 100%; max-width: none; margin: 0; padding: 16px 24px;
    background: white; flex-shrink: 0;
  }
  #cssmenu {
    flex-shrink: 0; width: 100%; max-width: 100%;
    background: white !important; border: 0 !important; border-bottom: 1px solid var(--ui-line) !important;
    border-radius: 0 !important; box-shadow: none !important; text-align: left;
  }
  #menu-bar {
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px;
    width: 100% !important; height: auto !important; min-height: 56px;
    margin: 0; padding: 8px 20px;
    background: white !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  #menu-bar::after { display: none; }
  #menu-bar li { float: none; margin: 0; padding: 0; list-style: none; }
  #menu-bar a {
    margin: 0; padding: 10px 14px; min-height: 44px;
    background: transparent !important; color: var(--ui-ink) !important;
    border-radius: 6px; text-shadow: none !important; box-shadow: none !important;
    font-size: 18px; line-height: 1.5; text-decoration: none;
  }
  #menu-bar .active > a { color: #963c36 !important; }
  #menu-bar a:hover, #menu-bar li:hover > a, #menu-bar a:focus-visible {
    background: #edf5f2 !important; color: var(--ui-teal) !important;
  }
  #menu-bar li > a.ui-special-function { color: #1565c0 !important; }
  #menu-bar li:hover > a.ui-special-function,
  #menu-bar a.ui-special-function:focus-visible {
    background: #eaf2fc !important; color: #0d47a1 !important;
  }
  #menu-bar ul {
    top: 100%; width: 280px; max-width: calc(100vw - 32px);
    padding: 8px; background: white !important; border: 1px solid var(--ui-line);
    border-radius: 10px; box-shadow: 0 12px 32px #243b4c1a;
  }
  #menu-bar ul a { font-size: 17px; white-space: normal; }
  #menu-bar li:focus-within > ul, #menu-bar li.ui-submenu-open > ul { display: block; }
  #menu-bar li.ui-submenu-dismissed > ul { display: none !important; }
  #menu-bar .ui-has-submenu > a { padding-right: 48px; }
  #menu-bar .ui-submenu-toggle {
    position: absolute; right: 0; top: 0; width: 44px; height: 44px;
    padding: 0 !important; background: transparent !important;
    border: 0 !important; color: var(--ui-teal) !important;
  }
  #counter { display: block; padding: 0 24px; color: var(--ui-muted); font-size: 16px; }
  #counter:empty { display: none; }
  .ui-menu-page #contentWrapper { flex: 1; width: 100%; min-height: 0 !important; margin: 0; }
  .ui-menu-page #myframe { display: block; width: 100%; height: 100% !important; border: 0; }
  .ui-nav-toggle { display: none; }
  .ui-embedded .ui-page-header .ui-brand { display: none; }
  .ui-embedded .ui-page-header { padding-bottom: 16px; margin-bottom: 20px; }
  .ui-embedded .ui-page-heading h1 { font-size: 28px; }
  .ui-report .ui-data-table { font-size: 18px; }
  /* Desktop content uses 80% of the viewport, with equal 10% side margins. */
  @media (min-width: 1001px) {
    body.ui-enhanced:not(.ui-menu-page) { padding-right: 10%; padding-left: 10%; }
    body.ui-enhanced:not(.ui-menu-page) .ui-page-header,
    body.ui-enhanced:not(.ui-menu-page) #box,
    body.ui-enhanced:not(.ui-menu-page) #main,
    body.ui-enhanced:not(.ui-menu-page) #box_user,
    body.ui-enhanced:not(.ui-menu-page) > .page {
      width: 100% !important; max-width: none !important;
    }
    .ui-menu-page .ui-page-header, .ui-menu-page #menu-bar {
      padding-right: 10%; padding-left: 10%;
    }
    .ui-data-page #box, .ui-data-page #main, .ui-data-page #box_user {
      padding: 20px !important;
    }
    .ui-data-page .ui-receive-table {
      display: table; table-layout: fixed; overflow: visible;
    }
    .ui-data-page .ui-data-table td, .ui-data-page .ui-data-table th {
      min-width: 0; max-width: none; padding: 12px 8px;
      white-space: normal; overflow-wrap: anywhere;
    }
    .ui-data-page .ui-data-table tr:first-child td { white-space: normal; }
    .ui-data-page .ui-data-table input[type="submit"] {
      padding: 8px 10px !important;
    }
    .ui-receive-table tr:first-child > :nth-child(1) { width: 9%; }
    .ui-receive-table tr:first-child > :nth-child(2) { width: 9%; }
    .ui-receive-table tr:first-child > :nth-child(3) { width: 5%; }
    .ui-receive-table tr:first-child > :nth-child(4) { width: 8%; }
    .ui-receive-table tr:first-child > :nth-child(5) { width: 5%; }
    .ui-receive-table tr:first-child > :nth-child(6) { width: 10%; }
    .ui-receive-table tr:first-child > :nth-child(7),
    .ui-receive-table tr:first-child > :nth-child(8) { width: 5%; }
    .ui-receive-table tr:first-child > :nth-child(9) { width: 17%; }
    .ui-receive-table tr:first-child > :nth-child(10),
    .ui-receive-table tr:first-child > :nth-child(11) { width: 11%; }
    .ui-receive-table tr:first-child > :nth-child(12) { width: 5%; }
  }
  @media (max-width: 900px) {
    body { padding: 20px 16px; }
    #box, #main, #box_user { padding: 20px !important; }
  }
  @media (max-width: 1000px) {
    .ui-form-table, .ui-form-table > tbody, .ui-form-table > tbody > tr,
    .ui-form-table > tbody > tr > td,
    .ui-detail-table, .ui-detail-table > tbody, .ui-detail-table > tbody > tr,
    .ui-detail-table > tbody > tr > td {
      display: block; width: 100% !important; min-width: 0 !important;
      max-width: 100%; height: auto !important; text-align: left !important;
    }
    .ui-form-table > tbody > tr, .ui-detail-table > tbody > tr { border-bottom: 1px solid var(--ui-line); }
    .ui-form-table > tbody > tr > td, .ui-detail-table > tbody > tr > td {
      border: 0 !important; padding: 10px 12px; white-space: normal; overflow-wrap: anywhere;
    }
    .ui-form-table p, .ui-detail-table p { margin: 8px 0; }
    .ui-form-table select, .ui-form-table textarea { width: 100% !important; margin-left: 0 !important; }
    .ui-form-table input[size]:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]) { max-width: 100%; }
    .ui-form-table td[rowspan][width="25"] br { display: none; }
    .ui-application-columns { display: none; }
  }
  @media (max-width: 760px) {
    body { padding: 16px 12px; font-size: 18px; }
    #box, #main, #box_user { padding: 16px !important; border-radius: 10px !important; }
    .ui-page-header { align-items: flex-start; gap: 16px; }
    .ui-page-heading { width: 100%; }
    .ui-page-heading h1, .ui-embedded .ui-page-heading h1 { font-size: 25px; }
    .ui-brand strong { font-size: 21px; }
    .ui-data-table td, .ui-data-table th { padding: 10px 12px; min-width: 108px; }
    .ui-dialog { left: 12px !important; max-width: calc(100vw - 24px); }
    .ui-dialog fieldset { padding: 12px; }
    .ui-dialog .ui-dialog-buttonset { float: none !important; display: flex; flex-wrap: wrap; gap: 8px; }
    .ui-dialog .ui-dialog-buttonset button { margin: 0 !important; }
    .ui-menu-page { padding: 0; }
    .ui-menu-page .ui-page-header { padding: 12px 16px; align-items: center; gap: 10px; }
    .ui-menu-page .ui-page-heading { width: auto; margin-left: auto; }
    .ui-menu-page .ui-page-heading h1 { display: none; }
    .ui-menu-page .ui-area { font-size: 14px; padding: 3px 8px; }
    .ui-menu-page .ui-brand small { font-size: 14px; }
    .ui-nav-toggle { display: block; padding: 8px 12px !important; font-size: 16px !important; }
    .ui-menu-page #cssmenu { display: none; max-height: 55dvh; overflow-y: auto; }
    .ui-menu-open #cssmenu { display: block; }
    #menu-bar { display: block !important; padding: 8px 12px; }
    #menu-bar > li { border-bottom: 1px solid var(--ui-line); }
    #menu-bar ul { position: static; width: 100%; max-width: none; box-shadow: none; border: 0; padding: 4px 8px 12px 16px; }
    #menu-bar li:hover > ul, #menu-bar li:focus-within > ul { display: none; }
    #menu-bar li.ui-submenu-open > ul { display: block; }
    .ui-login .ui-detail-table td { padding: 10px 0; }
    .ui-login .ui-detail-table input[name="id"], .ui-login .ui-detail-table input[name="pw"] { width: 100% !important; }
    .ui-login input[type="button"][name="B1"] { width: 100% !important; }
    .ui-login img[src*="/s"][src$=".png"] { max-height: 36px; }
  }
  /* Timeout notices are messages, not horizontally scrolling data tables. */
  .ui-dialog.ui-timeout-dialog {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    width: min(640px, calc(100vw - 24px)) !important;
    min-width: 0;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: clamp(8px, 2vw, 16px);
  }
  .ui-timeout-dialog .ui-dialog-titlebar { padding: 12px 16px; }
  .ui-timeout-dialog .ui-dialog-title {
    font-size: clamp(20px, 3.5vw, 26px) !important;
    white-space: normal;
  }
  .ui-timeout-dialog .ui-dialog-content {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(16px, 4vw, 32px) clamp(8px, 3vw, 24px);
    font-size: clamp(18px, 3.5vw, 26px);
    line-height: 1.7;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .ui-timeout-message { display: flex; align-items: center; gap: clamp(12px, 3vw, 28px); }
  .ui-timeout-message img, .ui-timeout-dialog #msg img {
    width: clamp(48px, 12vw, 90px);
    height: auto;
    flex-shrink: 0;
  }
  .ui-timeout-text { flex: 1; min-width: 0; text-align: center; }
  .ui-timeout-dialog #msg { display: block; text-align: center; }
  .ui-timeout-dialog .ui-dialog-buttonpane { margin: 0; padding: 12px 8px 4px; }
  .ui-timeout-dialog .ui-dialog-buttonset {
    float: none !important;
    display: flex;
    justify-content: flex-end;
  }
  .ui-timeout-dialog .ui-dialog-buttonset button { min-width: 96px; margin: 0 !important; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
}
@media print {
  .ui-page-header, .ui-scroll-hint, .ui-submenu-toggle { display: none !important; }
  .ui-table-scroll { display: contents; }
}