/*
 * theme.css
 * Global theme — include once in your layout template.
 * All views inherit these styles automatically.
 */

/* ─── Variables ─────────────────────────────────────────── */
:root {
    --bg-page:    #F2F4F6;
    --bg-surface: #FFFFFF;
    --bg-subtle:  #F8F9FA;
    --border:     #E2E5E9;
    --border-md:  #CDD1D6;
    --text-primary:   #2C3038;
    --text-secondary: #6B7280;
    --text-muted:     #9CA3AF;
    --accent:         #5F8A8B;
    --accent-light:   #E8F0F0;
    --accent-slate:      #5A6270;
    --accent-slate-light:#ECEEF1;
    --danger:          #B45656;
    --danger-light:    #FEF2F2;
    --success:         #4A7C59;
    --success-light:   #EDF4EF;
}

/* ─── Page background ───────────────────────────────────── */
.pcoded-content {
    background: var(--bg-page);
    min-height: 100vh;
}

/* ─── Page header / breadcrumb ──────────────────────────── */
.page-header {
    background: var(--bg-page) !important;
    border-bottom: 0.5px solid var(--border);
    padding: 0.6rem 1.25rem !important;
}
.page-header .page-header-title h5 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
}
.page-header hr {
    border: none;
    border-top: 0.5px solid var(--border);
    margin: 8px 0;
}
.breadcrumb {
    background: transparent !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    font-size: 11px;
}
.breadcrumb-item a { color: var(--text-muted); }
.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }

