@import url('/assets/fonts/inter.css');
@import url('modal.css');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #F0EAE0;
  --bg2:         #E6DDD1;
  --bg3:         #D9CEBB;
  --bg-card:     #FFFFFF;
  --border:      #D8D0C4;
  --border2:     #C0B5A6;
  --ink:         #1C1917;
  --ink2:        #44403C;
  --ink3:        #78716C;
  --ink4:        #A8A29E;
  --accent:      #C2783C;
  --accent-dim:  #FDF0E6;
  --accent-dark: #A0622E;
  --green:       #16A34A;
  --green-dim:   #F0FDF4;
  --red:         #DC2626;
  --red-dim:     #FEF2F2;
  --blue:        #2563EB;
  --radius:      14px;
  --radius-sm:   9px;
  --radius-xs:   5px;
  --sidebar-w:   252px;
  --topbar-h:    56px;
  --bottomnav-h: 60px;
  --s3d-card:    0 0 0 1px rgba(28,25,23,.05), 0 1px 0 rgba(255,255,255,.92) inset, 0 -1px 0 rgba(28,25,23,.04) inset, 0 4px 8px rgba(28,25,23,.07), 0 16px 36px rgba(28,25,23,.09);
  --s3d-hover:   0 0 0 1px rgba(194,120,60,.15), 0 1px 0 rgba(255,255,255,.92) inset, 0 8px 24px rgba(28,25,23,.13), 0 28px 56px rgba(28,25,23,.11);
  --s3d-btn:     0 1px 0 rgba(255,255,255,.3) inset, 0 -2px 0 rgba(0,0,0,.2) inset, 0 2px 0 #8a5226, 0 5px 14px rgba(194,120,60,.45), 0 12px 28px rgba(194,120,60,.22);
  --s3d-btn-h:   0 1px 0 rgba(255,255,255,.38) inset, 0 -2px 0 rgba(0,0,0,.2) inset, 0 2px 0 #7a4820, 0 10px 24px rgba(194,120,60,.55), 0 20px 40px rgba(194,120,60,.28);
  --transition:  0.22s cubic-bezier(.4,0,.2,1);
  --font:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

html, body {
  height: 100%; color: var(--ink); font-family: var(--font);
  font-size: 13px; line-height: 1.55; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
  background: var(--bg);
}
a { color: inherit; text-decoration: none; }

/* ====================================================
   SIDEBAR
   ==================================================== */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  background:
    linear-gradient(170deg,
      #3a2e22 0%,
      #2a2118 20%,
      #1e1810 45%,
      #151108 75%,
      #0d0a06 100%);
  display: flex; flex-direction: column; z-index: 200;
  transform: translateX(-100%);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(.22,.68,0,1.15), box-shadow 0.35s ease;
  box-shadow:
    8px 0 0 rgba(255,255,255,.05) inset,
    -2px 0 0 rgba(0,0,0,.7) inset,
    0 2px 0 rgba(255,255,255,.04) inset,
    0 -2px 0 rgba(0,0,0,.5) inset,
    16px 0 50px rgba(0,0,0,.65),
    32px 0 90px rgba(0,0,0,.4),
    4px 0 0 #080604;
}
.sidebar.open {
  transform: translateX(0);
  box-shadow:
    8px 0 0 rgba(255,255,255,.055) inset,
    -2px 0 0 rgba(0,0,0,.7) inset,
    0 2px 0 rgba(255,255,255,.04) inset,
    0 -2px 0 rgba(0,0,0,.5) inset,
    20px 0 70px rgba(0,0,0,.75),
    50px 0 130px rgba(0,0,0,.5),
    5px 0 0 #080604;
}

.sidebar-overlay {
  position: fixed; inset: 0; background: rgba(28,25,23,.55);
  z-index: 199; opacity: 0; pointer-events: none;
  transition: opacity var(--transition); backdrop-filter: blur(6px);
}
.sidebar-overlay.show { opacity: 1; pointer-events: all; }

.sidebar-header { display: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.05);
}
.logo-wrap { display: flex; align-items: center; gap: 10px; }
.logo-icon { font-size: 22px; filter: drop-shadow(0 2px 6px rgba(194,120,60,.5)); }
.logo-text {
  font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -0.2px; line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.sidebar-close {
  background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.5);
  width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 3px 8px rgba(0,0,0,.3);
}
.sidebar-close:hover {
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 5px 14px rgba(0,0,0,.4);
  transform: scale(1.1);
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 8px; }
.sidebar-nav::-webkit-scrollbar { width: 0; }

.nav-section-label {
  font-size: 9px; font-weight: 700; color: rgba(255,255,255,.2);
  text-transform: uppercase; letter-spacing: 1.6px; padding: 14px 12px 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px;
  color: rgba(255,255,255,.45); font-size: 13px; font-weight: 500;
  transition: all 0.2s cubic-bezier(.22,.68,0,1.15); margin-bottom: 3px;
  position: relative; overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 -1px 0 rgba(0,0,0,.3) inset,
    0 2px 5px rgba(0,0,0,.18);
}
.nav-item::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 50%);
  opacity: 0; transition: opacity var(--transition);
}
.nav-item:hover {
  background: linear-gradient(135deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.04) 100%);
  color: rgba(255,255,255,.92);
  box-shadow:
    0 2px 0 rgba(255,255,255,.1) inset,
    0 -2px 0 rgba(0,0,0,.35) inset,
    2px 0 0 rgba(255,255,255,.06) inset,
    0 8px 20px rgba(0,0,0,.4),
    0 2px 5px rgba(0,0,0,.25);
  transform: translateX(3px) translateY(-1px);
}
.nav-item:hover::before { opacity: 1; }
.nav-item.active {
  background: linear-gradient(135deg, rgba(194,120,60,.42) 0%, rgba(160,95,35,.22) 60%, rgba(100,60,15,.1) 100%);
  color: #f5c090;
  box-shadow:
    0 2px 0 rgba(255,200,130,.14) inset,
    0 -2px 0 rgba(0,0,0,.4) inset,
    3px 0 0 rgba(194,120,60,.85) inset,
    -1px 0 0 rgba(0,0,0,.3) inset,
    0 8px 24px rgba(0,0,0,.45),
    0 2px 8px rgba(194,120,60,.18),
    4px 0 0 rgba(0,0,0,.35);
  text-shadow: 0 1px 4px rgba(0,0,0,.55), 0 0 14px rgba(194,120,60,.35);
  transform: translateX(2px);
}
.nav-item.active::before { opacity: 1; }
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .55; transition: opacity var(--transition), filter var(--transition); }
.nav-item:hover .nav-icon { opacity: .9; }
.nav-item.active .nav-icon { opacity: 1; filter: drop-shadow(0 1px 3px rgba(194,120,60,.5)); }
.nav-icon svg { width: 100%; height: 100%; }

.sidebar-footer {
  padding: 14px 10px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(0deg, rgba(0,0,0,.15) 0%, transparent 100%);
}
.user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px; margin-bottom: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 -1px 0 rgba(0,0,0,.2) inset,
    0 3px 10px rgba(0,0,0,.2),
    0 1px 0 rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.07);
}
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(145deg, #e09558, #b86830);
  color: #fff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 3px 12px rgba(194,120,60,.5),
    0 6px 20px rgba(194,120,60,.25);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.user-role { font-size: 9px; color: #e8a870; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.user-name { font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.btn-logout {
  display: block; width: 100%; padding: 10px; text-align: center;
  border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.4);
  border-radius: 10px; font-weight: 600; font-size: 12px;
  transition: all var(--transition); cursor: pointer; font-family: var(--font);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 8px rgba(0,0,0,.15), 0 1px 0 rgba(0,0,0,.3);
  border-bottom: 1px solid rgba(0,0,0,.3);
}
.btn-logout:hover {
  border-color: var(--red); color: #ff6b6b;
  background: linear-gradient(180deg, rgba(220,38,38,.1), rgba(220,38,38,.04));
  box-shadow: 0 1px 0 rgba(255,100,100,.1) inset, 0 4px 12px rgba(220,38,38,.2);
  transform: translateY(-1px);
}

