/* ATCRazor Compact Workspace Theme
   Shared visual language for WMS: compact, calm, responsive, and accessible. */

:root {
  --atc-primary: #2563eb;
  --atc-primary-hover: #1d4ed8;
  --atc-primary-soft: #e8f0ff;
  --atc-success: #0f9f55;
  --atc-warning: #d48700;
  --atc-danger: #dc2626;
  --atc-info: #0891b2;
  --atc-text: #1e293b;
  --atc-text-muted: #64748b;
  --atc-surface: #ffffff;
  --atc-surface-soft: #f8fafc;
  --atc-page: #f4f7fb;
  --atc-border: #d8e2ef;
  --atc-border-soft: #e7edf4;
  --atc-radius-sm: 7px;
  --atc-radius: 9px;
  --atc-radius-lg: 13px;
  --atc-control-height: 36px;
  --atc-control-height-sm: 30px;
  --atc-font-size: 12px;
  --atc-font-size-sm: 11px;
  --atc-shadow-sm: 0 3px 10px rgb(15 23 42 / 6%);
  --atc-shadow: 0 10px 30px rgb(15 23 42 / 10%);

  --bs-body-color: var(--atc-text);
  --bs-body-font-size: var(--atc-font-size);
  --bs-border-color: var(--atc-border);
  --bs-border-radius: var(--atc-radius-sm);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: var(--atc-radius-lg);
  --bb-height: var(--atc-control-height);
  --bb-border-focus-color: #60a5fa;
  --bb-border-hover-color: #93c5fd;
  --bb-shadow: var(--atc-shadow-sm);
  --bb-hover-shadow: var(--atc-shadow);
}

body { color: var(--atc-text); font-size: var(--atc-font-size); }

/* Buttons */
.btn {
  min-height: var(--atc-control-height);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--atc-radius-sm);
  font-size: var(--atc-font-size-sm);
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}
.btn-sm { min-height: var(--atc-control-height-sm); padding: 0 9px; font-size: 10px; }
.btn-lg { min-height: 42px; padding: 0 16px; font-size: 12px; }
.btn-primary { background: var(--atc-primary); border-color: var(--atc-primary); }
.btn-primary:hover { background: var(--atc-primary-hover); border-color: var(--atc-primary-hover); }
.btn-outline-primary:hover { color: var(--atc-primary-hover); background: var(--atc-primary-soft); }
.btn:focus-visible { box-shadow: 0 0 0 3px rgb(37 99 235 / 16%); }

