/* ============================================================
   KAMINDUS — Admin Custom Design System
   Mobile-first · Dark/light mode compatible
   ============================================================ */

/* ─── Variables ─────────────────────────────────────────────── */
:root {
  --adm-primary:   #4a6cf7;
  --adm-radius:    10px;
  --adm-radius-sm: 6px;
  --adm-shadow:    0 2px 12px rgba(0,0,0,.07);
  --adm-shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --adm-border:    rgba(0,0,0,.07);
  --adm-muted:     #6c757d;
  --adm-label-clr: #495057;
}

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
  border-radius: var(--adm-radius) !important;
  border: 1px solid var(--adm-border) !important;
  box-shadow: var(--adm-shadow) !important;
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--adm-border) !important;
  padding: .875rem 1.25rem !important;
}
.card-header h5,
.card-header h6 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .25px;
  margin: 0;
}
.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--adm-border) !important;
  padding: .75rem 1.25rem !important;
}

/* ─── Page title area ────────────────────────────────────────── */
/* Template applies margin:0 -27px on .page-title — clip overflow on the wrapping container */
.page-body > .container-fluid:first-child {
  overflow: hidden;
}
.page-wrapper .page-body-wrapper .page-title {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.page-title h3 { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-title .breadcrumb { flex-wrap: nowrap; justify-content: flex-end; background: transparent; padding: 0; margin: 0; }
.breadcrumb-item { white-space: nowrap; font-size: 12px; }
.breadcrumb-item a { color: var(--adm-primary); }

/* ─── Tables — base ──────────────────────────────────────────── */
.admin-table th {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--adm-muted);
  white-space: nowrap;
  padding: .65rem 1rem !important;
}
.admin-table td {
  font-size: 13px;
  padding: .7rem 1rem !important;
  vertical-align: middle;
}
.admin-table tbody tr { transition: background .12s; }

/* Zebra feel on hover */
.admin-table.table-hover tbody tr:hover {
  background: rgba(74,108,247,.04) !important;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn-sm {
  font-size: 12px !important;
  padding: 5px 12px !important;
  border-radius: var(--adm-radius-sm) !important;
  font-weight: 500 !important;
  letter-spacing: .15px;
  line-height: 1.4 !important;
}
.btn-xs {
  font-size: 11px !important;
  padding: 3px 9px !important;
  border-radius: 5px !important;
}

/* Action buttons container */
.action-cell {
  white-space: nowrap;
}
.action-cell .btn { margin: 0 2px; }

/* ─── Status badges ──────────────────────────────────────────── */
.badge {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 4px 9px !important;
  border-radius: 20px !important;
  letter-spacing: .2px;
}
.badge-toggle {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  line-height: 1;
  display: inline-block;
}
.badge-toggle:hover { opacity: .8; }

/* ─── Stat KPI cards ─────────────────────────────────────────── */
.kpi-card .card { height: 100%; }
.kpi-card .card-body { padding: 1.1rem 1.25rem !important; }
.kpi-card .kpi-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kpi-card .kpi-icon svg,
.kpi-card .kpi-icon i { width: 20px; height: 20px; }
.kpi-card h3 { font-size: 26px; font-weight: 700; line-height: 1; }
.kpi-card p  { font-size: 12px; color: var(--adm-muted); margin: 0; }

/* ─── Forms ──────────────────────────────────────────────────── */
.form-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--adm-label-clr) !important;
  text-transform: uppercase;
  letter-spacing: .35px;
  margin-bottom: 5px !important;
}
.form-label .req { color: #dc3545; margin-left: 2px; }
.form-label .opt { font-weight: 400; font-size: 10px; text-transform: none; color: var(--adm-muted); margin-left: 4px; letter-spacing: 0; }

.form-control,
.form-select {
  font-size: 13px !important;
  border-radius: var(--adm-radius-sm) !important;
  border-color: #dee2e6 !important;
  padding: .45rem .8rem !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--adm-primary) !important;
  box-shadow: 0 0 0 3px rgba(74,108,247,.14) !important;
}
.form-control.is-invalid { border-color: #dc3545 !important; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,53,69,.14) !important; }

textarea.form-control { resize: vertical; min-height: 100px; }

.form-text { font-size: 11px !important; color: var(--adm-muted) !important; margin-top: 4px; }
.form-check-label { font-size: 13px; }

/* Input groups with icon prefix */
.input-icon-wrap { position: relative; }
.input-icon-wrap .form-control { padding-left: 36px !important; }
.input-icon-wrap .icon-prefix {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--adm-muted); pointer-events: none;
  width: 16px; height: 16px;
}

/* Section divider inside forms */
.form-section-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--adm-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--adm-border);
  margin-bottom: 16px;
}

/* Sticky publish sidebar (services form) */
.sidebar-sticky { position: sticky; top: 80px; }

/* ─── Progress bar ───────────────────────────────────────────── */
.progress { border-radius: 4px; }
.progress-bar { border-radius: 4px; }

/* ─── Alert tweaks ───────────────────────────────────────────── */
.alert { font-size: 13px; border-radius: var(--adm-radius-sm); }

/* ─── Empty state ────────────────────────────────────────────── */
.empty-state { padding: 48px 24px; text-align: center; color: var(--adm-muted); }
.empty-state svg { width: 40px; height: 40px; opacity: .35; margin-bottom: 12px; }
.empty-state p { font-size: 13px; margin: 0; }

