@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;700&family=Manrope:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* ---- Page Views ---- */
.page-view {
  display: none !important;
}
.page-view.active {
  display: block !important;
}


/* ===============================================================
   AMET Freight — Dashboard CSS
   Design System: Modern Enterprise SaaS (AMET Standard)
   =============================================================== */

:root, [data-theme="light"] {
  /* Brand Colors */
  --accent:         #f37942;
  --accent-hover:   #bb4d1c;
  --accent-light:   #fff0e6;
  --accent-glow:    rgba(243, 121, 66, 0.25);

  /* Background Levels (Light Theme Clean White SaaS) */
  --bg-base:        #f6f7f9;
  --bg-surface:     #ffffff;
  --bg-card:        #ffffff;
  --bg-card-hover:  #faf9fc;
  --bg-input:       #ffffff;
  --bg-modal:       #ffffff;

  /* Sidebar (AMET Deep Navy) */
  --sidebar-bg:     #211e37;
  --sidebar-text:   #a9a6ba;
  --sidebar-title:  #efedf7;
  --sidebar-border: rgba(255, 255, 255, 0.08);

  /* Text (Light) */
  --text-primary:   #242535;
  --text-secondary: #7f7c8d;
  --text-muted:     #9a96a2;
  --text-disabled:  #c2bfcb;

  /* Status Colors */
  --green:          #28866b;
  --green-bg:       #eaf5ef;
  --yellow:         #e29865;
  --yellow-bg:      #fff0e7;
  --red:            #bd4b52;
  --red-bg:         #fceef0;
  --blue:           #4f7fa8;
  --blue-bg:        #eff6fa;
  --purple:         #8c7ba7;
  --purple-bg:      #f3f1f8;

  /* Borders */
  --border:         #e9eaee;
  --border-hover:   #d8d9df;
  --border-active:  #f37942;

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(33, 30, 55, 0.04);
  --shadow-md:   0 6px 18px rgba(33, 30, 55, 0.06);
  --shadow-lg:   0 12px 32px rgba(33, 30, 55, 0.08);

  /* Layout */
  --sidebar-w:           220px;
  --sidebar-collapsed-w: 68px;
  --header-h:            68px;
  --radius-sm:           7px;
  --radius-md:           10px;
  --radius-lg:           13px;
  --radius-xl:           18px;
}

[data-theme="dark"] {
  /* Background Levels (Dark Theme) */
  --bg-base:        #171522;
  --bg-surface:     #242130;
  --bg-card:        #242130;
  --bg-card-hover:  #2c2839;
  --bg-input:       #201d2b;
  --bg-modal:       #242130;

  /* Sidebar */
  --sidebar-bg:     #19162c;
  --sidebar-text:   #a9a6ba;
  --sidebar-title:  #f0eaf7;
  --sidebar-border: rgba(255, 255, 255, 0.06);

  /* Text (Dark) */
  --text-primary:   #f0eaf7;
  --text-secondary: #b5a9c3;
  --text-muted:     #787186;
  --text-disabled:  #4a4455;

  /* Borders (Dark) */
  --border:         #3c354b;
  --border-hover:   #4a405a;
  --border-active:  #f37942;

  /* Status Colors (Dark) */
  --green:          #8acaaa;
  --green-bg:       #203e32;
  --yellow:         #efc894;
  --yellow-bg:      #443526;
  --red:            #eea2ab;
  --red-bg:         #492d35;
  --blue:           #8eb6d6;
  --blue-bg:        #263a48;
  --purple:         #d6bce9;
  --purple-bg:      #393047;
  
  /* Shadows (Dark) */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg:   0 20px 60px rgba(0,0,0,0.6);
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', 'Inter', sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

h1, h2, h3, h4 { font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.4px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }


.page-eyebrow {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}


.page-header-left h2 { font-size: 24px; margin-bottom: 4px; }
.page-header-left p { font-size: 13px; margin-top: 0; }

/* ---- App Layout ---- */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar ---- */

.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 100;
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1), transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 14px 18px 16px;
  border-bottom: 1px solid var(--sidebar-border);
  min-height: 72px;
}
.sidebar .brand {
  cursor: pointer;
  display: flex;
  align-items: center;
  user-select: none;
}
.sidebar .brand-expanded {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar .brand-img-amet {
  height: 26px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.sidebar .brand-caption {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #a9a6ba;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sidebar .brand-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #51ce96;
  box-shadow: 0 0 0 2px rgba(81, 206, 150, 0.2);
  display: inline-block;
}
.sidebar .brand-collapsed {
  display: none;
}
.sidebar .brand-img-escudo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.sidebar .collapse-btn {
  background: transparent;
  border: 1px solid var(--sidebar-border);
  color: var(--sidebar-text);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.sidebar .collapse-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* Sidebar Nav */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 10px;
  flex: 1;
  overflow-y: auto;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sidebar-text);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}


.nav-item.active i { color: var(--accent); }

.nav-badge {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  min-width: 20px;
  text-align: center;
}

.sidebar-footer {
  padding: 10px 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
}

.user-card:hover { background: var(--bg-card-hover); border-color: var(--border-hover); }

.user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #FF8C00);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 10px; color: var(--text-muted); }

.user-card i.logout-icon { color: var(--text-muted); font-size: 13px; transition: color 0.2s; }
.user-card:hover i.logout-icon { color: var(--red); }

/* ---- Main Content ---- */
.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0; /* Prevents flex children (like wide tables) from causing page overflow */
}

.topbar {
  height: var(--header-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px; font-weight: 700;
  color: var(--text-primary);
}

.topbar-breadcrumb {
  font-size: 13px;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
}

.topbar-breadcrumb i { font-size: 10px; }

.topbar-right { display: flex; align-items: center; gap: 12px; }

.topbar-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: all 0.2s;
}

.topbar-user-card .user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.topbar-user-card .user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.topbar-user-card .user-role {
  font-size: 11px;
  color: var(--text-muted);
}

.topbar-user-card .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #FF8C00);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(255,107,0,0.2);
  transition: all 0.2s;
}

.topbar-user-card:hover .user-avatar {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255,107,0,0.4);
}

.topbar-btn {
  width: 36px; height: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 15px;
  transition: all 0.2s;
}

.topbar-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--border-hover); }

.hamburger-btn { display: none; }


.page-content {
  padding: 24px 32px 36px 32px;
  flex: 1;
  max-width: 1720px;
  margin: 0 auto;
  width: 100%;
}
.page-header {
  padding: 8px 0 24px 0;
  margin-bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.page-eyebrow {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #a58670;
  margin-bottom: 6px;
}
.page-header-left h2 {
  font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0 0 4px 0;
}
.page-header-left p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}


.dynamic-topbar-left .page-header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dynamic-topbar-left .page-header-left h2 {
  font-size: 18px; 
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.dynamic-topbar-left .page-header-left p { 
  font-size: 12px; 
  color: var(--text-secondary); 
  margin: 0;
  margin-top: 2px;
}

.dynamic-topbar-right .page-header-right { 
  display: flex; 
  gap: 10px; 
  align-items: center; 
}

/* ---- Search Box Fix ---- */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
}
.search-box i {
  position: absolute;
  left: 12px;
  color: var(--text-secondary);
  pointer-events: none;
}
.search-box input {
  padding-left: 36px !important;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 13px; font-weight: 600;
  font-family: 'DM Sans', 'Inter', sans-serif;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #FF8C00);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255,107,0,0.3);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent-hover), #E07700);
  box-shadow: 0 6px 20px rgba(255,107,0,0.45);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}

.btn-outline {
  background: transparent;
  color: var(--accent);
  border-color: var(--border-active);
}

