/* GPS Web kit — Inter font import + targeted Vuetify overrides.
   The kit relies on Vuetify's compiled CSS for the bulk; this file
   layers brand specifics that the theme system can't express. */

@import url('../../colors_and_type.css');
@import url('https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css');

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

/* ---- Force Inter as the global Vuetify type face (excluding icon glyphs) ---- */
.v-application,
.v-application :not(.v-icon):not([class*="mdi-"]):not(.mdi) {
  font-family: var(--gps-font) !important;
  letter-spacing: 0.5px;
}
/* Restore the MDI font for any icon element Vuetify renders */
.v-icon,
.mdi,
[class*="mdi-"]::before {
  font-family: 'Material Design Icons' !important;
  letter-spacing: normal !important;
}

/* ---- Vuetify button overrides — capitalize, not uppercase ---- */
.v-btn { text-transform: capitalize !important; letter-spacing: 0.5px !important; font-weight: 400 !important; }
/* Icon size floors inside buttons — default 24, small 20, x-small 16 */
.v-btn--size-default .v-icon,
.v-btn--size-default .v-btn__prepend .v-icon,
.v-btn--size-default .v-btn__append  .v-icon { font-size: 24px !important; }
.v-btn--size-small   .v-icon,
.v-btn--size-small   .v-btn__prepend .v-icon,
.v-btn--size-small   .v-btn__append  .v-icon { font-size: 20px !important; }
.v-btn--size-x-small .v-icon,
.v-btn--size-x-small .v-btn__prepend .v-icon,
.v-btn--size-x-small .v-btn__append  .v-icon { font-size: 16px !important; }

/* ---- Sidebar: active item gets Primary-lgt pill, inactive Text-60 ---- */
.gp-sidebar .v-list-item {
  border-radius: 9999px !important;
  margin: 2px 6px;
  min-height: 38px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gps-text-60);
  padding-inline: 12px !important;
}
.gp-sidebar .v-list-item__prepend { padding-inline-end: 8px !important; }
.gp-sidebar .v-list-item__content { min-width: 0 !important; }
.gp-sidebar .v-list-item-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px;
  overflow: visible !important;
  text-overflow: clip !important;
}
.gp-sidebar .v-list-item--active {
  background: var(--gps-primary-lgt) !important;
  color: var(--gps-primary) !important;
}
.gp-sidebar .v-list-item--active .v-icon { color: var(--gps-primary); }
.gp-sidebar .v-list-subheader {
  font-size: 12px;
  color: var(--gps-text-50);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  min-height: 28px;
  padding-top: 12px;
}

/* ---- App bar: two-row transparent ---- */
.gp-appbar { padding: 8px 24px 16px; }
.gp-appbar-row1 { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
.gp-appbar-row2 { display: flex; justify-content: space-between; align-items: flex-start; padding: 4px 0 0; gap: 16px; }
.gp-page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gps-text-90);
  text-transform: capitalize;
  letter-spacing: 0.3px;
  margin: 0;
  white-space: nowrap;
}
.gp-breadcrumb { font-size: 12px; margin-top: 2px; letter-spacing: 0.5px; }
.gp-breadcrumb a { color: var(--gps-primary); cursor: pointer; text-decoration: none; }
.gp-breadcrumb .sep, .gp-breadcrumb .current { color: var(--gps-text-60); }

