/* ==========================================================================
   Compliance Farm — Restyle 2026
   Loaded after style.css: replaces the top-bar + horizontal-menu layout
   inherited from the original codebase with a sidebar-based shell and a
   distinct all-green (petrol + emerald) identity, without touching Blade
   markup beyond layouts/base.blade.php and layouts/navbar.blade.php.
   ========================================================================== */

:root {
    /* Emerald accent — links, buttons, focus rings */
    --brand-primary: #1c7a58;
    --brand-primary-dark: #145f44;
    --brand-primary-light: #e1f5ec;

    /* Dark petrol green — sidebar and dark surfaces */
    --ink-deep: #163a32;
    --ink-deep-2: #204d42;
    --ink-deep-3: #2d6153;

    /* Brighter, more saturated green used only for the active sidebar item —
       needs to pop clearly against --ink-deep, more than --brand-primary
       (tuned for readability on light surfaces) would on its own. */
    --sidebar-active: #24a173;

    --surface: #ffffff;
    --surface-muted: #f1f5f3;
    --body-bg: #edf2f0;
    --border-color: #dde5e1;

    --text: #16241f;
    --text-muted: #5c6b65;
    /* Neutral (not green-tinted) so it reads clearly against the green
       sidebar — a muted color in the same hue family sits too close to the
       background for comfortable reading. */
    --text-on-dark: #f2f5f4;
    --text-on-dark-muted: #d3dbd8;

    --success: #3fb37c;
    --success-dark: #2c8f61;
    --danger: #e6484f;
    --danger-dark: #c9363d;
    --warning: #d1962f;
    --warning-dark: #a97a1f;
    --info: #1a9cb0;
    --info-dark: #147f90;

    --sidebar-w: 264px;
    --topbar-h: 64px;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(22, 58, 50, .06);
    --shadow: 0 2px 10px rgba(22, 58, 50, .08);
    --shadow-lg: 0 8px 28px rgba(22, 58, 50, .14);
}

/* Keeps the scrollbar's width permanently reserved, so opening a modal
   (Bootstrap pads the body to compensate for the scrollbar it hides)
   never changes the page width. Without this, charts on the page (which
   redraw — and replay their entrance animation — on any resize) briefly
   flash back to their faded starting state whenever a modal opens or
   closes, which reads as the page "going disabled". */
html {
    overflow-y: scroll;
}

/* ---- Base / typography ---- */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Open Sans', Arial, sans-serif;
    color: var(--text);
}

body:not(.login-bg):not(.error-bg) {
    background: var(--body-bg);
}

a {
    color: var(--brand-primary);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #c3cec8;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ==========================================================================
   Shell layout — sidebar + topbar
   ========================================================================== */

.app-wrap {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    min-height: 100vh;
}

/* #navigationMain wraps <aside class="sidebar"> and <div class="app-navbar">
   (see layouts/base.blade.php) — it needs to be transparent to the grid so
   both land in the columns/rows placed below. */
#navigationMain {
    display: contents;
}

/* ---- Sidebar ---- */
.sidebar {
    grid-column: 1;
    grid-row: 1 / 3;
    background: var(--ink-deep);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 40;
}

.sidebar-brand {
    padding: 18px 22px;
    border-bottom: 1px solid rgba(231, 239, 236, .08);
    flex: 0 0 auto;
}

.sidebar-brand img {
    max-height: 32px;
    display: block;
}

.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 0 28px;
}

#mainBar {
    list-style: none;
    margin: 0;
    padding: 0;
    contain: paint;
}

#mainBar > li {
    margin: 2px 12px;
    contain: paint;
    isolation: isolate;
}

#mainBar > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-on-dark-muted);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

#mainBar > li > a .nav-icon {
    font-size: 1.05rem;
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
}

#mainBar > li > a:hover {
    background: var(--ink-deep-2);
    color: var(--text-on-dark);
}

#mainBar > li.active > a,
#mainBar > li > a.active {
    background: var(--sidebar-active);
    color: #ffffff;
    font-weight: 600;
}

/* Flatten the bottom corners while the accordion panel is open, so the
   toggle's rounded corners don't leave a sliver gap above the submenu. */
#mainBar > li.dropdown.open > a.dropdown-toggle {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#mainBar > li.dropdown.open {
    position: relative;
}

/* Solid cover over the toggle/panel seam: some browsers leave a thin stray
   white line there when the panel opens. Placed as the item's own ::after
   (painted last, on top of both the toggle and the panel below it) rather
   than on the toggle or panel themselves, since either of those would clip
   it via their own `contain: paint`. */