.btn-outline:hover:not(:disabled) {
  background: var(--accent-light);
}

.btn-danger {
  background: var(--red-bg);
  color: var(--red);
  border-color: rgba(239,68,68,0.25);
}

.btn-danger:hover:not(:disabled) {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.5);
}

.btn-success {
  background: var(--green-bg);
  color: var(--green);
  border-color: rgba(34,197,94,0.25);
}

.btn-success:hover:not(:disabled) {
  background: rgba(34,197,94,0.2);
  border-color: rgba(34,197,94,0.5);
}

.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn-lg { padding: 13px 24px; font-size: 15px; }
.btn-icon { padding: 9px; width: 36px; height: 36px; justify-content: center; }
.btn-block { width: 100%; justify-content: center; }

/* ---- Stat Cards ---- */

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  flex: 1 1 200px;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 115px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
  overflow: hidden;
}
.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}
.stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.3;
}
.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  position: static !important;
}
.stat-icon.orange { background: #fff0e7; color: #e29865; }
.stat-icon.green  { background: #eaf5ef; color: #74a28b; }
.stat-icon.blue   { background: #eff6fa; color: #4f7fa8; }
.stat-icon.yellow { background: #fff7eb; color: #d99a4e; }
.stat-icon.gray   { background: #f3f1f8; color: #8c7ba7; }
.stat-icon.red    { background: #fceef0; color: #bd4b52; }

[data-theme="dark"] .stat-icon.orange { background: #473326; color: #f5b689; }
[data-theme="dark"] .stat-icon.green  { background: #284035; color: #a0d6b6; }
[data-theme="dark"] .stat-icon.blue   { background: #263a48; color: #8eb6d6; }
[data-theme="dark"] .stat-icon.yellow { background: #443526; color: #efc894; }
[data-theme="dark"] .stat-icon.gray   { background: #393047; color: #d6bce9; }
[data-theme="dark"] .stat-icon.red    { background: #492d35; color: #eea2ab; }

.stat-value {
  font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--text-primary);
  margin: 10px 0 2px 0;
  line-height: 1.2;
}

.stat-icon.yellow  { background: var(--yellow-bg); color: var(--yellow); }

.stat-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 26px; font-weight: 700; word-break: break-word;
  color: var(--text-primary);
  line-height: 1.2;
  margin-top: 6px;
}

.stat-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 0;
  padding-right: 36px; /* Space for the absolute icon */
}

/* ---- Cards ---- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 10px;
}

.card-title i { color: var(--accent); font-size: 16px; }

.card-body { padding: 22px; }

/* ---- Upload Zone ---- */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--bg-input);
  position: relative;
}

.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--accent);
  background: rgba(255,107,0,0.05);
}

.upload-zone input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}

.upload-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-lg);
  background: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 24px;
  color: var(--accent);
}

.upload-zone h3 { font-size: 16px; color: var(--text-primary); margin-bottom: 6px; }
.upload-zone p  { font-size: 13px; color: var(--text-secondary); }
.upload-zone .upload-types {
  margin-top: 12px;
  display: flex; gap: 8px; justify-content: center;
}

.upload-type-badge {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px; font-weight: 600;
  color: var(--text-secondary);
}

/* ---- Table ---- */
.table-container {
  overflow-x: auto;
  border-radius: var(--radius-md);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead tr {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.data-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.data-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

.data-table tbody tr {
  transition: background 0.15s;
}

.data-table tbody tr:hover { background: var(--bg-card-hover); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* ---- Form Elements ---- */
.form-group { margin-bottom: 18px; }

.form-label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.form-control {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'DM Sans', 'Inter', sans-serif;
  outline: none;
  transition: all 0.2s;
}

.form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-control::placeholder { color: var(--text-muted); }

select.form-control { cursor: pointer; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* ---- Badge ---- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px; font-weight: 600;
}

.badge-green  { background: var(--green-bg); color: var(--green); }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow); }
.badge-red    { background: var(--red-bg); color: var(--red); }
.badge-blue   { background: var(--blue-bg); color: var(--blue); }
.badge-gray   { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.badge-orange { background: var(--accent-light); color: var(--accent); }

/* ---- Modals ---- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-overlay:not(.open) {
  display: none !important;
}

.modal {
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
  box-shadow: var(--shadow-lg);
}

.modal-overlay.open .modal { transform: translateY(0) scale(1); }

.modal-header {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}

.modal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px; font-weight: 700;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 10px;
}

.modal-title i { color: var(--accent); }

.modal-close {
  width: 32px; height: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
}

.modal-close:hover { background: var(--red-bg); color: var(--red); border-color: rgba(239,68,68,0.3); }

.modal-body { padding: 24px; }

.modal-footer {
  padding: 18px 24px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* ---- NF Card in list ---- */
.nf-list { display: flex; flex-direction: column; gap: 10px; }

.nf-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s;
}

.nf-card:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }

.nf-card.selected {
  border-color: var(--accent);
  background: var(--accent-light);
}

.nf-card-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 18px;
  flex-shrink: 0;
}

.nf-card-body { flex: 1; min-width: 0; }

.nf-number {
  font-family: 'Outfit', sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--text-primary);
}

.nf-details {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  display: flex; flex-wrap: wrap; gap: 10px;
}

.nf-detail-item { display: flex; align-items: center; gap: 4px; }
.nf-detail-item i { font-size: 10px; color: var(--text-muted); }

.nf-card-actions { display: flex; gap: 6px; }

/* ---- Comparativo Table ---- */
.comparativo-cell { padding: 10px 14px !important; }

.price-cell {
  font-weight: 700;
  font-size: 13px;
  font-family: 'Outfit', sans-serif;
}

.price-best   { color: var(--green); }
.price-second { color: var(--yellow); }
.price-worst  { color: var(--red); }

.best-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--green-bg);
  color: var(--green);
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 11px; font-weight: 700;
}

/* ---- Transportadora chips ---- */
.transportadora-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-secondary);
}

.transportadora-chip:hover, .transportadora-chip.active {
  background: var(--accent-light);
  border-color: var(--border-active);
  color: var(--accent);
}

.transportadora-chip i { font-size: 14px; }

/* ---- Empty State ---- */
.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted);
}

.empty-state i { font-size: 48px; opacity: 0.3; margin-bottom: 16px; display: block; }
.empty-state h3 { font-size: 16px; color: var(--text-secondary); margin-bottom: 8px; }
.empty-state p  { font-size: 13px; }

/* ---- Toast ---- */
.toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  animation: slideInRight 0.3s cubic-bezier(0.16,1,0.3,1);
  font-size: 13px;
  color: var(--text-primary);
}

.toast.toast-success { border-color: rgba(34,197,94,0.3); }
.toast.toast-error   { border-color: rgba(239,68,68,0.3); }
.toast.toast-info    { border-color: rgba(59,130,246,0.3); }
.toast.toast-warning { border-color: rgba(245,158,11,0.3); }

.toast-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.toast.toast-success .toast-icon { color: var(--green); }
.toast.toast-error   .toast-icon { color: var(--red); }
.toast.toast-info    .toast-icon { color: var(--blue); }
.toast.toast-warning .toast-icon { color: var(--yellow); }

.toast-body { flex: 1; }
.toast-title { font-weight: 600; margin-bottom: 2px; }
.toast-msg   { font-size: 12px; color: var(--text-secondary); }
.toast-close { color: var(--text-muted); cursor: pointer; font-size: 13px; align-self: flex-start; }
.toast-close:hover { color: var(--text-primary); }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

/* ---- Sidebar overlay (mobile) ---- */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 99;
}

