/* Global font */
html, body { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; }

/* Simple customizations */
body { padding-bottom: 40px; }
.table td, .table th { vertical-align: middle; }
.badge { font-size: 0.85rem; }

/* App navbar gradient and styles */
nav.navbar.app-navbar {
  background: linear-gradient(135deg, #0b5cff 0%, #0078d4 55%, #39a6ff 100%) !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height: 56px;
}
.app-navbar { background-color: transparent !important; }
.app-navbar .navbar-brand { font-weight: 600; letter-spacing: 0.2px; }
.app-navbar .nav-link { color: rgba(255,255,255,0.9); font-weight: 500; }
.app-navbar .nav-link:hover { color: #fff; }
.app-navbar .nav-link.active { color: #fff; position: relative; }
.app-navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: -0.45rem;
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,0.9);
}


/* Improve card look slightly */
.card { border: none; }
.card.shadow-sm { box-shadow: 0 .25rem .75rem rgba(0,0,0,.05) !important; }

/* Subtle link styles */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Users table enhancements */
#usersTable tbody tr { transition: background-color .15s ease; }
#usersTable tbody tr:hover { background-color: #fafbff; }
#usersTable td, #usersTable th { padding-top: .9rem; padding-bottom: .9rem; }

/* Offcanvas styling */
.offcanvas .offcanvas-header .rounded-4 { border-bottom-left-radius: 1rem !important; border-bottom-right-radius: 1rem !important; }
.offcanvas .card-header { background: #f8fafc; font-weight: 600; }

/* Beautiful offcanvas styles */
.offcanvas-beauty { --bs-offcanvas-width: 50vw; width: var(--bs-offcanvas-width); background-color: #fff; z-index: 1050; box-shadow: -12px 0 32px rgba(16,24,40,.12); border-left: 0; animation: beautySlide .25s ease-out; }
@keyframes beautySlide { from { transform: translateX(24px); opacity: .0; } to { transform: translateX(0); opacity: 1; } }
.offcanvas-beauty .beauty-header { color: #fff; padding-top: 1rem; padding-bottom: 1rem; background: linear-gradient(135deg, #0b5cff 0%, #39a6ff 100%); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.offcanvas-beauty .beauty-header .offcanvas-title { font-weight: 700; letter-spacing: .2px; }
.offcanvas-beauty .beauty-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,0.14); display: grid; place-items: center; font-size: 1.25rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28); }
.offcanvas-beauty .beauty-loading-bar { height: 3px; background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,0)); }
.offcanvas-beauty .beauty-loading-bar .bar { height: 100%; width: 100%; background: var(--accent, #6a85f1); animation: beautyStripes 1.2s linear infinite; background-image: linear-gradient(45deg, rgba(255,255,255,.35) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 75%, transparent 75%, transparent); background-size: 1rem 1rem; }
@keyframes beautyStripes { from { background-position: 0 0; } to { background-position: 1rem 0; } }
.offcanvas-beauty .beauty-body { padding-bottom: 5rem; background: radial-gradient(1200px 200px at 30% -50px, rgba(59,130,246,.08), transparent 60%) no-repeat; }
.offcanvas-beauty .beauty-footer-actions { position: sticky; bottom: 0; padding: .75rem 0 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(248,250,252,0.9) 35%, rgba(248,250,252,1) 100%); margin-top: 1rem; }

/* Improve form controls aesthetics */
.offcanvas-beauty .form-label { font-weight: 600; color: #0f172a; }
.offcanvas-beauty .form-text { color: #6b7280; }
.offcanvas-beauty .invalid-feedback { font-size: .9rem; }
.offcanvas-beauty .beauty-field { margin-bottom: .5rem; }
.offcanvas-beauty .beauty-control { border-radius: 12px; border-color: #e5e7eb; padding: .6rem .8rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.offcanvas-beauty .beauty-control:focus { border-color: var(--accent, #3b82f6); box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--accent, #3b82f6) 22%, transparent); }

/* Switches */
.offcanvas-beauty .form-switch .form-check-input { width: 2.5em; height: 1.35em; cursor: pointer; }
.offcanvas-beauty .form-switch .form-check-input:checked { background-color: var(--accent, #3b82f6); border-color: var(--accent, #3b82f6); }
.offcanvas-beauty .form-switch .form-check-label { font-weight: 600; margin-left: .35rem; }

/* Buttons inside the slider */
.offcanvas-beauty .btn { font-weight: 600; letter-spacing: .2px; }
.offcanvas-beauty .btn-primary { --bs-btn-bg: var(--accent, #0b5cff); --bs-btn-border-color: var(--accent, #0b5cff); --bs-btn-hover-bg: color-mix(in srgb, var(--accent, #0b5cff) 92%, white); --bs-btn-hover-border-color: color-mix(in srgb, var(--accent, #0b5cff) 92%, white); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent, #0b5cff) 25%, transparent); }
.offcanvas-beauty .btn-outline-secondary { --bs-btn-color: #475569; --bs-btn-border-color: #cbd5e1; --bs-btn-hover-bg: #f1f5f9; --bs-btn-hover-border-color: #94a3b8; }
.offcanvas-beauty .btn.rounded-pill { border-radius: 9999px; }

/* Beautiful modal styles */
.beauty-modal { border: 0; box-shadow: 0 24px 48px rgba(16,24,40,.16); overflow: hidden; }
.beauty-modal-header { color: #fff; background: linear-gradient(135deg, #0b5cff 0%, #39a6ff 100%); align-items: center; }
.beauty-modal .beauty-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,0.14); display: grid; place-items: center; font-size: 1.2rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.beauty-modal-body { background: radial-gradient(1200px 200px at 30% -50px, rgba(59,130,246,.08), transparent 60%) no-repeat; }
.beauty-modal .beauty-loading-bar { height: 3px; background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,0)); }
.beauty-modal .beauty-loading-bar .bar { height: 100%; width: 100%; background: var(--accent, #0b5cff); animation: beautyStripes 1.2s linear infinite; background-image: linear-gradient(45deg, rgba(255,255,255,.35) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 75%, transparent 75%, transparent); background-size: 1rem 1rem; }

/* Inputs inside modal */
.beauty-modal .form-label { font-weight: 600; color: #0f172a; }
.beauty-modal .beauty-field { margin-bottom: .5rem; }
.beauty-modal .beauty-control { border-radius: 12px; border-color: #e5e7eb; padding: .6rem .8rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.beauty-modal .beauty-control:focus { border-color: var(--accent, #3b82f6); box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--accent, #3b82f6) 22%, transparent); }
.beauty-modal .form-text { color: #6b7280; }
.beauty-modal .invalid-feedback { font-size: .9rem; }

/* Switch & buttons */
.beauty-modal .form-switch .form-check-input { width: 2.5em; height: 1.35em; cursor: pointer; }
.beauty-modal .form-switch .form-check-input:checked { background-color: var(--accent, #3b82f6); border-color: var(--accent, #3b82f6); }
.beauty-modal .form-switch .form-check-label { font-weight: 600; margin-left: .35rem; }
.beauty-modal .btn { font-weight: 600; letter-spacing: .2px; }
.beauty-modal .btn-primary { --bs-btn-bg: var(--accent, #0b5cff); --bs-btn-border-color: var(--accent, #0b5cff); --bs-btn-hover-bg: color-mix(in srgb, var(--accent, #0b5cff) 92%, white); --bs-btn-hover-border-color: color-mix(in srgb, var(--accent, #0b5cff) 92%, white); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent, #0b5cff) 25%, transparent); }
.beauty-modal .btn-outline-secondary { --bs-btn-color: #475569; --bs-btn-border-color: #cbd5e1; --bs-btn-hover-bg: #f1f5f9; --bs-btn-hover-border-color: #94a3b8; }

/* Responsive tweaks */
@media (max-width: 991.98px) { .offcanvas-beauty { --bs-offcanvas-width: 100vw; width: var(--bs-offcanvas-width); } }

/* Save button loading state */
.offcanvas-beauty.is-saving .beauty-loading-bar .bar { opacity: 0.85; }

/* Automated Compliance Maps toolbar */
.acm-toolbar { background: #f8fafc; border: 1px solid #eef2f7; border-radius: .75rem; padding: .75rem .9rem; }
.acm-toolbar .metric .badge { font-weight: 600; }
.acm-select { min-width: 260px; max-width: 100%; }
.acm-toolbar .progress { height: .35rem; background-color: #e9eff6; }

@media (min-width: 1400px) {
  .acm-select { min-width: 360px; }
}

/* Automated Compliance Maps toolbar — enhanced */
.acm-toolbar { margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: 1rem; background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%); border: 1px solid #e6edf5; box-shadow: 0 .25rem .75rem rgba(16,24,40,.06); position: relative; }
.acm-toolbar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; background: linear-gradient(180deg, #0b5cff, #39a6ff); opacity: .7; }
.acm-toolbar .badge { border-radius: 9999px; padding: .35rem .6rem; font-weight: 600; }
.acm-select { min-width: 300px; max-width: 100%; }
.acm-toolbar .progress { height: .4rem; background-color: #e9eff6; }

@media (min-width: 1400px) {
  .acm-select { min-width: 380px; }
}

/* Automated Compliance Maps toolbar — spacing override */
.acm-toolbar { margin-top: 1.5in !important; }

/* Consolidated compliance table styles */
.table.compliance-table { border-collapse: separate; border-spacing: 0 .5rem; }
.table.compliance-table thead th { padding-top: .65rem; padding-bottom: .65rem; font-weight: 600; border-bottom: 0; }
.table.compliance-table tbody tr > td { padding-top: .85rem; padding-bottom: .85rem; background-color: #fff; border-top: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; }
.table.compliance-table tbody tr > td:first-child { border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; }
.table.compliance-table tbody tr > td:last-child { border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; }
.table.compliance-table tbody tr:hover > td { background-color: #f9fbff; }
.table.compliance-table tbody tr.table-success > td { background-color: #ecf8f1; }
.table.compliance-table tbody tr.table-danger > td { background-color: #fff1f1; }
.table.compliance-table .cloud-cell { min-width: 80px; padding-left: 1rem; padding-right: 1rem; }
.table.compliance-table .cloud-cell i { margin: 0 .15rem; font-size: 1.15rem; }

/* Recommendation chips & masked samples */
.rec-chip { display: inline-flex; align-items: center; gap: .35rem; background: #f8fafc; border: 1px solid #e6edf5; color: #0f172a; border-radius: 9999px; padding: .35rem .6rem; font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.rec-sample { font-weight: 600; }