@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Baskerville:wght@400;700&display=swap');

:root {
    --armanini-ink: #102b3a;
    --armanini-ink-deep: #0a1c27;
    --armanini-slate: #34586a;
    --armanini-mist: #e8edef;
    --armanini-paper: #f7f7f4;
    --armanini-gold: #b99a63;
    --armanini-line: rgba(16, 43, 58, .12);
    --armanini-primary: #102b3a;
    --armanini-secondary: #5d7079;
    --armanini-success: #47705f;
    --armanini-info: #4f7180;
    --armanini-warning: #92713c;
    --armanini-danger: #8d5555;
    --armanini-light: #eef2f2;
    --armanini-dark: #243c47;
    --armanini-primary-soft: #e8eef0;
    --armanini-secondary-soft: #edf0f1;
    --armanini-success-soft: #e8f0eb;
    --armanini-info-soft: #e8eff1;
    --armanini-warning-soft: #f4eee3;
    --armanini-danger-soft: #f3e9e8;

    /* Keep AdminLTE's runtime tokens in sync with the brand palette. */
    --primary: var(--armanini-primary);
    --secondary: var(--armanini-secondary);
    --success: var(--armanini-success);
    --info: var(--armanini-info);
    --warning: var(--armanini-warning);
    --danger: var(--armanini-danger);
    --light: var(--armanini-light);
    --dark: var(--armanini-dark);
}

body {
    font-family: 'DM Sans', 'Source Sans Pro', sans-serif;
    background: var(--armanini-paper);
    color: #29404d;
}

h1, h2, h3, h4, .brand-text, .login-logo, .register-logo {
    font-family: 'Libre Baskerville', Georgia, serif;
}

.main-header {
    min-height: 65px;
    border-bottom: 1px solid var(--armanini-line);
    box-shadow: none;
}

.main-sidebar, .main-sidebar::before {
    background: var(--armanini-ink-deep) !important;
}

.brand-link {
    height: 83px;
    border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
    padding: 14px 16px;
}

.brand-link .brand-image {
    width: 42px;
    height: 42px;
    margin: 0 10px 0 0;
    opacity: 1 !important;
    box-shadow: none !important;
}

.brand-text {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
    vertical-align: middle;
    color: #fff !important;
    letter-spacing: .045em;
}

.brand-text .brand-name { font-size: 11px; }
.brand-text small { margin-top: 5px; font: 600 8px 'DM Sans', sans-serif; letter-spacing: .34em; }

.sidebar { padding-top: 16px; }

/* The custom brand is taller than AdminLTE's default 3.5rem brand. Keep the
 * menu viewport aligned with the remaining sidebar height so its last item
 * remains reachable instead of being clipped below the viewport. */
.main-sidebar > .brand-link + .sidebar {
    height: calc(100% - 83px);
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 12px;
}

.main-sidebar > .brand-link + .sidebar .nav-sidebar {
    padding-bottom: 8px;
}
.nav-sidebar .nav-header { color: rgba(255, 255, 255, .44); font-size: 9px; font-weight: 600; letter-spacing: .15em; margin: 18px 12px 8px; padding: 0; }
.nav-sidebar > .nav-item > .nav-link { border-radius: 0; color: rgba(255, 255, 255, .73); font-size: 13px; margin: 2px 12px; padding: 11px 13px; }
.nav-sidebar > .nav-item > .nav-link .nav-icon { color: var(--armanini-gold); font-size: 14px; margin-right: 3px; }
.nav-sidebar > .nav-item > .nav-link.active, .nav-sidebar > .nav-item > .nav-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav-sidebar > .nav-item > .nav-link.active { border-left: 2px solid var(--armanini-gold); padding-left: 11px; }