/* ---- Product Card (AMET Catalog) ---- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
}

.product-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.product-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: var(--bg-input);
  display: block;
}

.product-img-placeholder {
  width: 100%;
  height: 140px;
  background: var(--bg-input);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: 32px;
}

.product-info { padding: 12px 14px; }
.product-name { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; line-height: 1.4; }
.product-dept { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.product-meta { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- Search Bar ---- */
.search-wrapper {
  position: relative;
  flex: 1;
  max-width: 360px;
}

.search-wrapper i {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted); font-size: 14px;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'DM Sans', 'Inter', sans-serif;
  outline: none;
  transition: all 0.2s;
}

.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.search-input::placeholder { color: var(--text-muted); }

/* ---- Tabs ---- */
.tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  border: 1px solid transparent;
}

.tab:hover { color: var(--text-primary); background: var(--bg-card); }

.tab.active {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--border-active);
}

/* ---- Checkbox / Select row ---- */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.checkbox-custom {
  width: 18px; height: 18px;
  border: 2px solid var(--border-hover);
  border-radius: 5px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  background: var(--bg-input);
}

.checkbox-row input[type="checkbox"] { display: none; }
.checkbox-row input[type="checkbox"]:checked + .checkbox-custom {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* ================================================================
   RESPONSIVIDADE — Desktop, Tablet e Mobile
   ================================================================ */

/* ── Overlay (fundo escuro quando sidebar aberta no mobile) ── */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99;
  backdrop-filter: blur(2px);
}

/* ── Role badge colors ── */
.role-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.role-admin  { background: rgba(255,107,0,0.18); color: var(--accent); border: 1px solid rgba(255,107,0,0.35); }
.role-gestor { background: rgba(59,130,246,0.18); color: var(--blue);   border: 1px solid rgba(59,130,246,0.35); }
.role-user   { background: rgba(34,197,94,0.18);  color: var(--green);  border: 1px solid rgba(34,197,94,0.35); }

/* ── Approve option badges ── */
.badge-blue {
  background: rgba(59,130,246,0.15);
  color: #60a5fa;
  border: 1px solid rgba(59,130,246,0.3);
}
.badge-yellow {
  background: rgba(245,158,11,0.15);
  color: var(--yellow);
  border: 1px solid rgba(245,158,11,0.3);
}
.badge-purple {
  background: rgba(168,85,247,0.15);
  color: #c084fc;
  border: 1px solid rgba(168,85,247,0.3);
}
.approve-option-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  .page-header-right {
    flex-wrap: wrap;
  }

  .comparativo-cell {
    min-width: 80px;
  }
}

/* ── Mobile-first breakpoint (≤ 900px) ── */
@media (max-width: 900px) {
  /* Sidebar: slide-in drawer */
  .sidebar {
    transform: translateX(calc(-1 * var(--sidebar-w)));
    box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 40px rgba(0,0,0,0.6);
  }
  .sidebar-overlay.visible { display: block; }

  /* Main content fills full width */
  .main-content { margin-left: 0; }

  /* Show hamburger, hide desktop breadcrumb */
  .hamburger-btn { display: flex !important; }
  .topbar-breadcrumb { display: none; }
  .topbar { padding: 0 14px; gap: 8px; }
  .topbar-title { font-size: 16px; }

  /* Page content padding */
  .page-content { padding: 16px 14px; }

  /* Stats grid: 2-column */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Forms: single column */
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr !important; }
  .edit-fields-grid { grid-template-columns: 1fr !important; }

  /* Page header: stack */
  .page-header {
  padding: 16px 0 28px 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 18px;
  }
  .page-header-right {
    flex-wrap: wrap;
    gap: 8px;
  }
  .page-header-right .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 140px;
  }

  /* NF Cards: stack on mobile */
  .nf-card {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
  }
  .nf-card-actions {
    width: 100%;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }

  /* Tables: horizontal scroll */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table {
    min-width: 600px;
  }
  .data-table th, .data-table td {
    padding: 10px 10px;
    font-size: 12px;
  }

  /* Modals: full screen on mobile */
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-overlay.open .modal-box {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
  }
  .modal-body { max-height: 65dvh; overflow-y: auto; }

  /* Topbar right: compact */
  .topbar-right {
    gap: 6px;
  }
  .topbar-btn {
    width: 32px; height: 32px;
    font-size: 13px;
  }

  /* Card header: wrap */
  .card-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Tab bar: wrap */
  .tab-bar { flex-wrap: wrap; }
  .tab-btn { flex: 1 1 auto; justify-content: center; font-size: 12px; }

  /* Upload zones */
  .upload-zone {
    padding: 28px 16px;
  }
  .upload-zone-icon { font-size: 32px; }

  /* Products grid */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Approve modal: stack cards cleanly */
  .approve-option {
    flex-wrap: nowrap;
  }
}

/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .stat-card { padding: 14px 14px; }
  .stat-value { font-size: 20px !important; }
  .stat-label { font-size: 11px; }

  /* Single column products */
  .products-grid { grid-template-columns: repeat(2, 1fr); }

  /* Buttons: full width in page header */
  .page-header-right .btn { flex: 1 1 100%; }

  /* NF card details: wrap */
  .nf-details { flex-wrap: wrap; gap: 4px; }
  .nf-detail-item { font-size: 11px; }

  /* Topbar title truncate */
  .topbar-title { font-size: 14px; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Table: even more compact */
  .data-table th, .data-table td { padding: 8px 8px; font-size: 11px; }

  /* Comparativo stat summary: 1-col */
  .comparativo-stats { grid-template-columns: 1fr !important; }

  /* Badges: smaller */
  .badge { font-size: 10px; padding: 2px 6px; }

  /* Footer */
  .sidebar-footer .user-card { padding: 8px 10px; }
  .user-name { font-size: 12px; }
}

/* ── Very small (≤ 360px) ── */
@media (max-width: 360px) {
  .stats-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .page-content { padding: 12px 10px; }
}

/* ---- Loading Spinner ---- */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Misc ---- */
.text-accent  { color: var(--accent); }
.text-green   { color: var(--green); }
.text-yellow  { color: var(--yellow); }
.text-red     { color: var(--red); }
.text-muted   { color: var(--text-muted); }
.text-sm      { font-size: 12px; }
.text-xs      { font-size: 11px; }
.fw-700       { font-weight: 700; }
.mt-4         { margin-top: 4px; }
.mt-8         { margin-top: 8px; }
.mt-12        { margin-top: 12px; }
.mt-16        { margin-top: 16px; }
.mt-24        { margin-top: 24px; }
.mb-16        { margin-bottom: 16px; }
.gap-8        { gap: 8px; }
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.w-full       { width: 100%; }
.divider      { height: 1px; background: var(--border); margin: 20px 0; }
.relative     { position: relative; }

.highlight-green  { background: rgba(34,197,94,0.08); }
.highlight-yellow { background: rgba(245,158,11,0.08); }
.highlight-red    { background: rgba(239,68,68,0.08); }

/* ---- NF Edit Modal Fields ---- */
.edit-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.input-group {
  position: relative;
}

.input-addon {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-muted);
}