/* ====================================================
   APP WRAP
   ==================================================== */
.app-wrap { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: var(--bottomnav-h); }

/* ====================================================
   TOPBAR
   ==================================================== */
.topbar { display: none; }
.burger {
  background: linear-gradient(180deg, #fff 0%, #ede8df 100%);
  border: 1px solid rgba(28,25,23,.1);
  width: 36px; height: 36px; border-radius: var(--radius-sm); flex-shrink: 0;
  cursor: pointer; display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 4px;
  transition: all var(--transition);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(28,25,23,.08);
}
.burger:hover {
  background: linear-gradient(180deg, #f5f0e8 0%, #e6dfd4 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 12px rgba(28,25,23,.12);
  transform: translateY(-1px);
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px; }
.topbar-title { display: none; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(145deg, #e09558, #b86830);
  color: #fff; font-weight: 800; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 3px 12px rgba(194,120,60,.45),
    0 6px 20px rgba(194,120,60,.22);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  cursor: pointer;
  transition: all var(--transition);
}
.topbar-avatar:hover { transform: translateY(-1px) scale(1.05); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 6px 18px rgba(194,120,60,.55); }

/* ====================================================
   CONTENT
   ==================================================== */
.page-content {
  flex: 1; padding: 16px 16px 12px;
  max-width: 100%; width: 100%; margin: 0 auto;
  box-sizing: border-box;
}
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.page-title {
  font-size: 22px; font-weight: 900; letter-spacing: -0.6px; color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(28,25,23,.05);
}
.page-sub { font-size: 12px; color: var(--ink3); margin-top: 2px; }

/* ====================================================
   BUTTONS — 3D max
   ==================================================== */
.btn-primary {
  background: linear-gradient(180deg, #e09558 0%, #c2783c 40%, #a86628 100%);
  color: #fff; border: none; border-bottom: 2px solid #7a4a1c;
  border-radius: var(--radius-sm); font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font); font-size: 13px;
  transition: all var(--transition);
  box-shadow: var(--s3d-btn);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  position: relative; overflow: hidden;
  padding: 9px 18px;
}

.btn-primary::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 100%);
  pointer-events: none; border-radius: inherit;
}
.btn-center-abs { position:absolute; left:50%; transform:translateX(-50%); }
.btn-center-abs:hover { transform:translateX(-50%) translateY(-1px); }
.btn-center-abs:active { transform:translateX(-50%) translateY(1px); }
.btn-primary:hover {
  background: linear-gradient(180deg, #eca066 0%, #d08848 40%, #b87234 100%);
  box-shadow: var(--s3d-btn-h);
  transform: translateY(-3px);
}
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(194,120,60,.3); border-bottom-width: 1px; }
.btn-sm { padding: 8px 16px; font-size: 12px; }

.btn-icon {
  background: linear-gradient(180deg, #fffdf9 0%, #ede8de 100%);
  border: 1px solid rgba(28,25,23,.12); color: var(--ink3);
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 1px 0 rgba(28,25,23,.1), 0 3px 10px rgba(28,25,23,.07);
  border-bottom: 1px solid rgba(28,25,23,.15);
}
.btn-icon:hover {
  background: linear-gradient(180deg, #fff 0%, #e4ddd0 100%);
  color: var(--ink); border-color: rgba(28,25,23,.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 4px 14px rgba(28,25,23,.13), 0 8px 24px rgba(28,25,23,.08);
  transform: translateY(-2px);
}
.btn-icon:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(28,25,23,.1); border-bottom-width: 0; }

/* ====================================================
   STATS
   ==================================================== */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; overflow: visible; }
.stat-card {
  background: linear-gradient(145deg, #ffffff 0%, #f5f1ea 100%);
  border-radius: var(--radius); padding: 18px 16px;
  box-shadow: var(--s3d-card);
  transition: transform var(--transition), box-shadow var(--transition);
  border: none; cursor: default;
}
.stat-card:hover { transform: translateY(-5px) scale(1.015); box-shadow: var(--s3d-hover); }
.stat-num { font-size: 26px; font-weight: 900; line-height: 1; letter-spacing: -1.2px; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.stat-label { font-size: 10px; color: var(--ink4); margin-top: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.accent-black .stat-num { color: var(--ink); }
.accent-green .stat-num { color: var(--green); }
.accent-red   .stat-num { color: var(--red); }
.accent-yellow .stat-num { color: var(--accent); }

/* ====================================================
   SEARCH
   ==================================================== */
.search-bar {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #f0ebe2 0%, #faf7f3 100%);
  border: 1px solid rgba(28,25,23,.1);
  border-radius: var(--radius); padding: 0 16px; margin-bottom: 14px;
  box-shadow:
    0 2px 6px rgba(0,0,0,.08) inset,
    0 1px 0 rgba(255,255,255,.9),
    0 3px 10px rgba(0,0,0,.05) inset;
  transition: all var(--transition);
}
.search-bar:focus-within {
  background: #fff; border-color: var(--accent);
  box-shadow: 0 2px 4px rgba(0,0,0,.05) inset, 0 0 0 3px rgba(194,120,60,.14);
}
.search-bar svg { width: 15px; height: 15px; color: var(--ink4); flex-shrink: 0; }
.search-bar input { flex: 1; background: none; border: none; outline: none; color: var(--ink); font-size: 13px; padding: 13px 0; font-family: var(--font); }
.search-bar input::placeholder { color: var(--ink4); }

/* ====================================================
   FILTERS
   ==================================================== */
.filter-row { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-btn {
  background: linear-gradient(180deg, #fffdf9 0%, #e8e2d7 100%);
  border: 1px solid rgba(28,25,23,.12); color: var(--ink3);
  padding: 7px 16px; border-radius: 22px;
  font-size: 12px; font-weight: 500;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: all var(--transition); font-family: var(--font);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 1px 0 rgba(28,25,23,.1),
    0 3px 8px rgba(28,25,23,.07),
    0 6px 14px rgba(28,25,23,.05);
  border-bottom: 1px solid rgba(28,25,23,.15);
}
.filter-btn:hover:not(.active) {
  color: var(--ink); background: linear-gradient(180deg, #fff 0%, #ddd6c8 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 5px 14px rgba(28,25,23,.12), 0 10px 24px rgba(28,25,23,.08);
  transform: translateY(-2px);
}
.filter-btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(28,25,23,.1); border-bottom-width: 0; }
.filter-btn.active {
  background: linear-gradient(180deg, #e09558 0%, #c2783c 45%, #a86628 100%);
  border-color: #7a4a1c; border-bottom-color: #5a3610; color: #fff; font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 2px 0 #5a3610, 0 5px 14px rgba(194,120,60,.4), 0 10px 24px rgba(194,120,60,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* ====================================================
   LIST CARDS
   ==================================================== */
.list-section { display: flex; flex-direction: column; gap: 7px; overflow: visible; }
.section-label { font-size: 10px; font-weight: 700; color: var(--ink4); text-transform: uppercase; letter-spacing: 0.9px; margin-bottom: 7px; }
.list-card {
  background: linear-gradient(155deg, #ffffff 0%, #f7f3ed 100%);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--s3d-card);
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer; border: none;
}
.list-card:hover { transform: translateY(-4px) scale(1.002); box-shadow: var(--s3d-hover); }
.list-card:active { transform: translateY(0) scale(.999); box-shadow: 0 1px 4px rgba(28,25,23,.09); }
.list-card-left { flex-shrink: 0; }
.list-card-body { flex: 1; min-width: 0; }
.list-card-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-card-sub { font-size: 12px; color: var(--ink3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-card-right { flex-shrink: 0; }
.chevron { font-size: 16px; color: var(--ink4); }

.driver-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(145deg, #ede6d8, #d8d0c2);
  border: 1px solid rgba(28,25,23,.09);
  color: var(--ink2); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 3px 8px rgba(28,25,23,.12);
}
.org-avatar {
  width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(145deg, #32281e, #1a1410);
  color: #fff; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 4px 12px rgba(0,0,0,.25);
}
.car-icon, .report-icon { font-size: 24px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(28,25,23,.15)); }

.icon-circle {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 3px 8px rgba(28,25,23,.1);
}
.icon-circle.yellow { background: linear-gradient(145deg, #fef5e8, #fde4be); }
.icon-circle.green  { background: linear-gradient(145deg, #f0fdf4, #c6f2d8); }
.icon-circle.red    { background: linear-gradient(145deg, #fef2f2, #fecaca); }
.icon-circle.grey   { background: linear-gradient(145deg, #eae4da, #d8d0c4); }

/* ====================================================
   BADGES
   ==================================================== */
.badge {
  display: inline-block; padding: 4px 10px;
  border-radius: 22px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.65) inset, 0 2px 5px rgba(28,25,23,.1);
}
.badge-active  { background: linear-gradient(145deg, #e8fdf0, #c6f2d8); color: #15803d; }
.badge-done    { background: linear-gradient(145deg, #eae4da, #d8d0c4); color: var(--ink3); }
.badge-expired { background: linear-gradient(145deg, #fef2f2, #fecaca); color: var(--red); }
.badge-yellow  { background: linear-gradient(145deg, #fef5e8, #fde4be); color: #b45309; }
.badge-green   { background: linear-gradient(145deg, #e8fdf0, #c6f2d8); color: #15803d; }

/* ====================================================
   EMPTY STATE
   ==================================================== */
.empty-state { text-align: center; padding: 56px 20px; color: var(--ink3); font-size: 13px; }
.empty-state-icon { font-size: 44px; margin-bottom: 14px; filter: drop-shadow(0 4px 8px rgba(28,25,23,.15)); }
.empty-state-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.empty-state a { color: var(--accent); text-decoration: underline; }

/* ====================================================
   SETTINGS
   ==================================================== */
.settings-group {
  background: linear-gradient(155deg, #ffffff 0%, #f7f3ed 100%);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 14px;
  box-shadow: var(--s3d-card);
}
.settings-group-label { font-size: 10px; font-weight: 700; color: var(--ink4); text-transform: uppercase; letter-spacing: 0.9px; padding: 14px 18px 7px; }
.settings-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-top: 1px solid rgba(28,25,23,.06); font-size: 13px;
}
.settings-item.link { cursor: pointer; transition: background var(--transition); }
.settings-item.link:hover { background: rgba(194,120,60,.05); }
.settings-value { color: var(--ink3); font-size: 12px; }

/* ====================================================
   CABINET
   ==================================================== */
.cabinet-hero { text-align: center; padding: 34px 16px 24px; }
.cabinet-avatar {
  width: 78px; height: 78px; border-radius: 50%;
  background: linear-gradient(145deg, #e09558, #b86830);
  color: #fff; font-weight: 900; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 6px 28px rgba(194,120,60,.5),
    0 18px 48px rgba(194,120,60,.25);
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.cabinet-name { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.cabinet-role { font-size: 12px; color: var(--ink3); font-weight: 500; margin-top: 4px; }

/* ====================================================
   BOTTOM NAV
   ==================================================== */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottomnav-h);
  background: linear-gradient(180deg, rgba(250,247,242,.95) 0%, rgba(243,238,230,.97) 100%);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(194,120,60,.12);
  box-shadow: 0 -1px 0 rgba(255,255,255,.7) inset, 0 -4px 20px rgba(28,25,23,.08);
  display: flex; z-index: 100;
  padding: 0 4px; padding-bottom: env(safe-area-inset-bottom);
}
.bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink4); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
  background: none; border: none; cursor: pointer; border-radius: var(--radius-sm);
  transition: all var(--transition); padding: 4px 2px 6px; font-family: var(--font);
}
.bn-item svg { width: 20px; height: 20px; transition: filter var(--transition); }
.bn-item.active { color: var(--accent); }
.bn-item.active svg { filter: drop-shadow(0 2px 4px rgba(194,120,60,.4)); }
.bn-item:hover { color: var(--ink2); transform: translateY(-2px); }

/* ====================================================
   FORM
   ==================================================== */
.form-page { display: flex; flex-direction: column; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--ink2); }
.form-group input,
.form-group select,
.form-group textarea {
  background: linear-gradient(180deg, #ede8e0 0%, #faf7f3 100%);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); color: var(--ink);
  font-size: 13px; padding: 11px 13px; outline: none;
  transition: all var(--transition); width: 100%; font-family: var(--font); box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(0,0,0,.08) inset, 0 1px 0 rgba(255,255,255,.85);
}
.modal .form-group input:not([type=checkbox]):not([type=radio]),
.modal .form-group select { height: 40px; padding: 0 12px; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 3px rgba(194,120,60,.14), 0 1px 4px rgba(0,0,0,.05) inset;
}
.form-group select { appearance: none; }
.form-group textarea { resize: vertical; min-height: 76px; }
.btn-submit {
  background: linear-gradient(180deg, #e09558 0%, #c2783c 40%, #a86628 100%);
  color: #fff; border: none; border-bottom: 2px solid #7a4a1c;
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 700;
  padding: 14px; cursor: pointer; width: 100%;
  transition: all var(--transition); font-family: var(--font);
  box-shadow: var(--s3d-btn); text-shadow: 0 1px 2px rgba(0,0,0,.25);
  position: relative; overflow: visible;
}
.btn-submit::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 100%);
  pointer-events: none; border-radius: inherit;
}
.btn-submit:hover {
  background: linear-gradient(180deg, #eca066 0%, #d08448 40%, #b87234 100%);
  transform: translateY(-2px); box-shadow: var(--s3d-btn-h);
}
.btn-submit:active { transform: translateY(1px); border-bottom-width: 1px; }

/* ====================================================
   LOGIN
   ==================================================== */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(194,120,60,.14) 0%, transparent 52%),
    radial-gradient(ellipse at 80% 90%, rgba(28,25,23,.09) 0%, transparent 52%),
    linear-gradient(150deg, #e8e0d2 0%, #ddd4c2 45%, #d0c5ae 100%);
  background-attachment: fixed;
}
.login-wrap {
  width: 100%; max-width: 370px;
  background: linear-gradient(155deg, #ffffff 0%, #f7f3ed 100%);
  border-radius: 24px; padding: 40px 36px;
  box-shadow:
    0 0 0 1px rgba(28,25,23,.07),
    0 1px 0 rgba(255,255,255,.95) inset,
    0 12px 32px rgba(28,25,23,.14),
    0 40px 80px rgba(28,25,23,.16);
}
.login-logo { text-align: center; margin-bottom: 38px; }
.login-icon { font-size: 44px; line-height: 1; margin-bottom: 12px; filter: drop-shadow(0 4px 10px rgba(194,120,60,.4)); }
.login-title { font-size: 28px; font-weight: 900; color: var(--ink); letter-spacing: -1.2px; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.login-sub { font-size: 13px; color: var(--ink3); margin-top: 6px; }
.login-error {
  background: linear-gradient(145deg, #fef2f2, #fecaca);
  border: 1px solid #fca5a5; color: var(--red); padding: 10px 16px;
  border-radius: var(--radius-sm); font-size: 12px; margin-bottom: 14px; text-align: center;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 6px rgba(220,38,38,.1);
}
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form .form-group label { font-size: 12px; font-weight: 600; color: var(--ink2); }
.login-form .form-group input {
  background: linear-gradient(180deg, #ede8e0 0%, #faf7f3 100%);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); color: var(--ink);
  font-size: 14px; padding: 13px 16px; outline: none; width: 100%; font-family: var(--font);
  box-shadow: 0 2px 6px rgba(0,0,0,.08) inset, 0 1px 0 rgba(255,255,255,.85);
  transition: all var(--transition);
}
.login-form .form-group input:focus {
  border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 3px rgba(194,120,60,.14), 0 1px 4px rgba(0,0,0,.05) inset;
}
.btn-login {
  margin-top: 8px;
  background: linear-gradient(180deg, #e09558 0%, #c2783c 40%, #a86628 100%);
  color: #fff; border: none; border-bottom: 2px solid #7a4a1c;
  border-radius: var(--radius-sm); font-size: 15px; font-weight: 700;
  padding: 15px; cursor: pointer; width: 100%;
  font-family: var(--font); transition: all var(--transition);
  box-shadow: var(--s3d-btn); text-shadow: 0 1px 2px rgba(0,0,0,.25);
  position: relative; overflow: visible;
}
.btn-login::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 100%);
  pointer-events: none; border-radius: inherit;
}
.btn-login:hover {
  background: linear-gradient(180deg, #eca066 0%, #d08448 40%, #b87234 100%);
  transform: translateY(-3px); box-shadow: var(--s3d-btn-h);
}
.btn-login:active { transform: translateY(1px); border-bottom-width: 1px; }

/* ====================================================
   TABLES
   ==================================================== */
.drivers-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.drivers-table-wrap {
  background: linear-gradient(155deg, #ffffff 0%, #f7f3ed 100%);
  border-radius: var(--radius); overflow: visible;
  box-shadow: var(--s3d-card);
}
.drivers-table thead tr {
  background: linear-gradient(180deg, #f0ebe2 0%, #e0d8cc 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset,
    0 -1px 0 rgba(28,25,23,.06) inset,
    0 2px 0 rgba(28,25,23,.07),
    0 4px 10px rgba(28,25,23,.06);
}
.drivers-table th {
  padding: 10px 16px; text-align: left;
  font-size: 10px; font-weight: 700; color: var(--ink4);
  text-transform: uppercase; letter-spacing: .6px; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.drivers-table td { padding: 14px 16px; border-bottom: 1px solid rgba(28,25,23,.05); vertical-align: middle; font-size: 13px; }
.driver-row:last-child td { border-bottom: none; }
.driver-row:hover td { background: rgba(194,120,60,.04); }
.driver-row.hidden { display: none; }

/* ====================================================
   КНОПКИ ВНУТРИ ТАБЛИЦЫ
   ==================================================== */
.drivers-table td button {
  transition: all var(--transition) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 2px 0 rgba(28,25,23,.08), 0 3px 8px rgba(28,25,23,.07) !important;
  border-bottom: 1px solid rgba(28,25,23,.15) !important;
}
.drivers-table td button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 5px 14px rgba(28,25,23,.15), 0 10px 24px rgba(28,25,23,.1) !important;
}
.drivers-table td button:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 2px rgba(28,25,23,.1) !important;
  border-bottom-width: 0 !important;
}
.drivers-table td > div[style*="border-radius"],
.drivers-table td > div > div[style*="border-radius"] {
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 1px 0 rgba(28,25,23,.07), 0 3px 10px rgba(28,25,23,.09) !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
}
.drivers-table td > div[style*="border-radius"]:hover,
.drivers-table td > div > div[style*="border-radius"]:hover {
  transform: scale(2);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 6px 16px rgba(28,25,23,.13), 0 12px 28px rgba(28,25,23,.09) !important;
}

/* ====================================================
   КАРТОЧКИ-ФИЛЬТРЫ АВТОМОБИЛЕЙ — 3D MAX
   ==================================================== */
.car-filter-tab {
  background: linear-gradient(160deg, #ffffff 0%, #f5f0e8 55%, #ede6da 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(28,25,23,.06) inset,
    0 2px 0 rgba(28,25,23,.09),
    0 4px 10px rgba(28,25,23,.09),
    0 12px 28px rgba(28,25,23,.08) !important;
  border-bottom: 2px solid rgba(28,25,23,.13) !important;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition) !important;
  position: relative; overflow: visible;
}
.car-filter-tab::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, transparent 100%);
  pointer-events: none; border-radius: inherit;
}
.car-filter-tab:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(28,25,23,.08) inset,
    0 3px 0 rgba(28,25,23,.12),
    0 8px 22px rgba(28,25,23,.14),
    0 20px 44px rgba(28,25,23,.10) !important;
}
.car-filter-tab.active {
  background: linear-gradient(160deg, #fffaf5 0%, #fdf3e8 55%, #f5e8d4 100%) !important;
  border-color: #C2783C !important;
  border-bottom-color: #8a4e1e !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(138,78,30,.15) inset,
    0 2px 0 #8a4e1e,
    0 6px 16px rgba(194,120,60,.22),
    0 18px 40px rgba(194,120,60,.14) !important;
}

/* ====================================================
   БЕЙДЖИ ДОКУМЕНТОВ АВТОМОБИЛЕЙ — 3D MAX
   ==================================================== */
#carsTableBody .car-row > div > div[style*="border-left"],
#carsTableBody .car-row > div > div[style*="border-radius"] {
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 -1px 0 rgba(28,25,23,.05) inset,
    0 2px 0 rgba(28,25,23,.08),
    0 3px 10px rgba(28,25,23,.09),
    0 8px 20px rgba(28,25,23,.06) !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
  position: relative; overflow: visible;
}
#carsTableBody .car-row > div > div[style*="border-left"]::after,
#carsTableBody .car-row > div > div[style*="border-radius"]::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, transparent 100%);
  pointer-events: none; border-radius: inherit;
}
#carsTableBody .car-row > div > div[style*="border-left"]:hover,
#carsTableBody .car-row > div > div[style*="border-radius"]:hover {
  transform: scale(2);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 5px 14px rgba(28,25,23,.14),
    0 14px 32px rgba(28,25,23,.10) !important;
}
#carsTableBody .car-row {
  background: linear-gradient(180deg, #ffffff 0%, #faf7f3 100%);
  transition: background var(--transition), box-shadow var(--transition);
}
#carsTableBody .car-row:hover {
  background: linear-gradient(180deg, #fffefb 0%, #fdf8f2 100%);
  box-shadow: 0 2px 12px rgba(194,120,60,.07) inset !important;
}
#carsTableBody button {
  transition: all var(--transition) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 2px 0 rgba(28,25,23,.09),
    0 4px 10px rgba(28,25,23,.08) !important;
  border-bottom: 1px solid rgba(28,25,23,.15) !important;
}
#carsTableBody button:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 6px 18px rgba(28,25,23,.15),
    0 14px 30px rgba(28,25,23,.10) !important;
}
#carsTableBody button:active {
  transform: translateY(1px) !important;
  border-bottom-width: 0 !important;
  box-shadow: 0 1px 3px rgba(28,25,23,.1) !important;
}

/* ====================================================
   ОРГАНИЗАЦИИ — 3D MAX (и другие стр. с белыми таблицами)
   ==================================================== */

/* Главный контейнер с таблицей — белый блок */
.page-content > div[style*="background:#fff"],
.page-content > div[style*="background: #fff"] {
  background: linear-gradient(160deg, #ffffff 0%, #faf6f0 60%, #f5f0e8 100%) !important;
  box-shadow:
    0 0 0 1px rgba(28,25,23,.05),
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(28,25,23,.04) inset,
    0 4px 12px rgba(28,25,23,.08),
    0 20px 48px rgba(28,25,23,.10) !important;
  border: none !important;
  position: relative;
}

/* Поисковое поле внутри белого контейнера */
.page-content > div[style*="background:#fff"] div[style*="background:#f7f7f7"],
.page-content > div[style*="background: #fff"] div[style*="background:#f7f7f7"] {
  background: linear-gradient(180deg, #ede8e0 0%, #f5f1ea 100%) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.07) inset, 0 1px 0 rgba(255,255,255,.85) !important;
  border-color: rgba(28,25,23,.1) !important;
}

/* Строки таблицы */
.org-row,
.driver-row,
.medic-row,
.mechanic-row {
  transition: background var(--transition) !important;
}
.org-row:hover {
  background: linear-gradient(90deg, rgba(194,120,60,.04) 0%, rgba(194,120,60,.02) 100%) !important;
}

/* Кнопка Изменить в таблицах (org, drivers, medic, mechanic) */
.page-content table button,
.page-content .org-row button,
.page-content .medic-row button,
.page-content .mechanic-row button {
  background: linear-gradient(180deg, #fafafa 0%, #ede8e0 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 0 rgba(28,25,23,.09),
    0 4px 10px rgba(28,25,23,.08) !important;
  border: 1px solid rgba(28,25,23,.12) !important;
  border-bottom: 2px solid rgba(28,25,23,.16) !important;
  transition: all var(--transition) !important;
}
.page-content table button:hover,
.page-content .org-row button:hover,
.page-content .medic-row button:hover,
.page-content .mechanic-row button:hover {
  background: linear-gradient(180deg, #fff 0%, #e4ddd4 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 6px 18px rgba(28,25,23,.14),
    0 14px 30px rgba(28,25,23,.09) !important;
}
.page-content table button:active,
.page-content .org-row button:active,
.page-content .medic-row button:active,
.page-content .mechanic-row button:active {
  transform: translateY(1px) !important;
  border-bottom-width: 1px !important;
  box-shadow: 0 1px 3px rgba(28,25,23,.1) !important;
}

/* Бадж счётчика водителей (C2783C) */
.page-content span[style*="background:#C2783C"],
.page-content span[style*="background: #C2783C"] {
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 2px 0 #7a4a1c,
    0 4px 12px rgba(194,120,60,.4),
    0 8px 20px rgba(194,120,60,.2) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
  position: relative;
}

/* Круглые счётчики в медиках/механиках */
.page-content span[style*="border-radius:50%"] {
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 2px 6px rgba(28,25,23,.14),
    0 5px 14px rgba(28,25,23,.09) !important;
}

/* ====================================================
   КОРИЧНЕВЫЕ КНОПКИ В ТАБЛИЦЕ ВОДИТЕЛЕЙ — исключение
   ==================================================== */
/* Кнопка «Карточка» и другие акцентные кнопки с background:#C2783C внутри таблиц */
.page-content table button[style*="background:#C2783C"],
.page-content table button[style*="background: #C2783C"],
.page-content .driver-row button[style*="background:#C2783C"],
.page-content .driver-row button[style*="background: #C2783C"] {
  background: linear-gradient(180deg, #e09558 0%, #c2783c 40%, #a86628 100%) !important;
  color: #fff !important;
  border: none !important;
  border-bottom: 2px solid #7a4a1c !important;
  box-shadow: var(--s3d-btn) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}
.page-content table button[style*="background:#C2783C"]:hover,
.page-content table button[style*="background: #C2783C"]:hover,
.page-content .driver-row button[style*="background:#C2783C"]:hover,
.page-content .driver-row button[style*="background: #C2783C"]:hover {
  background: linear-gradient(180deg, #eca066 0%, #d08848 40%, #b87234 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--s3d-btn-h) !important;
}
.page-content table button[style*="background:#C2783C"]:active,
.page-content table button[style*="background: #C2783C"]:active,
.page-content .driver-row button[style*="background:#C2783C"]:active,
.page-content .driver-row button[style*="background: #C2783C"]:active {
  transform: translateY(1px) !important;
  border-bottom-width: 1px !important;
  box-shadow: 0 1px 4px rgba(194,120,60,.3) !important;
}

/* ====================================================
   RESPONSIVE DESKTOP
   ==================================================== */
@media (min-width: 600px) {
  .sidebar-overlay { display: none !important; }
  .bottom-nav { display: none !important; }
  .burger { display: none; }
  

  html, body {
    background:
      radial-gradient(ellipse at 15% 5%, rgba(194,120,60,.12) 0%, transparent 48%),
      radial-gradient(ellipse at 85% 95%, rgba(28,25,23,.08) 0%, transparent 48%),
      radial-gradient(ellipse at 50% 50%, rgba(194,120,60,.04) 0%, transparent 70%),
      linear-gradient(150deg, #e8e0d2 0%, #ddd6c8 35%, #d0c9b8 70%, #c8bfaa 100%);
    background-attachment: fixed;
  }

  .sidebar {
    transform: translateX(0) !important;
    width: 62px;
    transition: width .25s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
  }
  .sidebar:hover { width: var(--sidebar-w); }

  .sidebar .nav-label,
  .sidebar .logo-text,
  .sidebar .sidebar-close,
  .sidebar .user-info,
  .sidebar .user-role,
  .sidebar .user-name,
  .sidebar .btn-logout,
  .sidebar .nav-section-label {
    opacity: 0; transition: opacity .14s;
    white-space: nowrap; overflow: hidden;
  }
  .sidebar:hover .nav-label,
  .sidebar:hover .logo-text,
  .sidebar:hover .sidebar-close,
  .sidebar:hover .user-info,
  .sidebar:hover .user-role,
  .sidebar:hover .user-name,
  .sidebar:hover .btn-logout,
  .sidebar:hover .nav-section-label { opacity: 1; }

  .sidebar .nav-item { justify-content: flex-start; padding: 12px 22px; }
  .sidebar .sidebar-header { padding: 10px 22px 8px; }
  .sidebar .logo-wrap { overflow: hidden; }
  .sidebar .user-card { padding: 11px 16px; }

  .app-wrap { margin-left: 62px; padding-bottom: 0; transition: margin-left .25s cubic-bezier(.4,0,.2,1); }
  .sidebar:hover ~ .app-wrap,
  .sidebar:hover + .app-wrap { margin-left: var(--sidebar-w); }
}

/* ====================================================
   ANIMATIONS
   ==================================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* fadeUp даёт transform и делает .page-content containing block для position:fixed —
   модалки уезжали вверх страницы при прокрутке. fadeIn — только opacity (13.09.2026) */
.page-content { animation: fadeIn .28s ease forwards; }

/* ====================================================
   MOBILE
   ==================================================== */
@media (max-width: 599px) {
  .page-content { padding: 12px 12px 10px; }
  .page-header { flex-wrap: wrap; gap: 10px; }
  .page-title { font-size: 18px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stat-num { font-size: 20px; }
  .btn-primary, .btn-sm { font-size: 12px; padding: 8px 13px; }
  .modal {
    width: 100% !important; max-width: 100% !important;
    margin: 0 !important; border-radius: 20px 20px 0 0 !important;
    position: fixed !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important; top: auto !important;
    transform: none !important; max-height: 92vh; overflow-y: auto;
  }
  .form-row2 { flex-direction: column !important; gap: 12px; }
  .list-card { padding: 11px 13px; gap: 10px; }
  .topbar { padding: 0 10px 0 6px; }
  .topbar-title { font-size: 13px; }
  .search-bar input { font-size: 13px; }
  .filter-btn { padding: 5px 11px; font-size: 11px; }
  .drivers-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .medic-row, .mechanic-row { display: flex !important; flex-direction: column !important; gap: 6px; padding: 12px !important; }
  .medic-row > div, .mechanic-row > div { width: 100% !important; }
  [style*="grid-template-columns:1fr 140px 1fr 160px"] { display: none !important; }
}

@media (min-width: 600px) {
  .page-content { padding: 20px 28px 12px; max-width: 1400px; }
}
@media (min-width: 1200px) {
  .page-content { max-width: calc(100vw - 74px); padding: 22px 36px; }
}
@media (min-width: 1600px) {
  .page-content { padding: 24px 44px; }
}

/* ====================================================
   GRID FLUID
   ==================================================== */
[style*="grid-template-columns"] { min-width: 0; }
.page-content [style*="display:grid"],
.page-content [style*="display: grid"] { width: 100% !important; box-sizing: border-box; }
.drivers-table-wrap, .medic-table-wrap, .orgs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.modal { width: clamp(320px, 88vw, 860px) !important; max-width: 97vw !important; box-sizing: border-box; }


/* ====================================================
   ФИЛЬТРЫ АРХИВА ПУТЕВЫХ — 3D
   ==================================================== */
/* select/input[date] в форме архива */
#page-archive-form select,
#page-archive-form input[type="date"] {
  background: linear-gradient(180deg, #ede8e0 0%, #faf7f3 100%) !important;
  border: 1.5px solid var(--border) !important;
  border-bottom: 2px solid rgba(28,25,23,.18) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow:
    0 2px 6px rgba(0,0,0,.08) inset,
    0 1px 0 rgba(255,255,255,.9),
    0 3px 8px rgba(28,25,23,.07) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  transition: all var(--transition) !important;
  height: 36px !important;
}
#page-archive-form select:focus,
#page-archive-form input[type="date"]:focus {
  border-color: var(--accent) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(194,120,60,.14), 0 1px 4px rgba(0,0,0,.05) inset !important;
  outline: none !important;
}


/* ====================================================
   MEDIC MECHANIC CONTAINERS 3D
   ==================================================== */
/* Белый контейнер списка медиков/механиков */
.page-content > div[style*="background:#fff"][style*="border-radius:14px"],
.page-content > div[style*="background: #fff"][style*="border-radius:14px"] {
  background: linear-gradient(160deg, #ffffff 0%, #faf6f0 60%, #f5f0e8 100%) !important;
  box-shadow:
    0 0 0 1px rgba(28,25,23,.05),
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(28,25,23,.04) inset,
    0 4px 12px rgba(28,25,23,.08),
    0 20px 48px rgba(28,25,23,.10) !important;
  border: none !important;
}

/* Кнопка Изменить в медиках/механиках */
.medic-row button,
.mechanic-row button {
  background: linear-gradient(180deg, #fafafa 0%, #ede8e0 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 0 rgba(28,25,23,.09),
    0 4px 10px rgba(28,25,23,.08) !important;
  border: 1px solid rgba(28,25,23,.12) !important;
  border-bottom: 2px solid rgba(28,25,23,.16) !important;
  transition: all var(--transition) !important;
}
.medic-row button:hover,
.mechanic-row button:hover {
  background: linear-gradient(180deg, #fff 0%, #e4ddd4 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 6px 18px rgba(28,25,23,.14),
    0 14px 30px rgba(28,25,23,.09) !important;
}
.medic-row button:active,
.mechanic-row button:active {
  transform: translateY(1px) !important;
  border-bottom-width: 1px !important;
  box-shadow: 0 1px 3px rgba(28,25,23,.1) !important;
}

/* Круглый счётчик организаций */
.medic-row span[style*="border-radius:50%"],
.mechanic-row span[style*="border-radius:50%"] {
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 2px 0 rgba(28,25,23,.12),
    0 4px 10px rgba(28,25,23,.12),
    0 8px 18px rgba(28,25,23,.08) !important;
  background: linear-gradient(145deg, #f5f0e8, #e8e0d4) !important;
}

/* Поисковое поле в контейнерах */
.medic-row ~ div[style*="background:#f7f7f7"],
div[style*="background:#f7f7f7"][style*="border-radius:10px"] {
  background: linear-gradient(180deg, #ede8e0 0%, #f5f1ea 100%) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.07) inset, 0 1px 0 rgba(255,255,255,.85) !important;
  border-color: rgba(28,25,23,.1) !important;
}



/* Розовая кнопка Медик */
.page-content table button[style*="background:#e91e8c"],
.page-content .driver-row button[style*="background:#e91e8c"] {
  background: #e91e8c !important;
  color: #fff !important;
  border: none !important;
  border-bottom: 2px solid #a0005a !important;
  box-shadow: 0 4px 0 #a0005a, 0 6px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.2) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}
.page-content table button[style*="background:#e91e8c"]:hover,
.page-content .driver-row button[style*="background:#e91e8c"]:hover {
  background: #f72fa0 !important;
  transform: translateY(-3px) !important;
}
.page-content table button[style*="background:#e91e8c"]:active,
.page-content .driver-row button[style*="background:#e91e8c"]:active {
  transform: translateY(1px) !important;
  border-bottom-width: 1px !important;
}

/* === GLOBAL 3D BUTTONS === */

/* Оранжевая первичная кнопка */

.btn-primary {
  background: linear-gradient(180deg, #e8945a 0%, #b5611e 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 0 #8a4110, 0 6px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.25) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  transform: translateY(0);
  transition: transform .1s, box-shadow .1s !important;
}
.btn-primary:hover {
  background: linear-gradient(180deg, #f0a070 0%, #c46c28 100%) !important;
  box-shadow: 0 6px 0 #8a4110, 0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.3) !important;
  transform: translateY(-2px);
}
.btn-primary:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #8a4110, 0 2px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.1) !important;
}

/* Серая кнопка (Журнал, Изменить) */
.btn-secondary, button[style*="background:#6"], button[style*="background: #6"] {
  transition: transform .1s, box-shadow .1s !important;
}

/* btn-sm */
.btn-sm {
  box-shadow: 0 4px 0 #8a4110, 0 6px 14px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transform: translateY(0);
  transition: transform .1s, box-shadow .1s !important;
}
.btn-sm:hover {
  box-shadow: 0 6px 0 #8a4110, 0 10px 20px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.3) !important;
  transform: translateY(-2px);
}
.btn-sm:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #8a4110, 0 2px 5px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.1) !important;
}

/* Кнопка журнал / доп серый тон */
button[style*="background:#6c757d"], button[style*="background:#6B8FA3"] {
  box-shadow: 0 4px 0 #3d4852, 0 6px 14px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.15) !important;
  transform: translateY(0);
  transition: transform .1s, box-shadow .1s !important;
}
button[style*="background:#6c757d"]:hover, button[style*="background:#6B8FA3"]:hover {
  box-shadow: 0 6px 0 #3d4852, 0 10px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.2) !important;
  transform: translateY(-2px);
}
button[style*="background:#6c757d"]:active, button[style*="background:#6B8FA3"]:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #3d4852, 0 2px 5px rgba(0,0,0,.15) !important;
}

/* Кнопка Изменить (белая/серая) */
button[style*="background:#f7f7f7"], button[style*="background:#fff"] {
  box-shadow: 0 3px 0 #c8bfb0, 0 5px 12px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.9) !important;
  transform: translateY(0);
  transition: transform .1s, box-shadow .1s !important;
}
button[style*="background:#f7f7f7"]:hover, button[style*="background:#fff"]:hover {
  border-color: #C2783C !important;
  color: #C2783C !important;
  box-shadow: 0 5px 0 #b5a898, 0 8px 18px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.95) !important;
  transform: translateY(-2px);
}
button[style*="background:#f7f7f7"]:active, button[style*="background:#fff"]:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #c8bfb0, 0 2px 5px rgba(0,0,0,.08) !important;
}

/* Зелёная кнопка (Печать) */
a[style*="background:#e8f5e9"], button[style*="background:#e8f5e9"] {
  box-shadow: 0 3px 0 #007a3d, 0 5px 10px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.4) !important;
  transform: translateY(0);
  transition: transform .1s, box-shadow .1s !important;
  display: inline-block;
}
a[style*="background:#e8f5e9"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #007a3d, 0 8px 16px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.4) !important;
}

/* Оранжевая (Посмотреть) */
a[style*="background:#fff3e8"] {
  box-shadow: 0 3px 0 #a85a1e, 0 5px 10px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.3) !important;
  transform: translateY(0);
  transition: transform .1s, box-shadow .1s !important;
  display: inline-block;
}
a[style*="background:#fff3e8"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #a85a1e, 0 8px 16px rgba(0,0,0,.14) !important;
}

/* btn-submit */
.btn-submit {
  background: linear-gradient(180deg, #e8945a 0%, #b5611e 100%) !important;
  box-shadow: 0 4px 0 #8a4110, 0 6px 14px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transform: translateY(0);
  transition: transform .1s, box-shadow .1s !important;
}
.btn-submit:hover {
  background: linear-gradient(180deg, #f0a070 0%, #c46c28 100%) !important;
  box-shadow: 0 6px 0 #8a4110, 0 10px 22px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.3) !important;
  transform: translateY(-2px);
}
.btn-submit:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #8a4110, 0 2px 6px rgba(0,0,0,.18) !important;
}

/* btn-cancel */
.btn-cancel {
  box-shadow: 0 3px 0 #c8bfb0, 0 5px 10px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9) !important;
  transform: translateY(0);
  transition: transform .1s, box-shadow .1s !important;
}
.btn-cancel:hover {
  color: #C2783C !important;
  border-color: #C2783C !important;
  box-shadow: 0 5px 0 #b5a898, 0 8px 16px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.95) !important;
  transform: translateY(-2px);
}
.btn-cancel:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #c8bfb0 !important;
}

/* btn-danger */
.btn-danger {
  box-shadow: 0 4px 0 #a71d2a, 0 6px 14px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2) !important;
  transform: translateY(0);
  transition: transform .1s, box-shadow .1s !important;
}
.btn-danger:hover {
  box-shadow: 0 6px 0 #a71d2a, 0 10px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transform: translateY(-2px);
}
.btn-danger:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #a71d2a, 0 2px 5px rgba(0,0,0,.15) !important;
}


/* === HOVER/ACTIVE для inline-3d кнопок === */
/* Используем JS через события mouseenter/mouseleave для кнопок с inline-style — добавляем CSS класс */
.btn-3d-hover:hover {
  filter: brightness(1.08);
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 0 #8a4110, 0 12px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.btn-3d-hover:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #8a4110, 0 2px 6px rgba(0,0,0,.2) !important;
  filter: brightness(0.95);
}

button.btn-time-settings,
button.btn-time-settings:not(:hover):not(:active) {
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 10px 16px !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg,#f0f0f0 0%,#d0d0d0 100%) !important;
  color: #5a4a3a !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.7) !important;
  box-shadow: 0 4px 0 #999, 0 6px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.8) !important;
  transform: translateY(0) !important;
  transition: transform .1s, box-shadow .1s, filter .1s !important;
}
button.btn-time-settings:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 0 #777, 0 12px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
button.btn-time-settings:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #777, 0 2px 6px rgba(0,0,0,.15) !important;
  filter: brightness(0.95) !important;
}




/* ====================================================
   OVERFLOW FIX — для работы scale() на карточках документов
   ==================================================== */
#carsTableBody,
#carsTableBody > *,
.car-row,
.car-row > div,
.drivers-table-wrap,
.orgs-table-wrap,
.page-content > div {
  overflow: visible !important;
}
/* Обёртка со скроллом — только она может обрезать */
.drivers-table-wrap,
.medic-table-wrap,
.orgs-table-wrap {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

.car-row { position: relative; z-index: 0; }
.car-row:hover { z-index: 100; }

.btn-green {
    background: linear-gradient(180deg, #5cb85c 0%, #3a7a3a 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 0 #2a5a2a, 0 6px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.2) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    transform: translateY(0);
    transition: transform .1s, box-shadow .1s !important;
}
.btn-green:hover {
    background: linear-gradient(180deg, #6dca6d 0%, #4a8a4a 100%) !important;
    box-shadow: 0 6px 0 #2a5a2a, 0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.3) !important;
    transform: translateY(-2px);
}
.btn-green:active {
    transform: translateY(3px) !important;
    box-shadow: 0 1px 0 #2a5a2a, 0 2px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.1) !important;
}

.btn-gray {
    background: linear-gradient(180deg, #8a9bb0 0%, #5a6a7a 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 0 #3d4d5d, 0 6px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.2) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    transform: translateY(0);
    transition: transform .1s, box-shadow .1s !important;
}
.btn-gray:hover {
    background: linear-gradient(180deg, #9aabC0 0%, #6a7a8a 100%) !important;
    box-shadow: 0 6px 0 #3d4d5d, 0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.3) !important;
    transform: translateY(-2px);
}
.btn-gray:active {
    transform: translateY(3px) !important;
    box-shadow: 0 1px 0 #3d4d5d, 0 2px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.1) !important;
}

.car-row > div > div[style*='border-left']:hover {
    transform: scale(2);
    box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
    z-index: 10;
    position: relative;
}

.doc-card {
    transition: transform .25s ease, box-shadow .25s ease;
    cursor: default;
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.doc-card:hover {
    transform: scale(2);
    box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
    z-index: 10;
}

/* Fix: карточки документов не обрезаются при hover */
.car-row { overflow: visible !important; }
.car-row > div { overflow: visible !important; }
body button.btn-blue,
body .btn-blue {
  background: linear-gradient(180deg,#5aaee8 0%,#1e6eb5 100%) !important;
  border-bottom: 3px solid #104f8a !important;
  box-shadow: 0 4px 0 #104f8a, 0 6px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
body button.btn-blue:hover,
body .btn-blue:hover {
  background: linear-gradient(180deg,#6bbef5 0%,#2a7fc8 100%) !important;
  box-shadow: var(--s3d-btn-h) !important;
  transform: translateY(-3px) !important;
}
body .btn-blue.btn-3d-hover:hover {
  filter: brightness(1.08);
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 0 #104f8a, 0 12px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.3) !important;
  background: linear-gradient(180deg,#6bbef5 0%,#2a7fc8 100%) !important;
}
body .btn-blue.btn-3d-hover:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #104f8a, 0 2px 6px rgba(0,0,0,.2) !important;
  filter: brightness(0.95);
  background: linear-gradient(180deg,#5aaee8 0%,#1e6eb5 100%) !important;
}

.btn-doc-attach {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  padding:0;
  border-radius:50% !important;
  border:none !important;
  outline:none !important;
  -webkit-appearance:none;
  appearance:none;
  background:linear-gradient(145deg,#f5f0e8,#e0d8cc) !important;
  box-shadow:0 3px 0 #b8b0a4,0 4px 8px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.8);
  cursor:pointer;
  font-size:12px;
  line-height:1;
  vertical-align:middle;
  transition:transform .12s,box-shadow .12s;
  margin-left:4px;
  flex-shrink:0;
}
.btn-doc-attach:hover {
  transform:translateY(-2px);
  box-shadow:0 5px 0 #a8a09a,0 7px 14px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.85);
}
.btn-doc-attach:active {
  transform:translateY(2px);
  box-shadow:0 1px 0 #b8b0a4,0 2px 4px rgba(0,0,0,.12),inset 0 2px 4px rgba(0,0,0,.1);
}

/* garage-table-center */
.garage-repair-table th, .garage-repair-table td { text-align: center; vertical-align: middle; }
.garage-repair-table th:first-child, .garage-repair-table td:first-child { text-align: left; }

/* --- Import button 3D bounce --- */
.btn-import-3d {
  white-space: nowrap;
  padding: 8px 18px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(145deg, #e8e0d8, #d0c8be);
  font-size: 13px;
  font-weight: 600;
  color: #44403C;
  cursor: pointer;
  box-shadow: 4px 4px 8px #b8b0a6, -2px -2px 6px #ffffff, inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.btn-import-3d:hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 6px 12px 18px #b8b0a6, -3px -3px 8px #ffffff, inset 0 1px 0 rgba(255,255,255,0.9);
}
.btn-import-3d:active {
  transform: scale(0.95) translateY(0) !important;
  box-shadow: inset 3px 3px 6px #b8b0a6, inset -1px -1px 4px #ffffff !important;
}
/* === Фиолетовая кнопка «Инструктаж» (14.09.2026) === */
body .btn-purple {
  background: linear-gradient(180deg,#9b7fd6 0%,#5b3fa0 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 0 #432d78, 0 6px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
body .btn-purple:hover {
  background: linear-gradient(180deg,#ab92e0 0%,#6b4cb8 100%) !important;
  box-shadow: 0 6px 0 #432d78, 0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.3) !important;
  transform: translateY(-2px) !important;
}
body .btn-purple:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #432d78, 0 2px 6px rgba(0,0,0,.2) !important;
}

/* === ОБЪЁМНЫЕ МОДАЛЬНЫЕ ОКНА ИНСТРУКТАЖЕЙ (14.09.2026) === */
body .modal.modal-3d {
  background: linear-gradient(165deg, #ffffff 0%, #fdf9f4 45%, #f4ede4 100%) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -16px 34px rgba(28,25,23,.05) inset,
    0 2px 0 rgba(28,25,23,.06),
    0 20px 44px rgba(28,25,23,.22),
    0 52px 96px rgba(28,25,23,.16) !important;
  transform: translate(-50%, 0) scale(.95) perspective(1400px) rotateX(3deg);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .24s;
}
body .modal.modal-3d.show {
  transform: translate(-50%, 0) scale(1) perspective(1400px) rotateX(0deg);
}
body .modal-3d .modal-header {
  background: linear-gradient(180deg, #ffffff 0%, #f8f2ea 100%) !important;
  border-bottom: 1px solid rgba(28,25,23,.09) !important;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 8px 16px -12px rgba(28,25,23,.45);
}
body .modal-3d .modal-title {
  text-shadow: 0 1px 0 #fff, 0 2px 5px rgba(28,25,23,.14);
}
body .modal-3d .modal-footer {
  background: linear-gradient(180deg, #f8f2ea 0%, #ebe2d5 100%) !important;
  border-top: 1px solid rgba(28,25,23,.09) !important;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 -8px 16px -12px rgba(28,25,23,.4);
}
body .modal-3d .modal-section-title {
  background: linear-gradient(180deg, #f7f0e7 0%, #e9e0d2 100%);
  border: 1px solid rgba(28,25,23,.08);
  border-radius: 10px;
  padding: 6px 11px;
  margin-top: 6px;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 3px 6px rgba(28,25,23,.09);
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}
body .modal-3d .modal-body input[type="text"],
body .modal-3d .modal-body input[type="file"],
body .modal-3d .modal-body select {
  border-radius: 12px !important;
  background: linear-gradient(180deg, #f7f4ef 0%, #ffffff 100%) !important;
  box-shadow: 0 3px 7px rgba(28,25,23,.10) inset, 0 1px 0 rgba(255,255,255,.95) !important;
}
body .modal-3d .modal-close {
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 4px 10px rgba(28,25,23,.2) !important;
}
body .modal-3d #biList > div {
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 16px rgba(28,25,23,.10) !important;
  border-radius: 14px !important;
}

/* === КНОПКА ВЫБОРА ФАЙЛА В ОКНАХ ИНСТРУКТАЖЕЙ (14.09.2026) === */
body .modal-3d input[type="file"] {
  padding: 9px 12px !important;
  font-size: 12px;
  color: #777;
  cursor: pointer;
}
body .modal-3d input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #e8945a 0%, #b5611e 100%);
  box-shadow: 0 3px 0 #8a4110, 0 5px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .1s, box-shadow .1s, filter .15s;
}
body .modal-3d input[type="file"]::file-selector-button:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #8a4110, 0 8px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.32);
}
body .modal-3d input[type="file"]::file-selector-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #8a4110, 0 2px 6px rgba(0,0,0,.18);
}
body .modal-3d input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 7px 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #e8945a 0%, #b5611e 100%);
  box-shadow: 0 3px 0 #8a4110, 0 5px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .1s, box-shadow .1s, filter .15s;
}
body .modal-3d input[type="file"]::-webkit-file-upload-button:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

/* === ФИКС ОБРЕЗКИ КНОПКИ ВЫБОРА ФАЙЛА (14.09.2026) === */
body .modal-3d input[type="file"] {
  height: auto !important;
  min-height: 48px;
  display: flex;
  align-items: center;
  overflow: visible !important;
  line-height: 1.2;
}
body .modal-3d input[type="file"]::file-selector-button {
  box-shadow: 0 2px 0 #8a4110, 0 4px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.28);
}
body .modal-3d input[type="file"]::file-selector-button:hover {
  transform: none;
  box-shadow: 0 2px 0 #8a4110, 0 6px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.32);
}
body .modal-3d input[type="file"]::file-selector-button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #8a4110, 0 2px 6px rgba(0,0,0,.18);
}
body .modal-3d input[type="file"]::-webkit-file-upload-button {
  box-shadow: 0 2px 0 #8a4110, 0 4px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.28);
}
body .modal-3d input[type="file"]::-webkit-file-upload-button:hover {
  transform: none;
}