/* ==========================================================================
   Sentinel Unity GRC — Enterprise workspace (non-dashboard surfaces)
   Workiva / Archer-style: flat, bordered, compact, no decorative chrome.
   Loads after pages.css. Dashboard templates load dashboard.css last — .db-page
   rules win where defined.
   ========================================================================== */

:root {
    --es-page-bg: var(--bg-app, #f5f7fa);
    --es-panel-bg: var(--surface, #ffffff);
    --es-border: var(--border-light, #e5e7eb);
    --es-divider: var(--border-light, #e5e7eb);
    --es-gridline: #ebebeb;
    --es-muted: var(--text-muted, #6b7280);
    --es-text: var(--text-default, #1f2937);
    --es-accent: var(--primary-700, #0f76b8);
    --es-accent-hover: var(--primary-600, #0c5d8f);
    --es-radius: var(--radius-card, 6px);
    --es-focus: rgba(15, 118, 184, 0.22);
    --es-row-hover: #fafafa;
    --es-th-bg: #f7f7f7;
}

/* --------------------------------------------------------------------------
   Main scroll surface — light gray “report desk” behind white panels
   -------------------------------------------------------------------------- */
.content-area {
    background: var(--es-page-bg);
}

/* --------------------------------------------------------------------------
   Cards & panels
   -------------------------------------------------------------------------- */
.content-area .card {
    background: var(--es-panel-bg);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    box-shadow: none;
}

.content-area .card-header {
    background: var(--es-panel-bg);
    border-bottom: 1px solid var(--es-divider);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--es-text);
}

.content-area .card-body {
    padding: var(--space-4);
}

.content-area .card-footer {
    background: var(--es-panel-bg);
    border-top: 1px solid var(--es-divider);
    padding: var(--space-3) var(--space-4);
}

/* Remove heavy “marketing” card modifiers inside workspace */
.content-area .card.shadow,
.content-area .card.shadow-sm,
.content-area .card.shadow-lg {
    box-shadow: none !important;
}

.content-area .border-0.card {
    border: 1px solid var(--es-border);
}

/* --------------------------------------------------------------------------
   Page header (list / detail toolbar)
   -------------------------------------------------------------------------- */
.content-area .page-header,
.content-area .grc-page-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--es-divider);
    gap: 12px;
}

.content-area .page-heading {
    font-size: var(--font-page-title, var(--font-3xl));
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--es-text);
    margin-bottom: 2px;
    line-height: var(--leading-tight, 1.2);
}

.content-area .page-description {
    font-size: var(--font-sm);
    color: var(--es-muted);
}

/* --------------------------------------------------------------------------
   Reusable blocks (opt-in class names)
   -------------------------------------------------------------------------- */
.grc-panel {
    background: var(--es-panel-bg);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    box-shadow: none;
}

.grc-panel__hdr {
    padding: 10px 16px;
    border-bottom: 1px solid var(--es-divider);
    font-size: var(--font-sm, 12px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--es-text);
}

.grc-panel__body {
    padding: 16px;
}

.grc-panel__ftr {
    background: var(--es-panel-bg);
    border-top: 1px solid var(--es-divider);
    padding: 10px 16px;
}

/* Panel body inside .grc-panel cards (card-body + utility padding) */
.content-area .card.grc-panel > .card-body.grc-panel__body {
    padding: 16px;
}

/* Dense / utility-modified bodies keep Bootstrap modifiers; GRC padding is baseline */
.content-area .card.grc-panel > .card-body.grc-panel__body.p-0 {
    padding: 0 !important;
}

.content-area .card.grc-panel > .card-body.grc-panel__body.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.content-area .card.grc-panel > .card-body.grc-panel__body.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.content-area .card.grc-panel > .card-body.grc-panel__body.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Panel footer inside .grc-panel cards */
.content-area .card.grc-panel > .card-footer.grc-panel__ftr {
    background: var(--es-panel-bg);
    border-top: 1px solid var(--es-divider);
    padding: 10px 16px;
}

.content-area .card.grc-panel > .card-footer.grc-panel__ftr.p-0 {
    padding: 0 !important;
}

.content-area .card.grc-panel > .card-footer.grc-panel__ftr.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.content-area .card.grc-panel > .card-footer.grc-panel__ftr.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.content-area .card.grc-panel > .card-footer.grc-panel__ftr.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.grc-form-section {
    margin-bottom: 20px;
}

.grc-form-section__title {
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--es-muted);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--es-divider);
}

.grc-record-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--es-panel-bg);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
}

.grc-record-header__title {
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--es-text);
    margin: 0;
}

.grc-record-header__meta {
    font-size: var(--font-xs);
    color: var(--es-muted);
    margin: 4px 0 0;
}