#mainBar > li.dropdown.open::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 34px;
    height: 6px;
    background: var(--ink-deep);
    pointer-events: none;
}

/* Overrides a legacy !important rule in style.css (#mainBar .debug > a)
   that painted this item bright orange (#ff6d20) regardless of theme. */
#mainBar > li.debug > a {
    background-color: var(--ink-deep-2) !important;
    background-image: none !important;
    color: #e2807a !important;
}

#mainBar > li.debug > a:hover {
    background-color: var(--ink-deep-3) !important;
}

body.debug .page-header {
    background-color: var(--ink-deep-2) !important;
    background-image: none !important;
}

/* caret indicator for expandable groups */
#mainBar > li.dropdown > a.dropdown-toggle::after {
    content: "";
    margin-left: auto;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    transition: transform .15s ease;
    opacity: .65;
}

#mainBar > li.dropdown.open > a.dropdown-toggle::after {
    transform: rotate(-135deg);
}

/* submenu — was a floating Bootstrap dropdown, now an inline accordion panel
   (see the click handler in layouts/base.blade.php). No open/close
   animation on purpose: an animated height was leaving a stray white
   rendering artifact at the panel's edge in some browsers; a plain
   display:none/block toggle does not. */
#mainBar .dropdown-menu {
    position: static !important;
    float: none;
    display: none;
    background: var(--ink-deep) !important;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none;
    padding: 2px 0 6px 32px;
    margin: 0;
    transform: none !important;
    min-width: 0;
    width: auto;
    contain: paint;
    isolation: isolate;
}

#mainBar > li.dropdown.open > .dropdown-menu {
    display: block;
}

#mainBar .dropdown-menu a.dropdown-item {
    display: block;
    padding: 7px 10px;
    font-size: .84rem;
    line-height: 1.3;
    color: var(--text-on-dark-muted);
    border-radius: 6px;
    white-space: normal;
    background: transparent;
}

#mainBar .dropdown-menu a.dropdown-item:hover {
    background: var(--ink-deep-2);
    color: var(--text-on-dark);
}

#mainBar .dropdown-menu span.dropdown-item {
    display: block;
    color: rgba(199, 209, 205, .75);
    text-transform: uppercase;
    font-size: .66rem;
    letter-spacing: .07em;
    font-weight: 700;
    padding: 10px 10px 2px;
    cursor: default;
    background: transparent;
}

/* ---- Topbar ---- */
.app-navbar {
    grid-column: 2;
    grid-row: 1;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--topbar-h);
    padding: 0 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 30;
}

.sidebar-toggle-btn {
    display: none;
    border: 0;
    background: transparent;
    font-size: 1.25rem;
    color: var(--text);
    cursor: pointer;
    padding: 6px;
    line-height: 1;
}

.topbar-title {
    flex: 1 1 auto;
    min-width: 0;
}

