/* =====================================================================
   SI Ayodha - Tema aplikasi
   Warna mengikuti brand Ayodha Farm (hijau) sesuai PRD bagian 13.
   ===================================================================== */

:root {
  --ayodha-green:       #2E7D32;
  --ayodha-green-light: #43A047;
  --ayodha-green-dark:  #1B5E20;
  --ayodha-mint:        #A5D6A7;
  --ayodha-accent:      #FF9800;
  --sidebar-width:      248px;
  --topbar-height:      56px;

  --bs-primary:      #2E7D32;
  --bs-primary-rgb:  46, 125, 50;
  --bs-link-color:   #2E7D32;
  --bs-link-hover-color: #1B5E20;
  --bs-body-bg:      #f4f6f5;
  --bs-body-color:   #303b35;
}

body {
  background: var(--bs-body-bg);
  font-size: .9rem;
}

/* --- Tombol & warna utama ------------------------------------------ */
.btn-primary {
  --bs-btn-bg: var(--ayodha-green);
  --bs-btn-border-color: var(--ayodha-green);
  --bs-btn-hover-bg: var(--ayodha-green-dark);
  --bs-btn-hover-border-color: var(--ayodha-green-dark);
  --bs-btn-active-bg: var(--ayodha-green-dark);
  --bs-btn-active-border-color: var(--ayodha-green-dark);
  --bs-btn-disabled-bg: var(--ayodha-green);
  --bs-btn-disabled-border-color: var(--ayodha-green);
}
.btn-outline-primary {
  --bs-btn-color: var(--ayodha-green);
  --bs-btn-border-color: var(--ayodha-green);
  --bs-btn-hover-bg: var(--ayodha-green);
  --bs-btn-hover-border-color: var(--ayodha-green);
  --bs-btn-active-bg: var(--ayodha-green);
  --bs-btn-active-border-color: var(--ayodha-green);
}
.text-primary { color: var(--ayodha-green) !important; }
.bg-primary   { background-color: var(--ayodha-green) !important; }
a { text-decoration: none; }
.form-control:focus, .form-select:focus {
  border-color: var(--ayodha-mint);
  box-shadow: 0 0 0 .2rem rgba(46, 125, 50, .15);
}

/* --- Top navigation ------------------------------------------------- */
.topbar {
  height: var(--topbar-height);
  background: linear-gradient(90deg, var(--ayodha-green-dark), var(--ayodha-green));
  box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
  z-index: 1030;
}
.topbar .navbar-brand { color: #fff; }
.brand-mark {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: #fff; color: var(--ayodha-green);
  font-weight: 800; font-size: 1.1rem;
}
.brand-mark-lg { width: 62px; height: 62px; font-size: 2rem; border-radius: 16px; }

/* Logo perusahaan pada top navigation (menggantikan inisial) */
.brand-logo {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border-radius: 10px;
  padding: 3px;
  overflow: hidden;
}
.brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.avatar {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2); color: #fff; font-weight: 700;
}

/* --- Layout & sidebar ---------------------------------------------- */
.layout { display: flex; min-height: calc(100vh - var(--topbar-height)); }

