/* KomputerHub responsive interface — 2026-09-22. UI only. */
@media screen {
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body { margin:0; }
  *, *::before, *::after { box-sizing:border-box; }
  img { max-width:100%; }
  .kh-main { min-width:0; }
  /* Auto-fill uses actual available space, including the desktop sidebar.
     A card never gets compressed to a narrow fraction of a phone screen. */
  body .product-track, body [id^="track-"] {
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)) !important;
    gap:20px !important; overflow:visible !important;
    scroll-snap-type:none; align-items:stretch; padding-bottom:8px;
  }
  body .product-track > *, body [id^="track-"] > * {
    width:100% !important; min-width:0 !important; max-width:none !important;
    border-radius:18px !important; border:1px solid #e2e8f0;
    background:#fff; box-shadow:0 3px 14px rgb(15 23 42 / 4%);
    overflow:hidden; display:flex; flex-direction:column;
  }
  body [id^="track-"] > * > .relative { padding-top:40px; background:#fff; }
  body [id^="track-"] > * > .relative > img {
    height:180px !important; width:100%; object-fit:contain; padding:16px;
  }
  body [id^="track-"] > * > .relative > .absolute:not(.inset-0) {
    top:12px; max-width:calc(50% - 16px); font-size:11px; line-height:1.3;
    padding:5px 8px; overflow-wrap:normal; border-radius:8px;
  }
  body [id^="track-"] > * > .p-5 { padding:18px !important; flex:1; display:flex; flex-direction:column; }
  body [id^="track-"] h5 { font-size:17px; line-height:1.4; min-height:48px; word-break:normal; overflow-wrap:break-word; }
  body [id^="track-"] p { word-break:normal; overflow-wrap:break-word !important; }
  body [id^="track-"] .items-end { flex-wrap:wrap; align-items:flex-start; gap:8px; }
  body [id^="track-"] p.text-2xl { white-space:nowrap; font-size:22px; line-height:1.4; font-variant-numeric:tabular-nums; }
  body [id^="track-"] .text-right { text-align:left; }
  body [id^="track-"] button, body [id^="track-"] a { min-height:44px; }
  body [id^="track-"] .p-5 > button:last-child { margin-top:20px; padding-top:12px; padding-bottom:12px; }
  button[onclick^="scrollProduct("] { display:none !important; }
  :focus-visible { outline:3px solid #dc2626; outline-offset:3px; }
  .kh-sidebar:focus-within { width:var(--kh-sidebar-open); }
  .kh-sidebar:focus-within .kh-sidebar-text,
  .kh-sidebar:focus-within .kh-sidebar-logo-text,
  .kh-sidebar:focus-within .kh-sidebar-role-text,
  .kh-sidebar:focus-within .kh-sidebar-section-text { visibility:visible; opacity:1; width:auto; }
  .kh-sidebar { max-width:calc(100vw - 56px); height:100vh; height:100dvh; }
  .kh-mobile-overlay { z-index:80 !important; }
  .kh-sidebar { z-index:40; }
  .kh-sidebar-toggle { z-index:95 !important; }
  .kh-responsive-dialog { max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; }
  @media (min-width:1440px) {
    body .product-track, body [id^="track-"] { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  }
  @media (max-width:1023px) {
    body.mobile-sidebar-open { overflow:hidden; }
    body .kh-main > header { position:relative !important; top:auto; }
    body .kh-page-header { padding:16px !important; padding-top:72px !important; gap:12px; }
    body .kh-page-header form { width:100%; max-width:none; }
    body .kh-sidebar-toggle { top:12px; left:16px; box-shadow:0 3px 10px rgb(15 23 42 / 12%); }
    body .kh-sidebar { box-shadow:none; z-index:90 !important; }
    body.mobile-sidebar-open .kh-sidebar { box-shadow:16px 0 48px rgb(15 23 42 / 20%); padding-top:56px; }
    .kh-v2-notification-popover { z-index:100; }
  }
  @media (max-width:600px) {
    body .product-track, body [id^="track-"] { grid-template-columns:1fr !important; gap:16px !important; }
    body .kh-main > section { padding:16px !important; padding-bottom:80px !important; }
    body .kh-main h2, body .kh-main h3 { font-size:24px; line-height:1.25; }
    body .kh-main .kh-page-header p { font-size:13px; }
    body .kh-main .p-7, body .kh-main .p-8 { padding:18px; }
    body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), body select, body textarea { font-size:16px !important; max-width:100%; }
    body button, body .kh-v2-button { min-height:44px; touch-action:manipulation; }
    .kh-responsive-dialog { width:100% !important; border-radius:16px !important; }
    .kh-responsive-dialog .p-8, .kh-responsive-dialog .p-7 { padding:18px !important; }
    .kh-responsive-dialog img.h-80, .kh-responsive-dialog img.h-96 { height:220px !important; }
    body .kh-responsive-modal { padding:12px !important; z-index:110 !important; }
    .kh-v2-mobile-cards-table td > * { min-width:0; max-width:100%; }
    .kh-v2-mobile-cards-table td { overflow-wrap:anywhere; }
  }
  @media (max-width:767px) {
    body .kh-page-header { align-items:stretch; }
    body .kh-page-header > .flex { flex-wrap:wrap; }
    body .kh-page-header h1 { font-size:24px; line-height:1.3; }
    body .kh-main .kh-v2-toolbar { align-items:stretch; }
    body .kh-main .kh-v2-toolbar > input,
    body .kh-main .kh-v2-toolbar > select { width:100%; min-width:0; }
    body .kh-main .kh-v2-search-inline { width:100%; min-width:0; }
    body .kh-main .kh-v2-table-wrap { -webkit-overflow-scrolling:touch; }
    body .kh-main .kh-v2-mobile-cards-table { min-width:0 !important; }
    body .kh-main .kh-v2-mobile-cards-table tbody { width:100%; }
    body .kh-main .kh-v2-actions { display:flex; flex-wrap:wrap; gap:8px; }
    body .kh-main .kh-v2-actions a,
    body .kh-main .kh-v2-actions button { min-height:44px !important; }
  }
  @media (prefers-reduced-motion:reduce) {
    .kh-sidebar, [id^="track-"] > * { transition:none !important; scroll-behavior:auto !important; }
  }
}