/* ---- Table customisations ---- */
.v-data-table .v-data-table__th,
.v-data-table thead th {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--gps-text-80) !important;
  text-transform: capitalize !important;
  letter-spacing: 0.5px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--gps-text-10) !important;
}
.v-data-table .v-data-table__td,
.v-data-table tbody td {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--gps-text-70) !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid var(--gps-text-10) !important;
}
.v-data-table tbody tr:hover td { background: #fafafa !important; }
.gp-file-link { color: var(--gps-link); text-decoration: none; cursor: pointer; }
.gp-file-link:hover { text-decoration: underline; }
.gp-draft-tag { color: var(--gps-orange); margin-right: 6px; }

/* Expanded sub-row */
.gp-expanded {
  background: var(--gps-neutral-1);
  padding: 16px 24px 20px;
}
.gp-expanded .meta-row { display: flex; gap: 48px; margin-bottom: 16px; font-size: 14px; }
.gp-expanded .meta-row .k { color: var(--gps-text-40); margin-right: 6px; font-size: 12px; }
.gp-expanded .meta-row .v { color: var(--gps-text-90); font-weight: 600; }

/* Transmittal app bg variant */
.gp-bg-transmittal { background: var(--gps-transmittal-bg) !important; }

/* Completed chip — light-green tinted pill (used in card-row lists) */
.gp-chip-completed.v-chip { color: #2f6b15 !important; }

/* ===== All form inputs share 8 px radius ===== */
.v-text-field .v-field,
.v-select .v-field,
.v-autocomplete .v-field,
.v-file-input .v-field,
.v-textarea .v-field { border-radius: 8px !important; }
.v-field--variant-outlined .v-field__outline__start { border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; }
.v-field--variant-outlined .v-field__outline__end   { border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; }
.gp-search { border-radius: 8px !important; }

/* Vertical tabs — info-blue underline indicator everywhere */
.gp-manpower-tabs .v-tab,
.gp-vtab .v-tab { justify-content: flex-start !important; padding-inline: 18px !important; color: var(--gps-text-70) !important; text-transform: capitalize !important; letter-spacing: 0.4px !important; font-weight: 400 !important; }
.gp-manpower-tabs .v-tab--selected,
.gp-vtab .v-tab--selected { color: var(--gps-info) !important; background: transparent !important; font-weight: 500 !important; }
.gp-manpower-tabs .v-tab .v-tab__slider,
.gp-vtab .v-tab .v-tab__slider { display: none !important; }
.gp-manpower-tabs .v-tab--selected .v-tab__slider,
.gp-vtab .v-tab--selected .v-tab__slider { display: block !important; background: var(--gps-info) !important; height: 2px !important; left: 18px !important; right: 18px !important; bottom: 6px !important; }

/* Filter-bar inputs use the rounded-pill variant (different from form inputs in modals) */
.gp-filter-input .v-field,
.gp-filter-input.v-field { border-radius: 9999px !important; overflow: hidden; }
.gp-filter-input .v-field__outline { border-radius: 9999px !important; }
.gp-filter-input .v-field__outline__start { border-top-left-radius: 9999px !important; border-bottom-left-radius: 9999px !important; min-width: 18px !important; }
.gp-filter-input .v-field__outline__end   { border-top-right-radius: 9999px !important; border-bottom-right-radius: 9999px !important; min-width: 18px !important; }
.gp-filter-input .v-field__outline__notch::before,
.gp-filter-input .v-field__outline__notch::after { display: none !important; }
.gp-filter-input .v-field__input { padding-inline-start: 8px !important; padding-inline-end: 4px !important; }

.gp-doc-row {
  background: #fff;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow .15s ease;
}
.gp-doc-row.is-expanded { box-shadow: var(--gps-elev-1); }
.gp-doc-row-head {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px 12px 18px;
  cursor: pointer;
  min-height: 48px;
}
.gp-doc-row-head .row-id { font-size: 13px; font-weight: 500; color: var(--gps-text-90); letter-spacing: 0.3px; white-space: nowrap; }
.gp-doc-row-head .row-pipe { color: var(--gps-text-20); }
.gp-doc-row-head .row-category { font-size: 13px; color: var(--gps-text-70); letter-spacing: 0.4px; }
.gp-doc-row-head .row-spacer { flex: 1; }
.gp-doc-row-head .meta-pair { display: inline-flex; align-items: baseline; gap: 10px; font-size: 13px; letter-spacing: 0.4px; }
.gp-doc-row-head .meta-pair .k { color: var(--gps-text-50); }
.gp-doc-row-head .meta-pair .v { color: var(--gps-text-90); font-weight: 500; }
.gp-doc-row-head .meta-pair .v.is-zero { color: var(--gps-error); }
.gp-doc-row-head .gp-draft-tag { font-size: 13px; color: var(--gps-orange); margin-right: -4px; letter-spacing: 0.5px; }
.gp-inline-status[data-color="orange"] {
  color: var(--gps-orange);
  font-size: 12px; font-weight: 600; letter-spacing: 0.7px;
  padding: 0 8px; margin-left: 4px;
}
.gp-doc-row-body {
  padding: 8px 14px 14px;
  border-top: 1px solid var(--gps-text-10);
  display: flex; flex-direction: column; gap: 14px;
}
.gp-meta-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gp-meta-pill {
  background: var(--gps-neutral-1);
  border-radius: 6px;
  padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
}
.gp-meta-pill .k { color: var(--gps-text-60); letter-spacing: 0.5px; }
.gp-meta-pill .v { color: var(--gps-text-90); font-weight: 600; letter-spacing: 0.5px; }
.gp-doc-row-actions { display: flex; align-items: center; gap: 8px; }

/* ===== Modal: Manpower create — summary header + discipline cards ===== */
.gp-modal-header-green {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 20px 8px;
}
.gp-modal-header-green .title {
  font-size: 18px; font-weight: 600; color: var(--gps-primary);
  letter-spacing: 0.5px; text-transform: none;
}
.gp-summary-card {
  margin: 0 20px 8px;
  border: 1px solid var(--gps-text-10);
  border-radius: 8px;
  padding: 12px 16px;
  background: #fff;
  display: flex; flex-direction: column; gap: 10px;
}
.gp-summary-card .row1 { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.gp-summary-card .row1 .info { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.gp-summary-card .row1 .k { color: var(--gps-text-60); letter-spacing: 0.5px; }
.gp-summary-card .row1 .v { color: var(--gps-text-90); font-weight: 600; }
.gp-summary-card .row2 { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding-top: 8px; border-top: 1px dashed var(--gps-text-10); }
.gp-summary-card .row2 .total-label { font-size: 11px; color: var(--gps-text-60); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 500; }
.gp-summary-card .row2 .dot { width: 1px; height: 14px; background: var(--gps-text-10); }
.gp-summary-card .row2 .sum { font-size: 13px; }
.gp-summary-card .row2 .sum .k { color: var(--gps-text-60); margin-right: 4px; letter-spacing: 0.5px; }
.gp-summary-card .row2 .sum strong { color: var(--gps-text-90); }

.gp-discipline-card {
  background: #fff;
  border: 1px solid var(--gps-text-10);
  border-radius: 8px;
  padding: 14px 16px;
}
.gp-discipline-card .title { font-size: 14px; font-weight: 600; color: var(--gps-text-80); margin-bottom: 12px; letter-spacing: 0.5px; }
.gp-discipline-card .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 22px; }
.gp-discipline-card .trade { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.gp-discipline-card .trade .label { color: var(--gps-text-70); letter-spacing: 0.5px; flex: 1; }
.gp-discipline-card .trade .num {
  width: 48px; height: 28px; text-align: center;
  border: 1px solid var(--gps-text-10); border-radius: 4px;
  font-family: var(--gps-font); font-size: 13px; color: var(--gps-text-90);
  outline: none;
}
.gp-discipline-card .trade .num:focus { border-color: var(--gps-primary); }
.gp-discipline-card .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ===== Audit modal pills + question form ===== */
.gp-audit-pills {
  display: flex; gap: 16px; padding: 6px 24px 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--gps-text-10);
}
.gp-audit-pills .pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; padding: 4px 14px;
  border-radius: 9999px; background: var(--gps-neutral-1);
}
.gp-audit-pills .pill .k { color: var(--gps-text-60); letter-spacing: 0.5px; }
.gp-audit-pills .pill .v { color: var(--gps-text-90); font-weight: 600; }
.gp-audit-pills .pill.score { background: rgba(95,164,20,0.1); }
.gp-audit-pills .pill.score .v { color: var(--gps-primary); }

.gp-question {
  background: var(--gps-neutral-1);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 12px;
}
.gp-question .q-num { font-size: 13px; color: var(--gps-text-80); margin-bottom: 8px; letter-spacing: 0.5px; font-weight: 500; }
.gp-question .q-num .req { color: var(--gps-error); }
.gp-question .q-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Detail header */
.gp-detail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.gp-detail-head .rec-id {
  font-size: 24px;
  font-weight: 500;
  color: var(--gps-primary);
  letter-spacing: 0.5px;
}
.gp-meta-row { display: flex; gap: 32px; font-size: 14px; color: var(--gps-text-70); margin-bottom: 24px; }
.gp-meta-row .k { color: var(--gps-text-40); font-size: 12px; }
.gp-meta-row .v { color: var(--gps-text-90); font-weight: 600; display: block; margin-top: 2px; }

/* DRAFT label and similar */
.gp-section-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--gps-text-80);
  text-transform: capitalize;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
}

