/* DIAMOND Hardware Ltd — v2 web portal overrides on top of the legacy POS template.
   Loaded AFTER assets/css/style.css so these guarantees win regardless of chunk order. */

/* ---------- page header (title left, actions right) ---------- */
.page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.page-header .page-title h3 { margin: 0 0 4px; }
.page-header .page-title h6 { margin: 0; }
.page-header .page-btn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-header .page-btn > .form-select { min-width: 220px; }
.page-header .page-btn > .btn { white-space: nowrap; }
.settings-layout { display: grid; gap: 16px; }
.settings-read-value { margin: 0 0 8px; color: #637381; }
.settings-read-value:last-child { margin-bottom: 0; }
.settings-role-list { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.settings-role-list label { display: inline-flex; align-items: center; gap: 8px; color: #212b36; font-weight: 500; }
.settings-role-list input { width: 16px; height: 16px; accent-color: #1b2850; }

/* ---------- client-only invoice scanner ---------- */
.invoice-scanner { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #dce2e8; border-radius: 5px; background: #fafbfe; }
.invoice-scanner .btn { white-space: nowrap; }
.invoice-scanner input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.invoice-scanner span { color: #637381; font-size: 12px; }

/* ---------- top header brand ---------- */
.main-wrapper .header .header-left .logo { display: flex; align-items: center; width: 185px; height: 60px; line-height: 1; }
.main-wrapper .header .header-left .logo img { display: block; width: 166px; max-height: 44px; }

/* ---------- fonts: beat bootstrap's own body/form-control family ---------- */
:root { --bs-body-font-family: var(--font-poppins), 'Poppins', sans-serif; }
body,
.btn, .form-control, .form-select, .form-label, .form-group,
input, select, textarea, button { font-family: var(--font-poppins), 'Poppins', sans-serif; }

/* ---------- header avatar and account menu ---------- */
.header .user-menu { display: flex; align-items: center; height: 100%; }
.header .main-drop { position: static; display: flex; align-items: center; height: 100%; }
.header .profile-toggle { display: flex !important; align-items: center; justify-content: center; width: 58px; height: 60px; padding: 0 !important; }
.header .profile-toggle .user-img { position: relative; display: block; width: 40px; height: 40px; line-height: 1 !important; }
.header .profile-toggle .user-img img { display: block; width: 40px !important; min-width: 40px; max-width: 40px; height: 40px !important; min-height: 40px; max-height: 40px; margin: 0 !important; border-radius: 50% !important; object-fit: cover; }
.header .profile-toggle .user-img .status { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; }
.header .menu-drop-user .profileset .user-img { position: relative; display: block; width: 45px; height: 45px; }
.header .menu-drop-user .profileset .user-img img { display: block; width: 45px !important; height: 45px !important; margin: 0 !important; border-radius: 50% !important; object-fit: cover; }
.header .menu-drop-user .profileset .user-img .status { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; }

/* ---------- global loader fade ---------- */
#global-loader { transition: opacity 0.4s ease; }
#global-loader.fade-out { opacity: 0; pointer-events: none; }
body.loaded #global-loader { display: none; }

/* ---------- sidebar scroll + hover/active guarantees ---------- */
.sidebar .sidebar-inner { height: 100%; overflow-y: auto; overflow-x: hidden; }
.sidebar .sidebar-menu>ul>li>a { display: block; }
.sidebar .sidebar-menu>ul>li>a:hover { background: #1b2850; color: #fff; border-radius: 5px; }
.sidebar .sidebar-menu>ul>li>a:hover span { color: #fff; }
.sidebar .sidebar-menu>ul>li>a:hover img { filter: brightness(0) invert(1); }
.sidebar .sidebar-menu>ul>li>a.active { background: #1b2850; color: #fff; border-radius: 5px; }
.sidebar .sidebar-menu>ul>li>a.active img { filter: brightness(0) invert(1); }
.sidebar .sidebar-menu>ul>li>a.active span { color: #fff; }
.sidebar .sidebar-menu>ul>li.submenu>a { display: block; }
.sidebar .sidebar-menu>ul>li.submenu a.subdrop { background: #1b2850; color: #fff; border-radius: 5px; }
.sidebar .sidebar-menu>ul>li.submenu a.subdrop span { color: #fff; }
.sidebar .sidebar-menu>ul>li.submenu a.subdrop img { filter: brightness(0) invert(1); }
.sidebar .sidebar-menu>ul>li.submenu a.subdrop .menu-arrow { transform: rotate(90deg); }

/* ---------- dropdown user card ---------- */
.header .menu-drop-user .dropdown-item { color: #212b36; padding: 10px; }
.header .menu-drop-user .dropdown-item:hover { color: #ff9f43; background: #fafbfe; }
.header .menu-drop-user { min-width: 220px; }

/* ---------- account menu: anchored to its avatar on desktop ---------- */
.header .user-menu { padding-right: 24px; }
.header .menu-drop-user { position: fixed !important; right: auto !important; width: 244px; min-width: 244px; border: 1px solid #e8ebed; border-radius: 6px; box-shadow: 0 12px 28px rgba(27, 40, 80, 0.14); overflow: hidden; }
.header .menu-drop-user .profileset { padding: 14px; }

/* ---------- sidebar: preserve the template layout, only align the chevron ---------- */
.sidebar .sidebar-menu { padding: 14px 12px 24px; }
.sidebar .sidebar-menu > ul > li.submenu > a { display: flex !important; align-items: center; }
.sidebar .sidebar-menu > ul > li.submenu > a .menu-arrow { margin-left: auto; }

/* ---------- dashboard counters ---------- */
.counters { font-variant-numeric: tabular-nums; }
.dash-widget { min-width: 0; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.dash-widget:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.operational-stat-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.operational-stat-cards .dash-widget { min-height: 148px; padding: 16px 14px; gap: 12px; }
.operational-stat-cards .dash-widgetimg { flex: 0 0 48px; width: 48px; height: 48px; }
.operational-stat-cards .dash-widgetimg span { width: 48px; height: 48px; }
.operational-stat-cards .dash-widgetimg img { width: 22px; height: 22px; }
.operational-stat-cards .dash-widgetcontent { min-width: 0; overflow: hidden; }
.operational-stat-cards .dash-widgetcontent h5 { max-width: 100%; margin-bottom: 4px; overflow: hidden; color: #212b36; font-size: clamp(12px, .8vw, 18px); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.operational-stat-cards .dash-widgetcontent h6 { margin: 0; font-size: clamp(11px, .9vw, 14px); line-height: 1.4; overflow-wrap: anywhere; }
.accountant-workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 20px; align-items: start; }

/* ---------- misc widget alignment ---------- */
.card .card-header .card-title { margin: 0; }
.btn i, .btn-feather { vertical-align: -2px; }

/* ---------- sidebar submenu slide (grid-rows animation) ---------- */
.sidebar .sidebar-menu>ul>li.submenu>ul {
  display: grid !important;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.25s ease, padding 0.25s ease;
  padding: 0;
}
.sidebar .sidebar-menu>ul>li.submenu.open>ul { opacity: 1; padding: 10px 0; }
.sidebar .sidebar-menu>ul>li.submenu>ul>li { overflow: hidden; min-height: 0; }

/* ---------- mobile / collapsed sidebar ---------- */
@media (max-width: 991px) {
  .sidebar { left: -260px; width: 260px; }
  .main-wrapper.slide-nav #sidebar.sidebar { left: 0 !important; }
  .header .header-left { position: relative; width: auto; border-right: 0; }
  .main-wrapper .header .header-left .logo { width: 170px; }
  .main-wrapper .header .header-left .logo img { width: 152px; }
}

@media (max-width: 575px) {
  .main-wrapper .header .header-left .logo { width: 150px; }
  .main-wrapper .header .header-left .logo img { width: 134px; }
  .page-header .page-btn { width: 100%; flex-direction: column; align-items: stretch; }
  .page-header .page-btn > .form-select,
  .page-header .page-btn > .btn { width: 100%; min-width: 0; }
  .page-header .page-btn .page-actions { width: 100%; }
  .page-header .page-btn .page-actions .btn,
  .page-header .page-btn .page-actions .form-select { flex: 1 1 auto; }
  .invoice-scanner { align-items: flex-start; flex-direction: column; }
  .glass-modal-stock-actions, .glass-modal-stock-actions > div { width: 100%; align-items: stretch !important; flex-direction: column; }
  .form-grid { grid-template-columns: 1fr !important; }
  .responsive-two-col, .responsive-report-layout, .responsive-setting-row { grid-template-columns: 1fr !important; }
  .responsive-report-layout { gap: 14px !important; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .admin-table .table { min-width: 0; }
  .admin-table .table th, .admin-table .table td { padding: 12px 10px; white-space: normal; }
  .admin-products .table th:nth-child(2), .admin-products .table td:nth-child(2),
  .admin-products .table th:nth-child(3), .admin-products .table td:nth-child(3),
  .admin-products .table th:nth-child(5), .admin-products .table td:nth-child(5) { display: none; }
  .admin-products .table th:nth-child(1) { width: 56%; }
  .admin-products .table td:nth-child(1) { min-width: 190px; }
  .admin-products .table th:nth-child(4), .admin-products .table td:nth-child(4) { text-align: right; white-space: nowrap; }
  .admin-products .table th:nth-child(6), .admin-products .table td:nth-child(6) { width: 1%; white-space: nowrap; }
  .admin-products .table th:nth-child(7), .admin-products .table td:nth-child(7) { display: none; }
  .admin-users .table th:nth-child(2), .admin-users .table td:nth-child(2),
  .admin-users .table th:nth-child(4), .admin-users .table td:nth-child(4) { display: none; }
  .admin-users .table th:nth-child(1) { width: 52%; }
  .admin-users .table td:nth-child(1) { min-width: 170px; }
  .admin-users .table th:nth-child(3), .admin-users .table td:nth-child(3) { width: 1%; white-space: nowrap; }
  .admin-users .table th:nth-child(5), .admin-users .table td:nth-child(5) { display: none; }
  .admin-users .table th:nth-child(6), .admin-users .table td:nth-child(6) { display: none; }
  .admin-categories .table th:nth-child(3), .admin-categories .table td:nth-child(3),
  .admin-categories .table th:nth-child(4), .admin-categories .table td:nth-child(4),
  .admin-categories .table th:nth-child(7), .admin-categories .table td:nth-child(7) { display: none; }
  .admin-categories .table th:nth-child(1) { width: 54%; }
  .admin-categories .table th:nth-child(2), .admin-categories .table td:nth-child(2) { text-align: right; white-space: nowrap; }
  .admin-categories .table th:nth-child(5), .admin-categories .table td:nth-child(5) { width: 1%; white-space: nowrap; }
  .admin-categories .table th:nth-child(6), .admin-categories .table td:nth-child(6) { width: 1%; white-space: nowrap; }
  .admin-stockin .table th:nth-child(2), .admin-stockin .table td:nth-child(2),
  .admin-stockin .table th:nth-child(4), .admin-stockin .table td:nth-child(4),
  .admin-stockin .table th:nth-child(5), .admin-stockin .table td:nth-child(5) { display: none; }
  .admin-stockin .table th:nth-child(1) { width: 36%; }
  .admin-stockin .table th:nth-child(3), .admin-stockin .table td:nth-child(3) { white-space: nowrap; }
  .admin-stockin .table th:nth-child(6), .admin-stockin .table td:nth-child(6) { text-align: right; white-space: nowrap; }
  .compact-action { width: 36px; height: 34px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; }
  .compact-action span { display: none; }
  .compact-action i { margin: 0; font-size: 13px; }
  .table-pagination { flex-direction: column; align-items: flex-start; padding: 14px 0 0; }
  .pagination-controls { width: 100%; justify-content: center; }
}
/* ---------- dashboard stat cards are links ---------- */
.dash-widget.widget-link { cursor: pointer; }

/* ---------- operational dashboard ---------- */
.analytics-chart { min-height: 338px; }
.chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 8px; }
.chart-eyebrow { margin: 0 0 2px; color: #1b2850; font-size: 13px; font-weight: 700; }
.chart-description { margin: 0; color: #637381; font-size: 12px; }
.chart-controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chart-controls button { appearance: none; border: 1px solid #dce2e8; background: #fff; color: #637381; border-radius: 4px; padding: 7px 10px; font: inherit; font-size: 12px; font-weight: 600; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.chart-controls button.selected { color: #1b2850; border-color: #1b2850; background: #f4f7fb; }
.chart-controls button span { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.chart-canvas { height: 270px; min-width: 0; }
.trend-tooltip { display: flex; min-width: 180px; flex-direction: column; gap: 5px; padding: 10px 12px; border: 1px solid #dce2e8; border-radius: 5px; background: #fff; box-shadow: 0 8px 20px rgba(27, 40, 80, .12); font-size: 12px; }
.trend-tooltip strong { color: #212b36; margin-bottom: 2px; }
.trend-tooltip span { color: #637381; white-space: nowrap; }
.trend-tooltip i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.table-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px 0; color: #637381; font-size: 12px; }
.pagination-controls { display: flex; align-items: center; gap: 4px; }
.page-size-control { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; color: #637381; font-size: 12px; font-weight: 600; }
.page-size-control input { width: 60px; height: 32px; border: 1px solid #dce2e8; border-radius: 4px; padding: 0 6px; background: #fff; color: #212b36; font: inherit; }
.page-control { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid #dce2e8; border-radius: 4px; background: #fff; color: #637381; font: inherit; font-size: 12px; }
.page-control:hover:not(:disabled), .page-control.active { border-color: #1b2850; background: #1b2850; color: #fff; }
.page-control:disabled { cursor: not-allowed; opacity: .45; }

/* ---------- staged daily-report workflow ---------- */
.live-report { display: flex; flex-direction: column; gap: 20px; }
.live-report-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border: 1px solid #dce2e8; border-left: 4px solid #28c76f; border-radius: 6px; background: #fff; }
.live-report-banner h4 { margin: 6px 0 4px; color: #1b2850; font-size: 18px; }
.live-report-banner p { margin: 0; color: #637381; }
.live-indicator { display: inline-flex; align-items: center; gap: 7px; color: #16864a; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #28c76f; box-shadow: 0 0 0 4px rgba(40, 199, 111, .14); }
.live-report-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid #dce2e8; border-radius: 6px; background: #fff; }
.live-report-summary > div { padding: 18px 20px; border-right: 1px solid #e8ebed; }
.live-report-summary > div:last-child { border-right: 0; }
.live-report-summary span { display: block; margin-bottom: 5px; color: #637381; font-size: 12px; font-weight: 600; }
.live-report-summary strong { color: #1b2850; font-size: 20px; font-variant-numeric: tabular-nums; }
.live-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.live-report-grid > .card:nth-child(n + 5) { grid-column: 1 / -1; }
.live-report-updated { margin: -8px 0 0; color: #637381; text-align: right; font-size: 12px; }
.report-danger-row td { color: #b3261e !important; background: #fff5f5; }
.report-archive { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.report-archive > .card { display: flex; height: clamp(560px, calc(100vh - 170px), 760px); min-height: 0; flex-direction: column; overflow: hidden; }
.report-archive > .card > .card-body { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.report-date-list { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.report-date-scroll { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 8px; overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; }
.report-date-list .table-pagination { flex: 0 0 auto; padding: 14px 0 0; }
.report-date-list .page-size-control { display: none; }
.report-date-item { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 3px; border: 1px solid #dce2e8; border-radius: 5px; padding: 11px 12px; background: #fff; color: #212b36; text-align: left; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.report-date-item span { color: #637381; font-size: 11px; }
.report-date-item:hover, .report-date-item.active { border-color: #1b2850; background: #1b2850; color: #fff; }
.report-date-item:hover span, .report-date-item.active span { color: rgba(255, 255, 255, .76); }
.report-pdf-frame { display: block; width: 100%; height: 100%; min-height: 0; flex: 1; border: 1px solid #e8ebed; border-radius: 4px; background: #f7f8fa; }

@media (max-width: 1350px) {
  .operational-stat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .operational-stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accountant-workspace-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
  .live-report-grid { grid-template-columns: 1fr; }
  .live-report-grid > .card:nth-child(n) { grid-column: auto; }
}

@media (max-width: 575px) {
  .live-report-banner { align-items: stretch; flex-direction: column; }
  .live-report-summary { grid-template-columns: 1fr; }
  .live-report-summary > div { border-right: 0; border-bottom: 1px solid #e8ebed; }
  .live-report-summary > div:last-child { border-bottom: 0; }
  .operational-stat-cards { grid-template-columns: 1fr; }
  .report-archive { grid-template-columns: 1fr; }
  .report-archive > .card { height: auto; min-height: 360px; }
  .report-date-scroll { max-height: 360px; }
  .report-pdf-frame { height: 65vh; min-height: 480px; }
}
.page-ellipsis { display: inline-flex; width: 20px; height: 32px; align-items: center; justify-content: center; }

@media (max-width: 767px) {
  .header .user-menu { display: none !important; }
  .header .mobile-user-menu { display: block !important; margin-right: 8px; }
  .header .mobile-user-menu .dropdown-menu-right { position: fixed !important; top: 60px !important; right: 10px !important; left: auto !important; }
  .chart-heading { flex-direction: column; gap: 10px; }
  .chart-controls { justify-content: flex-start; }
  .chart-canvas { height: 250px; }
}

/* ---------- report print/PDF export ---------- */
#print-report .print-head { display: none; }
#print-report .report-pre { margin-bottom: 0; }
@media print {
  body * { visibility: hidden !important; }
  #print-report, #print-report * { visibility: visible !important; }
  #print-report {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 100%;
  }
  #print-report .print-head { display: block !important; margin-bottom: 14px; }
  #print-report .print-head h4 { font-size: 16px; font-weight: 700; color: #212b36; margin-bottom: 2px; }
  #print-report .print-head h5 { font-size: 12px; font-weight: 500; color: #637381; margin-bottom: 0; }
  #print-report .report-pre {
    white-space: pre-wrap !important;
    word-break: break-word;
    font-family: "Courier New", Courier, monospace;
    font-size: 10pt;
    line-height: 1.4;
  }
}

.header .menu-drop-user .profileset .user-img .profile-cam {
  position: absolute;
  top: -3px;
  right: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  background: #ff9f43;
  color: #fff;
  font-size: 8px;
  border: 2px solid #fff;
  cursor: pointer;
}

.header .menu-drop-user .profileset .user-img .profile-cam:hover {
  background: #e8891f;
}

.header .menu-drop-user .profileset .user-img .profile-cam-spin {
  width: 8px;
  height: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: profile-cam-spin 0.8s linear infinite;
}

@keyframes profile-cam-spin {
  to { transform: rotate(360deg); }
}

.avatar-upload-toast {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 340px;
  padding: 10px 14px;
  background: #fff;
  color: #b76e00;
  border: 1px solid #ffe0b0;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(27, 40, 80, 0.14);
  font-size: 13px;
}

.avatar-upload-toast .avatar-upload-toast-close {
  margin-left: auto;
  border: none;
  background: none;
  color: #b76e00;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 6px;
}