/* ============================================
   RENTAL CRM BACKOFFICE - RESPONSIVE
   All breakpoints in one place. Structure aligned with Rentals responsive.css
   ============================================ */

/* --------------------------------------------
   DARK MODE (optional)
   -------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --border-color: #4b5563;
  }
}

/* --------------------------------------------
   GLOBAL MOBILE FIXES (overflow, container)
   -------------------------------------------- */
@media (max-width: 575.98px) {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  .container { padding-left: 0.5rem; padding-right: 0.5rem; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; }
  .container-fluid { padding-left: 0.5rem; padding-right: 0.5rem; margin-left: 0 !important; margin-right: 0 !important; }
  .row { margin-left: -0.5rem; margin-right: -0.5rem; }
  .p-3, .p-4, .p-5 { padding: 0.75rem !important; }
  .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 991.98px) {
  .container, .container-fluid, .row { max-width: 100%; overflow-x: hidden; }
  .container { padding-left: 1rem; padding-right: 1rem; }
  .row { margin-left: -0.5rem; margin-right: -0.5rem; }
  .row > * { padding-left: 0.5rem; padding-right: 0.5rem; }
  h1, h2, h3, h4, h5, h6, p, span, div, a, label { word-wrap: break-word; overflow-wrap: break-word; }
  .btn { white-space: normal; word-wrap: break-word; }
  .card, .card-body, .card-header, .card-footer { max-width: 100%; overflow-x: hidden; }
  .form-control, .form-select, .form-check-input { max-width: 100%; }
  img { max-width: 100%; height: auto; }
}

/* --------------------------------------------
   SIDEBAR & DASHBOARD
   -------------------------------------------- */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); box-shadow: 2px 0 8px rgba(0,0,0,0.1); }
  .sidebar.show { transform: translateX(0); }
  .menu-toggle-btn { display: flex; }
  .main-content { margin-left: 0; width: 100%; max-width: 100%; padding: 0; }
  .dashboard-wrapper { width: 100%; max-width: 100%; margin: 0; padding: 0; }
  .dashboard-header { padding: 1rem; width: 100%; max-width: 100%; margin: 0; }
  .header-left { gap: 0.75rem; max-width: none; flex: 1; }
  .search-box { flex: 1; min-width: 0; }
  .dashboard-main { padding: 1rem; max-width: 100%; overflow-x: hidden; }
  .action-bar { left: 0; right: 0; }
}

@media (max-width: 767.98px) {
  .dashboard-section-header { flex-direction: column; }
  .section-header-right { width: 100%; }
  .section-header-right .btn { flex: 1; }
  .kpi-card { flex-direction: column; text-align: center; }
  .kpi-icon { margin: 0 auto; }
  .chart-body { height: 250px; }
  .table-responsive, .table { display: none !important; }
  .motorbike-card-mobile, .customer-card-mobile, .contract-card-mobile, .payment-card-mobile { display: block !important; width: 100%; max-width: 100%; }
  .customer-list .customer-item { display: none !important; }
}

/* --------------------------------------------
   AUTH (Login, Auth form)
   -------------------------------------------- */
@media (max-width: 991.98px) {
  .login-form-wrapper, .auth-form-wrapper { max-width: 100%; padding: 1rem; overflow-x: hidden; }
  .login-form, .auth-form { padding: 1.5rem 1rem; max-width: 100%; overflow-x: hidden; }
  .login-title, .auth-title { font-size: 1.75rem; word-wrap: break-word; overflow-wrap: break-word; }
  .testimonial-quote { font-size: 1.5rem; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; }
}

@media (max-width: 575.98px) {
  .login-form, .auth-form { padding: 1rem 0.75rem; border-radius: 8px; max-width: 100%; overflow-x: hidden; }
  .login-form-wrapper, .auth-form-wrapper { padding: 0.5rem; max-width: 100%; }
  .login-title, .auth-title { font-size: 1.5rem; }
  .login-subtitle, .auth-subtitle { font-size: 0.9rem; }
  .testimonial-quote { font-size: 1.25rem; line-height: 1.3; }
  .login-testimonial { left: 2rem; right: 2rem; bottom: 3rem; max-width: calc(100% - 4rem); }
  .auth-form { padding: 1.5rem 1rem; border-radius: 8px; }
  .auth-title { font-size: 1.5rem; }
  .auth-subtitle { font-size: 0.9rem; }
  .auth-icon { font-size: 2.5rem; }
}

/* --------------------------------------------
   FILTERS & FORMS
   -------------------------------------------- */
@media (max-width: 767.98px) {
  .report-filters, .search-filters-section, .filter-section, .filters-section { padding: 1rem; }
  .search-box .form-control, .form-select, .form-control { height: 40px; font-size: 0.875rem; }
  .form-select-sm, .form-control-sm { height: 36px; }
  .btn { padding: 0.5rem 1rem; font-size: 0.875rem; height: 40px; min-height: 40px; }
  .btn-sm { height: 36px; min-height: 36px; }
  .input-group { height: 40px; }
  .input-group .form-control { height: 40px; }
  .dropdown-toggle { height: 40px; }
}