/* ─── User avatar initials ───────────────────────────────────── */
.avatar-initials {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(74,108,247,.12);
  color: var(--adm-primary);
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ─── Image preview (forms) ──────────────────────────────────── */
.preview-thumb {
  max-height: 90px;
  border-radius: var(--adm-radius-sm);
  object-fit: cover;
  margin-top: 8px;
  border: 1px solid var(--adm-border);
}

/* ─── DataTables controls ────────────────────────────────────── */
.dataTables_wrapper { padding: 0 !important; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { padding: 10px 16px 6px !important; }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { padding: 8px 16px 10px !important; }
.dataTables_wrapper .dataTables_filter input { border-radius: var(--adm-radius-sm) !important; font-size: 12px !important; }
.dataTables_wrapper .dataTables_length select { border-radius: var(--adm-radius-sm) !important; font-size: 12px !important; }
/* Top controls row separator */
.dataTables_wrapper .row:first-child { border-bottom: 1px solid var(--adm-border); margin: 0 !important; }
.dataTables_wrapper .row:last-child  { border-top:  1px solid var(--adm-border); margin: 0 !important; }

/* ─── Page container padding ─────────────────────────────────── */
.page-body .container-fluid { padding-left: 22px !important; padding-right: 22px !important; }

/* ─── Card body default padding (not p-0) ────────────────────── */
.card-body { padding: 1.25rem !important; }
.card-body.p-0 { padding: 0 !important; }

/* ─── Mobile — responsive table (stacked cards) ─────────────── */
@media (max-width: 767.98px) {
  /* Tighter container on small screens */
  .page-body .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }

  /* DataTables controls on mobile: stack them and give breathing room */
  .dataTables_wrapper .row:first-child > div { flex: 0 0 100%; max-width: 100%; }
  .dataTables_wrapper .dataTables_filter { text-align: left !important; padding: 8px 12px 4px !important; }
  .dataTables_wrapper .dataTables_length { padding: 8px 12px 4px !important; }

  /* Remove overflow-x from wrapper so cards can breathe */
  .admin-table-wrap .table-responsive { overflow-x: visible !important; }

  /* Hide header */
  .admin-table thead { display: none !important; }

  /* Each row = a card */
  .admin-table tbody tr {
    display: block !important;
    background: #fff;
    border: 1px solid #e9ecef !important;
    border-radius: var(--adm-radius) !important;
    margin-bottom: 12px !important;
    box-shadow: var(--adm-shadow-sm);
    overflow: hidden;
  }

  /* Each cell = a labelled row */
  .admin-table tbody td {
    display: grid !important;
    grid-template-columns: 82px 1fr !important;
    align-items: start !important;
    padding: 11px 14px !important;
    border-bottom: 1px solid #f1f3f5 !important;
    font-size: 13px;
    gap: 8px;
    min-height: 44px;
    overflow: hidden;
  }
  .admin-table tbody td:last-child {
    border-bottom: none !important;
    background: #f8f9fb;
    padding: 12px 14px !important;
    grid-template-columns: 1fr !important; /* action row: full width */
  }

  /* Label from data-label — always in column 1 */
  .admin-table tbody td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    color: var(--adm-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    grid-column: 1;
    padding-top: 2px;
    word-break: keep-all;
  }

  /* Content — always in column 2 */
  .admin-table tbody td > *       { grid-column: 2; min-width: 0; }
  .admin-table tbody td > img     { grid-column: 2; justify-self: end; }
  .admin-table tbody td > form    { grid-column: 2; }

  /* Hide pseudo-element for action cells (data-label="") */
  .admin-table tbody td[data-label=""]::before { display: none; }
  .admin-table tbody td[data-label=""] > * { grid-column: 1; }

  /* td-content wrapper — stacks children vertically in column 2 */
  .td-content { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; grid-column: 2; }
  .td-content span, .td-content small, .td-content a { min-width: 0; }
  .td-content .fw-semibold { word-break: break-word; }
  .td-content .text-muted   { word-break: break-all; font-size: 11px !important; }

  /* Action buttons wrap on mobile */
  .action-cell { display: flex !important; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

  /* Card header stack on mobile */
  .mobile-header-stack {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* KPI: 2 per row */
  .kpi-card { margin-bottom: 0; }

  /* Hide less important table cols on mobile using d-none d-md-table-cell */
}

/* ─── Dark mode overrides ────────────────────────────────────── */
[data-theme="dark-only"] {
  --adm-border: rgba(255,255,255,.08);
  --adm-label-clr: #adb5bd;
}
[data-theme="dark-only"] .admin-table th {
  background: rgba(255,255,255,.03) !important;
  color: #8a93a2;
}
[data-theme="dark-only"] .admin-table tbody tr { background: transparent; }
[data-theme="dark-only"] .admin-table.table-hover tbody tr:hover {
  background: rgba(255,255,255,.04) !important;
}
[data-theme="dark-only"] .form-control,
[data-theme="dark-only"] .form-select {
  background-color: #1d1e2c !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #d4d8e2 !important;
}
[data-theme="dark-only"] .form-label { color: #adb5bd !important; }
[data-theme="dark-only"] .form-section-title { color: #6c7a94; border-color: rgba(255,255,255,.08); }
[data-theme="dark-only"] .avatar-initials { background: rgba(74,108,247,.2); }

@media (max-width: 767.98px) {
  [data-theme="dark-only"] .admin-table tbody tr {
    background: #262932 !important;
    border-color: #374151 !important;
  }
  [data-theme="dark-only"] .admin-table tbody td { border-color: #374151 !important; }
  [data-theme="dark-only"] .admin-table tbody td:last-child { background: #1d1e2c !important; }
}