/* =============================================================================
   FarmERP Design System v2 — Visual Enhancement Layer
   Loaded AFTER farmerp.css + app-fixes.css to refine appearance only.
   Does NOT redefine layout (grid, sidebar position, flexbox shell).
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* --- DESIGN TOKENS (supplement existing --fp-* vars) --- */
:root {
  --fe-font: 'DM Sans', 'IBM Plex Sans', system-ui, sans-serif;
  --fe-font-display: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  --fe-green-50: #f0fdf4;
  --fe-green-100: #dcfce7;
  --fe-green-500: #22c55e;
  --fe-green-600: #16a34a;
  --fe-green-700: #15803d;
  --fe-green-800: #166534;
  --fe-slate-50: #f8fafc;
  --fe-slate-100: #f1f5f9;
  --fe-slate-200: #e2e8f0;
  --fe-slate-300: #cbd5e1;
  --fe-slate-400: #94a3b8;
  --fe-slate-500: #64748b;
  --fe-slate-700: #334155;
  --fe-slate-900: #0f172a;
  --fe-radius: 12px;
  --fe-radius-sm: 8px;
  --fe-radius-lg: 16px;
  --fe-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --fe-shadow-hover: 0 8px 20px rgba(15,23,42,.09), 0 2px 6px rgba(15,23,42,.04);
  --fe-transition: 200ms cubic-bezier(.4,0,.2,1);
}

/* --- TYPOGRAPHY --- */
body.fp-app {
  font-family: var(--fe-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--fe-font-display) !important;
  letter-spacing: -0.025em;
}

/* --- BACKGROUND REFINEMENT --- */
body.fp-app {
  background-color: #f6faf7 !important;
  background-image:
    radial-gradient(ellipse 60% 40% at 10% 0%, rgba(34,197,94,.06), transparent 55%),
    radial-gradient(ellipse 40% 35% at 90% 100%, rgba(217,119,6,.04), transparent 50%) !important;
}

