/* =============================================================================
   Zimozo z-* component library
   -----------------------------------------------------------------------------
   Several modules (HRM/Essentials, Sales Commission, CRM) were redesigned to use
   z-* component classes, but those classes were only ever implemented inside
   accounting2-odoo.css, which loads on Accounting pages alone. Everywhere else
   the markup rendered completely unstyled - stat cards became stacked text and
   badges became plain words.

   This file implements the component set globally, on the same design tokens and
   with the same visual language as the accounting2 implementation, so nothing
   changes on pages that already looked correct.

   NOTE: `z-10`, `z-20`, `z-50` are Tailwind z-index utilities, not part of this
   system. They are deliberately NOT defined here.
   ========================================================================== */

:root {
  --z-primary:      var(--zmz-primary, #059669);
  --z-info:         #0284c7;
  --z-success:      #16a34a;
  --z-warning:      #d97706;
  --z-danger:       #dc2626;
  --z-text-strong:  var(--zmz-text, #111827);
  --z-text-muted:   var(--zmz-text-muted, #6b7280);
  --z-border-light: var(--zmz-border, #e5e7eb);
  --z-bg-subtle:    var(--zmz-border-soft, #f9fafb);
  --z-surface:      #ffffff;
  --z-radius:       12px;
  --z-radius-sm:    8px;
  --z-shadow:       0 1px 2px rgba(0,0,0,.05);
  --z-shadow-hover: 0 4px 6px rgba(0,0,0,.06);
}

/* ============================ layout ============================ */
.z-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:18px;}
.z-stat-grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.z-stat-grid--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.z-stat-grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
@media (max-width:640px){
  .z-stat-grid,.z-stat-grid--2,.z-stat-grid--3,.z-stat-grid--4{grid-template-columns:1fr;}
}
.z-divider{height:1px;background:var(--z-border-light);border:0;margin:16px 0;}

/* ============================ page header ============================ */
.z-page-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:18px;}
.z-page-header__title,.z-page-title{font-size:20px;font-weight:600;color:var(--z-text-strong);margin:0;line-height:1.3;}
.z-page-header__title small,.z-page-title small{font-size:13px;font-weight:400;color:var(--z-text-muted);margin-left:6px;}
.z-page-header__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.z-page-subtitle{font-size:13.5px;color:var(--z-text-muted);margin:2px 0 0;}

/* ============================ stat tile ============================ */
.z-card-stat{background:var(--z-surface);border:1px solid var(--z-border-light);border-radius:var(--z-radius);
  box-shadow:var(--z-shadow);padding:16px;transition:box-shadow .15s ease,transform .15s ease;}
.z-card-stat:hover{box-shadow:var(--z-shadow-hover);transform:translateY(-1px);}
.z-card-stat--inline{display:flex;align-items:center;gap:14px;}
.z-card-stat__header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px;}
.z-card-stat__info{min-width:0;}
.z-card-stat__title{color:var(--z-text-muted);font-size:12px;margin:0 0 2px;font-weight:500;}
.z-card-stat__value{font-size:22px;font-weight:600;color:var(--z-text-strong);line-height:1.2;
  font-variant-numeric:tabular-nums;}
.z-card-stat__unit{font-size:13px;font-weight:500;color:var(--z-text-muted);}
.z-card-stat__meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.z-card-stat__footer{margin-top:6px;font-size:12px;color:var(--z-text-muted);}
.z-card-stat__footer a{color:var(--z-primary);text-decoration:none;}
.z-card-stat__footer a:hover{text-decoration:underline;}
.z-card-stat__footer i{margin-left:3px;font-size:11px;}
.z-card-stat__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:10px;font-size:17px;flex-shrink:0;background:var(--z-bg-subtle);color:var(--z-text-muted);}
.z-card-stat__icon--primary{background:#d1fae5;color:var(--z-primary);}
.z-card-stat__icon--info{background:#e0f2fe;color:var(--z-info);}
.z-card-stat__icon--success{background:#dcfce7;color:var(--z-success);}
.z-card-stat__icon--warning{background:#fef3c7;color:var(--z-warning);}
.z-card-stat__icon--danger{background:#fee2e2;color:var(--z-danger);}

/* ============================ card ============================ */
.z-card{background:var(--z-surface);border:1px solid var(--z-border-light);border-radius:var(--z-radius);
  box-shadow:var(--z-shadow);margin-bottom:18px;}
.z-card__header{padding:12px 16px;border-bottom:1px solid var(--z-border-light);font-weight:600;
  font-size:14px;color:var(--z-text-strong);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.z-card__header-inner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.z-card__title{font-weight:600;font-size:14px;margin:0;color:var(--z-text-strong);}
.z-card__title--lg{font-size:16px;}
.z-card__body{padding:16px;}

/* ============================ table card ============================ */
.z-table-card{background:var(--z-surface);border:1px solid var(--z-border-light);border-radius:var(--z-radius);
  box-shadow:var(--z-shadow);margin-bottom:18px;overflow:hidden;}
.z-table-card__header{padding:12px 16px;border-bottom:1px solid var(--z-border-light);
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.z-table-card__title{font-weight:600;font-size:14px;margin:0;color:var(--z-text-strong);}
.z-table-card__body{padding:0;overflow-x:auto;}
.z-table-card table{margin-bottom:0;width:100%;}
.z-table-card thead th{background:var(--z-bg-subtle);color:var(--z-text-muted);font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;font-weight:600;padding:10px 12px;border-bottom:1px solid var(--z-border-light);}
.z-table-card tbody td{padding:10px 12px;border-top:1px solid var(--z-border-light);vertical-align:middle;}
.z-table{width:100%;margin-bottom:0;}
.z-table thead th{background:var(--z-bg-subtle);color:var(--z-text-muted);font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;font-weight:600;padding:10px 12px;}
.z-table tbody td{padding:10px 12px;border-top:1px solid var(--z-border-light);vertical-align:middle;}

/* ============================ badge ============================ */
.z-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;line-height:1.7;white-space:nowrap;
  background:var(--z-bg-subtle);color:var(--z-text-muted);}
.z-badge--primary{background:#d1fae5;color:#047857;}
.z-badge--success{background:#dcfce7;color:#15803d;}
.z-badge--info   {background:#e0f2fe;color:#0369a1;}
.z-badge--warning{background:#fef3c7;color:#b45309;}
.z-badge--danger {background:#fee2e2;color:#b91c1c;}
.z-badge--neutral{background:var(--z-bg-subtle);color:var(--z-text-muted);}

/* ============================ buttons ============================ */
.z-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 15px;font-size:13.5px;font-weight:500;line-height:1.4;border-radius:var(--z-radius-sm);
  border:1px solid var(--z-border-light);background:var(--z-surface);color:var(--z-text-strong);
  cursor:pointer;text-decoration:none;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;}
.z-btn:hover{background:var(--z-bg-subtle);color:var(--z-text-strong);text-decoration:none;}
.z-btn:focus-visible{outline:2px solid var(--z-primary);outline-offset:2px;}
.z-btn:disabled,.z-btn.disabled{opacity:.55;cursor:not-allowed;}
.z-btn-xs{padding:3px 9px;font-size:11.5px;border-radius:6px;}
.z-btn-sm{padding:5px 11px;font-size:12.5px;}
.z-btn-lg{padding:11px 20px;font-size:15px;}
.z-btn-primary{background:var(--z-primary);border-color:var(--z-primary);color:#fff;}
.z-btn-primary:hover{filter:brightness(.94);color:#fff;}
.z-btn-secondary,.z-btn-default{background:var(--z-surface);border-color:var(--z-border-light);color:var(--z-text-strong);}
.z-btn-secondary:hover,.z-btn-default:hover{background:var(--z-bg-subtle);}
.z-btn-info{background:var(--z-info);border-color:var(--z-info);color:#fff;}
.z-btn-success{background:var(--z-success);border-color:var(--z-success);color:#fff;}
.z-btn-warning{background:var(--z-warning);border-color:var(--z-warning);color:#fff;}
.z-btn-danger{background:var(--z-danger);border-color:var(--z-danger);color:#fff;}
.z-btn-info:hover,.z-btn-success:hover,.z-btn-warning:hover,.z-btn-danger:hover{filter:brightness(.94);color:#fff;}
.z-btn-outline-primary{background:transparent;border-color:var(--z-primary);color:var(--z-primary);}
.z-btn-outline-primary:hover{background:var(--z-primary);color:#fff;}
.z-btn-outline-warning{background:transparent;border-color:var(--z-warning);color:var(--z-warning);}
.z-btn-outline-warning:hover{background:var(--z-warning);color:#fff;}

/* ============================ forms ============================ */
.z-form-group{margin-bottom:14px;display:flex;flex-direction:column;gap:5px;}
.z-label{font-size:12.5px;font-weight:600;color:var(--z-text-strong);margin:0;}
.z-input{width:100%;padding:8px 12px;font-size:14px;line-height:1.45;color:var(--z-text-strong);
  background:var(--z-surface);border:1px solid var(--z-border-light);border-radius:var(--z-radius-sm);}
.z-input:focus{outline:none;border-color:var(--z-primary);box-shadow:0 0 0 3px rgba(5,150,105,.12);}
.z-form-hint{font-size:12px;color:var(--z-text-muted);}
.z-filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:14px 16px;
  background:var(--z-surface);border:1px solid var(--z-border-light);border-radius:var(--z-radius);margin-bottom:16px;}

/* ============================ tabs ============================ */
.z-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--z-border-light);margin-bottom:16px;}
.z-tabs__item{padding:9px 15px;font-size:13.5px;font-weight:500;color:var(--z-text-muted);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;}
.z-tabs__item:hover{color:var(--z-text-strong);text-decoration:none;}
.z-tabs__item.active,.z-tabs__item[aria-selected="true"]{color:var(--z-primary);border-bottom-color:var(--z-primary);}

/* ============================ progress ============================ */
.z-progress{height:7px;background:var(--z-bg-subtle);border-radius:999px;overflow:hidden;width:100%;}
.z-progress__bar{height:100%;border-radius:999px;background:var(--z-primary);transition:width .3s ease;}
.z-progress__bar--info{background:var(--z-info);}
.z-progress__bar--success{background:var(--z-success);}
.z-progress__bar--warning{background:var(--z-warning);}
.z-progress__bar--danger{background:var(--z-danger);}

/* ============================ list / empty ============================ */
.z-list__item{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--z-border-light);}
.z-list__item:last-child{border-bottom:0;}
.z-empty-state{text-align:center;padding:34px 18px;color:var(--z-text-muted);}
.z-empty-state__icon{font-size:34px;opacity:.35;margin-bottom:10px;display:block;}
.z-empty-state__title{font-size:15px;font-weight:600;color:var(--z-text-strong);margin-bottom:4px;}
.z-empty-state__text{font-size:13.5px;color:var(--z-text-muted);margin:0;}
.z-pagination-wrap{display:flex;justify-content:flex-end;padding:12px 16px;}
.z-text-muted{color:var(--z-text-muted)!important;}

/* ============================ dark mode ============================ */
@media (prefers-color-scheme:dark){
  body.zmz-dark{
    --z-surface:#1b2027;--z-bg-subtle:#232932;--z-border-light:#2f3742;
    --z-text-strong:#e8ecf1;--z-text-muted:#9aa4b2;
  }
}

/* ============================ print ============================ */
@media print{
  .z-card,.z-card-stat,.z-table-card{box-shadow:none;border-color:#ccc;}
  .z-btn,.z-page-header__actions{display:none!important;}
}

/* ================== action menus in short tables ==================
   A table with one or two rows has no height for its Action dropdown to
   open into, and the scroll container clips it — the menu appears cut in
   half. Let the menu escape *only while it is open*, so horizontal
   scrolling on wide tables is unaffected the rest of the time.
   Covers Bootstrap 3 (.open on the group) and 4 (.show on the menu). */
.table-responsive:has(.btn-group.open),
.table-responsive:has(.dropdown.open),
.table-responsive:has(.dropdown-menu.show),
.dataTables_wrapper:has(.btn-group.open),
.dataTables_wrapper:has(.dropdown-menu.show) { overflow: visible !important; }

/* Fallback for browsers without :has() — give a short table enough room
   below the last row for a menu to sit in. */
@supports not selector(:has(*)) {
  .dataTables_wrapper .table-responsive { padding-bottom: 190px; }
}