/* =========================================================
   GKEB V31 — RESPONSIVE UI/UX SYSTEM
   Additive presentation layer. Does not change business logic,
   API contracts, permissions, or database structure.
   ========================================================= */

:root {
  --v31-brand: #08794b;
  --v31-brand-deep: #075047;
  --v31-brand-soft: #eaf6ef;
  --v31-ink: #173b2d;
  --v31-muted: #64766d;
  --v31-border: #dce8e0;
  --v31-surface: #ffffff;
  --v31-page: #f3f7f4;
  --v31-radius-sm: 8px;
  --v31-radius-md: 12px;
  --v31-radius-lg: 16px;
  --v31-shadow: 0 8px 24px rgba(19, 67, 47, .055);
  --v31-control-height: 40px;
  --v31-content-gap: clamp(12px, 1.5vw, 20px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 84px;
}

body {
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  color: var(--v31-ink);
  background: var(--v31-page);
  overflow-x: hidden;
}

#appContainer,
#appContainer *,
.module-subheader,
.topbar {
  min-width: 0;
}

#appContainer:not([hidden]) {
  width: calc(100% - 252px);
  max-width: none;
}

img,
svg {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
[role="button"],
input,
select,
textarea {
  touch-action: manipulation;
}

:where(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: 3px solid rgba(28, 139, 91, .32);
  outline-offset: 2px;
}

:where(.btn-primary, .btn-outline, .btn-soft, .btn-danger) {
  min-height: var(--v31-control-height);
  border-radius: var(--v31-radius-sm);
  font-weight: 700;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
       select,
       textarea) {
  min-height: var(--v31-control-height);
  border-color: var(--v31-border);
  border-radius: var(--v31-radius-sm);
  color: var(--v31-ink);
}

textarea {
  min-height: 88px;
}

:where(.panel, .content-card, .stat-card, .inventory-dashboard-panel,
       .employee-directory-panel, .attendance-panel, .distribution-panel,
       .crane-panel) {
  border-color: var(--v31-border);
  border-radius: var(--v31-radius-md);
  box-shadow: var(--v31-shadow);
}

:where(.panel-head, .inventory-dashboard-panel-head) {
  gap: 12px;
}

:where(.table-scroll, .inventory-table-wrap, .employee-table-wrap,
       .employee-accounts-table-scroll, .employee-best-table-scroll,
       .employee-feedback-table-scroll, .attendance-table-wrap,
       .attendance-month-table-wrap, .leave-table-wrap, .welding-table-wrap,
       .cctv-table-wrap, .distribution-table-wrap, .crane-table-wrap,
       .emp-att-metrics-table-wrap, .emp-att-top-five-table-wrap) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #a9c5b5 #edf4ef;
}

:where(.records-table, .inventory-table, .employee-table,
       .employee-accounts-table, .employee-best-table,
       .employee-feedback-table, .attendance-table, .leave-table,
       .welding-table, .cctv-table, .distribution-table, .crane-table) {
  max-width: 100%;
}

:where(.records-table, .inventory-table, .employee-table,
       .employee-accounts-table, .employee-best-table,
       .employee-feedback-table, .attendance-table, .leave-table,
       .welding-table, .cctv-table, .distribution-table, .crane-table) th {
  white-space: nowrap;
}

:where(.records-table, .inventory-table, .employee-table,
       .employee-accounts-table, .employee-best-table,
       .employee-feedback-table, .attendance-table, .leave-table,
       .welding-table, .cctv-table, .distribution-table, .crane-table) td {
  overflow-wrap: anywhere;
}

:where(.records-toolbar, .welding-toolbar, .inventory-toolbar,
       .employee-toolbar, .cctv-toolbar, .distribution-toolbar,
       .crane-list-tools, .actions, .motor-intro-actions) {
  min-width: 0;
  flex-wrap: wrap;
}

:where(.records-toolbar, .welding-toolbar, .inventory-toolbar,
       .employee-toolbar, .cctv-toolbar, .distribution-toolbar) > * {
  max-width: 100%;
}