.topbar-title h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-title h3 a {
    color: inherit;
    text-decoration: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.topbar-actions .help-label {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
}

.topbar-actions .header-actions {
    float: none;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.topbar-actions .user-settings {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
}

.topbar-actions .user-settings:hover {
    background: var(--surface-muted);
}

/* Overrides legacy solid-blue square (main.css .avatar: background #2698e2)
   with the same light-tint / colored-icon language used everywhere else. */
.topbar-actions .header-actions > li > a.user-settings .avatar {
    background: var(--surface-muted);
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
}

.topbar-actions .header-actions > li > a.user-settings .avatar i {
    color: var(--brand-primary);
    font-size: 1.1rem;
    line-height: 34px;
}

/* Overrides a legacy rule (main.css .user-settings span.user-name) that
   sets this text white — invisible now that the topbar is light. Matched
   at the same selector depth so it reliably wins. */
.topbar-actions .header-actions > li > a.user-settings span.user-name {
    color: var(--text) !important;
    font-size: .86rem;
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.topbar-actions .user-name-label {
    display: block;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--brand-primary);
}

/* ---- Istanza (scenario) picker modal ---- */
.istanza-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.istanza-list .istanza-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    color: var(--text);
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease;
}

.istanza-list .istanza-option:hover {
    background: var(--surface-muted);
    color: var(--text);
    text-decoration: none;
}

.istanza-list .istanza-option.active {
    background: var(--brand-primary-light);
    border-color: var(--brand-primary);
    color: var(--brand-primary-dark);
    font-weight: 700;
}

.istanza-list .istanza-option i {
    color: var(--brand-primary);
    font-size: 1.1rem;
}

/* Help shortcut icons (info bubble / edit-page pencil) injected by
   base.blade.php next to field labels and the page title — legacy
   style.css fills them solid black/green; switch to the same light-tint
   language as the row-action icon buttons. */
.btn-help,
.edit-help {
    background-color: var(--surface-muted) !important;
    color: var(--text-muted) !important;
    border-radius: var(--radius-sm);
}

.btn-help:hover,
.btn-help:active,
.edit-help,
.edit-help:hover,
.edit-help:active {
    background-color: var(--brand-primary-light) !important;
    color: var(--brand-primary) !important;
}

.topbar .dropdown-menu {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* ---- Mobile: off-canvas sidebar ---- */
@media (max-width: 991px) {
    .app-wrap {
        grid-template-columns: 1fr;
    }

    .app-navbar,
    .app-container {
        grid-column: 1;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: var(--sidebar-w);
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    body.sidebar-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(22, 58, 50, .45);
        z-index: 35;
    }

    .sidebar-toggle-btn {
        display: inline-flex;
    }
}

/* ---- Containers ---- */
.app-container {
    grid-column: 2;
    grid-row: 2;
    margin: 20px 24px 24px;
}

/* Overrides legacy page-shell colors (main.css): a solid white panel behind
   everything plus a blue footer bar, designed for the old rounded-card
   page shell. Content now sits in its own .card surfaces on the page
   background, so the wrapper goes transparent and the footer becomes a
   plain muted line instead of a mismatched color block. */
.main-content {
    background: transparent;
}

.main-footer {
    background: transparent;
    border-radius: 0;
    padding: 14px 4px 0;
    color: var(--text-muted);
    font-size: .72rem;
    text-align: center;
}

/* ---- Cards ---- */
.card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card .card-header {
    background: var(--surface);
    background-image: none;
    border-bottom: 2px solid var(--brand-primary);
    border-radius: var(--radius) var(--radius) 0 0;
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-deep-2);
}

.card .card-header:first-child {
    border-radius: var(--radius) var(--radius) 0 0;
}

.card.top-blue-bdr { border-top: 3px solid var(--brand-primary); }
.card.top-grey-bdr { border-top: 3px solid #8b95a5; }
.card.top-red-bdr { border-top: 3px solid var(--brand-primary-dark); }
.card.top-green-bdr { border-top: 3px solid var(--success); }
.card.top-pink-bdr { border-top: 3px solid #d6437e; }
.card.top-orange-bdr { border-top: 3px solid var(--warning); }

/* ---- Dashboard mini widgets ---- */
.mini-widget {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}

.mini-widget:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.mini-widget .mini-widget-heading {
    border-radius: 0;
    letter-spacing: .04em;
    font-weight: 600;
    opacity: .95;
}

.mini-widget .mini-widget-body i {
    opacity: .9;
}

.mini-widget.cyan .mini-widget-heading { background: var(--info-dark); }
.mini-widget.cyan .mini-widget-body { background: var(--info); }

.mini-widget.green .mini-widget-heading { background: var(--success-dark); }
.mini-widget.green .mini-widget-body { background: var(--success); }

.mini-widget.red .mini-widget-heading { background: var(--danger-dark); }
.mini-widget.red .mini-widget-body { background: var(--danger); }

.mini-widget.yellow .mini-widget-heading { background: var(--warning-dark); }
.mini-widget.yellow .mini-widget-body { background: var(--warning); }

.mini-widget.grey .mini-widget-heading { background: #45524c; }
.mini-widget.grey .mini-widget-body { background: #5c6b65; }

/* ---- Buttons ----
   Two families: regular text buttons (SALVA, NUOVA, RIMUOVI…) get a fully
   rounded "pill" shape; small icon-only buttons (row actions in lists —
   edit/add/delete) drop the solid fill entirely and show only a colored
   icon, filling in with a light tint on hover. */
.btn {
    border-radius: 999px;
    padding: .5rem 1.35rem;
    font-weight: 600;
    letter-spacing: .01em;
    border: 0;
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease, transform .05s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--brand-primary);
}

.btn-primary:hover {
    background: var(--brand-primary-dark);
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 3px rgba(31, 138, 99, .25);
}

.btn-secondary {
    background: var(--ink-deep-2);
}

.btn-secondary:hover {
    background: var(--ink-deep);
}

.btn-success {
    background: var(--success);
}

.btn-success:hover {
    background: var(--success-dark);
}

.btn-danger {
    background: var(--danger);
}

.btn-danger:hover {
    background: var(--danger-dark);
}

/* Small icon-only buttons — row actions (edit / add-child / delete…) */
.btn-sm {
    background: transparent !important;
    border: 0;
    box-shadow: none;
    border-radius: var(--radius-sm);
    padding: .32rem .5rem;
    min-width: 30px;
}

.btn-sm:active {
    transform: none;
}

.btn-sm.btn-warning { color: var(--warning-dark); }
.btn-sm.btn-warning:hover { background: #fbeed9 !important; }

.btn-sm.btn-success { color: var(--success-dark); }
.btn-sm.btn-success:hover { background: #dcf3e7 !important; }

.btn-sm.btn-danger { color: var(--danger); }
.btn-sm.btn-danger:hover { background: #fbdfe0 !important; }

.btn-sm.btn-info { color: var(--info-dark); }
.btn-sm.btn-info:hover { background: #d9f0f4 !important; }

.btn-sm.btn-primary { color: var(--brand-primary); }
.btn-sm.btn-primary:hover { background: var(--brand-primary-light) !important; }

/* ---- Forms ----
   Plain text/number/date inputs and native selects go flat — no box, just
   an underline — so a form reads lighter than the boxed dropdown/select2
   controls next to it. Multi-line textareas keep a full box: an underline
   alone doesn't read well once the field has height. */
.select2-selection.select2-selection--single,
.select2-selection.select2-selection--multiple,
.btn-bs-select {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.form-control {
    border: 0;
    border-bottom: 2px solid var(--border-color);
    border-radius: 0;
    background: transparent;
    padding-left: .15rem;
    padding-right: .15rem;
}

.form-control:focus {
    border-bottom-color: var(--brand-primary);
    box-shadow: none;
    background: var(--brand-primary-light);
}

textarea.form-control {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding-left: .75rem;
    padding-right: .75rem;
}

textarea.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-light);
    background: var(--surface);
}

label {
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-deep-2);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand-primary);
}

/* ---- Tabs (detail/edit view sub-navigation) ----
   Overrides legacy !important blue in style.css (.tabs-custom li.active a). */
.tabs-custom li a {
    background: var(--surface-muted) !important;
    color: var(--text-muted);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.tabs-custom li.active a {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
}

/* ---- Alerts ---- */
.alert {
    border: 0;
    border-left: 4px solid transparent;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.alert-success {
    background: #eafaf1;
    border-left-color: var(--success);
    color: var(--success-dark);
}

.alert-danger {
    background: #fdecec;
    border-left-color: var(--danger);
    color: var(--danger-dark);
}

.alert-info {
    background: #e9f8fb;
    border-left-color: var(--info);
    color: var(--info-dark);
}

/* ---- Tables / DataTables ----
   Flat, borderless rows separated by a hairline instead of the old
   zebra-striped grid — a plainer, more spacious list feel. */
.card .card-body table,
table.dataTable {
    border-collapse: separate;
    border-spacing: 0;
}

table.dataTable thead th {
    background: var(--ink-deep-2);
    color: var(--text-on-dark);
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .06em;
    font-weight: 700;
    padding-top: .85rem !important;
    padding-bottom: .85rem !important;
    border-bottom: 0 !important;
}

table.dataTable tbody td {
    padding-top: .65rem !important;
    padding-bottom: .65rem !important;
    border-top: 1px solid var(--border-color) !important;
}

table.dataTable tbody tr:first-child td {
    border-top: 0 !important;
}

table.dataTable tbody tr:hover {
    background-color: var(--brand-primary-light);
}

table.dataTable.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 999px !important;
    margin-left: 2px;
    border-color: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--surface-muted) !important;
    color: var(--text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #ffffff !important;
}

.dataTables_wrapper .dt-buttons .btn {
    border-radius: 999px;
}

/* ---- Login screen ---- */
body.login-bg {
    background: linear-gradient(160deg, #163a32 0%, #204d42 45%, #1f8a63 130%);
}

.login-box {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2rem 2.25rem 1.5rem;
}

.login-box .form-control {
    padding: .65rem .9rem;
}

.login-box .btn-primary {
    padding: .6rem 1rem;
    font-weight: 600;
}

/* ---- Modal ---- */
.modal-content {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
}