/* Compact workspace: shared proportions for navigation, forms and reports. */
:root {
  --sidebar-width: 244px;
  --topbar-height: 64px;
  --app-bg: #f5f7ff;
  --app-border: #e1e6f4;
  --app-muted: #6c7b98;
  --app-heading: #18325d;
}
body { font-size: .8125rem; line-height: 1.5; color: #2b3b56; }
.sidebar { padding: 0; overflow: hidden; }
.sidebar > .brand {
  height: var(--topbar-height); min-height: var(--topbar-height);
  padding: 0 20px; border-bottom: 1px solid var(--app-border);
}
.brand { gap: .6rem; }
.brand-mark {
  width: 30px; height: 30px; flex-basis: 30px;
  border-radius: 5px; box-shadow: none; font-size: .75rem; font-weight: 700;
}
.brand strong { font-size: .9375rem; font-weight: 700; color: var(--app-heading); }
.brand small { font-size: .5625rem; margin-top: .15rem; letter-spacing: .13em; color: var(--app-muted); }
/* A bounded sidebar must scroll vertically, never wrap into another column. */
.sidebar-nav { display:flex; flex-direction:column; flex-wrap:nowrap; gap:2px; margin-top:0; padding:14px 10px; }
.sidebar-nav > * { flex:0 0 auto; min-width:0; }
.menu-group > summary {
  display:grid; grid-template-columns:16px minmax(0,1fr) 12px;
  align-items:center; column-gap:12px; width:100%; list-style:none;
}
.menu-group > summary::marker { content:""; font-size:0; }
.menu-group > summary::-webkit-details-marker { display:none; }
.menu-group > summary::before, .menu-group > summary::after { content:none; display:none; }
.sidebar > .sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c6cede transparent; }
.nav-section { display: flex; align-items: center; gap: 10px; padding: 8px 9px; font-size: .5625rem; letter-spacing: .11em; }
.nav-section::after { content: ''; height: 1px; background: var(--app-border); flex: 1; }
.nav-divider { margin: 10px 8px; }
.sidebar-nav .nav-link, .menu-group summary {
  min-height: 36px; padding: 8px 10px; gap: 12px;
  border-radius: 4px; color: #34435f; font-size: .75rem; font-weight: 500;
}
.sidebar-nav .nav-link i, .menu-group summary > i:first-child {
  width: 16px; flex: 0 0 16px; font-size: .875rem; text-align: center; color: var(--app-muted);
}
.menu-group { margin: 1px 0; }
.menu-group summary > span { min-width:0; text-align:left; }
.menu-group > summary > .menu-chevron { width:12px; margin:0; justify-self:end; text-align:center; }
.menu-group summary:hover, .menu-group[open] summary { background: rgba(var(--app-primary-rgb), .055); }
.menu-group[open] summary { box-shadow: inset 2px 0 rgba(var(--app-primary-rgb), .6); }
.menu-chevron { font-size: .625rem; }
.menu-items { margin: 4px 4px 5px 20px; padding-left: 7px; }
.menu-items .nav-link { min-height: 31px; padding: 6px 7px; gap: 8px; font-size: .71875rem; color: #687a96; }
.menu-items .nav-link::before {
  content: ''; width: 4px; height: 4px; flex: 0 0 4px;
  border: 1px solid #96a4bb; border-radius: 50%;
}
.menu-items .nav-link.active::before { background: var(--app-primary); border-color: var(--app-primary); }
.sidebar-nav .nav-link.active { background: rgba(var(--app-primary-rgb), .06); box-shadow: inset 2px 0 var(--app-primary); font-weight: 600; }
.sidebar-footer { flex-shrink: 0; margin: 0; padding: 12px 16px; gap: 9px; background: var(--app-sidebar); }
.sidebar-footer strong { font-size: .71875rem; }
.sidebar-footer small { font-size: .625rem; }
.user-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: .75rem; }
.topbar { min-height: var(--topbar-height); padding: 10px 24px; gap: 12px; background: var(--bs-body-bg); backdrop-filter: none; }
.page-title { font-size: .9375rem; font-weight: 600; color: var(--app-heading); }
.page-subtitle { font-size: .6875rem; margin-top: 2px; }
.btn-icon { width: 34px; height: 34px; border-radius: 4px; color: var(--app-muted); }
.user-menu { font-size: .71875rem; gap: 8px; }
.content-wrapper { max-width: 1600px; padding: 26px 30px 32px; }
.mobile-context { display: none; }
.welcome-banner { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.welcome-banner .eyebrow { font-size: .5625rem; color: var(--app-muted); font-weight: 600; }
.welcome-banner h2 { font-size: 1.375rem; letter-spacing: -.025em; color: var(--app-heading); font-weight: 650; margin: 5px 0 6px; }
.welcome-banner p { font-size: .78125rem; }
.welcome-icon { display: none; }
.metric-card, .panel-card { border-radius: 5px; box-shadow: 0 2px 8px rgba(30,55,95,.025); }
.metric-card { position: relative; overflow: hidden; padding: 14px 16px; flex-direction: column; gap: 10px; background: rgba(var(--app-primary-rgb), .045); }
.metric-card::after { content: ''; position: absolute; width: 160px; height: 160px; border-radius: 50%; right: -55px; top: -85px; background: rgba(var(--app-primary-rgb), .03); pointer-events: none; }
.metric-card:has(.metric-icon-blue) { background: #eaf1ff; }
.metric-card:has(.metric-icon-green) { background: #e7f3ef; }
.metric-icon { width: 36px; height: 36px; flex-basis: 36px; font-size: 1.125rem; border-radius: 4px; }
.metric-label { font-size: .625rem; font-weight: 500; letter-spacing: .045em; text-transform: uppercase; margin-bottom: 4px; }
.metric-value { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.015em; font-weight: 550; color: var(--app-heading); }
.metric-card small { font-size: .625rem; }
.metric-card-primary { background: rgba(var(--app-primary-rgb), .085); border-color: var(--app-border); color: var(--app-heading); box-shadow: none; }
.metric-card-primary .metric-icon { color: var(--app-primary); background: rgba(var(--app-primary-rgb), .12); }
.metric-card-primary .metric-label, .metric-card-primary small { color: var(--app-muted); }
.panel-card { padding: 18px; }
.panel-card h2 { font-size: .9375rem; font-weight: 650; color: var(--app-heading); }
.panel-header { margin: -18px -18px 16px; padding: 15px 18px; border-bottom: 1px solid var(--app-border); }
.panel-header h2 { font-size: .875rem; }
.panel-header p { font-size: .6875rem; }
.quick-action { min-height: 66px; padding: 12px; gap: 10px; border-radius: 4px; }
.quick-action:hover { transform: none; box-shadow: none; background: rgba(var(--app-primary-rgb), .025); }
.quick-icon, .status-icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 4px; font-size: .9375rem; }
.quick-action strong, .status-item strong { font-size: .75rem; font-weight: 600; }
.quick-action small, .status-item small { font-size: .65625rem; }
.status-item { padding: 12px 0; gap: 10px; }
.status-dot { width: 8px; height: 8px; flex-basis: 8px; margin: 0 12px; box-shadow: none; }
.btn { --bs-btn-font-size: .75rem; --bs-btn-border-radius: 4px; --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .75rem; }
.btn-sm { --bs-btn-font-size: .6875rem; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .5rem; }
.dropdown-menu { font-size: .75rem; border-radius: 5px; }
.nav-tabs .nav-link { font-size: .75rem; padding: .6rem .8rem; }
.form-label, .form-check-label { font-size: .75rem; font-weight: 500; color: var(--app-heading); }
.form-label { margin-bottom: 5px; }
.form-control, .form-select { min-height: 36px; font-size: .8125rem; border-radius: 4px; padding-top: .4rem; padding-bottom: .4rem; }
.form-text, .invalid-feedback { font-size: .6875rem; line-height: 1.5; }
.form-section-heading { gap: 10px; margin-bottom: 20px; }
.form-section-heading h2 { font-size: .9375rem; }
.form-section-heading p { font-size: .6875rem; }
.form-check-input { width: 1.1em !important; height: 1.1em; }
.form-switch .form-check-input { width: 2em !important; }
.form-actions { padding: 16px 0; }
.master-relation-control { gap: 6px; }
.master-relation-control > .flex-grow-1 { min-width: 0; }
.relation-actions { flex-shrink: 0; }
.relation-actions .btn { min-width: 30px; padding: .35rem; }
.master-table th { font-size: .625rem; padding: 10px 14px; }
.master-table td { font-size: .75rem; padding: 11px 14px; }
.table:not(.master-table) { font-size: .75rem; }
.master-toolbar, .master-pagination { padding: 12px 16px; }
.detail-item { padding: 12px; border-radius: 4px; }
.detail-item dd { font-size: .8125rem; font-weight: 500; }
.empty-state h2 { font-size: 1rem; }
.empty-state p { font-size: .8125rem; }
.appearance-panel { border-radius: 5px; }
.settings-section-title { margin: 10px 0 2px; padding-bottom: 9px; border-bottom: 1px solid var(--app-border); font-size: .75rem; font-weight: 650; color: var(--app-heading); }
.settings-form .form-section-heading { margin-bottom: 12px; }
.settings-form [data-field-name="logo"] input { font-size: .71875rem; }
[data-bs-theme="dark"] { --app-heading: #dbe6fa; --app-bg: #101725; --app-border: #29354c; --app-muted: #9aaac2; }
[data-bs-theme="dark"] .metric-card:has(.metric-icon-blue) { background: #192b46; }
[data-bs-theme="dark"] .metric-card:has(.metric-icon-green) { background: #18332f; }
[data-bs-theme="dark"] .metric-card-primary { background: rgba(var(--app-primary-rgb), .15); }
[data-bs-theme="dark"] .menu-group summary { color: #b8c7dd; }
[data-bs-theme="dark"] .menu-items .nav-link { color: #a5b6d0; }
@media (max-width: 1199.98px) {
  .content-wrapper { padding: 22px; }
  .articles-grid tbody tr { border-radius: 5px; box-shadow: none; }
}
@media (max-width: 991.98px) {
  .topbar { padding: 10px 16px; }
  .content-wrapper { padding: 20px; }
  .mobile-menu { width: min(88vw, 280px) !important; }
  .mobile-menu .offcanvas-header { height: 64px; padding: 12px 18px; border-bottom: 1px solid var(--app-border); }
  .mobile-menu .offcanvas-body { padding: 0; }
  .mobile-menu .sidebar-nav { margin: 0; }
  .mobile-menu summary, .mobile-menu .nav-link { min-height: 40px; }
}
@media (max-width: 575.98px) {
  .content-wrapper { padding: 16px; }
  .topbar { gap: 6px; padding: 10px 12px; }
  .topbar .page-title { font-size: .8125rem; }
  .topbar .btn-icon { width: 32px; height: 36px; }
  .welcome-banner h2 { font-size: 1.1875rem; }
  .welcome-banner p { font-size: .75rem; }
  .metric-card { flex-direction: row; align-items: center; padding: 12px 14px; }
  .panel-card { padding: 16px; }
  .panel-header { margin: -16px -16px 14px; padding: 14px 16px; }
  .form-control, .form-select { font-size: 1rem; min-height: 42px; }
  .btn { min-height: 38px; }
  .form-actions { padding: 12px 0; }
  .master-table td { padding: 5px 0; }
  .master-table tr { padding: 12px; }
  .settings-form [data-field-name="logo"] input { font-size: .875rem; }
}
@media (pointer: coarse) {
  .menu-group summary, .sidebar-nav .nav-link { min-height: 44px; }
  .btn-icon { min-width: 40px; min-height: 40px; }
}
@media print {
  .content-wrapper { padding: 0; }
  .metric-card, .panel-card { box-shadow: none; }
}
.login-showcase .brand strong { color: #fff; }
.login-showcase .brand small { color: #cbd5e1; }
[data-bs-theme="dark"] .topbar .btn-icon { background: #19263b; color: #bccae0; border-color: var(--app-border); }

/* One visual language for create, view, edit and delete actions in grids. */
.btn.grid-action {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; min-width:34px; min-height:34px; flex:0 0 34px;
  padding:0; gap:0; vertical-align:middle; font-size:.875rem; line-height:1;
}
.grid-action > i { margin:0!important; pointer-events:none; }
.grid-action:focus-visible { outline:2px solid var(--app-primary); outline-offset:3px; }
.articles-grid .actions-cell { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:6px; }
@media (pointer:coarse), (max-width:575.98px) {
  .btn.grid-action { width:42px; height:42px; min-width:42px; min-height:42px; flex-basis:42px; }
  .master-table .actions-cell .grid-action { flex-grow:0; }
}
.grid-action[data-grid-action="new"] { color:#fff; background:var(--app-primary); border-color:var(--app-primary); }
.grid-action[data-grid-action="edit"] { color:var(--app-primary); background:rgba(var(--app-primary-rgb),.045); border-color:rgba(var(--app-primary-rgb),.24); }
.grid-action[data-grid-action="view"] { color:var(--app-muted); background:var(--bs-body-bg); border-color:var(--app-border); }
.grid-action[data-grid-action="delete"] { color:#c54151; background:rgba(197,65,81,.04); border-color:rgba(197,65,81,.24); }
.grid-action[data-grid-action]:hover { filter:brightness(.92); }
[data-bs-theme="dark"] .grid-action[data-grid-action="delete"] { color:#f78b98; }
.grid-toolbar > .grid-action { margin-left:auto; }