table.data-table th {
  cursor: pointer;
  user-select: none;
    flex-wrap: wrap;
    gap: 8px;
  }
  .page-header-right .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 140px;
  }

  /* NF Cards: stack on mobile */
  .nf-card {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
  }
  .nf-card-actions {
    width: 100%;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }

  /* Tables: horizontal scroll */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table {
    min-width: 600px;
  }
  .data-table th, .data-table td {
    padding: 10px 10px;
    font-size: 12px;
  }

  /* Modals: full screen on mobile */
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-overlay.open .modal-box {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
  }
  .modal-body { max-height: 65dvh; overflow-y: auto; }

  /* Topbar right: compact */
  .topbar-right {
    gap: 6px;
  }
  .topbar-btn {
    width: 32px; height: 32px;
    font-size: 13px;
  }

  /* Card header: wrap */
  .card-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Tab bar: wrap */
  .tab-bar { flex-wrap: wrap; }
  .tab-btn { flex: 1 1 auto; justify-content: center; font-size: 12px; }

  /* Upload zones */
  .upload-zone {
    padding: 28px 16px;
  }
  .upload-zone-icon { font-size: 32px; }

  /* Products grid */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Approve modal: stack cards cleanly */
  .approve-option {
    flex-wrap: nowrap;
  }

/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .stat-card { padding: 14px 14px; }
  .stat-value { font-size: 20px !important; }
  .stat-label { font-size: 11px; }

  /* Single column products */
  .products-grid { grid-template-columns: repeat(2, 1fr); }

  /* Buttons: full width in page header */
  .page-header-right .btn { flex: 1 1 100%; }

  /* NF card details: wrap */
  .nf-details { flex-wrap: wrap; gap: 4px; }
  .nf-detail-item { font-size: 11px; }

  /* Topbar title truncate */
  .topbar-title { font-size: 14px; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Table: even more compact */
  .data-table th, .data-table td { padding: 8px 8px; font-size: 11px; }

  /* Comparativo stat summary: 1-col */
  .comparativo-stats { grid-template-columns: 1fr !important; }

  /* Badges: smaller */
  .badge { font-size: 10px; padding: 2px 6px; }

  /* Footer */
  .sidebar-footer .user-card { padding: 8px 10px; }
  .user-name { font-size: 12px; }
}

/* ── Very small (≤ 360px) ── */
@media (max-width: 360px) {
  .stats-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .page-content { padding: 12px 10px; }
}

/* ---- Loading Spinner ---- */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Misc ---- */
.text-accent  { color: var(--accent); }
.text-green   { color: var(--green); }
.text-yellow  { color: var(--yellow); }
.text-red     { color: var(--red); }
.text-muted   { color: var(--text-muted); }
.text-sm      { font-size: 12px; }
.text-xs      { font-size: 11px; }
.fw-700       { font-weight: 700; }
.mt-4         { margin-top: 4px; }
.mt-8         { margin-top: 8px; }
.mt-12        { margin-top: 12px; }
.mt-16        { margin-top: 16px; }
.mt-24        { margin-top: 24px; }
.mb-16        { margin-bottom: 16px; }
.gap-8        { gap: 8px; }
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.w-full       { width: 100%; }
.divider      { height: 1px; background: var(--border); margin: 20px 0; }
.relative     { position: relative; }

.highlight-green  { background: rgba(34,197,94,0.08); }
.highlight-yellow { background: rgba(245,158,11,0.08); }
.highlight-red    { background: rgba(239,68,68,0.08); }

/* ---- NF Edit Modal Fields ---- */
.edit-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.input-group {
  position: relative;
}

.input-addon {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-muted);
}

table.data-table th {
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}
table.data-table th:hover {
  background: var(--bg-card-hover);
}
table.data-table th:empty {
  cursor: default;
  pointer-events: none;
}

/* ---- Sub Tabs ---- */
.sub-tabs-container {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.sub-tab {
  padding: 8px 16px;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  transition: all 0.2s ease;
}
.sub-tab:hover {
  color: var(--text-primary);
}
.sub-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}





/* Sidebar Nav Item Active Selection (Image 2 style) */
.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sidebar-text);
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1.5px solid transparent;
  background: transparent;
  text-decoration: none;
  margin: 3px 0;
}
.sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}
.sidebar .nav-item.active {
  background: rgba(243, 121, 66, 0.12) !important;
  color: #ffad7d !important;
  border-color: #f37942 !important;
  font-weight: 600 !important;
  box-shadow: 0 0 14px rgba(243, 121, 66, 0.15) !important;
}
.sidebar .nav-item.active i {
  color: #f37942 !important;
}


/* ---- Modern Select & Filter Dropdowns (Image 2 style) ---- */
select, select.form-control {
  height: 38px !important;
  background-color: var(--bg-surface) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237f7c8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  padding: 0 32px 0 12px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
select:hover, select.form-control:hover {
  border-color: var(--border-hover) !important;
}
select:focus, select.form-control:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(243, 121, 66, 0.15) !important;
}

[data-theme="dark"] select, [data-theme="dark"] select.form-control {
  background-color: #201d2b !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b5a9c3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  border-color: #3c354b !important;
  color: #f0eaf7 !important;
}

/* Hide eyebrow */
.page-eyebrow {
  display: none !important;
}


/* ===============================================================
   CRISP FILTER BORDERS & COMPACT SIDEBAR NAVIGATION
   =============================================================== */

/* ---- Crisp Filter & Input Borders ---- */
.form-control,
input[type="text"],
input[type="search"],
input[type="date"],
input[type="number"],
select,
.search-wrapper,
.search-wrapper input {
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.search-wrapper {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important;
}

.search-wrapper input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-left: 6px !important;
}

.search-wrapper i {
  color: #94a3b8 !important;
  font-size: 13px !important;
}

.form-control:hover,
input[type="text"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
select:hover {
  border-color: #94a3b8 !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
select:focus,
.search-wrapper:focus-within {
  border-color: #f37942 !important;
  box-shadow: 0 0 0 3px rgba(243, 121, 66, 0.15) !important;
  outline: none !important;
}

/* Secondary Buttons with Crisp Border */
.btn-secondary {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

.btn-secondary:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Dark Mode Inputs */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] select,
[data-theme="dark"] .search-wrapper {
  border-color: #3c354b !important;
  background-color: #201d2b !important;
  color: #f0eaf7 !important;
}

[data-theme="dark"] .btn-secondary {
  background: #242130 !important;
  border-color: #3c354b !important;
  color: #f0eaf7 !important;
}

/* ---- Compact Sidebar Navigation (No Line Wrapping) ---- */
.sidebar .nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--sidebar-text) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  border: 1.5px solid transparent !important;
  background: transparent !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  margin: 2px 0 !important;
  text-decoration: none !important;
}

.sidebar .nav-item span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
}

.sidebar .nav-item i {
  font-size: 14px !important;
  width: 16px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.sidebar .nav-badge {
  font-size: 10px !important;
  padding: 1px 6px !important;
  border-radius: 99px !important;
  background: var(--accent) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  line-height: 1.4 !important;
}

.sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

.sidebar .nav-item.active {
  background: rgba(243, 121, 66, 0.12) !important;
  color: #ffad7d !important;
  border-color: #f37942 !important;
  font-weight: 600 !important;
  box-shadow: 0 0 10px rgba(243, 121, 66, 0.15) !important;
}

.sidebar .nav-item.active i {
  color: #f37942 !important;
}


/* ---- Core Layout Guarantees ---- */
.app-layout {
  display: flex !important;
  min-height: 100vh !important;
  background: var(--bg-base) !important;
}
.sidebar {
  width: var(--sidebar-w) !important;
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  z-index: 100 !important;
}
.main-content {
  margin-left: var(--sidebar-w) !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  background: var(--bg-base) !important;
}

body.sidebar-collapsed .sidebar,
.sidebar.collapsed {
  width: var(--sidebar-collapsed-w) !important;
}
body.sidebar-collapsed .main-content,
.sidebar.collapsed ~ .main-content {
  margin-left: var(--sidebar-collapsed-w) !important;
}

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(calc(-1 * var(--sidebar-w))) !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
  }
  .main-content {
    margin-left: 0 !important;
  }
}