/* ─── Quick-action buttons (top-right of page header) ───── */
.page-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.btn-action {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; font-size: 11px; font-weight: 500;
    border: 0.5px solid var(--border); border-radius: 0;
    background: var(--bg-surface); color: var(--text-secondary);
    text-decoration: none; cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.btn-action:hover {
    background: var(--bg-subtle);
    border-color: var(--border-md);
    color: var(--text-primary);
    text-decoration: none;
}
.btn-action i { font-size: 10px; }
.btn-action-primary {
    background: var(--text-primary);
    color: #fff;
    border-color: var(--text-primary);
}
.btn-action-primary:hover { background: #1a1e24; color: #fff; }
.btn-action-accent {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn-action-accent:hover { background: #4e7677; color: #fff; }

/* ─── Cards ─────────────────────────────────────────────── */
.card {
    background: var(--bg-surface) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.card-header {
    background: var(--text-primary) !important;
    border-bottom: none !important;
    padding: 0.55rem 1.25rem !important;
}
.card-header h4,
.card-header h5,
.card-header h6 {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 !important;
}
.card-body { padding: 1.25rem !important; }

/* ─── Stat / metric cards ────────────────────────────────── */
.stat-card {
    background: var(--bg-surface);
    border: 0.5px solid var(--border);
    border-radius: 0;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: border-color 0.12s;
}
.stat-card:hover { border-color: var(--border-md); text-decoration: none; }
.stat-card-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.stat-card-icon.teal  { background: var(--accent-light);   color: var(--accent); }
.stat-card-icon.red   { background: var(--danger-light);   color: var(--danger); }
.stat-card-icon.green { background: var(--success-light);  color: var(--success); }
.stat-card-icon.slate { background: var(--accent-slate-light); color: var(--accent-slate); }
.stat-card-label {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 2px;
}
.stat-card-value {
    font-size: 16px; font-weight: 500; color: var(--text-primary); line-height: 1.1;
}

/* ─── Hero stat card (dark) ──────────────────────────────── */
.stat-card-dark {
    background: var(--text-primary);
    border: none;
    padding: 0.85rem 1rem;
    display: flex; align-items: center; gap: 12px;
    border-radius: 0;
}
.stat-card-dark .stat-card-label { color: var(--text-muted); }
.stat-card-dark .stat-card-value { color: #fff; font-size: 22px; }
.stat-card-dark .stat-card-icon {
    background: rgba(255,255,255,0.1);
    color: #D1D5DB;
}

/* ─── Forms ─────────────────────────────────────────────── */
.form-control {
    background: var(--bg-subtle) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    color: var(--text-primary) !important;
    font-size: 12px !important;
    height: 28px !important;
    padding: 2px 8px !important;
    box-shadow: none !important;
}
select.form-control { padding: 2px 6px !important; }
textarea.form-control { height: auto !important; padding: 6px 8px !important; }
.form-control:focus {
    background: var(--bg-surface) !important;
    border-color: var(--accent) !important;
    box-shadow: none !important;
    outline: none !important;
}
.form-group { margin-bottom: 8px !important; }
.floating-label,
label.floating-label {
    font-size: 10px !important; font-weight: 600 !important;
    color: var(--text-muted) !important; text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 3px !important; display: block;
}

/* ─── Submit / primary form button ──────────────────────── */
.btn-submit {
    background: var(--text-primary); color: #fff;
    border: none; border-radius: 0;
    padding: 4px 18px; font-size: 12px; font-weight: 500;
    cursor: pointer; height: 28px;
    transition: background 0.12s;
}
.btn-submit:hover { background: #1a1e24; color: #fff; }

/* Override Bootstrap primary button globally */
.btn-primary {
    background: var(--text-primary) !important;
    border-color: var(--text-primary) !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    padding: 4px 14px !important;
    height: 28px !important;
}
.btn-primary:hover { background: #1a1e24 !important; }
.btn-secondary {
    background: var(--bg-subtle) !important;
    color: var(--text-secondary) !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    padding: 4px 14px !important;
    height: 28px !important;
}
.btn-success {
    background: var(--success) !important;
    border-color: var(--success) !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    height: 28px !important;
}
.btn-danger {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    height: 28px !important;
}

/* ─── Icon action buttons (table rows) ──────────────────── */
.btn-icon-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 0;
    border: 0.5px solid var(--border);
    text-decoration: none; font-size: 11px;
    transition: background 0.12s;
}
.btn-icon-action.edit  { background: var(--accent-slate-light); color: var(--accent-slate); }
.btn-icon-action.view  { background: var(--accent-light);        color: var(--accent); }
.btn-icon-action.del   { background: var(--danger-light);        color: var(--danger); }
.btn-icon-action:hover { background: var(--border); color: var(--text-primary); text-decoration: none; }

/* ─── Tables ─────────────────────────────────────────────── */
.theme-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.theme-table thead tr { background: var(--bg-subtle); }
.theme-table thead th {
    padding: 6px 8px; font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-secondary);
    border-bottom: 0.5px solid var(--border);
    white-space: nowrap;
}
.theme-table tbody tr { border-bottom: 0.5px solid var(--border); }
.theme-table tbody tr:hover { background: var(--bg-subtle); }
.theme-table tbody td { padding: 6px 8px; color: var(--text-primary); }
.theme-table .text-right { text-align: right; }
.theme-table .text-center { text-align: center; }

/* ─── Dividers ───────────────────────────────────────────── */
hr {
    border: none !important;
    border-top: 0.5px solid var(--border) !important;
    margin: 8px 0 !important;
}

/* ─── Modals ─────────────────────────────────────────────── */
.modal-content   { border: 0.5px solid var(--border) !important; border-radius: 0 !important; overflow: hidden; }
.modal-header    { background: var(--text-primary) !important; border-bottom: none !important; padding: 10px 14px !important; }
.modal-title     { color: #fff !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.06em; }
.modal-header .close { color: #9CA3AF !important; opacity: 1 !important; }
.modal-body      { background: var(--bg-surface); padding: 1rem !important; }
.modal-footer    { background: var(--bg-subtle) !important; border-top: 0.5px solid var(--border) !important; padding: 8px 14px !important; }

/* ─── Section titles (above charts etc.) ────────────────── */
.section-title {
    font-size: 10px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 8px;
}