/* Cross-platform, responsive layout layer. Loaded last so every VTS page shares one set of breakpoints. */
:root {
  font-family: Inter, "Segoe UI", "SF Pro Text", "SF Pro Display", Roboto, Ubuntu, "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html { min-width: 320px; min-height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
body { min-width: 320px; min-height: 100%; overflow-x: hidden; }
button, input, select, textarea { font-family: inherit; }
button, [role="button"], select { touch-action: manipulation; }
input, select, textarea { max-width: 100%; font-size: 16px; }
svg, img { max-width: 100%; }
:focus-visible { outline: 2px solid #d9322b; outline-offset: 2px; }
.input-wrap:focus-within { outline: 0; }
.table-scroll { max-width: 100%; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.table-scroll table { margin: 0; }
.content, .admin-content, .profile-content, .quality-report-panel, .quality-chart-panel { min-width: 0; }

.login-view, .invite-view, .portal-view { min-height: 100vh; min-height: 100dvh; }
.login-panel, .invite-panel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.login-card, .invite-card { max-width: 100%; }
.portal-main { min-width: 0; }
.content { width: 100%; max-width: 1600px; }
.topbar { padding-top: env(safe-area-inset-top); }
.sidebar { padding-bottom: env(safe-area-inset-bottom); }
.sidebar nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sidebar-backdrop { display: none; }
.breadcrumb { min-width: 0; overflow: hidden; }
.breadcrumb span, .breadcrumb b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-area { min-width: 0; }
.notification-panel, .account-dropdown { max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); }
.notification-list { overscroll-behavior: contain; }
.modal-backdrop { padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.modal { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.toast { max-width: min(420px, calc(100vw - 32px)); overflow-wrap: anywhere; }
.quality-chart { min-width: 0; overflow: hidden; }
.quality-chart svg { min-width: 620px; }
.quality-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.overview-sparkline svg { min-width: 0; }
.row-actions { flex-wrap: wrap; }

@media (max-width: 1366px) {
  .content { padding: 26px 28px; }
  .sidebar { width: 220px; }
  .portal-main { width: calc(100% - 220px); margin-left: 220px; }
  .quality-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .overview-metric { grid-template-columns: 230px minmax(0, 1fr); }
  .overview-period-legend { margin-left: 250px; }
  .admin-layout { grid-template-columns: 190px minmax(0, 1fr); }
}

/* Switch the invitation page before the general tablet breakpoint. At narrow
   laptop widths the split hero otherwise starves the password form of space. */
@media (max-width: 1240px) {
  .invite-view { display: block; background: linear-gradient(145deg, #f1f2f2, #fafafa 58%, #f3f4f4); }
  .invite-brand { display: none; }
  .invite-panel { min-height: 100vh; min-height: 100dvh; padding: max(28px, calc(env(safe-area-inset-top) + 18px)) max(30px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(30px, env(safe-area-inset-left)); place-items: start center; }
  .invite-card { width: min(540px, 100%); margin: 0 auto; padding: 34px 38px; }
  .invite-mobile-brand { display: flex; }
  .invite-language { top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
}

@media (max-width: 1100px) {
  .sidebar { width: min(300px, 84vw); transform: translateX(-102%); transition: transform .22s ease, box-shadow .22s ease; }
  .sidebar.open { transform: translateX(0); box-shadow: 12px 0 42px #0008; }
  .portal-main { width: 100%; margin-left: 0; }
  .menu-button { display: grid; flex: 0 0 38px; width: 38px; height: 38px; margin-right: 12px; padding: 0; place-items: center; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 19; display: block; border: 0; background: #090b0d80; opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s; }
  .sidebar-backdrop.visible { opacity: 1; visibility: visible; }
  body.sidebar-open { overflow: hidden; }
  .topbar { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
  .content { padding: 24px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid, .profile-layout, .admin-layout { grid-template-columns: 1fr; }
  .admin-navigation { display: none; }
  .quality-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-visual-grid { grid-template-columns: 1fr; }
  .overview-period-legend { display: none; }
  .overview-metric { grid-template-columns: 220px minmax(0, 1fr); }
  .overview-period-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-period:nth-child(2) { border-right: 0; }
  .overview-period:nth-child(-n+2) { border-bottom: 1px solid #eceeef; }
}

@media (max-width: 900px) {
  .login-view, .invite-view { display: block; background: #fafafa; }
  .login-brand, .invite-brand { display: none; }
  .login-panel, .invite-panel { min-height: 100vh; min-height: 100dvh; padding: max(74px, calc(env(safe-area-inset-top) + 58px)) max(28px, env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); align-items: start; }
  .login-card, .invite-card { width: min(520px, 100%); margin: auto; }
  .mobile-logo { display: flex; margin-bottom: 38px; }
  .invite-language, .login-language { top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
  .page-heading { margin-bottom: 22px; }
  .profile-summary { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .notification-panel { max-height: calc(100dvh - 80px); }
}

/* iPad mini and similarly sized compact tablets: keep the portrait layout
   comfortably centered, while reclaiming vertical space in landscape. */
@media (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {
  .invite-panel { padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)); }
  .invite-card { width: min(520px, calc(100vw - 48px)); }
}

@media (min-width: 901px) and (max-width: 1180px) and (max-height: 820px) and (orientation: landscape) {
  .invite-panel {
    padding: max(18px, calc(env(safe-area-inset-top) + 10px)) max(24px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  }
  .invite-card { padding: 28px 36px; }
  .invite-mobile-brand { margin-bottom: 18px; padding-bottom: 16px; }
  .invite-role-row { margin-top: 18px; }
}

@media (max-width: 760px) {
  .topbar { height: 66px; padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); }
  .breadcrumb span { display: none; }
  .breadcrumb b { max-width: 34vw; font-size: 12px; }
  .account-area, .topbar-tools { gap: 7px; }
  .account-menu-button { min-width: auto; min-height: 40px; padding: 3px; }
  .account-copy, .account-chevron, .account-separator { display: none; }
  .avatar, .portal-language, .notification-button { width: 38px; height: 38px; }
  .account-dropdown { position: fixed; top: calc(66px + env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); left: auto; width: min(280px, calc(100vw - 20px)); }
  .notification-panel { position: fixed; top: calc(66px + env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); left: max(10px, env(safe-area-inset-left)); width: auto; }
  .content { padding: 20px 18px max(28px, env(safe-area-inset-bottom)); }
  .page-heading { align-items: flex-start; gap: 14px; }
  .page-heading h1 { font-size: clamp(22px, 5vw, 26px); }
  .quality-heading-actions { align-items: flex-end; flex-direction: column; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .metric-card { min-width: 0; }
  .dashboard-grid { gap: 14px; }
  .activity-row { grid-template-columns: 38px minmax(0, 1fr); padding: 13px 15px; }
  .activity-value { grid-column: 2; text-align: left; }
  .quality-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-filter-title { display: flex; }
  .quality-filters button { grid-column: 1 / -1; }
  .overview-metric { grid-template-columns: 1fr; }
  .overview-metric > header { border-right: 0; border-bottom: 1px solid #e8eaec; }
  .form-grid { grid-template-columns: 1fr; }
  .settings-form .field.full { grid-column: auto; }
  .profile-tabs { max-width: 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .profile-tabs::-webkit-scrollbar { display: none; }
  .admin-heading-actions { flex-wrap: wrap; justify-content: flex-end; }
  .upload-panel { align-items: stretch; flex-direction: column; gap: 15px; }
  .upload-panel form { align-items: stretch; flex-direction: column; width: 100%; }
  .upload-panel #upload-message { max-width: none; }
  .form-actions .primary-button { width: 100%; }
}

@media (max-width: 560px) {
  .login-panel, .invite-panel { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  .login-card h2, .invite-card h2 { font-size: clamp(23px, 7vw, 29px); }
  .invite-card { padding: 26px 20px; }
  .invite-mobile-brand { margin-bottom: 22px; padding-right: 48px; }
  .content { padding-inline: 14px; }
  .breadcrumb b { max-width: 28vw; }
  .page-heading { flex-direction: column; }
  .page-heading > button, .page-heading .quality-heading-actions, .quality-heading-actions .secondary-button { width: 100%; }
  .quality-heading-actions { align-items: stretch; }
  .quality-heading-actions > span { text-align: left; }
  .metric-grid, .quality-filters, .overview-period-grid { grid-template-columns: 1fr; }
  .overview-period { border-right: 0; border-bottom: 1px solid #eceeef; }
  .overview-period:last-child { border-bottom: 0; }
  .overview-period:nth-child(-n+2) { border-bottom: 1px solid #eceeef; }
  .quality-filter-panel { padding: 14px; }
  .quality-filter-title { margin-bottom: 12px; }
  .quality-metric-card { min-height: 118px; padding: 15px; }
  .quality-visual-grid { gap: 12px; }
  .quality-chart { padding-inline: 8px; }
  .quality-chart svg { min-width: 560px; }
  .panel-title { padding: 16px; }
  .settings-form { padding: 17px; }
  .profile-summary { grid-template-columns: 64px minmax(0, 1fr); }
  .profile-avatar { width: 64px; height: 64px; }
  .profile-summary > .role-badge { justify-self: start; }
  .profile-summary-details { grid-column: 1 / -1; }
  .role-notice { align-items: flex-start; }
  .admin-heading-actions { width: 100%; }
  .admin-heading-actions button { flex: 1 1 100%; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal { width: 100%; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); border-radius: 8px 8px 0 0; padding: 26px 20px max(24px, env(safe-area-inset-bottom)); }
  .toast { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); left: 16px; max-width: none; text-align: center; }
}

@media (max-width: 390px) {
  .topbar { padding-inline: 10px; }
  .menu-button { margin-right: 7px; }
  .breadcrumb b { max-width: 24vw; }
  .account-area, .topbar-tools { gap: 5px; }
  .portal-language, .notification-button, .avatar { width: 36px; height: 36px; }
  .content { padding-inline: 10px; }
  .invite-card { padding-inline: 16px; }
  .password-requirements { gap: 4px; }
}

@media (max-height: 720px) and (min-width: 901px) {
  .login-brand { padding-block: 6vh; }
  .company-lockup { margin-bottom: 30px; }
  .brand-copy { margin-block: 18px 28px; }
  .invite-brand { padding: 32px 4.5vw; }
  .invite-brand-copy h1 { max-width: 520px; font-size: clamp(32px, 3.2vw, 45px); }
  .invite-brand-copy p:last-child { font-size: 13px; }
  .invite-panel { align-items: start; padding-block: 28px; }
}

@media (max-height: 560px) and (min-width: 1241px) {
  .invite-security-note { display: none; }
  .invite-card { padding-block: 28px; }
}

@media (hover: none) and (pointer: coarse) {
  button, .nav-item, .nav-sub-item, .quick-action, .table-action { min-height: 44px; }
  .profile-tabs button { min-height: 44px; }
  .table-action { padding-inline: 8px; }
}

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

@media (forced-colors: active) {
  .brand-mark, .overview-metric-mark, .status-dot { forced-color-adjust: none; }
  .panel, .metric-card, .input-wrap, button { border-color: CanvasText; }
}