/* --------------------------------------------
   MANAGEMENT
   -------------------------------------------- */
@media (max-width: 991.98px) {
  .management-page { padding: 1rem; }
  .management-list-panel, .management-detail-panel { max-height: none; }
  .management-detail-panel { border-top: 1px solid #e6e6e6; margin-top: 2rem; border-left: none; padding-left: 0; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .page-header .btn { width: 100%; }
  .search-filters-section { flex-direction: column; }
  .filter-group { width: 100%; }
}

@media (max-width: 767.98px) {
  .management-page { padding: 0.75rem; }
  .management-list-panel { border-right: none; border-bottom: 1px solid #e6e6e6; padding-right: 0; margin-bottom: 1rem; }
  .management-detail-panel { margin-top: 1rem; padding-top: 1rem; }
  .page-title-large { font-size: 1.5rem; }
  .page-description { font-size: 0.875rem; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { font-size: 0.875rem; min-width: 600px; }
  .table thead th, .table tbody td { padding: 0.5rem; }
  .detail-actions { flex-direction: column; gap: 0.75rem; }
  .detail-actions .btn { width: 100%; }
}

@media (max-width: 575.98px) {
  .management-page { padding: 0.5rem; }
  .page-title-large { font-size: 1.25rem; }
}

@media (min-width: 768px) {
  .motorbike-card-mobile, .customer-card-mobile, .contract-card-mobile, .payment-card-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------
   CONTRACT CREATE
   -------------------------------------------- */
@media (max-width: 991.98px) {
  .progress-tracker { flex-wrap: wrap; gap: 1rem; }
  .progress-step { flex: 0 0 auto; min-width: 80px; }
  .progress-line { display: none; }
  .vehicle-image-wrapper { width: 100%; height: 200px; }
}

@media (max-width: 575.98px) {
  .contract-create-page { padding: 1rem; }
  .contract-form-container { padding: 1.5rem; }
  .step-content { min-height: 300px; }
  .selected-vehicle-card { margin-top: 1rem; }
  .selected-vehicle-name { font-size: 1.25rem; }
  .selected-vehicle-header { flex-direction: column; align-items: flex-start; }
  .btn-change-vehicle { justify-content: center; }
}

/* --------------------------------------------
   SETTINGS
   -------------------------------------------- */
@media (max-width: 991.98px) {
  .settings-page { padding-bottom: 140px; }
  .settings-sidebar, .settings-editor, .settings-preview { max-height: none; border-right: none; border-left: none; border-bottom: 1px solid #e6e6e6; }
  .action-bar { left: 0; right: 0; padding: 1rem; flex-direction: column; align-items: stretch; gap: 1rem; }
  .action-bar-left { margin-right: 0; width: 100%; order: 2; }
  .action-bar-left span { white-space: normal; text-align: center; justify-content: center; word-wrap: break-word; }
  .action-bar-right { width: 100%; flex-direction: column; gap: 0.75rem; order: 1; }
  .action-bar-right .btn { width: 100%; margin: 0 !important; }
  .contract-terms-page { padding: 1rem; }
  .contract-terms-page .settings-sidebar { border-radius: var(--radius-md); margin-bottom: 0; }
  .contract-terms-page .settings-editor { padding: 1rem; border-radius: var(--radius-md); }
  .templates-page { padding: 1rem; }
  .templates-page .settings-sidebar { border-radius: var(--radius-md); margin-bottom: 0; }
  .templates-page .settings-editor { padding: 1rem; border-radius: var(--radius-md); border: 1px solid var(--brand-neutral-light); }
  .templates-page .settings-preview { border-radius: var(--radius-md); border-left: 1px solid var(--brand-neutral-light); }
}

@media (max-width: 575.98px) {
  .settings-page { padding-bottom: 150px; }
  .action-bar { padding: 0.75rem; }
  .action-bar-left span { font-size: 0.8rem; line-height: 1.4; }
  .action-bar-right .btn { font-size: 0.875rem; padding: 0.5rem 0.75rem; min-height: 44px; }
  .contract-terms-page .page-title-large { font-size: 1.25rem; }
  .contract-terms-page .section-content { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .contract-terms-page .editor-actions .d-flex { flex-direction: column; align-items: stretch; gap: 1rem; }
  .contract-terms-page .editor-actions .btn { width: 100%; margin: 0 !important; }
  .templates-page .sidebar-header .d-flex { flex-direction: column; align-items: stretch; }
  .templates-page .filter-tabs-container { width: 100%; }
  .templates-page .editor-header { flex-direction: column; align-items: stretch; }
  .templates-page .editor-header .d-flex:last-child { justify-content: flex-start; flex-wrap: wrap; }
}

/* --------------------------------------------
   AUDIT LOG
   -------------------------------------------- */
@media (max-width: 991.98px) {
  .audit-log-page { padding: 1rem; }
  .page-header { flex-direction: column; gap: 1rem; }
  .pagination-section { flex-direction: column; gap: 1rem; align-items: flex-start; }
}

@media (max-width: 575.98px) {
  .audit-log-table-container { padding: 1rem; }
  .audit-log-table { font-size: 0.85rem; }
  .audit-log-table thead th, .audit-log-table tbody td { padding: 0.75rem 0.5rem; }
}

/* --------------------------------------------
   PERMISSION
   -------------------------------------------- */
@media (max-width: 991.98px) {
  .role-permission-page { padding: 1rem; }
  .role-permission-page .page-header { flex-direction: column; align-items: stretch; }
  .header-actions { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .header-actions .btn { flex: 1; min-width: 140px; }
  .roles-list { gap: 0.5rem; }
  .role-item { padding: 0.875rem 1rem; }
  .permissions-panel { padding: 1rem; min-height: auto; }
}

@media (max-width: 575.98px) {
  .role-permission-page .page-title-large { font-size: 1.25rem; }
  .category-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .category-toggle { width: 100%; justify-content: space-between; }
  .permission-item { flex-direction: row; align-items: center; padding: 0.75rem 1rem; gap: 0.75rem; }
  .permission-item .permission-info { min-width: 0; }
  .action-bar .d-flex { flex-direction: column; gap: 1rem; align-items: stretch; }
  .action-buttons { width: 100%; display: flex; flex-direction: column; gap: 0.5rem; }
  .action-buttons .btn { width: 100%; margin: 0 !important; }
  .role-permission-page .users-list .user-item { flex-wrap: wrap; padding: 0.875rem 1rem; }
  .role-permission-page .users-list .user-assigned-date { width: 100%; margin-top: 0.25rem; }
}

/* --------------------------------------------
   ANALYSIS & REPORT
   -------------------------------------------- */
@media (max-width: 991.98px) {
  .vehicle-analysis-page, .report-page { padding: 1rem; }
  .report-filters .row { flex-direction: column; }
  .kpi-card-value { font-size: 1.5rem; }
  .chart-container, .chart-body { height: 250px; }
}

@media (max-width: 767.98px) {
  .report-filters { padding: 1rem; }
  .kpi-card { padding: 1rem; }
  .kpi-card-value { font-size: 1.25rem; }
  .kpi-value { font-size: 1.5rem; }
  .summary-value-large { font-size: 1.5rem; }
  .summary-card-large { padding: 1.25rem; gap: 1rem; }
  .summary-value { font-size: 1.5rem; }
  .chart-container, .chart-body { height: 200px; }
  .table-card-header { flex-direction: column; align-items: flex-start; }
  .table-search { max-width: 100%; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { font-size: 0.875rem; min-width: 600px; }
}

@media (max-width: 575.98px) {
  .kpi-value { font-size: 1.5rem; }
  .chart-body { height: 200px; }
  .table-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .table-card .search-box { width: 100%; }
}

/* --------------------------------------------
   CONTRACT DETAIL / VEHICLE INFO (từ view inline)
   -------------------------------------------- */
@media (max-width: 768px) {
  .vehicle-image-container { height: 150px; }
  .vehicle-name { font-size: 1.1rem; }
  .vehicle-details { font-size: 0.85rem; }
  .vehicle-info-item { padding: 0.5rem; }
  .vehicle-info-value { font-size: 1rem; }
  .btn-change-vehicle-compact { width: 28px; height: 28px; top: 0.5rem; right: 0.5rem; }
}

/* --------------------------------------------
   TYPOGRAPHY & SPACING
   -------------------------------------------- */
@media (max-width: 767.98px) {
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.25rem; }
  h3, .h3 { font-size: 1.1rem; }
  .page-title-large { font-size: 1.25rem; }
  .mb-4 { margin-bottom: 1.5rem !important; }
  .mt-4 { margin-top: 1.5rem !important; }
  .btn { min-height: 44px; padding: 0.75rem 1rem; }
  .btn-sm { min-height: 36px; padding: 0.5rem 0.75rem; }
  .nav-link { min-height: 44px; padding: 0.75rem 1.5rem; }
}

/* --------------------------------------------
   MODAL & DROPDOWN
   -------------------------------------------- */
@media (max-width: 767.98px) {
  .modal-dialog { margin: 0.5rem; max-width: calc(100% - 1rem); }
  .modal-content { border-radius: 8px; }
  .modal-header, .modal-body, .modal-footer { padding: 1rem; }
  .modal-footer { flex-direction: column; gap: 0.5rem; }
  .modal-footer .btn { width: 100%; }
  .dropdown-menu { max-width: calc(100vw - 2rem); left: 1rem !important; right: 1rem !important; transform: none !important; }
}

/* --------------------------------------------
   UTILITIES
   -------------------------------------------- */
@media (max-width: 767.98px) {
  .d-mobile-none { display: none !important; }
  .d-mobile-block { display: block !important; }
  .d-mobile-flex { display: flex !important; }
  .w-mobile-100 { width: 100% !important; }
  .text-mobile-center { text-align: center !important; }
}