/* Mode hint pill */
.gp-mode-hint {
  position: fixed; left: 226px; bottom: 16px;
  background: #fff; border: 1px solid var(--gps-text-10);
  border-radius: 9999px;
  padding: 6px 14px; font-size: 12px; color: var(--gps-text-60);
  letter-spacing: 0.5px; box-shadow: var(--gps-elev-1);
  z-index: 5;
}

/* Drop area in modal */
.gp-drop-area {
  padding: 28px 16px;
  border: 1px dashed var(--gps-text-20);
  border-radius: 8px;
  text-align: center;
  color: var(--gps-text-60);
  background: #fff;
}

/* Empty state — grey panel inside a surface */
.gp-empty-panel {
  background: #ededed;
  border-radius: 6px;
  padding: 36px 16px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.gp-empty-icon { font-size: 56px !important; color: var(--gps-text-30); line-height: 1; }
.gp-empty-label { font-size: 14px; color: var(--gps-text-50); }
.gp-empty-helper { font-size: 13px; color: var(--gps-text-60); }

/* Skeleton loader — tune the shimmer to the GPS neutral ramp */
.v-skeleton-loader__bone {
  background: var(--gps-neutral-1) !important;
  border-radius: 4px !important;
}
.v-skeleton-loader__bone::after {
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.55),
    transparent
  ) !important;
}