:where(.records-filter-grid, .field-grid, .inventory-form-grid,
       .employee-editor-grid, .attendance-filter-grid,
       .attendance-month-filter-grid, .distribution-form-grid,
       .crane-form-grid, .welding-form-grid, .cctv-form-grid) > * {
  min-width: 0;
}

:where(.records-filter-grid, .field-grid, .inventory-form-grid,
       .employee-editor-grid, .attendance-filter-grid,
       .attendance-month-filter-grid, .distribution-form-grid,
       .crane-form-grid, .welding-form-grid, .cctv-form-grid) input,
:where(.records-filter-grid, .field-grid, .inventory-form-grid,
       .employee-editor-grid, .attendance-filter-grid,
       .attendance-month-filter-grid, .distribution-form-grid,
       .crane-form-grid, .welding-form-grid, .cctv-form-grid) select,
:where(.records-filter-grid, .field-grid, .inventory-form-grid,
       .employee-editor-grid, .attendance-filter-grid,
       .attendance-month-filter-grid, .distribution-form-grid,
       .crane-form-grid, .welding-form-grid, .cctv-form-grid) textarea {
  width: 100%;
  max-width: 100%;
}

:where(.distribution-modal, .crane-modal, .preview-modal,
       .welding-preview-modal, .leave-modal) {
  padding: max(10px, env(safe-area-inset-top))
           max(10px, env(safe-area-inset-right))
           max(10px, env(safe-area-inset-bottom))
           max(10px, env(safe-area-inset-left));
}

:where(.distribution-modal-card, .crane-modal-card,
       .preview-modal-card, .welding-preview-modal-card,
       .leave-modal-card, .employee-modal-card,
       .csv-export-modal-card, .security-modal-card) {
  max-height: min(92vh, 920px);
  max-height: min(92dvh, 920px);
  overflow: auto;
  overscroll-behavior: contain;
}

:where(.distribution-modal-actions, .crane-modal-actions,
       .employee-modal-actions, .leave-modal-actions) {
  flex-wrap: wrap;
}

.module-subheader {
  scrollbar-width: thin;
  scrollbar-color: rgba(220, 242, 232, .45) transparent;
}

.module-subheader .module-tab,
.module-subheader .inventory-side-link,
.module-subheader .inventory-tx-sub-link {
  min-height: 42px;
}

.nav-scrim {
  touch-action: manipulation;
}

/* Large desktop: preserve the existing single IMIP sidebar and content offset. */
@media screen and (min-width: 1440px) {
  #appContainer:not([hidden]) {
    padding-left: clamp(26px, 2.2vw, 42px);
    padding-right: clamp(26px, 2.2vw, 42px);
  }
}