/* --- BUTTONS --- */
.btn {
  font-family: var(--fe-font) !important;
  font-weight: 600 !important;
  border-radius: var(--fe-radius-sm) !important;
  transition: all var(--fe-transition) !important;
  font-size: .82rem !important;
  letter-spacing: .01em;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary, .btn-success {
  background: var(--fe-green-700) !important;
  border-color: var(--fe-green-700) !important;
  box-shadow: 0 2px 6px rgba(21,128,61,.2) !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus {
  background: var(--fe-green-800) !important;
  border-color: var(--fe-green-800) !important;
  box-shadow: 0 4px 12px rgba(21,128,61,.25) !important;
}
.btn-outline-primary, .btn-outline-success {
  color: var(--fe-green-700) !important;
  border-color: #86efac !important;
}
.btn-outline-primary:hover, .btn-outline-success:hover {
  background: var(--fe-green-700) !important;
  border-color: var(--fe-green-700) !important;
  color: #fff !important;
}
.btn-danger { background: #dc2626 !important; border-color: #dc2626 !important; }
.btn-outline-danger { color: #dc2626 !important; border-color: #fecaca !important; }
.btn-outline-danger:hover { background: #dc2626 !important; color: #fff !important; border-color: #dc2626 !important; }
.btn-sm { font-size: .74rem !important; padding: .35rem .65rem !important; }

/* --- FORM CONTROLS --- */
.form-label {
  font-size: .78rem !important;
  font-weight: 700 !important;
  color: var(--fe-slate-700) !important;
  letter-spacing: .01em;
}
.form-control, .form-select, .ts-control {
  border-radius: var(--fe-radius-sm) !important;
  border-color: var(--fe-slate-300) !important;
  font-size: .86rem !important;
  padding: .55rem .75rem !important;
  min-height: 42px;
  transition: border-color var(--fe-transition), box-shadow var(--fe-transition) !important;
}
.form-control:focus, .form-select:focus, .ts-control.focus {
  border-color: var(--fe-green-600) !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,.12) !important;
}
.form-control::placeholder { color: var(--fe-slate-400) !important; }
.input-group-text {
  background: var(--fe-slate-50) !important;
  border-color: var(--fe-slate-300) !important;
  color: var(--fe-slate-500) !important;
}
.form-check-input:checked {
  background-color: var(--fe-green-700) !important;
  border-color: var(--fe-green-700) !important;
}

/* --- CARDS & SURFACES --- */
.content-card, .card, .dashboard-card, .dashboard-card-full {
  border-color: var(--fe-slate-200) !important;
  border-radius: var(--fe-radius-lg) !important;
  box-shadow: var(--fe-shadow) !important;
  transition: box-shadow var(--fe-transition), border-color var(--fe-transition) !important;
}
.content-card::before { display: none !important; }
.content-card:hover, .card:hover {
  transform: none !important;
  box-shadow: var(--fe-shadow) !important;
}

/* --- TOPBAR / NAVBAR --- */
.fp-topbar, .app-navbar {
  border-color: var(--fe-slate-200) !important;
  border-radius: var(--fe-radius-lg) !important;
  box-shadow: var(--fe-shadow) !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
}
.fp-shell-title, .app-navbar-title {
  font-family: var(--fe-font-display) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}
.fp-shell-tag, .fp-chip {
  background: var(--fe-green-50) !important;
  border: 1px solid #bbf7d0 !important;
  color: var(--fe-green-800) !important;
  border-radius: 999px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  padding: .3rem .6rem !important;
}

/* --- SIDEBAR REFINEMENTS --- */
.fp-sidebar, .app-sidebar {
  background: var(--fe-slate-900) !important;
  background-image: radial-gradient(ellipse 70% 35% at 50% 0%, rgba(34,197,94,.08), transparent 55%) !important;
  border-right-color: rgba(255,255,255,.06) !important;
}
.sidebar-brand-panel {
  border-bottom-color: rgba(255,255,255,.08) !important;
}
.brand-mark {
  background: linear-gradient(135deg, #15803d, #22c55e) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(21,128,61,.4) !important;
}
.brand-label {
  font-family: var(--fe-font-display) !important;
  font-weight: 800 !important;
  font-size: .92rem !important;
}
.sidebar-link {
  border-radius: 10px !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  transition: all var(--fe-transition) !important;
  min-height: 40px !important;
  border: 1px solid transparent !important;
}
.sidebar-link:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.08) !important;
  transform: translateX(2px) !important;
}
.sidebar-link.active {
  background: rgba(34,197,94,.12) !important;
  border-color: rgba(34,197,94,.2) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.sidebar-link.active .bi { color: #4ade80 !important; }
.sidebar-link:hover .bi { color: #4ade80 !important; }
.sidebar-section-title {
  font-size: .64rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  color: rgba(255,255,255,.38) !important;
}
.sidebar-section-title::after { display: none !important; }
.sidebar-footer {
  border-top-color: rgba(255,255,255,.08) !important;
}
.sidebar-identity {
  background: rgba(255,255,255,.04) !important;
  border-radius: 10px !important;
}

/* --- TABLES --- */
.table-responsive {
  border: 1px solid var(--fe-slate-200) !important;
  border-radius: var(--fe-radius) !important;
  overflow: hidden;
}
.table {
  font-size: .82rem !important;
  --bs-table-hover-bg: var(--fe-green-50) !important;
}
.table thead th {
  background: var(--fe-slate-50) !important;
  color: var(--fe-slate-500) !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--fe-slate-200) !important;
  padding: .8rem .9rem !important;
  white-space: nowrap;
}
.table tbody td {
  padding: .8rem .9rem !important;
  border-color: var(--fe-slate-200) !important;
  vertical-align: middle !important;
}
.table tbody tr {
  transition: background var(--fe-transition) !important;
}
.table-hover > tbody > tr:hover > * {
  background: var(--fe-green-50) !important;
}

/* --- BADGES --- */
.badge {
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  padding: .3rem .55rem !important;
  border-radius: 999px !important;
}
.badge.bg-success, .fp-badge.success { background: var(--fe-green-100) !important; color: var(--fe-green-800) !important; }
.badge.bg-warning, .fp-badge.warning { background: #fef3c7 !important; color: #92400e !important; }
.badge.bg-danger, .fp-badge.danger { background: #fee2e2 !important; color: #b91c1c !important; }
.badge.bg-info, .fp-badge.info { background: #cffafe !important; color: #0e7490 !important; }
.badge.bg-secondary { background: var(--fe-slate-100) !important; color: var(--fe-slate-700) !important; }

/* --- METRIC CARDS --- */
.metrics-card, .dashboard-metric, .dashboard-metric-card {
  border-color: var(--fe-slate-200) !important;
  border-radius: var(--fe-radius-lg) !important;
  box-shadow: var(--fe-shadow) !important;
  transition: all var(--fe-transition) !important;
}
.metrics-card:hover, .dashboard-metric:hover, .dashboard-metric-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--fe-shadow-hover) !important;
  border-color: #bbf7d0 !important;
}
.metrics-card-value, .metric-value {
  font-family: var(--fe-font-display) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}
.metrics-card-label, .metric-label {
  font-size: .74rem !important;
  font-weight: 600 !important;
  color: var(--fe-slate-500) !important;
}
.metrics-card-icon, .metric-icon {
  border-radius: var(--fe-radius) !important;
}

/* --- MODULE HEADER --- */
.module-header {
  border-bottom-color: var(--fe-slate-200) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 1.25rem !important;
}
.module-header h2, .module-header .h5 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* --- ALERTS / FLASH --- */
.fp-flash-stack .alert, .alert {
  border-radius: var(--fe-radius) !important;
  font-size: .84rem !important;
  box-shadow: var(--fe-shadow) !important;
}
.alert-success { background: var(--fe-green-50) !important; border-color: #bbf7d0 !important; color: var(--fe-green-800) !important; }
.alert-danger { background: #fef2f2 !important; border-color: #fecaca !important; color: #b91c1c !important; }
.alert-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; }
.alert-info { background: #ecfeff !important; border-color: #a5f3fc !important; color: #155e75 !important; }

/* --- MODAL --- */
.modal-content {
  border-radius: var(--fe-radius-lg) !important;
  border-color: var(--fe-slate-200) !important;
  box-shadow: 0 20px 50px rgba(15,23,42,.15) !important;
}
.modal-header { border-bottom-color: var(--fe-slate-200) !important; }
.modal-footer { border-top-color: var(--fe-slate-200) !important; }

/* --- PAGINATION --- */
.page-link {
  border-radius: var(--fe-radius-sm) !important;
  font-size: .76rem !important;
  font-weight: 600 !important;
  border-color: var(--fe-slate-200) !important;
  transition: all var(--fe-transition) !important;
}
.page-link:hover { background: var(--fe-green-50) !important; color: var(--fe-green-700) !important; border-color: #bbf7d0 !important; }
.page-item.active .page-link { background: var(--fe-green-700) !important; border-color: var(--fe-green-700) !important; color: #fff !important; }

/* --- DROPDOWN --- */
.dropdown-menu {
  border-color: var(--fe-slate-200) !important;
  border-radius: var(--fe-radius) !important;
  box-shadow: 0 12px 32px rgba(15,23,42,.12) !important;
  padding: .4rem !important;
}
.dropdown-item {
  border-radius: var(--fe-radius-sm) !important;
  font-size: .84rem !important;
  padding: .5rem .7rem !important;
  transition: background var(--fe-transition) !important;
}
.dropdown-item:hover { background: var(--fe-green-50) !important; }
.dropdown-item:active, .dropdown-item.active { background: var(--fe-green-700) !important; color: #fff !important; }

/* --- BREADCRUMB --- */
.breadcrumb { font-size: .74rem !important; }
.breadcrumb-item.active { color: var(--fe-slate-700) !important; font-weight: 500 !important; }

/* --- SEARCH INPUT (topbar global search) --- */
.global-search-wrapper .input-group {
  border: 1px solid var(--fe-slate-200) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.global-search-wrapper .input-group:focus-within {
  border-color: var(--fe-green-600) !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,.1) !important;
}

/* --- SIDEBAR USER (new partial) --- */
.fe-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .6rem .75rem;
  margin: .5rem .75rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
}
.fe-sidebar-user-avatar {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #15803d, #4ade80);
  display: flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 800; color: white; flex-shrink: 0;
}
.fe-sidebar-user-name { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.9); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-sidebar-user-role { font-size: .64rem; color: rgba(255,255,255,.4); text-transform: capitalize; }
.fe-sidebar-user-dot { width: 7px; height: 7px; border-radius: 999px; background: #4ade80; flex-shrink: 0; margin-left: auto; box-shadow: 0 0 0 2px rgba(74,222,128,.25); animation: fe-pulse 2.5s ease-in-out infinite; }
@keyframes fe-pulse { 0%,100%{box-shadow:0 0 0 2px rgba(74,222,128,.25)} 50%{box-shadow:0 0 0 5px rgba(74,222,128,.1)} }

/* --- TABLE CARD (new partial) --- */
.fe-table-card { background: #fff; border: 1px solid var(--fe-slate-200); border-radius: var(--fe-radius-lg); box-shadow: var(--fe-shadow); overflow: hidden; }
.fe-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-bottom: 1px solid var(--fe-slate-200); }
.fe-table-search { position: relative; flex: 1; max-width: 340px; }
.fe-table-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: .85rem; color: var(--fe-slate-400); pointer-events: none; }
.fe-table-search-input { width: 100%; min-height: 38px; padding: .45rem .7rem .45rem 2.1rem; border: 1px solid var(--fe-slate-300); border-radius: var(--fe-radius-sm); font-size: .82rem; background: var(--fe-slate-50); color: var(--fe-slate-900); transition: border-color var(--fe-transition), box-shadow var(--fe-transition); outline: none; }
.fe-table-search-input:focus { border-color: var(--fe-green-600); box-shadow: 0 0 0 3px rgba(22,163,74,.1); background: #fff; }
.fe-table-search-input::placeholder { color: var(--fe-slate-400); }
.fe-table-toolbar-actions { display: flex; align-items: center; gap: .5rem; }
.fe-table-count { font-size: .7rem; font-weight: 700; color: var(--fe-slate-500); background: var(--fe-slate-50); border: 1px solid var(--fe-slate-200); border-radius: 999px; padding: .25rem .55rem; }
.fe-table-empty { text-align: center; padding: 3rem 1rem !important; }
.fe-table-empty-inner { display: flex; flex-direction: column; align-items: center; gap: .25rem; color: var(--fe-slate-400); }

/* --- FORM CARD (new partial) --- */
.fe-form-card { background: #fff; border: 1px solid var(--fe-slate-200); border-radius: var(--fe-radius-lg); box-shadow: var(--fe-shadow); overflow: hidden; }
.fe-form-card-header { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--fe-slate-200); background: var(--fe-slate-50); }
.fe-form-card-title { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--fe-slate-900); font-family: var(--fe-font-display); }
.fe-form-card-body { padding: 1.5rem 1.25rem; }
.fe-form-card-actions { display: flex; align-items: center; gap: .6rem; padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--fe-slate-200); }

/* --- FOCUS RING --- */
:focus-visible { outline: 2px solid var(--fe-green-600) !important; outline-offset: 2px !important; }

/* --- SMOOTH PAGE REVEAL ---
   IMPORTANT: the keyframe must end on `transform: none`, NOT `translateY(0)`.
   Any non-"none" transform value (even an identity translateY(0)) permanently
   creates a new CSS stacking context on the element for as long as the
   computed style holds it. Because .app-navbar/.fp-topbar carry this class
   and contain a Bootstrap dropdown, that stacking context trapped the
   dropdown menu's z-index inside the navbar, so the sibling .content-card
   (painted later in DOM order) rendered on top of the dropdown and hid the
   "Ubah Password" / "Keluar" menu items. Ending on `none` removes the
   lingering stacking context once the animation completes (fill-mode both)
   while keeping the exact same visual motion. */
.fp-reveal { animation: fe-fadeUp .3s ease both; }
@keyframes fe-fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- DROPDOWN STACKING SAFETY NET ---
   Belt-and-suspenders fix so the profile dropdown (Ubah Password / Keluar)
   and any other Bootstrap dropdown always render above page content,
   regardless of any ancestor animation/transform. */
.dropdown-menu.show {
  z-index: 1055 !important;
}
.app-navbar,
.fp-topbar {
  position: relative;
  z-index: 30;
}

/* --- SIDEBAR: keep "Keluar" (logout) button always visible ---
   Previously the whole <aside class="fp-sidebar"> scrolled as one block
   (overflow-y: auto on the entire sidebar), while .sidebar-footer used
   margin-top:auto to stick to the bottom. When the nav menu is taller than
   the viewport (e.g. Owner role with many menu groups), the footer was
   pushed below the visible area and the Keluar button was cut off /
   required manual scrolling to reach.
   Fix: make the sidebar a fixed-height flex column where only the middle
   .sidebar-scroll-area scrolls; the brand panel, user card, and footer
   (with the Keluar button) always stay fully visible. */
.fp-sidebar,
.app-sidebar {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; /* the aside itself no longer scrolls */
}
.fp-sidebar > .sidebar-brand-panel,
.fp-sidebar > .fe-sidebar-user,
.fp-sidebar > .sidebar-divider,
.fp-sidebar > .sidebar-footer,
.app-sidebar > .sidebar-brand-panel,
.app-sidebar > .fe-sidebar-user,
.app-sidebar > .sidebar-divider,
.app-sidebar > .sidebar-footer {
  flex-shrink: 0;
}
.sidebar-scroll-area {
  flex: 1 1 auto;
  min-height: 0; /* required for the flex child to actually shrink and scroll */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
.sidebar-scroll-area::-webkit-scrollbar { width: 4px; }
.sidebar-scroll-area::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
.fp-sidebar .sidebar-footer,
.app-sidebar .sidebar-footer {
  margin-top: 0 !important; /* no longer needed: flex layout keeps it pinned */
}

/* --- RESPONSIVE (additive only) --- */
@media (max-width: 767.98px) {
  .global-search-wrapper { display: none !important; }
  .module-header { flex-direction: column !important; }
  .action-group { justify-content: flex-start !important; width: 100%; }
  .metrics-card-value, .metric-value { font-size: 1.3rem !important; }
}

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