.content-wrapper { background: var(--armanini-paper); }
.content-header { padding: 34px 1rem 20px; }
.content { padding-bottom: 28px; }
.page-heading h1 { color: var(--armanini-ink); font-size: clamp(1.55rem, 3vw, 2rem); margin: 6px 0 7px; }
.page-heading p { color: #6a7880; font-size: .94rem; margin: 0; }
.eyebrow { color: var(--armanini-gold); display: block; font-size: 10px; font-weight: 600; letter-spacing: .18em; }
.heading-date { color: #75858d; font-size: .82rem; margin: 0 0 8px; }
.heading-date i { color: var(--armanini-gold); margin-right: 6px; }

.metric-card { background: #fff; border: 1px solid var(--armanini-line); border-top: 3px solid var(--armanini-slate); box-shadow: 0 8px 22px rgba(16, 43, 58, .045); margin-bottom: 20px; min-height: 176px; padding: 22px; position: relative; }
.metric-card--accent { border-top-color: var(--armanini-gold); }
.metric-icon { align-items: center; background: #edf2f3; color: var(--armanini-slate); display: inline-flex; height: 34px; justify-content: center; margin-bottom: 20px; width: 34px; }
.metric-card--accent .metric-icon { background: #f4eee3; color: #957749; }
.metric-label { color: #6d7d85; display: block; font-size: .76rem; letter-spacing: .035em; }
.metric-card strong { color: var(--armanini-ink); display: block; font: 700 1.55rem 'Libre Baskerville', Georgia, serif; margin: 5px 0 2px; }
.metric-card small { color: #9aa6ac; font-size: .72rem; }

.studio-card { border: 1px solid var(--armanini-line); border-radius: 0; box-shadow: 0 8px 22px rgba(16, 43, 58, .045); }
.studio-card h2 { color: var(--armanini-ink); font-size: 1.3rem; line-height: 1.55; margin: 12px 0; }
.studio-card p { color: #65757d; line-height: 1.8; }
.studio-card--dark { background: linear-gradient(145deg, var(--armanini-ink), #24495a); border: 0; }
.studio-card--dark h2, .studio-card--dark p { color: #fff; }
.studio-card--dark p { color: rgba(255, 255, 255, .7); }

/* Contextual help manual */
.section-help-widget { position: static; }
.section-help-trigger { align-items: center; background: var(--armanini-ink); border: 2px solid #fff; border-radius: 50%; bottom: 22px; box-shadow: 0 8px 22px rgba(10, 28, 39, .25); color: #fff; display: flex; font: 700 1rem 'Libre Baskerville', Georgia, serif; height: 44px; justify-content: center; position: fixed; right: 22px; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; width: 44px; z-index: 1035; }
.section-help-trigger:hover, .section-help-trigger:focus { background: var(--armanini-gold); box-shadow: 0 10px 26px rgba(10, 28, 39, .3); color: #fff; outline: none; transform: translateY(-2px); }
.section-help-trigger:focus-visible { box-shadow: 0 0 0 4px rgba(185, 154, 99, .3), 0 10px 26px rgba(10, 28, 39, .3); }
.modal-open .section-help-trigger { visibility: hidden; }
.section-help-modal { z-index: 1060; }
.section-help-modal .modal-content { border: 0; border-radius: 0; box-shadow: 0 18px 45px rgba(10, 28, 39, .2); }
.section-help-modal__header { align-items: flex-start; background: #fff; border-bottom: 1px solid var(--armanini-line); padding: 22px 26px 17px; }
.section-help-modal__header .modal-title { color: var(--armanini-ink); font-family: 'Libre Baskerville', Georgia, serif; font-size: 1.28rem; margin-top: 8px; }
.section-help-modal__header .close { color: var(--armanini-slate); font-size: 1.5rem; font-weight: 400; opacity: .7; padding: 2px 4px; }
.section-help-modal__header .close:focus { box-shadow: 0 0 0 3px rgba(185, 154, 99, .2); opacity: 1; outline: none; }
.section-help-modal__body { background: #fff; padding: 25px 26px 28px; }
.section-help-modal__summary { color: #536871; font-size: .9rem; line-height: 1.7; margin: 0 0 22px; max-width: 780px; }
.section-help-captures { margin: 0 0 28px; }
.section-help-captures__heading { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 15px; }
.section-help-captures__heading h3 { color: var(--armanini-ink); font-size: .95rem; margin: 7px 0 0; }
.section-help-captures__heading small { color: #849197; font-size: .7rem; }
.section-help-captures__grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
.section-help-capture { margin: 0; min-width: 0; }
.section-help-capture__image-link { background: #eef2f2; border: 1px solid #cbd6d8; box-shadow: 0 8px 20px rgba(16, 43, 58, .08); display: block; overflow: hidden; }
.section-help-capture__image-link:focus { box-shadow: 0 0 0 3px rgba(185, 154, 99, .3), 0 8px 20px rgba(16, 43, 58, .08); outline: none; }
.section-help-capture__image { display: block; height: auto; width: 100%; }
.section-help-capture figcaption { color: #667980; display: block; font-size: .76rem; line-height: 1.55; margin-top: 9px; }
.section-help-capture figcaption strong, .section-help-capture figcaption span, .section-help-capture figcaption em { display: block; }
.section-help-capture figcaption strong { color: var(--armanini-slate); font-size: .73rem; margin-bottom: 3px; text-transform: uppercase; }
.section-help-capture figcaption em { color: #87969c; font-size: .66rem; font-style: normal; margin-top: 3px; }
.section-help-captures__pending { background: #f7f9f8; border-left: 3px solid var(--armanini-gold); color: #667980; font-size: .78rem; margin: 0; padding: 12px 14px; }
.section-help-modal__columns { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.section-help-modal__columns h3 { color: var(--armanini-ink); font-size: .95rem; margin: 0 0 13px; }
.section-help-steps, .section-help-tips { margin: 0; padding: 0; }
.section-help-steps { counter-reset: help-step; list-style: none; }
.section-help-steps li { color: #526770; counter-increment: help-step; font-size: .8rem; line-height: 1.55; margin-bottom: 13px; padding-left: 34px; position: relative; }
.section-help-steps li::before { align-items: center; background: #e8f0f1; color: var(--armanini-slate); content: counter(help-step); display: inline-flex; font-size: .68rem; font-weight: 700; height: 23px; justify-content: center; left: 0; position: absolute; top: 0; width: 23px; }
.section-help-tips { list-style: none; }
.section-help-tips li { border-left: 2px solid var(--armanini-gold); color: #526770; font-size: .8rem; line-height: 1.55; margin-bottom: 13px; padding: 0 0 0 13px; }
.section-help-modal__footer { align-items: center; background: #f7f9f8; border-top: 1px solid var(--armanini-line); display: flex; justify-content: space-between; padding: 13px 26px; }
.section-help-modal__footer small { color: #829197; font-size: .7rem; }
.section-help-modal__footer .btn { border-radius: 0; }

@media (max-width: 575.98px) {
    .section-help-trigger { bottom: 15px; height: 40px; right: 15px; width: 40px; }
    .section-help-modal .modal-dialog { margin: .5rem; }
    .section-help-modal__header, .section-help-modal__body { padding-left: 18px; padding-right: 18px; }
    .section-help-modal__header .modal-title { font-size: 1.08rem; line-height: 1.4; }
    .section-help-captures__heading { align-items: flex-start; flex-direction: column; gap: 7px; }
    .section-help-captures__grid { grid-template-columns: 1fr; }
    .section-help-modal__columns { grid-template-columns: 1fr; gap: 21px; }
    .section-help-modal__footer { align-items: flex-start; flex-direction: column; gap: 11px; padding: 13px 18px; }
    .section-help-modal__footer .btn { width: 100%; }
}

.main-footer { background: #fff; border-top: 1px solid var(--armanini-line); color: #718087; font-size: .78rem; padding: 15px; }
.main-footer strong { color: var(--armanini-ink); font-family: 'Libre Baskerville', Georgia, serif; font-weight: 400; }

.btn-armanini, .btn-primary { background: var(--armanini-ink); border-color: var(--armanini-ink); color: #fff; }
.btn-armanini:hover, .btn-primary:hover { background: var(--armanini-slate); border-color: var(--armanini-slate); }
.bg-armanini { background: var(--armanini-ink) !important; }

/*
 * Bootstrap/AdminLTE semantic palette
 *
 * AdminLTE ships a precompiled Bootstrap palette, so Sass variables alone do
 * not reach the pages that load vendor/adminlte.min.css. These small, semantic
 * overrides keep buttons, utilities, alerts, badges, cards and form states
 * within the restrained Armanini palette without changing their meaning.
 */
.btn-armanini,
.btn-primary { --button-color: var(--armanini-primary); --button-hover-color: var(--armanini-slate); --button-text: #fff; }
.btn-secondary { --button-color: var(--armanini-secondary); --button-hover-color: #4d6069; --button-text: #fff; }
.btn-success { --button-color: var(--armanini-success); --button-hover-color: #385d4e; --button-text: #fff; }
.btn-info { --button-color: var(--armanini-info); --button-hover-color: #3d5f6e; --button-text: #fff; }
.btn-warning { --button-color: var(--armanini-warning); --button-hover-color: #795b2f; --button-text: #fff; }
.btn-danger { --button-color: var(--armanini-danger); --button-hover-color: #734343; --button-text: #fff; }
.btn-light { --button-color: var(--armanini-light); --button-hover-color: #dce5e5; --button-text: var(--armanini-ink); }
.btn-dark { --button-color: var(--armanini-dark); --button-hover-color: var(--armanini-primary); --button-text: #fff; }

.btn-armanini,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-light,
.btn-dark {
    background-color: var(--button-color) !important;
    border-color: var(--button-color) !important;
    color: var(--button-text) !important;
}

.btn-armanini:hover,
.btn-armanini:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-success:hover,
.btn-success:focus,
.btn-info:hover,
.btn-info:focus,
.btn-warning:hover,
.btn-warning:focus,
.btn-danger:hover,
.btn-danger:focus,
.btn-light:hover,
.btn-light:focus,
.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--button-hover-color) !important;
    border-color: var(--button-hover-color) !important;
    color: var(--button-text) !important;
}

.btn-outline-primary { --outline-color: var(--armanini-primary); }
.btn-outline-secondary { --outline-color: var(--armanini-secondary); }
.btn-outline-success { --outline-color: var(--armanini-success); }
.btn-outline-info { --outline-color: var(--armanini-info); }
.btn-outline-warning { --outline-color: var(--armanini-warning); }
.btn-outline-danger { --outline-color: var(--armanini-danger); }
.btn-outline-light { --outline-color: var(--armanini-slate); }
.btn-outline-dark { --outline-color: var(--armanini-dark); }

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-light,
.btn-outline-dark {
    border-color: var(--outline-color) !important;
    color: var(--outline-color) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background-color: var(--outline-color) !important;
    border-color: var(--outline-color) !important;
    color: #fff !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-light:hover,
.btn-outline-light:focus { color: var(--armanini-ink) !important; }

.bg-primary { --surface-color: var(--armanini-primary); --surface-text: #fff; }
.bg-secondary { --surface-color: var(--armanini-secondary); --surface-text: #fff; }
.bg-success { --surface-color: var(--armanini-success); --surface-text: #fff; }
.bg-info { --surface-color: var(--armanini-info); --surface-text: #fff; }
.bg-warning { --surface-color: var(--armanini-warning); --surface-text: #fff; }
.bg-danger { --surface-color: var(--armanini-danger); --surface-text: #fff; }
.bg-light { --surface-color: var(--armanini-light); --surface-text: var(--armanini-ink); }
.bg-dark { --surface-color: var(--armanini-dark); --surface-text: #fff; }

.bg-primary,
.bg-secondary,
.bg-success,
.bg-info,
.bg-warning,
.bg-danger,
.bg-light,
.bg-dark {
    background-color: var(--surface-color) !important;
    color: var(--surface-text) !important;
}

.text-primary { --semantic-color: var(--armanini-primary); }
.text-secondary { --semantic-color: var(--armanini-secondary); }
.text-success { --semantic-color: var(--armanini-success); }
.text-info { --semantic-color: var(--armanini-info); }
.text-warning { --semantic-color: var(--armanini-warning); }
.text-danger { --semantic-color: var(--armanini-danger); }
.text-dark { --semantic-color: var(--armanini-dark); }

.text-primary,
.text-secondary,
.text-success,
.text-info,
.text-warning,
.text-danger,
.text-dark { color: var(--semantic-color) !important; }

.border-primary { --border-color: var(--armanini-primary); }
.border-secondary { --border-color: var(--armanini-secondary); }
.border-success { --border-color: var(--armanini-success); }
.border-info { --border-color: var(--armanini-info); }
.border-warning { --border-color: var(--armanini-warning); }
.border-danger { --border-color: var(--armanini-danger); }
.border-dark { --border-color: var(--armanini-dark); }

.border-primary,
.border-secondary,
.border-success,
.border-info,
.border-warning,
.border-danger,
.border-dark { border-color: var(--border-color) !important; }

.alert-primary { --alert-background: var(--armanini-primary-soft); --alert-border: #cbd9de; --alert-color: var(--armanini-primary); }
.alert-secondary { --alert-background: var(--armanini-secondary-soft); --alert-border: #d7dfe1; --alert-color: var(--armanini-dark); }
.alert-success { --alert-background: var(--armanini-success-soft); --alert-border: #c7d9ce; --alert-color: #315844; }
.alert-info { --alert-background: var(--armanini-info-soft); --alert-border: #c8d9df; --alert-color: #375c6b; }
.alert-warning { --alert-background: var(--armanini-warning-soft); --alert-border: #e2d2b4; --alert-color: #705426; }
.alert-danger { --alert-background: var(--armanini-danger-soft); --alert-border: #dfc6c4; --alert-color: #713f3f; }

.alert-primary,
.alert-secondary,
.alert-success,
.alert-info,
.alert-warning,
.alert-danger {
    background-color: var(--alert-background) !important;
    border-color: var(--alert-border) !important;
    color: var(--alert-color) !important;
}

.badge-primary { --badge-background: var(--armanini-primary-soft); --badge-color: var(--armanini-primary); }
.badge-secondary { --badge-background: var(--armanini-secondary-soft); --badge-color: var(--armanini-dark); }
.badge-success { --badge-background: var(--armanini-success-soft); --badge-color: #315844; }
.badge-info { --badge-background: var(--armanini-info-soft); --badge-color: #375c6b; }
.badge-warning { --badge-background: var(--armanini-warning-soft); --badge-color: #705426; }
.badge-danger { --badge-background: var(--armanini-danger-soft); --badge-color: #713f3f; }

.badge-primary,
.badge-secondary,
.badge-success,
.badge-info,
.badge-warning,
.badge-danger {
    background-color: var(--badge-background) !important;
    color: var(--badge-color) !important;
}

.card-primary { --card-color: var(--armanini-primary); }
.card-secondary { --card-color: var(--armanini-secondary); }
.card-success { --card-color: var(--armanini-success); }
.card-info { --card-color: var(--armanini-info); }
.card-warning { --card-color: var(--armanini-warning); }
.card-danger { --card-color: var(--armanini-danger); }
.card-dark { --card-color: var(--armanini-dark); }

.card-primary,
.card-secondary,
.card-success,
.card-info,
.card-warning,
.card-danger,
.card-dark { border-top-color: var(--card-color) !important; }

.card-primary:not(.card-outline) > .card-header,
.card-secondary:not(.card-outline) > .card-header,
.card-success:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header,
.card-warning:not(.card-outline) > .card-header,
.card-danger:not(.card-outline) > .card-header,
.card-dark:not(.card-outline) > .card-header {
    background-color: var(--card-color) !important;
    border-color: var(--card-color) !important;
    color: #fff !important;
}

.callout-primary { border-left-color: var(--armanini-primary) !important; }
.callout-secondary { border-left-color: var(--armanini-secondary) !important; }
.callout-success { border-left-color: var(--armanini-success) !important; }
.callout-info { border-left-color: var(--armanini-info) !important; }
.callout-warning { border-left-color: var(--armanini-warning) !important; }
.callout-danger { border-left-color: var(--armanini-danger) !important; }

.progress-bar.bg-primary { background-color: var(--armanini-primary) !important; }
.progress-bar.bg-secondary { background-color: var(--armanini-secondary) !important; }
.progress-bar.bg-success { background-color: var(--armanini-success) !important; }
.progress-bar.bg-info { background-color: var(--armanini-info) !important; }
.progress-bar.bg-warning { background-color: var(--armanini-warning) !important; }
.progress-bar.bg-danger { background-color: var(--armanini-danger) !important; }

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) { color: var(--armanini-slate); }
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge):hover { color: var(--armanini-ink); }
.page-item.active .page-link,
.nav-pills .nav-link.active,
.dropdown-item.active,
.dropdown-item:active { background-color: var(--armanini-primary) !important; border-color: var(--armanini-primary) !important; color: #fff !important; }
.form-control:focus,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label { border-color: var(--armanini-slate) !important; box-shadow: 0 0 0 .2rem rgba(16, 43, 58, .14) !important; }

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active { border-left: 2px solid var(--armanini-gold); }

/* Preserve Bootstrap's scrollable modal behavior when a form wraps body and footer. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form > .modal-body {
    min-height: 0;
    overflow-y: auto;
}

.modal-error-summary {
    box-shadow: 0 8px 20px rgba(104, 25, 31, .16);
    position: sticky;
    top: 0;
    z-index: 5;
}

.modal-error-summary li + li { margin-top: .25rem; }

.login-page, .register-page { background: linear-gradient(135deg, rgba(7, 27, 39, .94), rgba(31, 67, 83, .88)), radial-gradient(circle at 20% 20%, #6e8e9b, var(--armanini-ink-deep)); background-size: cover; }
.login-box, .register-box { width: min(390px, calc(100vw - 32px)); }
.login-logo, .register-logo { margin-bottom: 20px; }
.login-logo a, .register-logo a { color: #fff !important; display: inline-flex; align-items: center; font-size: 13px; letter-spacing: .07em; }
.login-logo img, .register-logo img { margin-right: 12px; }
.login-logo .brand-name, .register-logo .brand-name { font-size: 13px; }
.login-logo small, .register-logo small { display: block; font: 600 8px 'DM Sans', sans-serif; letter-spacing: .32em; margin-top: 5px; }
.card-armanini { border: 0; border-radius: 0; box-shadow: 0 18px 45px rgba(0, 0, 0, .22); }
.card-armanini .card-header { border-bottom: 1px solid var(--armanini-line); color: var(--armanini-ink); padding: 22px 25px 16px; }
.card-armanini .card-title { font-family: 'Libre Baskerville', Georgia, serif; font-size: 1rem; }
.card-armanini .card-body { padding: 25px; }
.card-armanini .card-footer { background: #fff; border-top: 0; padding: 0 25px 25px; }
.card-armanini .form-control { border-color: #d8e0e3; border-radius: 0; }
.card-armanini .input-group-text { background: #f5f7f7; border-color: #d8e0e3; border-radius: 0; color: var(--armanini-slate); }
.card-armanini .btn { border-radius: 0; font-size: .82rem; letter-spacing: .04em; padding: .62rem .75rem; }
.card-armanini a { color: var(--armanini-slate); }

/* Development roadmap */
.development-hero { align-items: stretch; background: linear-gradient(135deg, var(--armanini-ink-deep), #21485a); color: #fff; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr); margin-bottom: 20px; overflow: hidden; position: relative; }
.development-hero::after { border: 1px solid rgba(185, 154, 99, .28); border-radius: 50%; content: ''; height: 270px; position: absolute; right: -85px; top: -135px; width: 270px; }
.development-hero__intro { padding: clamp(28px, 4vw, 48px); position: relative; z-index: 1; }
.development-hero__intro h2 { font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.35; margin: 12px 0; }
.development-hero__intro p { color: rgba(255, 255, 255, .68); line-height: 1.75; margin: 0; max-width: 720px; }
.development-hero__figures { align-items: center; background: rgba(255, 255, 255, .055); display: grid; grid-template-columns: repeat(3, 1fr); padding: 26px; position: relative; z-index: 1; }
.development-hero__figures div { border-left: 1px solid rgba(255, 255, 255, .13); padding: 8px 18px; }
.development-hero__figures strong { display: block; font: 700 clamp(1.55rem, 3vw, 2.2rem) 'Libre Baskerville', Georgia, serif; }
.development-hero__figures span { color: rgba(255, 255, 255, .58); display: block; font-size: .68rem; letter-spacing: .05em; margin-top: 5px; text-transform: uppercase; }
.development-status-grid { display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 20px; }
.development-status-card { align-items: center; background: #fff; border: 1px solid var(--armanini-line); border-top: 3px solid var(--status-color); box-shadow: 0 5px 18px rgba(16, 43, 58, .035); color: var(--armanini-ink); display: flex; min-width: 0; padding: 15px; text-align: left; transition: transform .18s ease, box-shadow .18s ease; }
.development-status-card:hover, .development-status-card:focus, .development-status-card.is-active { box-shadow: 0 9px 24px rgba(16, 43, 58, .1); outline: none; transform: translateY(-2px); }
.development-status-card.is-active { background: #f8faf9; box-shadow: inset 0 0 0 1px var(--status-color), 0 9px 24px rgba(16, 43, 58, .1); }
.development-status-card--done { --status-color: #38806a; }
.development-status-card--progress { --status-color: #28759a; }
.development-status-card--partial { --status-color: #bd8c36; }
.development-status-card--pending { --status-color: #84939a; }
.development-status-card--blocked { --status-color: #b44f4f; }
.development-status-card--out { --status-color: #76647d; }
.development-status-card__icon { align-items: center; background: color-mix(in srgb, var(--status-color) 11%, white); color: var(--status-color); display: inline-flex; flex: 0 0 34px; height: 34px; justify-content: center; margin-right: 10px; }
.development-status-card strong { display: block; font: 700 1.15rem 'Libre Baskerville', Georgia, serif; line-height: 1; }
.development-status-card small { color: #7b898f; display: block; font-size: .66rem; line-height: 1.2; margin-top: 5px; }
.development-overview { margin-bottom: 20px; }
.development-section-title { color: var(--armanini-ink); font-size: 1.2rem; margin: 8px 0 20px; }
.development-priorities { counter-reset: roadmap; list-style: none; margin: 0; padding: 0; }
.development-priorities li { align-items: flex-start; display: grid; gap: 12px; grid-template-columns: 27px 1fr; margin-bottom: 12px; }
.development-priorities li:last-child { margin-bottom: 0; }
.development-priorities span { align-items: center; background: #edf2f3; color: var(--armanini-slate); display: flex; font-size: .7rem; font-weight: 600; height: 27px; justify-content: center; }
.development-priorities p { color: #526770; font-size: .81rem; line-height: 1.55; margin: 3px 0 0; }
.development-scope-card { border-top: 3px solid var(--armanini-gold); }
.development-scope-row { align-items: center; border-top: 1px solid var(--armanini-line); display: flex; gap: 13px; padding: 16px 0; }
.development-scope-row:last-child { padding-bottom: 0; }
.development-scope-row strong, .development-scope-row small { display: block; }
.development-scope-row strong { color: var(--armanini-ink); font-size: .85rem; }
.development-scope-row small { color: #8b989e; font-size: .7rem; margin-top: 2px; }
.scope-mark { align-items: center; background: #eef1f2; color: #66777e; display: inline-flex; flex: 0 0 27px; font-size: .68rem; font-weight: 700; height: 27px; justify-content: center; width: 27px; }
.scope-mark--a { background: #e4f1ec; color: #2f755f; }
.scope-mark--b { background: #e5eff4; color: #286887; }
.scope-mark--c { background: #f0ebf2; color: #725c7a; }
.development-workspace { background: #fff; border: 1px solid var(--armanini-line); box-shadow: 0 8px 22px rgba(16, 43, 58, .045); padding: clamp(20px, 3vw, 32px); }
.development-toolbar { align-items: flex-end; display: flex; gap: 20px; justify-content: space-between; }
.development-search { max-width: 390px; position: relative; width: 100%; }
.development-search i { color: #92a0a6; left: 14px; position: absolute; top: 13px; }
.development-search .form-control { border-color: #dce3e5; border-radius: 0; font-size: .8rem; height: 42px; padding-left: 39px; }
.development-search .form-control:focus { border-color: var(--armanini-gold); box-shadow: 0 0 0 3px rgba(185, 154, 99, .12); }
.development-filter-bar { align-items: center; border-bottom: 1px solid var(--armanini-line); display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 26px; padding-bottom: 15px; }
.development-filter { background: transparent; border: 1px solid #dce3e5; color: #62747d; font-size: .69rem; padding: 7px 11px; }
.development-filter:hover, .development-filter:focus, .development-filter.is-active { background: var(--armanini-ink); border-color: var(--armanini-ink); color: #fff; outline: none; }
.development-result-count { color: #8b989e; font-size: .71rem; margin-left: auto; }
.development-module { margin-bottom: 30px; }
.development-module:last-child { margin-bottom: 0; }
.development-module__header { align-items: flex-end; cursor: pointer; display: flex; justify-content: space-between; list-style: none; margin-bottom: 11px; }
.development-module__header::-webkit-details-marker { display: none; }
.development-module__header > div { align-items: center; display: flex; gap: 10px; }
.development-module__header > div > span { color: var(--armanini-gold); font: 700 .78rem 'Libre Baskerville', Georgia, serif; }
.development-module__header h3 { color: var(--armanini-ink); font-size: 1rem; margin: 0; }
.development-module__aside { align-items: center; }
.development-module__aside small { color: #9aa6ac; font-size: .66rem; }
.development-module__toggle { color: var(--armanini-gold); font-size: .67rem; margin-left: 12px; transition: transform .2s ease; }
.development-module[open] .development-module__toggle { transform: rotate(180deg); }
.development-module:focus-within > .development-module__header { outline: 2px solid rgba(185, 154, 99, .45); outline-offset: 3px; }
.development-task { --status-color: #84939a; border: 1px solid var(--armanini-line); border-left: 3px solid var(--status-color); margin-bottom: 8px; }
.development-task--done { --status-color: #38806a; }
.development-task--progress { --status-color: #28759a; }
.development-task--partial { --status-color: #bd8c36; }
.development-task--pending { --status-color: #84939a; }
.development-task--blocked { --status-color: #b44f4f; }
.development-task--out { --status-color: #76647d; }
.development-task summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; list-style: none; min-height: 60px; padding: 12px 15px; }
.development-task summary::-webkit-details-marker { display: none; }
.development-task[open] summary { background: #f8faf9; border-bottom: 1px solid var(--armanini-line); }
.development-task__identity { align-items: baseline; display: flex; gap: 12px; min-width: 0; }
.development-task__identity code { color: var(--status-color); flex: 0 0 auto; font-size: .72rem; font-weight: 700; }
.development-task__identity > span { color: #334d59; font-size: .82rem; font-weight: 500; }
.development-task__meta { align-items: center; display: flex; flex: 0 0 auto; gap: 8px; margin-left: 12px; }
.development-task__meta > i { color: #9aa6ac; font-size: .65rem; transition: transform .2s ease; }
.development-task[open] .development-task__meta > i { transform: rotate(180deg); }
.status-pill { background: color-mix(in srgb, var(--status-color) 10%, white); color: var(--status-color); font-size: .63rem; font-weight: 600; padding: 5px 8px; }
.development-task__body { padding: 20px; }
.development-task__facts { display: grid; gap: 14px; grid-template-columns: 1fr 1fr 1.4fr; margin-bottom: 17px; }
.development-task__facts > div { border-right: 1px solid var(--armanini-line); padding-right: 12px; }
.development-task__facts > div:last-child { border: 0; }
.development-task__body small { color: #8d9aa0; display: block; font-size: .62rem; font-weight: 600; letter-spacing: .07em; margin-bottom: 5px; text-transform: uppercase; }
.development-task__body p { color: #536871; font-size: .76rem; line-height: 1.65; margin: 0; overflow-wrap: anywhere; }
.development-task__detail { border-top: 1px solid var(--armanini-line); padding: 15px 0; }
.development-task__evidence { align-items: flex-start; background: #f3f6f6; display: flex; gap: 11px; padding: 14px; }
.development-task__evidence > i { color: var(--armanini-gold); margin-top: 2px; }
.development-empty { color: #75858d; padding: 45px 15px; text-align: center; }
.development-empty i { color: var(--armanini-gold); font-size: 1.4rem; }
.development-empty h3 { color: var(--armanini-ink); font-size: 1rem; margin: 13px 0 6px; }
.development-empty p { font-size: .78rem; margin: 0; }

@media (max-width: 575.98px) {
    .content-header { padding-top: 24px; }
    .heading-date { margin-top: 16px; }
    .metric-card { min-height: 152px; }
    .development-hero__figures { grid-template-columns: 1fr; }
    .development-hero__figures div { border-bottom: 1px solid rgba(255, 255, 255, .13); border-left: 0; padding: 12px 4px; }
    .development-hero__figures div:last-child { border-bottom: 0; }
    .development-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .development-toolbar { align-items: stretch; flex-direction: column; }
    .development-search { max-width: none; }
    .development-result-count { flex: 0 0 100%; margin: 6px 0 0; }
    .development-module__header { align-items: flex-start; flex-direction: column; gap: 6px; }
    .development-task summary { align-items: flex-start; }
    .development-task__identity { align-items: flex-start; flex-direction: column; gap: 4px; }
    .development-task__meta .scope-mark { display: none; }
    .development-task__facts { grid-template-columns: 1fr; }
    .development-task__facts > div { border-bottom: 1px solid var(--armanini-line); border-right: 0; padding-bottom: 10px; }
}

@media (max-width: 991.98px) {
    .development-hero { grid-template-columns: 1fr; }
    .development-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .development-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .development-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}