.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  background: #fff;
  border-right: 1px solid #e4e8e5;
  position: sticky;
  top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
  overflow-y: auto;
  padding: .75rem 0;
  display: flex; flex-direction: column;
}
.sidebar .nav-link {
  color: #4a5750;
  padding: .5rem 1rem;
  display: flex; align-items: center; gap: .6rem;
  border-radius: 0 22px 22px 0;
  margin-right: .6rem;
  font-size: .875rem;
}
.sidebar .nav-link:hover { background: #eef4ef; color: var(--ayodha-green-dark); }
.sidebar .nav-link.active {
  background: var(--ayodha-green);
  color: #fff;
  font-weight: 600;
}
.sidebar .nav-link i.bi:first-child { width: 18px; text-align: center; }
.sidebar .nav-parent[aria-expanded="true"] i.bi-chevron-down,
.sidebar .nav-parent:not(.collapsed) i.bi-chevron-down { transform: rotate(180deg); }
.sidebar .nav-parent i.bi-chevron-down { transition: transform .2s; }
.sidebar .submenu .nav-link {
  padding-left: 2.6rem;
  font-size: .84rem;
}
.sidebar .submenu .nav-link.active { background: #e8f3e9; color: var(--ayodha-green-dark); }
.sidebar-footer { margin-top: auto; border-top: 1px solid #eef0ee; }
.sidebar-backdrop { display: none; }

.content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1rem 1.25rem;
}

/* --- Kartu & tabel -------------------------------------------------- */
.card {
  border: 1px solid #e6eae7;
  border-radius: .6rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.card-footer, .card-header { background: #fafbfa; }
.table > thead th {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6b7a71;
  font-weight: 600;
  background: #fafbfa;
  border-bottom: 1px solid #e6eae7;
  white-space: nowrap;
}
.table > tbody td { vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: #f2f8f3; }

/* --- KPI Card ------------------------------------------------------- */
.kpi-card {
  border-radius: .7rem;
  border: 1px solid #e6eae7;
  background: #fff;
  padding: .95rem 1rem;
  height: 100%;
  display: flex; gap: .85rem; align-items: flex-start;
}
.kpi-icon {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: .6rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.kpi-label { font-size: .74rem; color: #7a8a80; text-transform: uppercase; letter-spacing: .03em; }
.kpi-value { font-size: 1.22rem; font-weight: 700; line-height: 1.25; color: #24312a; }
.kpi-sub   { font-size: .74rem; color: #8b9992; }

/* --- Halaman login -------------------------------------------------- */
.login-page {
  background: linear-gradient(135deg, var(--ayodha-green-dark) 0%, var(--ayodha-green) 55%, #66A96B 100%);
  min-height: 100vh;
}

/* Logo perusahaan pada halaman login (assets/img/logo.*) */
.login-logo {
  width: 156px; height: 156px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border-radius: 28px;
  padding: 10px;
  overflow: hidden;                       /* aman untuk logo persegi maupun transparan */
  box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
}
.login-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
@media (max-width: 575.98px) {
  .login-logo { width: 124px; height: 124px; border-radius: 22px; padding: 8px; }
}

/* --- Editor item transaksi ------------------------------------------ */
.items-table input, .items-table select { min-width: 70px; }
.items-table tfoot td { background: #fafbfa; }

/* --- Timeline status dokumen ---------------------------------------- */
.doc-flow { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .78rem; }
.doc-flow .step {
  padding: .18rem .6rem; border-radius: 999px;
  background: #eef0ee; color: #7b8a81; border: 1px solid #e2e6e3;
}
.doc-flow .step.done   { background: #e8f3e9; color: var(--ayodha-green-dark); border-color: #cfe6d2; }
.doc-flow .step.active { background: var(--ayodha-green); color: #fff; border-color: var(--ayodha-green); }

/* --- Responsif ------------------------------------------------------ */
@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    top: var(--topbar-height); left: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1035;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
  }
  .sidebar.show { transform: translateX(0); }
  .sidebar-backdrop.show {
    display: block; position: fixed; inset: var(--topbar-height) 0 0 0;
    background: rgba(0, 0, 0, .35); z-index: 1034;
  }
  .content { padding: .85rem; }
}

@media print {
  .topbar, .sidebar, .breadcrumb, footer, .btn, .alert-dismissible .btn-close { display: none !important; }
  .content { padding: 0; }
}

/* =====================================================================
   Hormati pengaturan "kurangi gerakan" pada sistem operasi pengguna.
   Sebagian orang merasa pusing atau mual oleh animasi antarmuka; pada
   macOS, Windows, dan Android ada saklar untuk mematikannya. Tanpa blok
   ini, saklar tersebut tidak berpengaruh apa pun di aplikasi ini.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}