/* YSG CONNECT V5 — responsive typography and layout safety layer.
   This file intentionally changes presentation only. */

@media screen {
  :root {
    --ysg-readable-font: "Noto Sans Thai", "Thonburi", "Leelawadee UI", Tahoma,
      "Segoe UI", Arial, system-ui, sans-serif;
  }

  html {
    min-width: 320px;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  body {
    min-width: 320px;
    overflow-x: hidden;
    font-family: var(--ysg-readable-font) !important;
    font-size: 16px;
    line-height: 1.55;
    font-kerning: normal;
  }

  body,
  button,
  input,
  select,
  textarea {
    font-family: var(--ysg-readable-font) !important;
  }

  #root,
  .ysg-app-shell,
  .ysg-app-shell main,
  .ysg-app-shell section,
  .ysg-app-shell article,
  .ysg-content,
  .ysg-admin-workspace,
  .ysg-admin-workspace > * {
    min-width: 0;
    max-width: 100%;
  }

  .ysg-app-shell h1,
  .ysg-app-shell h2,
  .ysg-app-shell h3,
  .ysg-app-shell h4,
  .ysg-app-shell h5,
  .ysg-app-shell h6,
  .ysg-app-shell p,
  .ysg-app-shell label,
  .ysg-app-shell button,
  .ysg-app-shell a,
  .ysg-app-shell td,
  .ysg-app-shell th,
  .ysg-app-shell span,
  .ysg-login-screen h1,
  .ysg-login-screen h2,
  .ysg-login-screen h3,
  .ysg-login-screen p,
  .ysg-login-screen label,
  .ysg-login-screen button {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .ysg-app-shell h1,
  .ysg-app-shell h2,
  .ysg-app-shell h3,
  .ysg-app-shell h4,
  .ysg-app-shell h5,
  .ysg-app-shell h6 {
    line-height: 1.35 !important;
    letter-spacing: -0.012em !important;
  }

  .ysg-app-shell p,
  .ysg-app-shell li,
  .ysg-app-shell label {
    line-height: 1.6;
  }

  .ysg-app-shell .text-xs {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .ysg-app-shell [class*="text-[8px]"],
  .ysg-app-shell [class*="text-[9px]"],
  .ysg-app-shell [class*="text-[10px]"],
  .ysg-app-shell [class*="text-[11px]"] {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .ysg-app-shell button,
  .ysg-app-shell a,
  .ysg-login-screen button {
    min-width: 0;
    line-height: 1.4;
    touch-action: manipulation;
  }

  .ysg-app-shell button:not(.w-4):not(.w-5):not(.w-6):not(.w-7):not(.w-8),
  .ysg-app-shell a[role="button"] {
    min-height: 40px;
  }

  .ysg-app-shell button > span,
  .ysg-app-shell button > div,
  .ysg-mode-switcher button,
  .ysg-admin-tabbar button,
  .ysg-personal-tabs button,
  .ysg-financial-tabs button {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
  }

  .ysg-app-shell input,
  .ysg-app-shell select,
  .ysg-app-shell textarea,
  .ysg-login-screen input,
  .ysg-login-screen select,
  .ysg-login-screen textarea {
    max-width: 100%;
    min-height: 44px;
    line-height: 1.45;
  }

  .ysg-app-shell img,
  .ysg-app-shell svg,
  .ysg-login-screen img,
  .ysg-login-screen svg {
    flex: 0 0 auto;
  }

  .ysg-action-panel {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) minmax(360px, auto) !important;
    align-items: center !important;
  }

  .ysg-action-panel > div:not([class*="absolute"]) {
    min-width: 0;
    max-width: 100%;
  }

  .ysg-action-panel > div:last-of-type {
    justify-self: end;
    flex-wrap: wrap;
  }

  .ysg-action-panel > div:last-of-type > button {
    flex: 1 1 220px;
  }

  .ysg-app-shell .overflow-x-auto,
  .ysg-app-shell .touch-pan-x,
  .ysg-app-shell :has(> table) {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .ysg-app-shell table {
    width: max-content;
    min-width: 100%;
    max-width: none;
  }

  .ysg-app-shell th,
  .ysg-app-shell td {
    min-width: 76px;
    vertical-align: top;
  }

  .ysg-app-shell th {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .ysg-app-shell td {
    font-size: 13px;
    line-height: 1.5;
  }

  .ysg-app-shell .fixed.inset-0 {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    overflow-y: auto !important;
  }

  .ysg-app-shell .fixed.inset-0 > div:not([class*="absolute"]),
  .ysg-login-screen .fixed.inset-0 > div:not([class*="absolute"]) {
    max-width: min(100%, 1024px);
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto;
  }

  .ysg-admin-nav-group-label {
    font-size: 12px !important;
    line-height: 1.4;
  }

  .ysg-admin-tabbar button {
    font-size: 14px !important;
    min-height: 46px;
  }

  @media (max-width: 1100px) {
    .ysg-admin-mobile-nav span {
      font-size: 13px !important;
    }

    .ysg-admin-mobile-nav strong {
      font-size: 16px !important;
      white-space: normal !important;
      text-overflow: clip;
    }

    .ysg-admin-mobile-nav button {
      min-height: 44px;
      font-size: 14px !important;
    }

    .ysg-admin-tabbar.is-open {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 900px) {
    .ysg-action-panel {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 18px !important;
    }

    .ysg-action-panel > div:last-of-type {
      width: 100% !important;
      justify-self: stretch;
    }
  }

  @media (max-width: 767px) {
    html,
    body {
      width: 100%;
      font-size: 16px !important;
      line-height: 1.6 !important;
    }

    .ysg-content {
      width: 100%;
      padding: 12px 10px calc(100px + env(safe-area-inset-bottom)) !important;
    }

    .ysg-app-shell h1 {
      font-size: clamp(24px, 7vw, 30px) !important;
    }

    .ysg-app-shell h2 {
      font-size: clamp(21px, 6vw, 26px) !important;
    }

    .ysg-app-shell h3 {
      font-size: clamp(18px, 5vw, 22px) !important;
    }

    .ysg-app-shell h4 {
      font-size: 17px !important;
    }

    .ysg-app-shell .text-xs,
    .ysg-app-shell [class*="text-[8px]"],
    .ysg-app-shell [class*="text-[9px]"],
    .ysg-app-shell [class*="text-[10px]"],
    .ysg-app-shell [class*="text-[11px]"] {
      font-size: 14px !important;
      line-height: 1.55 !important;
    }

    .ysg-app-shell .text-sm {
      font-size: 15px !important;
      line-height: 1.6 !important;
    }

    .ysg-app-shell button,
    .ysg-app-shell a[role="button"],
    .ysg-login-screen button {
      min-height: 44px;
      font-size: 14px;
    }

    .ysg-app-shell input,
    .ysg-app-shell select,
    .ysg-app-shell textarea,
    .ysg-login-screen input,
    .ysg-login-screen select,
    .ysg-login-screen textarea {
      min-height: 48px;
      font-size: 16px !important;
    }

    .ysg-role-header-inner,
    .ysg-header-layout,
    .ysg-header-controls,
    .ysg-header-user-actions,
    .ysg-user-summary,
    .ysg-header-quick-actions {
      min-width: 0;
      max-width: 100%;
    }

    .ysg-user-summary > div:last-child,
    .ysg-user-summary > div:last-child * {
      min-width: 0;
      max-width: 100%;
      white-space: normal !important;
      text-overflow: clip !important;
    }

    .ysg-mode-switcher {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .ysg-mode-switcher button:last-child {
      grid-column: auto !important;
    }

    .ysg-notification-banner,
    .ysg-primary-panel,
    .ysg-gps-panel,
    .ysg-action-panel,
    .ysg-admin-hero,
    .ysg-admin-workspace > :not(.ysg-admin-tabbar):not(.ysg-admin-mobile-nav) {
      padding: 14px !important;
    }

    .ysg-app-shell .flex.items-center.justify-between {
      flex-wrap: wrap;
      row-gap: 10px;
    }

    .ysg-action-panel {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .ysg-action-panel > div:not([class*="absolute"]),
    .ysg-action-panel > div:last-of-type,
    .ysg-action-panel > div:last-of-type > button {
      width: 100% !important;
      max-width: 100% !important;
      justify-self: stretch;
    }

    .ysg-action-panel > div:last-of-type > button {
      flex-basis: auto;
      min-height: 56px;
    }

    .ysg-personal-tabs,
    .ysg-financial-tabs,
    .ysg-admin-tabbar.is-open {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .ysg-personal-tabs button,
    .ysg-financial-tabs button,
    .ysg-admin-tabbar button {
      min-height: 50px;
      justify-content: flex-start;
      text-align: left;
      font-size: 14px !important;
    }

    .ysg-app-shell .grid-cols-3,
    .ysg-app-shell .grid-cols-4,
    .ysg-app-shell .grid-cols-5,
    .ysg-app-shell .grid-cols-6 {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .ysg-app-shell .overflow-x-auto,
    .ysg-app-shell .touch-pan-x,
    .ysg-app-shell :has(> table) {
      margin-right: 0;
      margin-left: 0;
      border-radius: 12px;
    }

    .ysg-app-shell table {
      min-width: 720px;
      font-size: 13px !important;
    }

    .ysg-app-shell th,
    .ysg-app-shell td {
      padding: 10px 12px !important;
      font-size: 13px !important;
    }

    .ysg-app-shell .fixed.inset-0 > div:not([class*="absolute"]),
    .ysg-login-screen .fixed.inset-0 > div:not([class*="absolute"]) {
      width: 100% !important;
      max-width: 100% !important;
      margin: auto 0 !important;
      padding: 16px !important;
      border-radius: 16px !important;
    }

    .ysg-login-card-header h3 {
      font-size: 22px !important;
      line-height: 1.4 !important;
    }

    .ysg-login-body {
      padding-right: 16px !important;
      padding-left: 16px !important;
    }

    .ysg-login-keypad {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .ysg-login-keypad button {
      min-height: 54px;
      font-size: 18px !important;
    }

    .ysg-pin-direct-input {
      display: block !important;
    }
  }

  @media (max-width: 390px) {
    .ysg-content {
      padding-right: 8px !important;
      padding-left: 8px !important;
    }

    .ysg-app-shell .grid-cols-2 {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .ysg-login-keypad {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .ysg-header-quick-actions {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }
}

@media print {
  .ysg-app-shell {
    color: #000 !important;
    background: #fff !important;
  }
}