/*
 * FM ERP — Global CSS Supplement
 * Add to public/assets/css/fm-extra.css
 * Include AFTER Bootstrap in layouts/main.php:
 * <link rel="stylesheet" href="<?= base_url('assets/css/fm-extra.css') ?>">
 */

/* ── Missing utility classes ─────────────────────────────── */
.text-blue   { color: var(--fm-blue)   !important; }
.text-teal   { color: var(--fm-teal)   !important; }
.text-green  { color: var(--fm-green)  !important; }
.text-orange { color: var(--fm-orange) !important; }
.text-red    { color: var(--fm-red)    !important; }
.text-gold,
.text-secondary-fm { color: var(--fm-secondary) !important; }
.text-purple { color: #7c3aed !important; }

.kpi-icon.kpi-purple { background: rgba(124,58,237,.1); color: #7c3aed; }
.kpi-card.kpi-purple { border-left-color: #7c3aed; }

/* ── min-w-0 truncation fix ──────────────────────────────── */
.min-w-0 { min-width: 0; }

/* ── Pagination ──────────────────────────────────────────── */
.fm-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  padding: 16px;
  flex-wrap: wrap;
}
.fm-pagination a,
.fm-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  color: #374151;
  background: #f5f7fa;
  border: 1px solid #e5e7eb;
  transition: .15s;
}
.fm-pagination a:hover { background: var(--fm-primary); color: #fff; border-color: var(--fm-primary); }
.fm-pagination .active { background: var(--fm-primary); color: #fff; border-color: var(--fm-primary); }
.fm-pagination .disabled { opacity: .4; pointer-events: none; }
.fm-pagination .dots { background: transparent; border: none; }

/* ── Chat bubbles ────────────────────────────────────────── */
#chatMessages { scroll-behavior: smooth; }
.chat-msg .chat-bubble { word-break: break-word; }
.chat-me .chat-bubble div { border-radius: 16px 16px 4px 16px; }
.chat-other .chat-bubble div { border-radius: 16px 16px 16px 4px; }
.chat-sender { font-size: .7rem; font-weight: 700; color: #6b7a8d; margin-bottom: 2px; }
.chat-text { font-size: .83rem; line-height: 1.5; padding: 8px 12px; }
.chat-time { font-size: .65rem; color: #9ca3af; margin-top: 2px; }

/* ── SLA Warning row highlight ───────────────────────────── */
.sla-warn { background: #fffbeb !important; }
.sla-warn td { background: transparent !important; }

/* ── Status badge extras ─────────────────────────────────── */
.badge-status-overdue   { background: #fee2e2; color: #991b1b; }
.badge-status-sent      { background: #dbeafe; color: #1e40af; }
.badge-status-draft     { background: #f1f5f9; color: #475569; }
.badge-status-expired   { background: #fee2e2; color: #991b1b; }
.badge-status-renewed   { background: #dcfce7; color: #166534; }
.badge-status-converted { background: #dcfce7; color: #166534; }
.badge-status-settled   { background: #e0f2fe; color: #0369a1; }
.badge-status-issued        { background: #dbeafe; color: #1e40af; }
.badge-status-reconciliation{ background: #fef3c7; color: #92400e; }
.badge-status-approved      { background: #dcfce7; color: #166534; }
.badge-status-pending       { background: #f1f5f9; color: #475569; }
.badge-status-closed        { background: #e0f2fe; color: #0369a1; }
.badge-status-paid      { background: #dcfce7; color: #166534; }

/* ── Priority badge extras ───────────────────────────────── */
.badge-priority-critical { background: #fee2e2; color: #991b1b; }
.badge-priority-high     { background: #ffedd5; color: #9a3412; }
.badge-priority-medium   { background: #fef9c3; color: #854d0e; }
.badge-priority-low      { background: #dcfce7; color: #166534; }

/* ── Form section heading ────────────────────────────────── */
.fm-form-section h6 {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--fm-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.fm-form-section h6 i { font-size: .9rem; }

/* ── Card hover lift ─────────────────────────────────────── */
.fm-card.clickable,
a .fm-card {
  transition: box-shadow .2s, transform .2s;
}
a .fm-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  transform: translateY(-2px);
}

/* ── Scrollable table wrapper on mobile ──────────────────── */
.table-responsive-fm {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  .fm-table { min-width: 600px; }
  .table-responsive-fm .fm-table { min-width: 500px; }
}

/* ── Progress bar ────────────────────────────────────────── */
.progress { background: #e5e7eb; }
.progress-bar { transition: width .4s ease; }

/* ── Notification badge ──────────────────────────────────── */
.notif-badge {
  min-width: 18px;
  height: 18px;
  font-size: .65rem;
  line-height: 1;
  display: none;
}

/* ── Print global ────────────────────────────────────────── */
@media print {
  .no-print,
  .sidebar,
  .topbar,
  .page-header .d-flex,
  .btn,
  .nav-tabs,
  .fm-pagination,
  #chatMessages,
  .alert { display: none !important; }
  .main-wrapper { margin-left: 0 !important; }
  body { background: #fff !important; }
  .fm-card { box-shadow: none !important; border: 1px solid #e5e7eb !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── x-small utility ─────────────────────────────────────── */
.x-small { font-size: .72rem; }

/* ── Action button grid for quick actions ────────────────── */
.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.quick-action-item {
  background: #fdf8f6;
  border: 1px solid #e8edf3;
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: .2s;
  text-decoration: none;
  color: #1a2332;
  display: block;
}
.quick-action-item:hover {
  background: var(--fm-primary);
  color: #fff;
  border-color: var(--fm-primary);
}
.quick-action-item i { font-size: 1.4rem; display: block; margin-bottom: 6px; }
.quick-action-item span { font-size: .75rem; font-weight: 600; }

/* ── Inventory low stock row ─────────────────────────────── */
tr.low-stock td { background: #fffbeb !important; }
tr.zero-stock td { background: #fff1f2 !important; }

/* ── Dropdown menu polish ────────────────────────────────── */
.dropdown-menu {
  border: 1px solid #e8edf3;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  border-radius: 10px;
  padding: 6px;
}
.dropdown-item {
  border-radius: 6px;
  font-size: .83rem;
  padding: 7px 12px;
}
.dropdown-item:hover { background: #fdf8f6; }

/* ── Topbar search (future) ──────────────────────────────── */
.topbar-search {
  position: relative;
  max-width: 280px;
}
.topbar-search input {
  padding-left: 32px;
  border-radius: 20px;
  font-size: .82rem;
  background: #f5f7fa;
  border: 1px solid #e5e7eb;
}
.topbar-search i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: .85rem;
}

/* ── File upload drag zone ───────────────────────────────── */
.upload-zone {
  border: 2px dashed var(--fm-secondary);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: .2s;
  background: #fdf8f6;
}
.upload-zone:hover { border-color: var(--fm-primary); background: rgba(118,0,43,.04); }
.upload-zone i { font-size: 2rem; color: var(--fm-secondary); }