/* Form controls */
.form-control,
.form-select,
.select .form-select,
.datetime-picker .form-control,
.input-group-text {
  min-height: var(--atc-control-height);
  padding-top: 0;
  padding-bottom: 0;
  border-color: var(--atc-border);
  border-radius: var(--atc-radius-sm);
  color: var(--atc-text);
  background-color: var(--atc-surface);
  font-size: var(--atc-font-size-sm);
  box-shadow: none;
}
.form-control:focus,
.form-select:focus,
.select .form-select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 12%);
}
.form-control::placeholder { color: #94a3b8; }
.input-group > :first-child { border-radius: var(--atc-radius-sm) 0 0 var(--atc-radius-sm); }
.input-group > :last-child { border-radius: 0 var(--atc-radius-sm) var(--atc-radius-sm) 0; }
.form-label, .bootstrap-label { margin-bottom: 5px; color: #475569; font-size: 11px; font-weight: 650; }
textarea.form-control { min-height: 72px; padding: 8px 10px; line-height: 1.45; }
.select .dropdown-menu,
.dropdown-menu {
  padding: 5px;
  border: 1px solid var(--atc-border);
  border-radius: var(--atc-radius);
  background: var(--atc-surface);
  box-shadow: var(--atc-shadow);
  font-size: var(--atc-font-size-sm);
}
.dropdown-item { min-height: 32px; padding: 6px 9px; display: flex; align-items: center; border-radius: 6px; }
.dropdown-item:hover { background: #eff6ff; color: #1d4ed8; }
.dropdown-item.active { background: var(--atc-primary); color: #fff; }

/* Checks, switches, radios */
.form-check { min-height: 24px; display: flex; align-items: center; gap: 7px; }
.form-check-input { width: 16px; height: 16px; margin: 0; border-color: #b8c5d6; }
.form-check-input:checked { background-color: var(--atc-primary); border-color: var(--atc-primary); }
.form-switch .form-check-input { width: 34px; border-radius: 999px; }

/* Cards and panels */
.card {
  overflow: hidden;
  border: 1px solid var(--atc-border);
  border-radius: var(--atc-radius-lg);
  background: var(--atc-surface);
  box-shadow: var(--atc-shadow-sm);
}
.card-header { min-height: 48px; padding: 10px 14px; background: #fbfdff; border-color: var(--atc-border-soft); font-size: 13px; font-weight: 750; }
.card-body { padding: 14px; }
.card-footer { min-height: 46px; padding: 8px 14px; background: #fff; border-color: var(--atc-border-soft); }

/* Tabs, nav, breadcrumb */
.tabs { --bb-tabs-item-height: 44px; --bb-tabs-item-padding: 0 14px; --bb-tabs-item-active-color: #087f8c; --bb-tabs-bar-bg: #2f80ed; }
.tabs .tabs-item { color: #53647d; background: #fff; font-size: 12px; font-weight: 650; }
.tabs .tabs-item.active { color: #087f8c; background: #fff; }
.tabs .tabs-body { padding: 14px; }
.nav-tabs { border-color: var(--atc-border); }
.nav-tabs .nav-link { min-height: 42px; padding: 0 13px; display: inline-flex; align-items: center; border-radius: 7px 7px 0 0; font-size: 12px; }
.breadcrumb { margin: 0; padding: 7px 10px; border-radius: 7px; background: var(--atc-surface-soft); font-size: 11px; }

/* Tables */
.table { color: var(--atc-text); font-size: 11px; }
.table > :not(caption) > * > * { padding: 6px 9px; border-color: var(--atc-border-soft); }
.table thead th, .table .table-header { height: 38px; color: #fff; background: #1f65bb; font-size: 12px; font-weight: 700; vertical-align: middle; }
.table tbody td, .table .table-cell { height: 38px; font-size: 11px; font-weight: 400; vertical-align: middle; }
.table tbody tr:hover td { background: #f8fbff; }
.table-container, .table-wrapper { min-width: 0; max-width: 100%; }
.table-fixed-body { overflow: auto; overscroll-behavior: contain; }
.table-toolbar { min-height: 50px; padding: 7px 10px; gap: 7px; background: #fff; border-color: var(--atc-border-soft); }
.nav-pages { min-height: 36px; padding-top: 5px; font-size: 10px; }
.table-page-info { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 10px; }
.table-page-size-select { width: 88px; height: 28px; min-height: 28px; padding: 0 24px 0 8px; border-radius: 7px; font-size: 10px; }

/* Modal, offcanvas, popover */
.modal-content {
  overflow: hidden;
  border: 1px solid var(--atc-border);
  border-radius: 14px;
  background: #f8fbff;
  box-shadow: 0 24px 70px rgb(15 23 42 / 28%);
}
.modal-header { min-height: 68px; padding: 12px 16px; background: #fff; border-color: var(--atc-border); }
.modal-title { color: #12213f; font-size: 17px; font-weight: 800; }
.modal-body { padding: 16px 18px; color: #334155; background: #f8fbff; }
.modal-footer { min-height: 54px; padding: 8px 14px; gap: 7px; background: #fff; border-color: var(--atc-border); }
.modal-backdrop.show { opacity: .58; background: #0f172a; backdrop-filter: blur(3px); }
.offcanvas { border-color: var(--atc-border); background: #fff; box-shadow: var(--atc-shadow); }
.offcanvas-header { min-height: 58px; padding: 11px 14px; border-bottom: 1px solid var(--atc-border); }
.offcanvas-body { padding: 14px; }
.popover { border: 1px solid var(--atc-border); border-radius: var(--atc-radius); box-shadow: var(--atc-shadow); font-size: 11px; }
.popover-header { padding: 8px 10px; background: #f8fafc; font-size: 12px; font-weight: 700; }
.popover-body { padding: 10px; }

/* Feedback */
.alert { padding: 9px 11px; border-width: 1px; border-left-width: 4px; border-radius: var(--atc-radius); font-size: 11px; }
.toast { overflow: hidden; border: 1px solid var(--atc-border); border-radius: var(--atc-radius); box-shadow: var(--atc-shadow); font-size: 11px; }
.toast-header { min-height: 40px; padding: 8px 10px; background: #fff; }
.toast-body { padding: 10px; }
.badge { padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; }
.progress { height: 8px; border-radius: 999px; background: #e8edf4; }
.progress-bar { border-radius: inherit; }
.spinner-border, .spinner-grow { width: 1.5rem; height: 1.5rem; }

/* Accordion, list, tree */
.accordion-item { overflow: hidden; border-color: var(--atc-border); border-radius: var(--atc-radius); }
.accordion-button { min-height: 44px; padding: 9px 12px; color: var(--atc-text); background: #fff; font-size: 12px; font-weight: 700; box-shadow: none; }
.accordion-button:not(.collapsed) { color: #1d4ed8; background: #eff6ff; box-shadow: none; }
.accordion-body { padding: 12px; }
.list-group { border-radius: var(--atc-radius); }
.list-group-item { min-height: 38px; padding: 7px 10px; border-color: var(--atc-border-soft); font-size: 11px; }
.list-group-item.active { background: var(--atc-primary); border-color: var(--atc-primary); }
.tree .tree-node, .tree-node { min-height: 32px; padding: 3px 6px; border-radius: 6px; font-size: 11px; }
.tree-node:hover { background: #eff6ff; }

/* Date/time, transfer, upload */
.datetime-picker, .date-picker, .time-picker { font-size: 11px; }
.calendar { border: 1px solid var(--atc-border); border-radius: var(--atc-radius); background: #fff; box-shadow: var(--atc-shadow-sm); }
.calendar-header { min-height: 42px; padding: 7px 10px; }
.calendar-body { padding: 8px; }
.upload { border-radius: var(--atc-radius); }
.upload-drop { min-height: 90px; padding: 14px; border: 1px dashed #b8c5d6; border-radius: var(--atc-radius); background: #f8fafc; }
.transfer-panel { overflow: hidden; border: 1px solid var(--atc-border); border-radius: var(--atc-radius); }
.transfer-panel-header { min-height: 42px; padding: 8px 10px; background: #f8fafc; }

/* Steps, timeline, pagination */
.step .step-item, .steps .step-item { font-size: 11px; }
.timeline-item { padding-bottom: 14px; font-size: 11px; }
.pagination { gap: 4px; }
.page-link { min-width: 30px; min-height: 30px; padding: 4px 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 10px; }
.page-item.active .page-link { background: var(--atc-primary); border-color: var(--atc-primary); }

/* Loading and skeleton */
.skeleton { border-radius: 6px; }
.loading { color: var(--atc-primary); }
.divider { margin: 12px 0; color: var(--atc-text-muted); }

/* Responsive density */
@media (max-width: 767.98px) {
  :root { --atc-control-height: 34px; }
  .card-body, .tabs .tabs-body { padding: 10px; }
  .modal-body, .offcanvas-body { padding: 12px; }
  .table-toolbar { padding: 7px; }
}

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