/* --- RESET & CẤU TRÚC CHUNG --- */
* {box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
body {background-color: #f4f6f9; color: #333; height: 100vh; overflow: hidden;}
.app-layout-top {display: flex; flex-direction: column; height: 100vh; width: 100vw; overflow: hidden;}

/* --- TOPBAR & NAVIGATION --- */
.app-topbar-row1 {height: 55px; background-color: #fff; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-shrink: 0;}
.topbar-left .logo {font-size: 1.15rem; font-weight: bold; color: #1b2a47; display: flex; align-items: center; gap: 8px; white-space: nowrap;}
.topbar-left .logo span {font-size: 0.85rem; font-weight: normal; color: #666; margin-left: 5px;}
.topbar-search {flex-grow: 1; max-width: 450px; margin: 0 40px; position: relative;}
.topbar-search input {width: 100%; padding: 7px 15px 7px 35px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 0.9rem; outline: none; background: #f8fafc;}
.topbar-search::before {content: '🔍'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 0.85rem; color: #a0aec0;}
.topbar-right {display: flex; align-items: center; gap: 20px;}
.topbar-info {display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: #4a5568; white-space: nowrap;}
.user-dropdown {display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: #2d3748; font-size: 0.9rem; white-space: nowrap;}

.app-topbar-row2 {height: 48px; background-color: #fff; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; padding: 0 20px; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.02); position: relative; z-index: 1000; overflow: visible;}
.top-nav ul {list-style: none; display: flex; align-items: center; gap: 4px;}
.top-nav ul li {position: relative; white-space: nowrap;}
.top-nav ul li > a {display: flex; align-items: center; gap: 6px; padding: 6px 12px; color: #4a5568; text-decoration: none; font-size: 0.9rem; font-weight: 600; border-radius: 6px; transition: all 0.2s; background: transparent;}
.top-nav ul li > a:hover, .top-nav ul li.active > a {color: #fff; background-color: #28a745;}
.top-nav .sub-menu {display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 6px; padding: 6px 0; list-style: none; border: 1px solid #e2e8f0; z-index: 1100; margin-top: 0;}
.top-nav .sub-menu li {width: 100%;}
.top-nav .sub-menu li a {display: block; padding: 8px 16px; color: #2d3748; text-decoration: none; font-size: 0.9rem; font-weight: normal; border-radius: 0; background: transparent !important;}
.top-nav .sub-menu li a:hover {background-color: #f0f4f0 !important; color: #28a745;}
.top-nav li.dropdown:hover .sub-menu {display: block;}

/* --- CONTENT & STATUSBAR --- */
.app-content-wrapper {flex-grow: 1; display: flex; flex-direction: column; height: calc(100vh - 103px); overflow: hidden;}
.app-content {flex-grow: 1; overflow-y: auto; padding: 20px; background-color: #f4f6f9;}
.app-statusbar {height: 35px; background-color: #fff; border-top: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 0.85rem; color: #718096; flex-shrink: 0; overflow-x: auto; white-space: nowrap; gap: 15px;}
.status-item {display: flex; align-items: center; gap: 6px;}

/* --- DASHBOARD & CARDS --- */
.dash-grid {display: grid; grid-template-columns: 1fr 300px; gap: 20px;}
.dash-left {display: flex; flex-direction: column; gap: 20px;}
.dash-right {display: flex; flex-direction: column; gap: 20px;}
.welcome-banner {background: #fff; border-radius: 8px; padding: 20px 25px; border: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;}
.welcome-text h2 {font-size: 1.3rem; color: #1a202c; margin-bottom: 4px;}
.welcome-text p {font-size: 0.9rem; color: #718096;}
.store-badge {background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px 15px; display: flex; align-items: center; gap: 10px;}
.store-badge i {font-size: 1.5rem; color: #28a745;}

.kpi-row {display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;}
.kpi-card {background: #fff; border-radius: 8px; padding: 14px 12px; border: 1px solid #e2e8f0; position: relative;}
.kpi-card .kpi-header {display: flex; justify-content: space-between; align-items: center; color: #718096; font-size: 0.8rem; margin-bottom: 8px;}
.kpi-card .kpi-val {font-size: 1.15rem; font-weight: bold; color: #1a202c; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.kpi-card .kpi-trend {font-size: 0.75rem; color: #28a745; font-weight: 600; display: flex; align-items: center; gap: 3px;}

.card-box {background: #fff; border-radius: 8px; padding: 20px; border: 1px solid #e2e8f0;}
.card-box-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px;}
.card-box-title {font-size: 1.05rem; font-weight: bold; color: #2d3748; display: flex; align-items: center; gap: 15px; flex-wrap: wrap;}
.card-box-title .total-val {font-size: 1rem; color: #0072f0; background: #eef4ff; padding: 4px 10px; border-radius: 4px; font-weight: bold;}

.styled-select {padding: 6px 12px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 0.9rem; background: #fff; color: #2d3748; cursor: pointer; outline: none;}
.styled-select:hover {border-color: #a0aec0;}

.chart-tabs {display: flex; gap: 20px; border-bottom: 1px solid #e2e8f0; margin-bottom: 15px; overflow-x: auto;}
.chart-tab {padding-bottom: 8px; font-weight: 600; color: #718096; cursor: pointer; position: relative; font-size: 0.95rem; white-space: nowrap;}
.chart-tab.active {color: #0072f0;}
.chart-tab.active::after {content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: #0072f0;}

.tables-row {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.data-table {width: 100%; border-collapse: collapse; font-size: 0.9rem;}
.data-table th {background-color: #EBF3FF; color: #1e1e1e; font-weight: bold; text-align: left; padding: 12px 14px; border-bottom: 1px solid #e2e8f0;}
.data-table td {padding: 12px 14px; border-bottom: 1px solid #edf2f7; color: #2d3748;}

.badge-status {background: #e6fffa; color: #319795; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; display: inline-block;}
.badge-status.pending {background: #feebc8; color: #c05621;}

/* --- QUICK ACTIONS & NOTIFICATIONS --- */
.quick-actions-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;}
.action-btn {background: #0072f0; color: #fff; border: none; border-radius: 8px; padding: 15px 10px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9rem; transition: opacity 0.2s; text-decoration: none;}
.action-btn:hover {opacity: 0.9; color: #fff;}
.action-btn.btn-green {background: #28a745;}
.action-btn.btn-orange {background: #ff9800;}
.action-btn.btn-purple {background: #673ab7;}
.action-btn.btn-teal {background: #009688;}
.action-btn.btn-blue {background: #2196f3;}
.action-btn small {font-size: 0.75rem; font-weight: normal; opacity: 0.9;}

.notif-list {display: flex; flex-direction: column; gap: 12px;}
.notif-item {display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid #edf2f7; gap: 10px;}
.notif-content strong {display: block; font-size: 0.9rem; color: #2d3748; margin-bottom: 2px;}
.notif-content span {font-size: 0.85rem; color: #718096;}
.notif-time {font-size: 0.75rem; color: #a0aec0; white-space: nowrap;}

/* --- MOBILE NAVIGATION --- */
.mobile-bottom-nav {display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 55px; background: #fff; border-top: 1px solid #e2e8f0; z-index: 2000; justify-content: space-around; align-items: center; box-shadow: 0 -2px 6px rgba(0,0,0,0.06);}
.mobile-nav-item {display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #718096; font-size: 0.75rem; gap: 2px;}
.mobile-nav-item span {font-size: 1.15rem;}
.mobile-nav-item.active {color: #28a745; font-weight: 600;}

/* --- PRODUCT LAYOUT & FILTERS --- */
.product-layout {display: grid; grid-template-columns: 285px 1fr; gap: 20px; align-items: start;}
.filter-sidebar {background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px;}
.filter-main-title {font-size: 1.25rem; font-weight: bold; color: #1a202c; margin-bottom: 12px;}
.filter-group-title {font-size: 0.95rem; font-weight: bold; color: #2d3748; margin-top: 15px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center;}
.filter-group-title .action-link {font-size: 0.85rem; font-weight: normal; color: #339933; text-decoration: none;}
.filter-control-wrap {background: #ffffff; border: 1px solid #DCE0E6; border-radius: 6px; padding: 6px 10px; position: relative; margin-bottom: 10px;}
.filter-sub-label {display: block; font-size: 0.75rem; color: #a0aec0; margin-bottom: 2px;}
.styled-select-full {width: 100%; border: none; background: transparent; font-size: 0.95rem; color: #2d3748; outline: none; cursor: pointer;}
.time-box {display: flex; flex-direction: column; gap: 6px; padding: 4px;}
.btn-time-preset {background: #ffffff; border: 1px solid #DCE0E6; border-radius: 4px; padding: 6px 10px; text-align: left; font-size: 0.9rem; color: #4a5568; cursor: pointer;}

.main-content-area {display: flex; flex-direction: column; gap: 15px;}
.top-actions-bar {background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; gap: 15px;}
.search-box-wrapper {flex-grow: 1; max-width: 600px; background: #ffffff; border: 1px solid #DCE0E6; border-radius: 6px; padding: 6px 12px; display: flex; align-items: center; gap: 8px;}
.search-box-wrapper form {display: flex; align-items: center; gap: 8px; width: 100%;}
.search-input-field {width: 100%; border: none; background: transparent; outline: none; font-size: 0.9rem; color: #2d3748;}
.action-buttons-group {display: flex; align-items: center; gap: 10px;}
.btn-primary-hpitc {background-color: #339933; color: #ffffff; border: none; border-radius: 6px; padding: 8px 16px; font-size: 0.9rem; font-weight: bold; cursor: pointer;}
.btn-secondary-hpitc {background-color: #ffffff; color: #4a5568; border: 1px solid #DCE0E6; border-radius: 6px; padding: 8px 14px; font-size: 0.9rem; cursor: pointer;}
.btn-icon-hpitc {background-color: #ffffff; color: #4a5568; border: 1px solid #DCE0E6; border-radius: 6px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.table-container-box {padding: 0; overflow: hidden;}

/* --- MODAL POPUP & FORM ELEMENTS (HÀNG HÓA / DỊCH VỤ) --- */
.modal-overlay {display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 3000; align-items: center; justify-content: center;}
.modal-container {background: #fff; width: 780px; max-width: 95%; max-height: 90vh; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden;}
.modal-header {background: #f8fafc; padding: 15px 20px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;}
.modal-title {font-size: 1.15rem; color: #1a202c; font-weight: bold;}
.modal-close-btn {background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #718096;}

.modal-tabs {display: flex; border-bottom: 1px solid #e2e8f0; background: #fff; padding: 0 20px; flex-shrink: 0;}
.modal-tab {padding: 12px 15px; font-weight: 600; color: #718096; cursor: pointer; font-size: 0.9rem;}
.modal-tab.active {color: #28a745; border-bottom: 2px solid #28a745; font-weight: bold;}

.modal-body {padding: 20px; overflow-y: auto; flex-grow: 1;}
.form-group {margin-bottom: 15px;}
.form-label {display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 5px; color: #4a5568;}
.form-input, .form-select, .form-textarea {width: 100%; padding: 8px 12px; border: 1px solid #cbd5e0; border-radius: 4px; font-size: 0.9rem; outline: none; background: #fff;}
.form-textarea {resize: vertical;}
.section-title {font-size: 0.95rem; font-weight: bold; color: #28a745; margin-bottom: 12px;}
.grid-2 {display: grid; grid-template-columns: 1fr 1fr; gap: 15px;}
.grid-3 {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px;}

.modal-footer {display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; border-top: 1px solid #e2e8f0; padding-top: 15px;}
.btn-success {background: #28a745; color: white; border: none; padding: 8px 24px; border-radius: 4px; font-weight: bold; cursor: pointer;}
.btn-light {background: #fff; color: #2d3748; border: 1px solid #cbd5e0; padding: 8px 16px; border-radius: 4px; font-weight: 600; cursor: pointer;}

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 1200px) {
  .kpi-row {grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 992px) {
  .mobile-bottom-nav {display: flex;} 
  body {height: auto; overflow: auto;} 
  .app-layout-top {height: auto; overflow: auto;} 
  .app-content-wrapper {height: auto; overflow: visible;} 
  .app-content {padding-bottom: 70px;} 
  .dash-grid {grid-template-columns: 1fr;} 
  .tables-row {grid-template-columns: 1fr;} 
  .kpi-row {grid-template-columns: repeat(2, 1fr);} 
  .app-topbar-row1 {height: auto; flex-direction: column; padding: 10px 15px; gap: 10px;} 
  .topbar-search {max-width: 100%; margin: 0; width: 100%;} 
  .topbar-right {width: 100%; justify-content: space-between;} 
  .product-layout {grid-template-columns: 1fr;} 
  .filter-sidebar {margin-bottom: 15px;}
}
@media (max-width: 576px) {
  .kpi-row {grid-template-columns: repeat(2, 1fr); gap: 8px;} 
  .kpi-card {padding: 10px 8px;} 
  .kpi-card .kpi-val {font-size: 1rem;} 
  .quick-actions-grid {grid-template-columns: repeat(2, 1fr); gap: 8px;} 
  .action-btn {padding: 10px 6px; font-size: 0.8rem;} 
  .app-content {padding: 10px;} 
  .card-box {padding: 12px;} 
  .topbar-right {flex-direction: column; align-items: flex-start; gap: 5px;}
}