.grc-divider {
    height: 0;
    margin: 14px 0;
    border: none;
    border-top: 1px solid var(--es-divider);
}

.grc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--es-panel-bg);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
}

.grc-filter-bar .form-label {
    font-size: var(--font-xs);
    margin-bottom: 2px;
}

/* Tables: see static/css/grc-data-tables.css (linked from base.html). */

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.content-area .form-label {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--es-muted);
    margin-bottom: 4px;
}

.content-area .form-control,
.content-area .form-select {
    border-radius: var(--es-radius);
    border-color: var(--es-border);
    min-height: 36px;
    height: 36px;
    line-height: 1.35;
    padding: 6px 10px;
    font-size: var(--font-md);
}

.content-area textarea.form-control {
    min-height: 5.5rem;
    height: auto;
    line-height: 1.45;
    padding: 8px 10px;
}

.content-area select.form-select[multiple],
.content-area select.form-select-sm[multiple] {
    height: auto;
    min-height: 14rem;
    line-height: 1.35;
    padding-top: 8px;
    padding-bottom: 8px;
}

.content-area .form-control:focus,
.content-area .form-select:focus {
    border-color: var(--es-accent);
    box-shadow: 0 0 0 1px var(--es-focus);
    outline: none;
}

.content-area .form-control-sm,
.content-area .form-select-sm {
    min-height: 32px;
    height: 32px;
    padding: 4px 8px;
    font-size: var(--font-sm);
}

.content-area .input-group-text {
    background: #f7f8fa;
    border-color: var(--es-border);
    color: var(--es-muted);
    font-size: var(--font-sm);
    border-radius: var(--es-radius);
}

.content-area .form-text,
.content-area .form-check-label {
    font-size: var(--font-xs);
}

.content-area .is-invalid.form-control,
.content-area .is-invalid.form-select {
    border-color: #b45309;
    box-shadow: none;
}

.content-area .invalid-feedback {
    font-size: var(--font-xs);
    color: #92400e;
}

.content-area .form-check-input:focus {
    box-shadow: 0 0 0 1px var(--es-focus);
}

/* Keep section helper from pages.css but align tone */
.content-area .form-section-label {
    color: var(--es-muted);
    border-bottom-color: var(--es-divider);
}

/* Two-column form rows — slightly tighter */
.content-area .form-row {
    gap: 12px 16px;
}

.content-area .form-group {
    margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   Buttons — rectangular outlined (matches components.css / design tokens)
   -------------------------------------------------------------------------- */
.content-area .btn:not(.btn-link) {
    border-radius: 0;
    font-size: var(--font-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: none;
}

.content-area .btn-primary {
    background: var(--btn-bordered-bg);
    border-color: var(--btn-bordered-border);
    color: var(--btn-bordered-color);
}

.content-area .btn-primary:hover,
.content-area .btn-primary:focus-visible {
    background: var(--btn-bordered-bg-hover);
    border-color: var(--btn-bordered-border);
    color: var(--btn-bordered-color);
}

.content-area .btn-sm {
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    font-size: var(--font-xs);
}

/* --------------------------------------------------------------------------
   Tabs — text-first, underline active (not pills)
   -------------------------------------------------------------------------- */
.content-area .nav-tabs {
    border-bottom: 1px solid var(--es-divider);
    gap: 0;
}

.content-area .nav-tabs .nav-link {
    margin-bottom: -1px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--es-muted);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 14px;
    background: transparent;
}

.content-area .nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--es-text);
    isolation: isolate;
}

.content-area .nav-tabs .nav-link.active,
.content-area .nav-tabs .nav-link.active:focus,
.content-area .nav-tabs .nav-link.active:hover {
    color: var(--es-accent);
    background: transparent;
    border-color: transparent transparent var(--es-accent) transparent;
}

/* --------------------------------------------------------------------------
   Pills used as nav — soften to enterprise chips where Bootstrap uses nav-pills
   -------------------------------------------------------------------------- */
.content-area .nav-pills .nav-link {
    border-radius: var(--es-radius);
    font-size: var(--font-sm);
    font-weight: 600;
    padding: 6px 12px;
    color: var(--es-muted);
    border: 1px solid transparent;
}

.content-area .nav-pills .nav-link:hover {
    background: var(--es-row-hover);
    color: var(--es-text);
}

.content-area .nav-pills .nav-link.active {
    background: var(--es-panel-bg);
    color: var(--es-accent);
    border-color: var(--es-border);
}

/* --------------------------------------------------------------------------
   Badges / status — muted chips
   -------------------------------------------------------------------------- */
.content-area .badge {
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 7px;
    border-radius: 0;
    border: 1px solid transparent;
}