/* ===============================================================
   FREIGHT CONFERENCE — VISUAL REFINEMENT
   A single final layer keeps the legacy layout stable while giving the
   operational workflow a consistent, accessible interface.
   =============================================================== */

:root, [data-theme="light"] {
  --freight-ink: #15213b;
  --freight-slate: #60708b;
  --freight-line: #e4eaf2;
  --freight-blue: #4378d0;
  --freight-blue-bg: #edf4ff;
  --freight-green: #18856c;
  --freight-green-bg: #e8f7f1;
  --freight-yellow: #b97717;
  --freight-yellow-bg: #fff6dc;
  --freight-red: #c24554;
  --freight-red-bg: #fff0f2;
}

/* --- Brand and compact navigation --- */
.sidebar,
.main-content {
  transition: margin-left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1) !important;
}

.sidebar-header {
  min-height: 82px;
  padding: 18px 14px 16px 18px;
}

.sidebar .brand {
  flex: 1;
  min-width: 0;
}

.sidebar .brand-expanded { gap: 5px; }

.sidebar .brand-img-amet {
  display: block;
  width: 117px;
  max-width: 100%;
  height: auto;
  max-height: 29px;
  object-fit: contain;
  object-position: left center;
  filter: none;
}

.sidebar .brand-caption {
  color: #9ea6bb;
  font-size: 8.5px;
  letter-spacing: 1.25px;
}

.sidebar .collapse-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

body.sidebar-collapsed .sidebar-header,
.sidebar.collapsed .sidebar-header {
  min-height: 74px;
  padding: 14px 12px;
  justify-content: center;
}

body.sidebar-collapsed .sidebar .brand,
.sidebar.collapsed .brand {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
}

body.sidebar-collapsed .sidebar .brand-expanded,
.sidebar.collapsed .brand-expanded,
body.sidebar-collapsed .sidebar .collapse-btn,
.sidebar.collapsed .collapse-btn {
  display: none;
}

body.sidebar-collapsed .sidebar .brand-collapsed,
.sidebar.collapsed .brand-collapsed {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}

body.sidebar-collapsed .sidebar .brand-img-escudo,
.sidebar.collapsed .brand-img-escudo {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

body.sidebar-collapsed .sidebar-nav,
.sidebar.collapsed .sidebar-nav {
  align-items: center;
  padding: 16px 0;
  gap: 4px;
}

body.sidebar-collapsed .sidebar .nav-item,
.sidebar.collapsed .nav-item {
  position: relative;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0 !important;
  margin: 0 auto !important;
  border-radius: 12px;
}

body.sidebar-collapsed .sidebar .nav-item span:not(.nav-badge),
.sidebar.collapsed .nav-item span:not(.nav-badge),
body.sidebar-collapsed .sidebar .nav-badge,
.sidebar.collapsed .nav-badge {
  display: none !important;
}

body.sidebar-collapsed .sidebar .nav-item i,
.sidebar.collapsed .nav-item i {
  width: auto !important;
  font-size: 16px !important;
}

body.sidebar-collapsed .sidebar-footer,
.sidebar.collapsed .sidebar-footer {
  display: grid !important;
  place-items: center;
  gap: 6px !important;
  padding: 12px 0 !important;
}

body.sidebar-collapsed .sidebar-footer .nav-item,
.sidebar.collapsed .sidebar-footer .nav-item {
  margin: 0 !important;
}

@media (max-width: 900px) {
  body.sidebar-collapsed .sidebar,
  .sidebar.collapsed {
    width: var(--sidebar-w) !important;
  }

  body.sidebar-collapsed .main-content,
  .sidebar.collapsed ~ .main-content {
    margin-left: 0 !important;
  }

  body.sidebar-collapsed .sidebar-header,
  .sidebar.collapsed .sidebar-header {
    min-height: 82px;
    padding: 18px 14px 16px 18px;
    justify-content: space-between;
  }

  body.sidebar-collapsed .sidebar .brand,
  .sidebar.collapsed .brand {
    flex: 1;
    width: auto;
    height: auto;
    display: flex;
    place-items: initial;
    border: 0;
    background: transparent;
  }

  body.sidebar-collapsed .sidebar .brand-expanded,
  .sidebar.collapsed .brand-expanded,
  body.sidebar-collapsed .sidebar .collapse-btn,
  .sidebar.collapsed .collapse-btn {
    display: flex;
  }

  body.sidebar-collapsed .sidebar .brand-collapsed,
  .sidebar.collapsed .brand-collapsed {
    display: none;
  }

  body.sidebar-collapsed .sidebar-nav,
  .sidebar.collapsed .sidebar-nav {
    align-items: stretch;
    padding: 16px 10px;
  }

  body.sidebar-collapsed .sidebar .nav-item,
  .sidebar.collapsed .nav-item {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 44px;
    padding: 8px 10px !important;
    margin: 2px 0 !important;
    justify-content: flex-start;
  }

  body.sidebar-collapsed .sidebar .nav-item span:not(.nav-badge),
  .sidebar.collapsed .nav-item span:not(.nav-badge) {
    display: inline !important;
  }

  body.sidebar-collapsed .sidebar-footer,
  .sidebar.collapsed .sidebar-footer {
    display: flex !important;
    place-items: initial;
    padding: 12px !important;
  }
}

/* --- New freight-conference workspace --- */
.topbar .page-eyebrow {
  display: block !important;
  color: #c2704f;
  margin-bottom: 4px;
}

.freight-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.freight-header-actions .btn { padding: 9px 13px; flex-shrink: 0; }
.freight-header-actions label { margin: 0; }

.freight-page-shell { padding-bottom: 36px; }
.freight-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  padding: 5px;
  margin: 0 0 22px;
  border: 1px solid var(--freight-line);
  border-radius: 13px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 2px 6px rgba(25,42,70,.03);
}

