/**
 * BASE STYLES — Global Component Library (V1.0 — MVC Refactor)
 * Reusable components applied site-wide.
 * Extracted from: asset/unified_styles.css
 * DEPENDS ON: variables.css being loaded first.
 */

body {
    background-color: var(--background) !important;
    color: var(--text) !important;
    font-family: var(--font-body) !important;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, .outfit {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: var(--text);
    letter-spacing: -0.02em;
}

/* CARDS */
.p-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--spacing-lg); box-shadow:var(--shadow); transition:var(--transition); }
.p-card:hover { box-shadow:var(--shadow-lg); border-color:#cbd5e1; }

/* FORM CONTROLS */
.form-control, .form-select { background-color:var(--surface) !important; border:1px solid var(--border) !important; color:var(--text) !important; border-radius:var(--radius-sm) !important; height:42px !important; padding:8px 12px !important; font-size:0.875rem !important; transition:var(--transition) !important; }
.form-control:focus, .form-select:focus { border-color:var(--primary) !important; box-shadow:0 0 0 3px rgba(37,99,235,0.1) !important; outline:none; }
label { font-size:0.8125rem !important; font-weight:600 !important; color:var(--muted) !important; margin-bottom:6px !important; text-transform:uppercase; letter-spacing:0.025em; }

/* BUTTONS */
.btn { border-radius:var(--radius-sm) !important; font-weight:600 !important; padding:10px 20px !important; font-size:0.875rem !important; transition:var(--transition) !important; }
.btn-primary { background-color:var(--primary) !important; border:none !important; }
.btn-primary:hover { background-color:var(--primary-hover) !important; }
.btn-submit { height:42px; background:var(--primary) !important; color:white !important; border:none !important; border-radius:var(--radius-sm) !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:0.05em; display:flex; align-items:center; justify-content:center; gap:8px; transition:background 0.2s, transform 0.1s !important; }
.btn-submit:hover  { background:var(--primary-hover) !important; }
.btn-submit:active { transform:scale(0.98); }

/* TABLES */
.table { width:100%; border-spacing:0; border-collapse:separate; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--surface); }
.table thead th { background-color:#f1f5f9 !important; color:var(--muted) !important; font-size:0.75rem !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:0.05em; padding:12px 16px !important; border-bottom:1px solid var(--border) !important; }
.table td { padding:14px 16px !important; border-bottom:1px solid var(--border) !important; color:var(--text) !important; font-size:0.875rem !important; }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background-color:#f8fafc !important; }

/* STATUS LABELS */
.label_present   { color:var(--success) !important; font-weight:700; background:var(--success-bg); padding:4px 10px; border-radius:100px; font-size:0.75rem; }
.label_absent    { color:var(--danger) !important;  font-weight:700; background:var(--danger-bg);  padding:4px 10px; border-radius:100px; font-size:0.75rem; }
.label_permission{ color:var(--info) !important;    font-weight:700; background:var(--info-bg);    padding:4px 10px; border-radius:100px; font-size:0.75rem; }

/* PAGE HEADER */
.page-header { margin-bottom:var(--spacing-xl); padding-bottom:var(--spacing-lg); border-bottom:1px solid #f1f5f9; }
.page-title  { font-family:var(--font-heading); font-size:1.5rem; font-weight:800; color:var(--text); margin:0 0 6px 0; display:flex; align-items:center; gap:12px; }
.page-title svg { width:28px; height:28px; stroke:var(--primary); stroke-width:2.5; }
.page-desc   { font-size:0.875rem; color:var(--muted); margin:0; font-weight:500; }

/* DATATABLES */
.dt-btn-copy  { background-color:#6c757d !important; color:#fff !important; border:none !important; border-radius:4px !important; }
.dt-btn-excel { background-color:#1d6f42 !important; color:#fff !important; border:none !important; border-radius:4px !important; }
.dt-btn-pdf   { background-color:#cc0000 !important; color:#fff !important; border:none !important; border-radius:4px !important; }
.dt-btn-copy:hover  { background-color:#5a6268 !important; }
.dt-btn-excel:hover { background-color:#155235 !important; }
.dt-btn-pdf:hover   { background-color:#990000 !important; }
.dataTables_wrapper .dt-buttons        { margin:16px 16px 8px; float:left; }
.dataTables_wrapper .dataTables_filter { margin:16px 16px 8px; float:right; text-align:right; }
.dataTables_wrapper .dataTables_filter label { font-weight:600; color:#475569; font-size:0.875rem; }
.dataTables_wrapper .dataTables_filter input { margin-left:8px; height:34px; padding:6px 12px; font-size:0.8125rem; color:var(--text); background-color:var(--surface); border:1px solid #cbd5e1; border-radius:var(--radius-sm); outline:none; transition:var(--transition-fast); }
.dataTables_wrapper .dataTables_filter input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,0.12); }
.dataTables_wrapper .dataTables_info     { margin:12px 16px 16px; font-size:0.8125rem; color:var(--muted); float:left; }
.dataTables_wrapper .dataTables_paginate { margin:12px 16px 16px; float:right; text-align:right; }
.dataTables_wrapper::after               { display:block; clear:both; content:""; }