.content-area .badge.bg-primary,
.content-area .badge.text-bg-primary {
    background: #e6f4fb !important;
    color: #0a4f7a !important;
    border-color: #b3d9f0;
}

.content-area .badge.bg-secondary,
.content-area .badge.text-bg-secondary {
    background: #f3f4f6 !important;
    color: #4b5563 !important;
    border-color: var(--es-border);
}

.content-area .badge.bg-success,
.content-area .badge.text-bg-success {
    background: #ecfdf5 !important;
    color: #166534 !important;
    border-color: #bbf7d0;
}

.content-area .badge.bg-warning,
.content-area .badge.text-bg-warning,
.content-area .badge.bg-warning.text-dark {
    background: #fffbeb !important;
    color: #92400e !important;
    border-color: #fde68a;
}

.content-area .badge.bg-danger,
.content-area .badge.text-bg-danger {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-color: #fecaca;
}

.content-area .badge.rounded-pill {
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   Alerts — structure without loud chrome
   -------------------------------------------------------------------------- */
.content-area .alert {
    border-radius: var(--es-radius);
    border-width: 1px;
    font-size: var(--font-md);
    padding: 10px 14px;
    box-shadow: none;
}

.content-area .alert-primary {
    background: #e6f4fb;
    border-color: #b3d9f0;
    color: #0a4f7a;
}

.content-area .alert-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.content-area .alert-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.content-area .alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */
.content-area .modal-content,
.modal-content {
    border-radius: var(--es-radius);
    border: 1px solid var(--es-border);
    box-shadow: none;
}

.modal-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--es-divider);
}

.modal-title {
    font-size: var(--font-base);
    font-weight: 600;
}

.modal-body {
    padding: 16px;
    font-size: var(--font-md);
}

.modal-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--es-divider);
    gap: 8px;
}

/* --------------------------------------------------------------------------
   Offcanvas / drawers
   -------------------------------------------------------------------------- */
.offcanvas,
.offcanvas-lg,
.offcanvas-md {
    border-left: 1px solid var(--es-border);
    box-shadow: none;
}

.offcanvas-header {
    border-bottom: 1px solid var(--es-divider);
    padding: 12px 16px;
}

/* Assessment comment drawer — border-first, no heavy shadow */
.comment-drawer {
    box-shadow: none;
    border-left: 1px solid var(--es-border);
    background: var(--es-panel-bg);
}

.comment-drawer-header {
    border-bottom-color: var(--es-divider);
    padding: 12px 16px;
}

.comment-drawer-title {
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--es-text);
}

.comment-drawer-footer {
    background: var(--es-panel-bg);
    border-top-color: var(--es-divider);
}

.comment-drawer-close {
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    background: var(--es-panel-bg);
}

/* --------------------------------------------------------------------------
   Dropdowns & list groups
   -------------------------------------------------------------------------- */
.content-area .dropdown-menu {
    border-radius: var(--es-radius);
    border: 1px solid var(--es-border);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    font-size: var(--font-md);
}

.content-area .list-group-item {
    border-color: var(--es-divider);
    padding: 10px 14px;
    font-size: var(--font-md);
}

/* --------------------------------------------------------------------------
   Domain / filter tab strips (legacy pill rows)
   -------------------------------------------------------------------------- */
.content-area .domain-tabs {
    background: var(--es-panel-bg);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    padding: 10px;
    gap: 8px;
}

.content-area .domain-tab {
    border-radius: var(--es-radius);
    border: 1px solid var(--es-border);
    background: var(--es-panel-bg);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--es-muted);
}

.content-area .domain-tab:hover {
    border-color: var(--es-accent);
    color: var(--es-accent);
    background: #f8fafc;
}

.content-area .domain-tab.active {
    background: var(--es-accent);
    border-color: var(--es-accent);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.content-area .pagination .page-link {
    border-radius: var(--es-radius);
    font-size: var(--font-sm);
    padding: 6px 12px;
    border-color: var(--es-border);
    color: var(--es-text);
}

.content-area .pagination .page-link:hover {
    background: var(--es-row-hover);
    border-color: var(--es-border);
    color: var(--es-accent);
}

.content-area .pagination .page-item.active .page-link {
    background: var(--es-accent);
    border-color: var(--es-accent);
}

/* --------------------------------------------------------------------------
   Module rail (second sidebar) — align with workspace tone; primary rail unchanged
   -------------------------------------------------------------------------- */
.module-sidebar {
    background: var(--es-panel-bg);
}

.module-sidebar-link {
    border-radius: var(--es-radius);
    font-size: var(--font-sm);
}

.module-sidebar-header {
    color: var(--es-muted);
    border-bottom-color: var(--es-divider);
}