/* static/css/app.css */
/* Global modern styles: sidebar animation, content scaling, page transitions */

:root {
  --app-transition-fast: 160ms;
  --app-transition: 250ms;
  --app-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --color-bg: #eaedf1;
  --color-overlay: rgba(15, 23, 42, 0.35);
}

/* Ensure smooth transforms */
.content-wrapper {
  transform-origin: left center;
  transition: transform var(--app-transition) var(--app-ease);
}

/* Sidebar slide / content scaling */
.sidebar {
  will-change: transform;
  transition: transform var(--app-transition) var(--app-ease), box-shadow var(--app-transition-fast) ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  z-index: 1041; /* above overlay */
}

/* Collapsed (desktop) */
body.sidebar-collapsed .sidebar {
  transform: translateX(-100%);
}
body.sidebar-collapsed .content-wrapper {
  margin-left: 0 !important;
  width: 100% !important;
}

/* Open (mobile off-canvas) */
body.sidebar-open .sidebar {
  transform: translateX(0);
  box-shadow: 8px 0 24px rgba(15, 23, 42, 0.18);
}
body.sidebar-open .content-wrapper {
  transform: scale(0.98);
}

/* Overlay for mobile sidebar */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--app-transition) var(--app-ease), visibility var(--app-transition) var(--app-ease);
  z-index: 1039; /* below navbar, below sidebar */
}
body.sidebar-open .sidebar-overlay {
  opacity: 1;
  visibility: visible;
}

/* Keep default layout on desktop but allow collapsing */
@media (min-width: 992px) {
  body:not(.sidebar-collapsed) .sidebar {
    transform: translateX(0);
  }
}

/* Mobile: hide sidebar by default, full-width content */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .content-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* Page transitions */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pageFadeOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(0.995); }
}

.content-wrapper.page-enter {
  animation: pageFadeIn 240ms var(--app-ease) both;
}
.content-wrapper.page-exit {
  animation: pageFadeOut 140ms ease-in both;
}

/* Sidebar toggle button refinement */
.navbar .btn-sidebar-toggle {
  border-radius: 10px;
  padding: 0.25rem 0.5rem;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .content-wrapper, .sidebar {
    transition: none !important;
  }
  .content-wrapper.page-enter,
  .content-wrapper.page-exit {
    animation: none !important;
  }
} 

/* --- Generic UI upgrades --- */
.page-header {
  margin-bottom: 1.25rem;
}
.page-header .btn {
  border-radius: 12px;
}

.card {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
  overflow: hidden; /* ensure inner backgrounds follow rounding */
  background-clip: padding-box;
}
.card-header {
  background: linear-gradient(180deg, #ffffff, #fafafa);
  border-bottom: 1px solid #f1f5f9;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.card-footer {
  background: #fff;
  border-top: 1px solid #f1f5f9;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Fine-tune tables within cards */
.card .table { margin-bottom: 0; }
.card .table-responsive { border-radius: 0 0 16px 16px; }

.btn-cta {
  border-width: 2px;
  border-radius: 12px;
  padding: 0.7rem 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08);
}

.badge {
  border-radius: 999px;
} 

/* Improve spacing of sections inside cards */
.card .form-select,
.card .form-control,
.card .btn { border-radius: 10px; }

.card .card-body > .row + .row { margin-top: 0.25rem; }

/* Ensure tab headers in cards have consistent rounding */
.card .nav-tabs .nav-link { border-radius: 10px 10px 0 0; } 

/* --- Brand theming (Belorusneft-inspired) --- */
:root {
  --brand-primary: #0db14b;        /* main green */
  --brand-primary-700: #0a8d3c;    /* darker hover */
  --brand-primary-100: #e8f7ef;    /* light tint */
}

/* Primary accents */
.text-primary { color: var(--brand-primary) !important; }
.link-primary { color: var(--brand-primary) !important; }
.link-primary:hover { color: var(--brand-primary-700) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }

.btn-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--brand-primary-700) !important;
  border-color: var(--brand-primary-700) !important;
}
.btn-outline-primary {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  background-color: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  color: #fff !important;
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.badge.bg-primary { background-color: var(--brand-primary) !important; }

/* Sidebar highlights */
.sidebar .nav-link.active {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}
.sidebar .nav-link:hover {
  background-color: rgba(13, 177, 75, 0.22) !important;
  color: #fff !important;
}

/* Focus states */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(13,177,75, .25) !important;
}
.form-check-input:checked {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

/* Tabs and pagination */
.nav-tabs .nav-link.active {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) var(--brand-primary) #fff !important;
}
.pagination .page-item.active .page-link {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}
.pagination .page-link:focus { box-shadow: 0 0 0 .2rem rgba(13,177,75,.25) !important; } 

/* --- Unified tabs (no gaps under tabs) --- */
.nav-tabs { border-bottom: 1px solid #f1f5f9; }
.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 0.5rem 0.9rem;
}
.nav-tabs .nav-link:hover { border-color: #e5e7eb #e5e7eb #f1f5f9; }
.nav-tabs .nav-link.active {
  background-color: #fff;
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) var(--brand-primary) #fff !important;
}
/* When tabs are followed by tab content, remove the gap */
.nav-tabs + .tab-content {
  margin-top: -1px;
  border-top: 1px solid #f1f5f9;
  border-radius: 0 12px 12px 12px;
}
/* Tabs placed in card-header */
.card-header-tabs { margin-bottom: -1px; }

/* --- Button unification --- */
.btn { border-radius: 12px; }
.page-header .btn { border-width: 2px; }
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-dark,
.btn-outline-light { border-width: 2px; } 

/* Sidebar headings spacing for consistency */
.sidebar .sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
  padding: .5rem 1rem;
  margin-top: 1rem;
  color: #6c757d;
}

/* Version badge in navbar harmonized */
.version-badge .badge {
  background: #e0e0e0;
  color: #333;
  border: none;
  border-radius: 0.35em;
  font-size: 0.92em;
  font-weight: 500;
  padding: 0.18em 0.7em;
  margin-left: 0.18em;
  letter-spacing: 0.02em;
  vertical-align: middle;
  box-shadow: none;
}
.version-badge .badge:hover { background: #bdbdbd; color: #111; } 

/* Unified info banner (used on lists) */
.banner-info {
  background: #e8f7ef;
  border: 1px solid #ccefdc;
  color: #155b2e;
  border-radius: 12px;
  padding: 0.75rem 1rem;
}
.banner-info .fa-info-circle { opacity: 0.9; }