/**  =====================================================================
     app.css — DMS_ERP application-wide overrides (ALL languages)
     =========================================================================
     Loaded in _Layout.cshtml AFTER style.css, for every user.

     style.css is the (hand-edited) Datta Able vendor theme. This file is
     the home for OUR app-wide component styles and fixes, so the vendor
     sheet can stay as close to stock as possible.

     Arabic-only rules do NOT belong here — they go in arabic.css.
     Direction (RTL) rules do NOT belong here — layouts/rtl.css owns those.

     When a rule is being copy-pasted into several views' <style> blocks,
     promote it to this file instead.
==========================================================================  **/

/* Compact table density (was previously Arabic-only + inline in ~140 views) */
.table td,
.table th {
  padding: .5rem 0.3rem;
}

/* Small buttons: roomier hit area (was previously Arabic-only + inline in ~72 views) */
.btn-group-sm > .btn,
.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
}

/* Header action icons: inset the group from the screen edge so the outermost
   icon (the gear) lines up with the cards' edge below — cards sit 30px in
   (.pcoded-content 30px side padding; row/col gutters cancel) and the outer li
   already contributes 12px, so 18px here. LTR side; rtl.css owns the RTL side. */
.pcoded-header .navbar-nav.header-actions {
  margin-right: 18px;
}

/* Collapsed sidebar, hover: keep the white logo panel at the collapsed width.

   style.css comments out the theme's own hover-expand rule (the one setting
   .pcoded-navbar.navbar-collapsed:hover to width 264px) but leaves its companion
   live: .pcoded-navbar.navbar-collapsed:hover .header-logo { width: 264px; }
   So on hover the logo panel grew to 264px inside an 80px navbar.

   .header-logo is float:left — a PHYSICAL float, not direction-aware — and nothing
   clips it, so the extra 184px always spilled to the physical right: harmlessly
   off-screen in Arabic (navbar pinned right:0) but straight over the page content
   in English (navbar pinned left:0). Pinning it to 80px makes hover match the
   collapsed state and gives both directions identical, mirrored behaviour.

   Same specificity as the style.css rule; app.css loads after it, so this wins. */
.pcoded-navbar.navbar-collapsed:hover .header-logo {
  width: 80px;
}

/* bootstrap-datepicker: days panel must be visible (was previously Arabic-only + inline in ~103 views) */
.datepicker > .datepicker-days {
  display: block;
}

/* Clickable DataTable cells */
#datatable1 tbody tr td.mypointer {
  cursor: pointer;
}

/* Inline row edit/save: the save icon starts .disabled and only lights up once
   Edit is clicked (promoted from MasterData/Finance/Currencies.cshtml <style>) */
#datatable1 tbody td a.save i.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#datatable1 tbody td a.save:not(.disabled):hover {
  opacity: 0.8;
}

/* ---- Shared dashboard components (promoted from per-view <style> blocks) ---- */

/* Stable-size Chart.js container */
.dms-chart-container {
  position: relative;
  height: 350px;
  width: 100%;
}
.dms-chart-container canvas {
  position: relative;
  z-index: 5;
}

/* Equal-height cards in a row */
.equal-height-row {
  display: flex;
  flex-wrap: wrap;
}
.equal-height-row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
.equal-height-row .card {
  flex: 1;
  margin-bottom: 25px;
}

/* Interactive icon buttons */
.action-icon {
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 6px;
  text-decoration: none !important;
}
.action-icon:hover {
  transform: scale(1.5);
}
.action-icon i {
  line-height: 1;
}

/* Circular icon buttons inside a .btn-group (e.g. approve/reject in tables):
   these are independent actions, not a segmented control — separate them with
   a symmetric gap. margin:0 cancels the theme/rtl/Bootstrap margin juggling
   (rtl.css mirrors .btn margins but not the .btn-group reset, which made the
   spacing appear in Arabic only). Same look in LTR and RTL. */
.btn-group:has(> .btn.rounded-circle) {
  gap: 8px;
}
.btn-group:has(> .btn.rounded-circle) > .btn {
  margin: 0;
}

/* Scrollable tree panel (cost-center-tree.css adds scrollbar styling + mobile height on tree pages) */
.tree-container {
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
}