.freight-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--freight-slate);
  font: 700 12px/1.2 'DM Sans', sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.freight-tab:hover { background: #f4f7fb; color: var(--freight-ink); }
.freight-tab.active { background: var(--freight-ink); color: #fff; box-shadow: 0 3px 9px rgba(21,33,59,.18); }
.freight-tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: rgba(255,255,255,.18); font-size: 10px; }
.freight-tab:not(.active) .freight-tab-count { background: var(--freight-red-bg); color: var(--freight-red); }

.freight-panel { display: none; }
.freight-panel.active { display: block; animation: freight-fade-in .22s ease both; }
@keyframes freight-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.freight-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid #f5ddce;
  border-radius: 14px;
  background: linear-gradient(100deg, #fff8f2, #fffdfb);
}

.freight-callout-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #cb643b; background: #ffe9db; flex: 0 0 auto; }
.freight-callout > div:nth-child(2) { display: grid; gap: 1px; flex: 1; min-width: 0; }
.freight-callout strong { color: var(--freight-ink); font-size: 13px; }
.freight-callout span { color: var(--freight-slate); font-size: 12px; }

.freight-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.freight-stats-grid .stat-card { min-width: 0; min-height: 130px; padding: 16px; box-shadow: 0 2px 8px rgba(25,42,70,.035); }
.freight-stat-card { border-top: 3px solid var(--freight-line); }
.freight-stat-card.tone-blue { border-top-color: var(--freight-blue); }
.freight-stat-card.tone-green { border-top-color: var(--freight-green); }
.freight-stat-card.tone-yellow { border-top-color: #dcad38; }
.freight-stat-card.tone-red { border-top-color: var(--freight-red); }
.freight-stats-grid .stat-label { padding-right: 0; font-size: 11.5px; font-weight: 700; }
.freight-stats-grid .stat-value { margin: 13px 0 4px; font-size: clamp(21px, 1.8vw, 27px); letter-spacing: -1px; white-space: nowrap; }
.freight-stat-hint { color: var(--freight-slate); font-size: 10.5px; line-height: 1.35; }

.freight-grid-primary { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .85fr); gap: 18px; margin-bottom: 18px; }
.freight-page-shell .card { box-shadow: 0 2px 8px rgba(25,42,70,.035); }
.freight-page-shell .card-header { padding: 16px 20px; }
.freight-page-shell .card-body { padding: 18px 20px; }
.card-kicker { margin-bottom: 3px; color: #a16a50; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.freight-page-shell .card-title { font-family: 'Manrope', sans-serif; font-size: 14px; }
.freight-page-shell .card-title i { font-size: 14px; }

.freight-summary-table { font-size: 12px; }
.freight-summary-table td:first-child { min-width: 150px; }
.freight-table-sub { display: block; margin-top: 2px; color: var(--freight-slate); font-size: 10.5px; font-weight: 500; }
.freight-total-row td { background: #f8fafc; }

.freight-band-list { display: grid; gap: 8px; }
.freight-band { display: grid; grid-template-columns: 9px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #f8fafc; }
.freight-band-dot { width: 8px; height: 8px; border-radius: 50%; background: #c7d0dd; }
.freight-band strong { display: block; color: var(--freight-ink); font-size: 12px; line-height: 1.15; }
.freight-band span { color: var(--freight-slate); font-size: 10px; }
.freight-band b { color: var(--freight-ink); font: 800 16px/1 'Manrope', sans-serif; }
.freight-band.excellent { background: var(--freight-blue-bg); }.freight-band.excellent .freight-band-dot { background: var(--freight-blue); }
.freight-band.normal { background: var(--freight-green-bg); }.freight-band.normal .freight-band-dot { background: var(--freight-green); }
.freight-band.attention { background: var(--freight-yellow-bg); }.freight-band.attention .freight-band-dot { background: #d49c22; }
.freight-band.critical { background: var(--freight-red-bg); }.freight-band.critical .freight-band-dot { background: var(--freight-red); }
.freight-rule-note { display: flex; gap: 8px; margin-top: 14px; color: var(--freight-slate); font-size: 10.5px; line-height: 1.45; }.freight-rule-note i { color: var(--freight-blue); margin-top: 2px; }

.freight-priority-list { display: grid; gap: 7px; }
.freight-priority-item { display: grid; grid-template-columns: 34px minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--freight-line); }
.freight-priority-item:last-child { border-bottom: 0; }
.freight-priority-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }.freight-priority-icon.red { color: var(--freight-red); background: var(--freight-red-bg); }.freight-priority-icon.yellow { color: var(--freight-yellow); background: var(--freight-yellow-bg); }.freight-priority-icon.blue { color: var(--freight-blue); background: var(--freight-blue-bg); }.freight-priority-icon.gray { color: var(--freight-slate); background: #f0f3f7; }
.freight-priority-body { min-width: 0; }.freight-priority-body strong, .freight-priority-body span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.freight-priority-body strong { color: var(--freight-ink); font-size: 12px; }.freight-priority-body span { color: var(--freight-slate); font-size: 10.5px; }.freight-priority-value { color: var(--freight-ink); font-weight: 800; font-size: 12px; white-space: nowrap; }
.freight-empty-inline { display: flex; align-items: center; gap: 12px; padding: 13px 0; }.freight-empty-inline > i { color: var(--freight-green); font-size: 25px; }.freight-empty-inline strong, .freight-empty-inline span { display:block; }.freight-empty-inline strong { color: var(--freight-ink); font-size: 12px; }.freight-empty-inline span { color: var(--freight-slate); font-size: 11px; }

.freight-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }.freight-toolbar .search-wrapper { width: min(100%, 330px); min-height: 38px; }.filter-toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--freight-slate); font-size: 12px; font-weight: 700; white-space: nowrap; }.filter-toggle input { accent-color: var(--accent); width: 15px; height: 15px; }.freight-filter-select { width: 180px; height: 38px !important; }
.freight-table-body { padding: 0 !important; }.freight-data-table th { background: #f8fafc; }.freight-data-table th, .freight-data-table td { padding: 11px 13px; font-size: 11.5px; }.freight-data-table th { font-size: 9.5px; }.freight-data-table td { vertical-align: middle; }.freight-critical-row { background: linear-gradient(90deg, rgba(255,240,242,.82), transparent 58%); }.freight-data-table .badge { white-space: nowrap; }.freight-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.badge-blue { background: var(--freight-blue-bg); color: var(--freight-blue); }.badge-green { background: var(--freight-green-bg); color: var(--freight-green); }.badge-yellow { background: var(--freight-yellow-bg); color: var(--freight-yellow); }.badge-red { background: var(--freight-red-bg); color: var(--freight-red); }.badge-gray { background: #f0f3f7; color: var(--freight-slate); }

.freight-upload-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid #dce8fb; border-radius: 12px; background: #f5f9ff; color: var(--freight-slate); font-size: 12px; }.freight-upload-note > i { color: var(--freight-blue); }.freight-upload-note > span { flex: 1; }.freight-upload-note label { margin: 0; white-space: nowrap; }
.freight-empty-state { padding: 48px 20px; }.freight-empty-state i { color: var(--freight-blue); opacity: .35; }

.freight-close-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr); gap: 18px; }.freight-payment-status { display: flex; align-items: center; gap: 12px; padding: 13px; border-radius: 12px; }.freight-payment-status > i { font-size: 22px; }.freight-payment-status strong, .freight-payment-status span { display: block; }.freight-payment-status strong { font-size: 13px; }.freight-payment-status span { margin-top: 2px; font-size: 11px; }.freight-payment-status.blocked { color: #a73543; background: var(--freight-red-bg); }.freight-payment-status.approved { color: #16755f; background: var(--freight-green-bg); }
.freight-close-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin: 20px 0; }.freight-close-metrics span, .freight-close-metrics b { display: block; }.freight-close-metrics span { color: var(--freight-slate); font-size: 10.5px; }.freight-close-metrics b { margin-top: 3px; color: var(--freight-ink); font: 800 17px/1.25 'Manrope', sans-serif; }.freight-close-divider { height: 1px; background: var(--freight-line); }.freight-close-detail { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; align-items: center; margin-top: 15px; color: var(--freight-slate); font-size: 11px; }.freight-close-detail strong { color: var(--freight-ink); }
.freight-message { padding: 15px; border: 1px dashed #cfd9e7; border-radius: 12px; background: #fafcff; color: #34425c; font-size: 12.5px; line-height: 1.65; }

@media (max-width: 1180px) {
  .freight-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .freight-grid-primary, .freight-close-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .freight-header-actions .btn-label { display: none; }
  .freight-tabs { width: 100%; margin-bottom: 16px; }
  .freight-tab { padding: 0 10px; }
  .freight-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .freight-stats-grid .stat-card { min-height: 118px; padding: 13px; }
  .freight-stats-grid .stat-value { font-size: 20px; }
  .freight-callout { align-items: flex-start; flex-wrap: wrap; }.freight-callout .btn { margin-left: 50px; }
  .freight-toolbar, .freight-upload-note { align-items: stretch; flex-direction: column; }.freight-toolbar .search-wrapper, .freight-filter-select { width: 100%; }.freight-upload-note label { align-self: flex-start; }
  .freight-priority-item { grid-template-columns: 32px minmax(0,1fr) auto; }.freight-priority-item .btn { grid-column: 2 / -1; justify-self: start; }.freight-priority-value { display: none; }
  .freight-close-detail { grid-template-columns: 1fr auto; }.freight-close-detail span:nth-of-type(2) { margin-top: 8px; }
}

@media (max-width: 420px) { .freight-stats-grid { grid-template-columns: 1fr; }.freight-header-actions label { flex: 1; justify-content: center; } }

/* ===============================================================
   SHARED CONTENT ALIGNMENT + DASHBOARD ANALYTICS
   Page headers are promoted into .topbar by the navigation script. Once
   empty, they must not leave a second divider or vertical gap in the page.
   =============================================================== */

.page-content {
  padding: 12px 32px 36px;
}

.page-view > .page-header {
  display: block;
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}

/* Same chart-card treatment used on Relatórios, with a restrained lift that
   does not move content while the user is reading the dashboard. */
.dashboard-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.dashboard-analytics-card {
  overflow: hidden;
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(25, 42, 70, .035);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dashboard-analytics-card:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, .24);
  box-shadow: 0 12px 26px rgba(25, 42, 70, .10);
}

.dashboard-analytics-card .card-title i {
  color: var(--accent);
}

.dashboard-analytics-card .card-body {
  background: linear-gradient(150deg, rgba(59, 130, 246, .025), transparent 42%);
}

.dashboard-evolution-card {
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  .page-content { padding: 10px 14px 24px; }
  .dashboard-analytics-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
  .dashboard-evolution-card { margin-bottom: 14px; }
}

@media (max-width: 360px) {
  .page-content { padding: 10px 10px 20px; }
}

/* --- Relatórios: conferência por faixa de frete --- */
.report-freight-section {
  margin-top: 20px;
  padding-top: 2px;
}

.report-freight-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 2px 14px;
}

