/* Compact layout overrides — Metronic does not ship `sm` variants for the
   sidebar/header, so these selectors mirror the original rules in
   style.bundle.css and tighten padding, min-height and heights moderately.
   Selectors match Metronic's own specificity so no !important is needed. */

/* =========================================================================
 * Sidebar (aside)
 * Originals: item 44px / padding 9px 25px / icon 35px / section 40px
 * ========================================================================= */

/* Top-level item: 44px → 40px, padding 9 25 → 8 20 */
.aside-menu .menu-nav > .menu-item > .menu-link {
    padding: 8px 20px;
}
.aside-menu .menu-nav > .menu-item > .menu-link,
.aside-menu .menu-nav > .menu-item > .menu-heading {
    min-height: 40px;
}

/* Submenu item: 40px → 36px */
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link,
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading {
    min-height: 36px;
}

/* Submenu indent: 40px → 32px */
.aside-menu .menu-nav > .menu-item > .menu-submenu .menu-subnav > .menu-item > .menu-link {
    padding: 0 20px 0 32px;
}
.aside-menu .menu-nav > .menu-item > .menu-submenu .menu-subnav > .menu-section {
    padding-left: 32px;
}

/* Icon column: 35px → 30px */
.aside-menu .menu-nav > .menu-item > .menu-link .menu-icon,
.aside-menu .menu-nav > .menu-item > .menu-heading .menu-icon {
    flex: 0 0 30px;
}

/* Section header: 40px → 34px, mt 20 → 16 */
.aside-menu .menu-nav .menu-section {
    margin-top: 16px;
    height: 34px;
    padding: 0 20px;
}

/* =========================================================================
 * Header (top bar)
 * Originals: 65px height; wrapper padding-top 65px
 * ========================================================================= */

@media (min-width: 992px) {
    .header,
    .header.header-fixed {
        height: 52px;
    }
    .header-fixed .wrapper {
        padding-top: 52px;
    }
    .header-fixed.subheader-fixed.subheader-enabled .wrapper {
        padding-top: 106px;
    }
}

/* Breadcrumb sits in the header — tighten its vertical margin */
#kt_header .breadcrumb {
    margin: 4px 0;
}

/* Brand (sidebar logo container) must match header height to stay aligned */
@media (min-width: 992px) {
    .brand {
        height: 52px;
    }
}

/* =========================================================================
 * Card.card-custom — used everywhere (list, form, detail, custom pages).
 * Originals: header min-h 70 / title 1.275rem / icon svg 24px /
 *            body padding 2rem 2.25rem.
 * ========================================================================= */

.card.card-custom > .card-header,
.card.card-custom.card-sticky > .card-header {
    min-height: 54px;
}
.card.card-custom > .card-header .card-title,
.card.card-custom > .card-header .card-title .card-label {
    font-size: 1.1rem;
}
.card.card-custom > .card-header .card-title .card-icon {
    margin-right: 0.5rem;
}
.card.card-custom > .card-header .card-title .card-icon .svg-icon svg {
    height: 20px;
    width: 20px;
}
.card.card-custom > .card-body {
    padding: 1.5rem 1.75rem;
}

/* =========================================================================
 * Generic typography — semantic h1..h6 (NOT the .h1..h6 utility classes,
 * which are deliberate when authors pick them). One step smaller than
 * Bootstrap defaults to match the compact density of the rest of the layout.
 * Originals: h1 2 / h2 1.75 / h3 1.5 / h4 1.35 / h5 1.25 / h6 1.175 (rem).
 * ========================================================================= */

h1 { font-size: 1.5rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 1rem; }

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.4rem;
}

/* Fieldset legend (used in forms/fieldset.html). Bootstrap default 1.5rem. */
legend {
    font-size: 1.05rem;
}

/* Modal title (Bootstrap reset font-size to inherit; templates use <h4>) */
.modal-title {
    font-size: 1.1rem;
}

/* =========================================================================
 * Modal system — Bootstrap modals as overridden by Metronic.
 * Originals: header 1.5rem 1.75rem / body 1.75rem / footer 1.5rem.
 * ========================================================================= */

.modal-header {
    padding: 1rem 1.25rem;
}
/* Close button: Metronic resets to padding:0/margin:0 with 4 selectors,
   so we don't override here — it already sits compact with just the icon. */
.modal-body {
    padding: 1.25rem;
}
.modal-footer {
    padding: 0.75rem 1.25rem;
}

/* =========================================================================
 * SweetAlert2 — used by workflow form (apps/workflows/templates/workflows/form.html)
 * via confirmChangeStateForm in workflows.js. Originals are heavy
 * (popup padding 1.25em, title 1.875em).
 * ========================================================================= */

.swal2-popup {
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
}
.swal2-title {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
}
.swal2-html-container,
.swal2-content {
    font-size: 0.95rem;
}
.swal2-actions {
    margin: 1rem auto 0;
}

/* =========================================================================
 * Workflow state-hero (apps/workflows/templates/workflows/includes/state_hero.html)
 * Only the dynamic per-state color rules live here; everything else uses
 * Metronic utility classes inline. The color comes from --state-hero-color
 * which the template injects via inline style as var(--{{ color }}).
 * ========================================================================= */

/* Higher specificity than .card.card-custom { border: 0 }.
   !important is needed to defeat the global `<style>.card { border: ... !important }`
   inline block in apps/planning/templates/project_execution/project_execution_detail.html
   (see CLAUDE_DESIGN.md §17 — that block should be scoped). */
.state-hero.card.card-custom {
    border-left: 6px solid var(--state-hero-color, var(--primary)) !important;
    overflow: hidden;
}
.state-hero .state-hero-label,
.state-hero .state-hero-target {
    color: var(--state-hero-color, var(--primary));
}

/* =========================================================================
 * Tables — unified compact look across the app.
 * Originally only `.datatable` (KTDatatable, base_list inline <style>) had this
 * tight treatment; here we extend it to plain Metronic tables
 * (`.table.table-head-custom`) so that detail pages, dashboards and
 * embedded tables match list pages without per-template CSS.
 * Originals: KTDatatable td/th 11px/0.6rem; .table-head-custom td 13px/0.75rem.
 * ========================================================================= */

.datatable th,
.datatable td,
.datatable-table th,
.datatable-table td,
.table.table-head-custom th,
.table.table-head-custom td {
    font-size: 11px;
    padding: 0.35rem 0.5rem;
}
/* KTDatatable cells are <div class="datatable-cell">, not <td>. Match the
   high-specificity selector Metronic ships in style.bundle.css so we
   override it without !important. */
.datatable.datatable-default > .datatable-table > .datatable-head .datatable-row > .datatable-cell,
.datatable.datatable-default > .datatable-table > .datatable-body .datatable-row > .datatable-cell,
.datatable.datatable-default > .datatable-table > .datatable-foot .datatable-row > .datatable-cell {
    font-size: 11px;
    padding: 0.35rem 0.5rem;
}
/* Header text utility: keep uppercase emphasis from .table-head-custom but
   tighten letter-spacing so it doesn't visually fight the smaller font. */
.table.table-head-custom thead th {
    letter-spacing: 0.04rem;
}