/* CTSGudang custom styles - professional look */

/* General */
html, body { height: 100%; }
/* Global font scale: tweak this value to adjust all sizes app-wide */
html { font-size: 13px; }
body { background-color: #f4f6f9; line-height: 1.35; }

.navbar.navbar-white { border-bottom: 1px solid #e5e7eb; }
.main-footer { border-top: 1px solid #e5e7eb; color:#6b7280; }

.card { border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.02); }
.card .card-header { border-bottom: 1px solid #eef2f7; background: #fff; }

.datatable { width:100% !important; }
.datatable thead th { white-space: nowrap; background: #fafafa; }
.datatable tbody td { vertical-align: middle; }

/* Buttons */
.btn { border-radius: 0.375rem; font-size: 0.875rem; }
.btn-primary, .btn-success { box-shadow: 0 1px 1px rgba(0,0,0,0.04); }

/* Forms */
.form-control { border-radius: 0.375rem; font-size: 0.875rem; }
.custom-select, .input-group-text { font-size: 0.875rem; }
.form-control:focus { box-shadow: 0 0 0 0.2rem rgba(59,130,246,0.15); }

/* Login page */
.login-page { background: #f3f4f6; }
.login-box { width: 380px; max-width: 92%; }

/* Logo customization */
.brand-link .brand-image {
  width: 180px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}

.brand-link {
  min-height: 60px !important;
  padding: 10px !important;
  border-bottom: none !important;
  background-color: #18230F !important;
}

/* Custom navbar dan sidebar background color */
.main-header.navbar {
  background-color: #18230F !important;
}

/* Header navbar text dan icon warna putih */
.main-header.navbar .nav-link,
.main-header.navbar .nav-link i,
.main-header.navbar .navbar-nav .nav-link {
  color: white !important;
}

.main-header.navbar .nav-link:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Hamburger menu button (3 garis) warna putih */
.main-header.navbar .nav-link[data-widget="pushmenu"] i {
  color: white !important;
}

.main-sidebar {
  background-color: #18230F !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link,
.sidebar-dark-primary .nav-sidebar .nav-treeview .nav-item > .nav-link {
  background-color: transparent !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover,
.sidebar-dark-primary .nav-sidebar .nav-treeview .nav-item > .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar .nav-treeview .nav-item > .nav-link.active {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.login-box .card { overflow: hidden; border-radius: 1.25rem; box-shadow: 0 10px 25px rgba(0,0,0,0.08); border: 1px solid #eef2f7; }
.login-brand { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.3px; color:#111827; }
.login-subtitle { font-size: 0.8rem; color:#94a3b8; letter-spacing: .18em; text-transform: uppercase; }
.login-logo-sm { width: 44px; height: 44px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); color:#fff; font-size: 1.1rem; }
.login-illustration { height: 140px; background: url('../img/login-illustration.svg') center/contain no-repeat; }

/* Narrow login form variant */
.login-form-narrow { max-width: 340px; margin: 0 auto; }
/* Use wrapper border so prepend/append look unified */
.login-form-narrow .input-group { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; }
.login-form-narrow .form-group .form-control { height: 40px; border-radius: 0; font-size: 0.85rem; border: 0; }
.login-form-narrow .input-group-text { height: 40px; border-radius: 0; font-size: 0.9rem; border: 0; background: transparent; color: #6b7280; }
.login-form-narrow .input-group-prepend .input-group-text { border-right: 1px solid #e5e7eb; }
.login-form-narrow .input-group-append .btn { height: 40px; border-radius: 0; border: 0; border-left: 1px solid #e5e7eb; background: transparent; color: #6b7280; }
.login-form-narrow .btn-primary { height: 44px; border-radius: 12px; font-size: 0.95rem; }

/* Utility */
.progress.d-none{ display:none; }
.img-thumb{ max-height:120px; border: 1px solid #e5e7eb; border-radius: 6px; }

/* Sidebar tweaks */
.main-sidebar { box-shadow: 2px 0 4px rgba(0,0,0,0.03); }
.nav-sidebar .nav-link { border-radius: 6px; font-size: 0.9rem; }
.brand-link .brand-text { font-size: 0.92rem; }
/* Subtle active highlight (no flashy color) */
.nav-sidebar .nav-item > .nav-link.active {
	background: rgba(255,255,255,0.08);
	color: #fff;
	box-shadow: inset 3px 0 0 #0ea5e9; /* thin left accent */
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
	background: rgba(255,255,255,0.06);
	color: #fff;
	box-shadow: inset 3px 0 0 #0ea5e9;
}

/* Dashboard typography tweaks (smaller, cleaner) */
.content-wrapper .small-box .inner h3 { font-size: 1.4rem; line-height: 1.2; }
.content-wrapper .small-box .inner p { font-size: 0.8rem; margin-bottom: 0; }
.content-wrapper .card .card-header { font-size: 0.9rem; font-weight: 600; }
.content-wrapper .card .card-body { font-size: 0.9rem; }
.content-wrapper .table { font-size: 0.85rem; }

/* Navbar */
.main-header .nav-link { font-size: 0.9rem; }

/* Headings smaller */
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }

/* DataTables UI smaller */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate .paginate_button { font-size: 0.85rem; }

/* KPI styles for dashboard asset section */
.kpi-number { font-weight: 700; font-size: 1.4rem; line-height: 1.2; }
.kpi-number.mb-0 { margin-bottom: 0; }
.kpi-currency { font-size: 0.9rem; opacity: .85; margin-right: 6px; }
.kpi-flex{display:flex;align-items:center;min-height:88px;position:relative}
.kpi-circle{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.kpi-circle span{font-size:1.25rem;line-height:1}
.kpi-side-icon{font-size:1.5rem;color:rgba(255,255,255,.9)}
.kpi-label-strong{color:#fff;font-weight:600}
/* Hide default big watermark icon in AdminLTE small-box */
.small-box>.icon{display:none}
.small-box{border-radius:14px !important; overflow:hidden}
.small-box .inner{border-radius:inherit}

/* Sidebar brand styling */
.brand-link.text-center { display:block; text-align:center; }
.brand-logo-icon { color:#17a2b8; margin-right:.35rem; font-size: .9rem; line-height: 1; vertical-align: -1px; }
.main-sidebar .brand-text { letter-spacing:.2px; }
.kpi-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.kpi-tile { padding: 10px; border-radius: .5rem; }

/* Equal height dashboard columns and chart sizing */
.equal-row { display: flex; }
.equal-row > [class^="col-"] { display: flex; }
.equal-row .card { display: flex; flex-direction: column; width: 100%; }
.inout-card .card-body, .asset-card .card-body { min-height: 240px; }
.inout-card .card-body canvas { height: 100% !important; }

/* Modals */
.modal-title { font-size: 1rem; }
.modal-body, .modal-footer { font-size: 0.9rem; }

/* Refine small-box icons */
.small-box .inner { padding-right: 56px; }
.small-box .icon { top: 10px; right: 12px; opacity: 0.16; }
.small-box .icon > i { font-size: 32px; line-height: 1; color: rgba(255,255,255,0.85); }
.small-box.bg-warning .icon > i { color: rgba(0,0,0,0.25); }

/* Sidebar icon colors */
.nav-sidebar .nav-link .nav-icon { opacity: 0.95; }
/* Child menu: slightly smaller icons and a bit more indent */
.nav-sidebar .nav-treeview .nav-link { padding-left: 2rem; }
.nav-sidebar .nav-treeview .nav-link .nav-icon { font-size: 0.9rem; margin-right: .5rem; opacity: 0.95; }
.nav-sidebar .nav-link .fa-tachometer-alt { color: #0ea5e9; } /* Dashboard */
.nav-sidebar .nav-link .fa-box { color: #f59e0b; } /* Master Data */
.nav-sidebar .nav-treeview .nav-icon.fa-box-open { color: #f59e0b; } /* Master > Barang */
.nav-sidebar .nav-treeview .nav-icon.fa-truck { color: #fb7185; }     /* Master > Supplier */
.nav-sidebar .nav-treeview .nav-icon.fa-ruler { color: #60a5fa; }     /* Master > Satuan */
.nav-sidebar .nav-treeview .nav-icon.fa-building { color: #34d399; }  /* Master > Unit */
.nav-sidebar .nav-link .fa-exchange-alt { color: #10b981; } /* Transaksi */
.nav-sidebar .nav-treeview .nav-icon.fa-arrow-down { color: #10b981; } /* Masuk */
.nav-sidebar .nav-treeview .nav-icon.fa-arrow-up { color: #ef4444; }   /* Keluar */
.nav-sidebar .nav-treeview .nav-icon.fa-undo { color: #a855f7; }       /* Return */
.nav-sidebar .nav-treeview .nav-icon.fa-percent { color: #f59e0b; }   /* Penyusutan */
.nav-sidebar .nav-link .fa-tags { color: #8b5cf6; } /* Asset */
.nav-sidebar .nav-link .fa-file-alt { color: #ef4444; } /* Laporan */
.nav-sidebar .nav-treeview .nav-icon.fa-boxes { color: #0ea5e9; } /* Laporan Stok */
.nav-sidebar .nav-link .fa-users { color: #06b6d4; } /* User */
.nav-sidebar .nav-link .fa-clipboard-list { color: #f97316; } /* Log */
/* Keep colors when active */
.nav-sidebar .nav-link.active .nav-icon { opacity: 1; }

/* --- Login page extras to match reference design --- */
.login-box .form-group .form-control { height: 40px; border-radius: 10px; border-color:#e5e7eb; }
.login-box .input-group-text { height: 40px; border-radius: 10px; border-color:#e5e7eb; }
.login-box .input-group>.form-control:not(:first-child) { border-left: 0; }
.login-box .btn-primary { height: 44px; border-radius: 12px; font-weight: 600; letter-spacing: .02em; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border: none; box-shadow: 0 6px 14px rgba(37,99,235,.22); }
.login-box .btn-primary:active { transform: translateY(0.5px); }
.login-box .btn-primary i { opacity: .95; }
/* Smaller heading in login */
.login-box h1.h5 { font-size: 0.95rem; }
/* Match toggle button to field height */
.login-box .input-group-append .btn { height: 40px; border-radius: 10px; }

/* Select2 customization untuk konsistensi dengan Bootstrap */
.select2-container--bootstrap4 .select2-selection--single {
  height: calc(1.5em + 0.75rem + 2px) !important;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ced4da;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  color: #495057;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
  color: #6c757d;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection--single {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.select2-dropdown {
  border: 1px solid #ced4da;
  border-top: none;
}

.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
  background-color: #007bff;
  color: white;
}