/* Tablet: slightly narrower sidebar and more compact page gutters. */
@media screen and (min-width: 761px) and (max-width: 1024px) {
  .module-subheader {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }

  .topbar .brand.brand-imip {
    flex: 0 0 220px !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    padding-left: 15px !important;
    padding-right: 10px !important;
  }

  .topbar .brand-imip .brand-logo {
    width: 190px !important;
    max-width: 100% !important;
  }

  #appContainer:not([hidden]) {
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
    padding: 20px 16px 28px !important;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .preview-panel {
    position: static;
  }

  :where(.inventory-summary-grid, .crane-stats-grid,
         .records-summary, .attendance-summary-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :where(.inventory-dashboard-grid, .emp-dashboard-bottom-panels,
         .employee-dashboard-bottom-panels) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :where(.records-filter-grid, .distribution-toolbar,
         .crane-filter-grid, .attendance-filter-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile and small tablets: use the existing drawer navigation. */
@media screen and (max-width: 760px) {
  html {
    scroll-padding-top: 76px;
  }

  body {
    min-width: 320px;
    overflow-x: hidden;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 140;
    display: flex;
    min-height: 68px !important;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    background: #fff !important;
    color: var(--v31-ink) !important;
    border-bottom: 1px solid var(--v31-border);
    box-shadow: 0 3px 12px rgba(19, 67, 47, .07);
  }

  .mobile-nav-toggle {
    display: inline-flex !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    background: var(--v31-brand-soft) !important;
    color: var(--v31-brand-deep) !important;
  }

  .topbar .brand.brand-imip {
    flex: 0 0 104px !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .topbar .brand-imip .brand-logo-wrap {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .topbar .brand-imip .brand-logo {
    width: 100% !important;
    height: auto !important;
    max-height: 36px !important;
    object-fit: contain !important;
    object-position: left center !important;
    filter: none !important;
  }

  .topbar .header-app-controls {
    display: grid !important;
    flex: 1 1 auto !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 7px !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .topbar .header-main-title {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden;
    color: #244b38 !important;
    font-size: 10px !important;
    font-weight: 750;
    line-height: 1.25 !important;
    text-overflow: ellipsis;
    white-space: normal;
    padding: 0 !important;
  }

  .topbar .header-right-controls {
    display: flex !important;
    grid-column: 2;
    align-items: center;
    gap: 5px !important;
    min-width: 0;
    margin: 0 !important;
  }

  .topbar .language-control {
    min-width: 0 !important;
    width: auto !important;
  }

  .topbar .language-control select {
    width: auto !important;
    min-width: 94px !important;
    max-width: 112px !important;
    min-height: 36px !important;
    padding: 6px 20px 6px 7px !important;
    font-size: 10px !important;
  }

  .module-subheader {
    position: fixed !important;
    z-index: 150 !important;
    top: 68px !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(300px, 86vw) !important;
    min-width: 0 !important;
    max-width: 86vw !important;
    padding: 15px 12px max(22px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    transform: translateX(-105%);
    transition: transform .2s ease;
  }

  .module-subheader.mobile-open {
    transform: translateX(0) !important;
  }

  .nav-scrim.active {
    display: block !important;
    position: fixed !important;
    z-index: 145 !important;
    inset: 68px 0 0 !important;
    background: rgba(7, 28, 20, .46) !important;
    backdrop-filter: blur(2px);
  }

  #appContainer:not([hidden]) {
    position: relative !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 16px 12px 26px !important;
  }

  body.records-mode {
    height: auto !important;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.records-mode #appContainer:not([hidden]),
  body.records-mode #motorModule,
  body.records-mode #recordsView,
  body.records-mode #recordsView > .records-panel {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .intro,
  .motor-intro,
  .welding-heading,
  .employee-heading,
  .inventory-page-heading,
  .distribution-page-header,
  .crane-page-header {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .intro h1,
  .motor-intro h1 {
    font-size: clamp(21px, 5vw, 25px) !important;
    line-height: 1.2;
  }

  :where(.motor-intro-actions, .records-head-actions,
         .crane-header-actions, .distribution-header-actions,
         .employee-toolbar, .welding-panel-actions) {
    width: 100%;
    justify-content: flex-start;
  }

  :where(.records-summary, .inventory-summary-grid,
         .crane-stats-grid, .attendance-summary-grid,
         .attendance-cards-summary-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  :where(.summary-card, .inventory-stat, .crane-stat-card,
         .attendance-summary-card) {
    min-width: 0;
    padding: 11px !important;
  }

  :where(.summary-copy strong, .inventory-stat strong,
         .crane-stat-card strong) {
    font-size: clamp(18px, 5vw, 23px);
  }

  :where(.records-filter-grid, .distribution-toolbar,
         .crane-filter-grid, .attendance-filter-grid,
         .attendance-month-filter-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding: 12px !important;
  }

  :where(.records-filter-grid, .distribution-toolbar,
         .crane-filter-grid, .attendance-filter-grid,
         .attendance-month-filter-grid) .full,
  .records-filter-grid .date-range-field,
  .crane-filter-search {
    grid-column: 1 / -1 !important;
  }

  :where(.panel-head, .records-panel .panel-head,
         .crane-list-heading, .distribution-panel-heading) {
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 14px !important;
  }

  :where(.panel-body, .employee-directory-panel,
         .attendance-panel) {
    padding: 14px !important;
  }

  :where(.records-toolbar, .inventory-toolbar, .welding-toolbar,
         .distribution-toolbar, .employee-toolbar) {
    width: 100%;
    gap: 8px !important;
  }

  :where(.records-toolbar input, .records-toolbar select,
         .inventory-toolbar input, .inventory-toolbar select,
         .welding-toolbar input, .welding-toolbar select) {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  :where(.field-grid, .upload-grid, .inventory-form-grid,
         .employee-editor-grid, .attendance-person-card-grid,
         .distribution-form-grid, .crane-form-grid,
         .welding-form-grid, .cctv-form-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .field.full,
  .field-grid .field.full {
    grid-column: 1 / -1 !important;
  }

  :where(.records-table, .inventory-table, .employee-table,
         .employee-accounts-table, .employee-best-table,
         .employee-feedback-table, .attendance-table, .leave-table,
         .welding-table, .cctv-table, .distribution-table,
         .crane-table) {
    min-width: 760px;
  }

  :where(.table-scroll, .inventory-table-wrap, .employee-table-wrap,
         .employee-accounts-table-scroll, .employee-best-table-scroll,
         .employee-feedback-table-scroll, .attendance-table-wrap,
         .attendance-month-table-wrap, .leave-table-wrap,
         .welding-table-wrap, .cctv-table-wrap,
         .distribution-table-wrap, .crane-table-wrap) {
    width: 100%;
    overflow-x: auto !important;
    overflow-y: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  :where(.records-pagination, .welding-pagination,
         .inventory-stock-pagination, .inventory-transactions-pagination,
         .leave-pagination, .attendance-table-footer) {
    flex-wrap: wrap;
    gap: 9px;
    padding: 12px !important;
  }

  :where(.distribution-modal-card, .crane-modal-card,
         .preview-modal-card, .welding-preview-modal-card,
         .leave-modal-card, .employee-modal-card,
         .csv-export-modal-card, .security-modal-card) {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 13px !important;
    padding: 15px !important;
  }

  :where(.distribution-modal-actions, .crane-modal-actions,
         .employee-modal-actions, .leave-modal-actions) {
    justify-content: stretch !important;
  }

  :where(.distribution-modal-actions, .crane-modal-actions,
         .employee-modal-actions, .leave-modal-actions) button {
    flex: 1 1 auto;
  }

  .paper-wrap {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Narrow phones: stack fields and actions to prevent cramped controls. */
@media screen and (max-width: 430px) {
  .topbar {
    gap: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .topbar .brand.brand-imip {
    flex-basis: 88px !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
  }

  .topbar .brand-imip .brand-logo {
    max-height: 32px !important;
  }

  .topbar .header-main-title {
    font-size: 9px !important;
  }

  .topbar .language-control select {
    min-width: 84px !important;
    max-width: 96px !important;
    font-size: 9px !important;
  }

  #appContainer:not([hidden]) {
    padding: 13px 9px 22px !important;
  }

  :where(.field-grid, .upload-grid, .inventory-form-grid,
         .employee-editor-grid, .attendance-person-card-grid,
         .distribution-form-grid, .crane-form-grid,
         .welding-form-grid, .cctv-form-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .field.full,
  .field-grid .field.full {
    grid-column: auto !important;
  }

  :where(.records-filter-grid, .distribution-toolbar,
         .crane-filter-grid, .attendance-filter-grid,
         .attendance-month-filter-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.records-filter-grid, .distribution-toolbar,
         .crane-filter-grid, .attendance-filter-grid,
         .attendance-month-filter-grid) .full,
  .records-filter-grid .date-range-field,
  .crane-filter-search {
    grid-column: auto !important;
  }

  :where(.records-summary, .inventory-summary-grid,
         .crane-stats-grid, .attendance-summary-grid,
         .attendance-cards-summary-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :where(.actions, .motor-intro-actions, .records-head-actions) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.actions, .motor-intro-actions, .records-head-actions) button {
    width: 100%;
  }
}

@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 print {
  .topbar,
  .module-subheader,
  .mobile-nav-toggle,
  .nav-scrim {
    display: none !important;
  }
}