/* tables.css — MageGrid DataTable / Grid base table styling */

/* ----- Table Base (modern style — uniform across app) ----- */
.mage-table{font-size:13px;border:none;border-collapse:separate;border-spacing:0;width:100%;border-radius:0}
.mage-table thead th{background-color:#181818 !important;color:#999 !important;font-weight:400;border:none;padding:9px 16px;font-size:11.5px;text-transform:uppercase;letter-spacing:0.03em;white-space:nowrap;cursor:pointer;position:sticky !important;top:0 !important;z-index:30;user-select:none;transition:background .15s ease}
/* Sticky-Header-Overlap: tbody-Zellen dürfen den fixierten Kopf NICHT übermalen */
.mage-table tbody td{position:static;background-clip:padding-box}
.mage-table tbody tr{position:relative;z-index:1}
.mage-table thead th:first-child{border-radius: 2px}
.mage-table thead th:last-child{border-radius:0 2px 2px 0}
.mage-table thead th:hover{background:#2a2a2a !important;color:#fff !important}
.mage-table thead th.sorting_asc::after,
.mage-table thead th.sorting_desc::after{color:var(--o);opacity:1}
.mage-table thead{border-bottom:none}
.mage-table tbody::before{content:'';display:table-row;height:20px}
.mage-table tbody td{padding:14px 16px;vertical-align:middle;border:none;border-bottom:1px solid #ebebeb;color:#303030;font-size:13px;background-color:#fff;transition:background-color .15s ease}
.mage-table tbody tr:nth-child(odd) td{background-color:#fff}
.mage-table tbody tr:hover td{background-color:#f0f6ff !important}
.mage-table tbody tr:hover td:first-child{border-radius: 2px}
.mage-table tbody tr:hover td:last-child{border-radius:0 2px 2px 0}
.mage-table tbody tr.clickable-row{cursor:pointer}

/* ----- Checkbox Column (minimal width, aligned — MUST stay 28px on ALL tables) ----- */
.mage-table th.col-check,
.mage-table td.col-check{width:28px !important;min-width:28px !important;max-width:28px !important;text-align:center;padding:10px 4px !important;box-sizing:border-box;overflow:hidden}
.mage-table th.col-check{cursor:default !important;padding-right:4px !important}
.mage-table th.col-check::before,
.mage-table th.col-check::after{display:none !important;content:none !important}
table.dataTable thead>tr>th.col-check::before,
table.dataTable thead>tr>th.col-check::after{display:none !important;content:none !important}
table.dataTable thead>tr>th.col-check{padding-right:4px !important;cursor:default !important}
.mage-table colgroup col:first-child{width:28px !important}
.mage-table th.col-check .mage-check-wrap{max-width:28px;overflow:visible}
.mage-table th.col-check input[type="checkbox"],
.mage-table td.col-check input[type="checkbox"]{width:15px;height:15px;cursor:pointer;accent-color:#1a1a1a;margin:0 auto;display:block}

/* ----- Row Action Buttons ----- */
.mage-table .btn-action{padding:7px;font-size:15px;border:none;border-radius: 2px;background:#f0f1f3;color:#666;cursor:pointer;transition:background .15s,color .15s;line-height:1;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center}
.mage-table .btn-action:hover{background:#e6e7ea;color:#333}

/* ----- Status Indicator (centralized — single source of truth) ----- */
.status-indicator { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.active { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.2); }
.status-dot.inactive { background: #d1d5db; }
.status-dot-label { font-size: 12px; color: #6b7280; }
.mage-table td:last-child .status-indicator { justify-content: flex-end; }

/* ----- Status Badges ----- */
.badge-status{display:inline-block;font-size:10px;padding:1px 7px;font-weight:600;border-radius: 2px;line-height:1.6;color:#fff}
.badge-status.bg-success{background-color:#185b00 !important}
.badge-status.bg-secondary{background-color:#8a8a8a !important}
.badge-status.bg-danger{background-color:#b91c1c !important}

/* ----- Count Badges ----- */
.count-badge{display:inline-block;background:#e9ecef;color:#333;font-size:10px;font-weight:600;padding:1px 7px;border-radius: 2px;line-height:1.6;min-width:24px;text-align:center}
.count-badge.has-items{background:#d4edda;color:#155724}

/* ----- Clickable Label Hover (global, works with any background color) ----- */
/* Uses ::after with semi-transparent black overlay so it darkens any label color on hover. */
.mage-label-clickable{position:relative;cursor:pointer;overflow:hidden}
.mage-label-clickable::after{content:'';position:absolute;inset:0;border-radius:inherit;background:rgba(0,0,0,0);transition:background .15s}
.mage-label-clickable:hover::after{background:rgba(0,0,0,0.10)}

/* ----- Link Icons in Table Cells ----- */
.mage-table .cell-link{color:#666;text-decoration:none;font-size:14px}
.mage-table .cell-link:hover{color:var(--o)}

/* ----- Logo Cell (Customers) ----- */
.customer-logo-cell img{max-height:28px;max-width:80px;object-fit:contain}

/* ===== DataTables-Wrapper im CI (Suche + Paginierung + Info) ===== */
/* Suchfeld: Abstand zum Tabellenkopf (klebte vorher direkt dran) */
.dataTables_wrapper .dataTables_filter{margin-bottom:14px}
.dataTables_wrapper .dataTables_filter label{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.dataTables_wrapper .dataTables_filter input{border:1px solid var(--border);border-radius:2px;padding:8px 10px;font-size:13px;color:var(--text);background:#fff;min-width:200px;outline:none}
.dataTables_wrapper .dataTables_filter input:focus{border-color:#999}
/* Info-Zeile */
.dataTables_wrapper .dataTables_info{color:var(--muted);font-size:12px;padding-top:14px}
/* Paginierung — flach, 2px Radius, aktiv = Marken-Orange (statt DataTables-Default) */
.dataTables_wrapper .dataTables_paginate{padding-top:10px}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border:1px solid var(--border)!important;border-radius:2px!important;background:#fff!important;
  color:var(--text)!important;padding:5px 11px!important;margin:0 2px!important;font-size:13px!important;
  min-width:auto!important;box-shadow:none!important;cursor:pointer}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:#f3f4f6!important;border-color:var(--border)!important;color:var(--text)!important}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:var(--o)!important;border-color:var(--o)!important;color:#fff!important}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
  background:#fff!important;color:#cbd5e1!important;cursor:default;border-color:var(--border)!important}