.report-section-kicker {
  display: block;
  margin-bottom: 4px;
  color: #c2704f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.report-freight-section-heading h3 {
  margin: 0;
  color: var(--text-primary);
  font: 800 18px/1.2 'Manrope', sans-serif;
}

.report-freight-section-heading p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.report-freight-total {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--text-secondary);
  background: var(--bg-surface);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.report-freight-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.report-freight-status-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 82px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--text-primary);
  background: var(--bg-surface);
  box-shadow: 0 2px 7px rgba(25, 42, 70, .025);
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.report-freight-status-card:hover,
.report-freight-status-card.is-active {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(25, 42, 70, .09);
}

.report-freight-status-card.blue.is-active { border-color: #8bb7f8; background: #f5f9ff; }
.report-freight-status-card.green.is-active { border-color: #8bd7bd; background: #f4fcf8; }
.report-freight-status-card.yellow.is-active { border-color: #f0cc78; background: #fffaf0; }
.report-freight-status-card.red.is-active { border-color: #f0a8b2; background: #fff6f7; }
.report-freight-status-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; }
.report-freight-status-card.blue .report-freight-status-icon { color: #4378d0; background: #edf4ff; }
.report-freight-status-card.green .report-freight-status-icon { color: #18856c; background: #e8f7f1; }
.report-freight-status-card.yellow .report-freight-status-icon { color: #b97717; background: #fff6dc; }
.report-freight-status-card.red .report-freight-status-icon { color: #c24554; background: #fff0f2; }
.report-freight-status-content { min-width: 0; }.report-freight-status-content strong, .report-freight-status-content span { display: block; }
.report-freight-status-content strong { color: var(--text-primary); font: 800 23px/1 'Manrope', sans-serif; letter-spacing: -.6px; }
.report-freight-status-content span { margin-top: 5px; color: var(--text-secondary); font-size: 11px; font-weight: 700; white-space: nowrap; }
.report-freight-status-card > .fa-chevron-right { color: #b8c1cf; font-size: 11px; }

.report-freight-table-card { overflow: hidden; box-shadow: 0 2px 8px rgba(25, 42, 70, .035); }
.report-freight-toolbar { display: flex; align-items: end; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); background: linear-gradient(115deg, rgba(59,130,246,.025), transparent 46%); }
.report-freight-search { width: min(100%, 350px); min-height: 38px; margin-right: auto; }
.report-filter-field { display: grid; gap: 4px; color: var(--text-secondary); font-size: 10px; font-weight: 800; letter-spacing: .35px; text-transform: uppercase; }
.report-filter-field .form-control { min-width: 155px; height: 38px; font-size: 12px; }
.report-freight-table-note { display: flex; gap: 7px; padding: 9px 16px; color: var(--text-secondary); background: #fafcff; border-bottom: 1px solid var(--border); font-size: 11px; }.report-freight-table-note i { color: #4378d0; margin-top: 1px; }
.report-freight-table-body { padding: 0 !important; }
.report-freight-data-table th { background: #f8fafc; }.report-freight-data-table th, .report-freight-data-table td { padding: 11px 13px; font-size: 11.5px; vertical-align: middle; }.report-freight-data-table th { font-size: 9.5px; }.report-freight-row-critical { background: linear-gradient(90deg, rgba(255,240,242,.7), transparent 60%); }.report-source { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 11px; font-weight: 700; white-space: nowrap; }.report-source i { color: var(--accent); }
.report-freight-empty { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 170px; padding: 24px; color: var(--text-secondary); text-align: left; }.report-freight-empty > i { color: #9bb5db; font-size: 28px; }.report-freight-empty strong, .report-freight-empty span { display: block; }.report-freight-empty strong { color: var(--text-primary); font-size: 13px; }.report-freight-empty span { max-width: 400px; margin-top: 3px; font-size: 11.5px; line-height: 1.45; }

@media (max-width: 1080px) { .report-freight-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.report-freight-toolbar { flex-wrap: wrap; }.report-freight-search { min-width: 100%; } }
@media (max-width: 640px) { .report-freight-section { margin-top: 14px; }.report-freight-section-heading { align-items: flex-start; flex-direction: column; gap: 9px; }.report-freight-status-grid { grid-template-columns: 1fr; gap: 9px; }.report-freight-status-card { min-height: 70px; }.report-freight-toolbar { align-items: stretch; flex-direction: column; }.report-freight-search { width: 100%; min-width: 0; }.report-filter-field .form-control { width: 100%; }.report-freight-table-note { align-items: flex-start; }.report-freight-empty { align-items: flex-start; justify-content: flex-start; min-height: 140px; } }

/* --- Modal placement ---
   A legacy mobile rule turned every overlay into a bottom sheet. Keep the
   dialogs centered at every breakpoint and let only their content scroll. */
.modal-overlay {
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

.modal {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.modal-body {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- Freight conference: complete dark-theme coverage --- */
[data-theme="dark"] {
  --freight-ink: #f0eaf7;
  --freight-slate: #b5a9c3;
  --freight-line: #3c354b;
  --freight-blue: #8eb6d6;
  --freight-blue-bg: #263a48;
  --freight-green: #8acaaa;
  --freight-green-bg: #203e32;
  --freight-yellow: #efc894;
  --freight-yellow-bg: #443526;
  --freight-red: #eea2ab;
  --freight-red-bg: #492d35;
}

[data-theme="dark"] .freight-tabs {
  border-color: var(--freight-line);
  background: #242130;
  box-shadow: 0 2px 8px rgba(0,0,0,.24);
}

[data-theme="dark"] .freight-tab:hover {
  background: #2c2839;
  color: var(--freight-ink);
}

[data-theme="dark"] .freight-tab.active {
  background: #151320;
  color: #f0eaf7;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
}

[data-theme="dark"] .freight-callout {
  border-color: #553b31;
  background: linear-gradient(100deg, #302827, #272330);
}

[data-theme="dark"] .freight-callout-icon {
  color: #f0b08b;
  background: #493128;
}

[data-theme="dark"] .freight-page-shell .card,
[data-theme="dark"] .freight-page-shell .card-header,
[data-theme="dark"] .freight-page-shell .card-body {
  border-color: var(--freight-line);
}

[data-theme="dark"] .freight-total-row td,
[data-theme="dark"] .freight-band {
  background: #2a2736;
}

[data-theme="dark"] .freight-band.excellent { background: #263a48; }
[data-theme="dark"] .freight-band.normal { background: #203e32; }
[data-theme="dark"] .freight-band.attention { background: #443526; }
[data-theme="dark"] .freight-band.critical { background: #492d35; }
[data-theme="dark"] .freight-band-dot { background: #7d768d; }

[data-theme="dark"] .freight-priority-icon.gray,
[data-theme="dark"] .freight-data-table .badge-gray {
  color: #b5a9c3;
  background: #393447;
}

[data-theme="dark"] .freight-data-table th {
  background: #2a2736;
  color: #c6bdd5;
}

[data-theme="dark"] .freight-critical-row {
  background: linear-gradient(90deg, rgba(73,45,53,.8), transparent 58%);
}

[data-theme="dark"] .freight-upload-note {
  border-color: #31475a;
  background: #202c38;
  color: var(--freight-slate);
}

[data-theme="dark"] .freight-payment-status.blocked {
  color: #eea2ab;
  background: #492d35;
}

[data-theme="dark"] .freight-payment-status.approved {
  color: #8acaaa;
  background: #203e32;
}

[data-theme="dark"] .freight-message {
  border-color: #4a4358;
  background: #211f2c;
  color: #d2cada;
}

/* Relatórios reutiliza as mesmas faixas de frete e também precisa manter
   contraste consistente quando o usuário alterna o tema. */
[data-theme="dark"] .report-freight-status-card {
  box-shadow: 0 2px 8px rgba(0,0,0,.26);
}

[data-theme="dark"] .report-freight-status-card.blue.is-active { border-color: #42658b; background: #263a48; }
[data-theme="dark"] .report-freight-status-card.green.is-active { border-color: #3e7059; background: #203e32; }
[data-theme="dark"] .report-freight-status-card.yellow.is-active { border-color: #806138; background: #443526; }
[data-theme="dark"] .report-freight-status-card.red.is-active { border-color: #804652; background: #492d35; }
[data-theme="dark"] .report-freight-status-card.blue .report-freight-status-icon { color: #8eb6d6; background: #263a48; }
[data-theme="dark"] .report-freight-status-card.green .report-freight-status-icon { color: #8acaaa; background: #203e32; }
[data-theme="dark"] .report-freight-status-card.yellow .report-freight-status-icon { color: #efc894; background: #443526; }
[data-theme="dark"] .report-freight-status-card.red .report-freight-status-icon { color: #eea2ab; background: #492d35; }

[data-theme="dark"] .report-freight-table-note {
  background: #211f2c;
}

[data-theme="dark"] .report-freight-data-table th {
  background: #2a2736;
  color: #c6bdd5;
}

[data-theme="dark"] .report-freight-row-critical {
  background: linear-gradient(90deg, rgba(73,45,53,.8), transparent 60%);
}

/* --- Filter sizing and search-input comfort --- */
.cotar-filter-date {
  width: 166px !important;
  flex: 0 0 166px;
}

.cotar-filter-nf {
  width: 116px !important;
  flex: 0 0 116px;
}

.nf-import-period-filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.nf-import-period-select {
  width: 158px !important;
}

.nf-import-custom-range {
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.nf-import-custom-range .form-control {
  width: 146px !important;
}

/* The icon is absolutely positioned, so the input itself reserves its space.
   This applies to every search field, including dynamic freight tables. */
.search-wrapper {
  display: block !important;
  padding: 0 !important;
}

.search-wrapper i {
  left: 14px !important;
  z-index: 1;
}

.search-wrapper .search-input {
  padding: 9px 12px 9px 42px !important;
}

@media (max-width: 760px) {
  .page-view,
  .page-view > *,
  .card,
  .table-container,
  #comparativoContent,
  #cotarTabContent {
    min-width: 0;
    max-width: 100%;
  }

  .cotar-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cotar-workspace > * {
    min-width: 0;
  }

  .comparativo-summary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .comparativo-summary-grid .stat-card {
    min-width: 0;
    width: 100%;
  }

  .dynamic-topbar-right,
  .dynamic-topbar-right .page-header-right {
    min-width: 0;
    max-width: 100%;
  }

  .dynamic-topbar-right .page-header-right .btn {
    min-width: 0;
    max-width: 100%;
    padding-inline: 10px;
  }

  .nf-import-period-filter { justify-content: flex-start; width: 100%; }
  .nf-import-period-select { flex: 1 1 160px; }
  .nf-import-custom-range { flex: 1 1 100%; }
  .nf-import-custom-range .form-control { flex: 1 1 130px; min-width: 0; }
}

/* --- Dashboard: subsidy and freight-status overview --- */
.dashboard-freight-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  margin: 12px 0 20px;
}

.dashboard-subsidy-card,
.dashboard-freight-status-card {
  min-height: 116px;
}

.dashboard-subsidy-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 20px;
}

.dashboard-subsidy-card .stat-value {
  margin: 6px 0 0;
}

.dashboard-subsidy-hint {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
}

.dashboard-freight-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-freight-status-card {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 14px 11px;
  border: 1px solid var(--border);
  border-top: 3px solid currentColor;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}

.dashboard-freight-status-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.dashboard-freight-status-card.blue { color: #3b82f6; }
.dashboard-freight-status-card.green { color: #10b981; }
.dashboard-freight-status-card.yellow { color: #d99000; }
.dashboard-freight-status-card.red { color: #ef5b68; }

.dashboard-freight-status-icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 13px;
}

.dashboard-freight-status-card.blue .dashboard-freight-status-icon { background: #eaf3ff; }
.dashboard-freight-status-card.green .dashboard-freight-status-icon { background: #e7f8f1; }
.dashboard-freight-status-card.yellow .dashboard-freight-status-icon { background: #fff5d8; }
.dashboard-freight-status-card.red .dashboard-freight-status-icon { background: #fff0f2; }

.dashboard-freight-status-card > div { min-width: 0; }
.dashboard-freight-status-card strong,
.dashboard-freight-status-card span,
.dashboard-freight-status-card small { display: block; }
.dashboard-freight-status-card strong { color: var(--text-primary); font: 800 22px/1 'Manrope', sans-serif; letter-spacing: -.6px; }
.dashboard-freight-status-card span { margin-top: 5px; color: var(--text-primary); font-size: 11px; font-weight: 800; line-height: 1.1; }
.dashboard-freight-status-card small { margin-top: 3px; color: var(--text-muted); font-size: 9px; font-weight: 600; line-height: 1.2; white-space: nowrap; }

[data-theme="dark"] .dashboard-freight-status-card.blue .dashboard-freight-status-icon { background: #263a48; }
[data-theme="dark"] .dashboard-freight-status-card.green .dashboard-freight-status-icon { background: #203e32; }
[data-theme="dark"] .dashboard-freight-status-card.yellow .dashboard-freight-status-icon { background: #443526; }
[data-theme="dark"] .dashboard-freight-status-card.red .dashboard-freight-status-icon { background: #492d35; }

@media (max-width: 1120px) {
  .dashboard-freight-summary { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .dashboard-freight-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}