/* Application page styles. The base theme comes from Tabler (lib/tabler), the sidebar and
   layout frame from sidebar-theme.css. */

/* Tabler uses "Inter Var", which is not loaded; Inter is loaded from Google Fonts in the layout. */
:root {
  --tblr-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* ---------- List pages ----------
   Page header (title, description, load time), filter row, borderless table, then the row
   count and pages below. Used by every list page (e.g. Views/Menu/Index.cshtml). */

.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-head-title { margin: 0 0 .375rem; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
.page-head-desc { margin: 0; font-size: .875rem; color: #374151; }
.page-head-meta { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; font-size: .75rem; color: var(--tblr-secondary); background: #f3f4f6; border: 0; border-radius: 999px; }
.page-head-meta:hover { color: var(--tblr-body-color); background: #e9ebee; }
.page-head-meta .ti { font-size: .875rem; }

.dt-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin-bottom: 1.5rem; }
.dt-filters .form-control, .dt-filters .form-select { height: 2.375rem; font-size: .8125rem; border-color: #e5e7eb; border-radius: .5rem; }
.dt-filters .dt-search { flex: 1 1 12rem; max-width: 24rem; margin-right: auto; }
.dt-filters .form-select { width: auto; min-width: 7.5rem; }
.dt-clear { padding: 0 .5rem; font-size: .8125rem; font-weight: 500; color: var(--tblr-primary); background: none; border: 0; }
.dt-clear:hover { text-decoration: underline; }
.dt-apply { height: 2.375rem; min-width: 6.5rem; font-size: .8125rem; border-radius: .5rem; }

/* Fixed table area height (follows the screen height), however many rows: the table footer does not
   move; rows that don't fit scroll inside, and the table header stays visible. */
.dt-scroll { height: calc(100vh - 23.5rem); min-height: 18rem; overflow: auto; }
.dt-table { width: 100%; font-size: .8125rem; white-space: nowrap; border-collapse: collapse; }
.dt-table th { position: sticky; top: 0; z-index: 1; padding: .625rem .75rem; font-size: .6875rem; font-weight: 500; letter-spacing: .03em; text-align: left; text-transform: uppercase; color: #6b7280; background: #fff; box-shadow: inset 0 -1px 0 #e5e7eb; }
.dt-table td { padding: .625rem .75rem; height: 2.875rem; color: #111827; vertical-align: middle; border-bottom: 1px solid #f1f2f4; }
.dt-table th:first-child, .dt-table td:first-child { padding-left: 0; }
.dt-table th:last-child, .dt-table td:last-child { padding-right: 0; text-align: right; }
.dt-table tbody tr:hover td { background: #fafafa; }
.dt-table .dt-num { text-align: right; font-variant-numeric: tabular-nums; }

.dt-sort { display: inline-flex; align-items: center; gap: .25rem; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; }
.dt-sort:hover { color: #111827; }
.dt-sort .ti { font-size: .875rem; color: var(--tblr-primary); }

/* Cell content */
.dt-type { font-size: 1.125rem; }
.dt-type.is-green { color: #16a34a; }
.dt-type.is-blue { color: #2563eb; }
.dt-type.is-red { color: #dc2626; }
.dt-chip { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem .25rem .375rem; font-size: .75rem; color: #111827; background: #ecfdf3; border-radius: 999px; }
.dt-chip .ti { font-size: 1rem; color: #16a34a; }
.dt-chip.is-muted { background: #f3f4f6; }
.dt-chip.is-muted .ti { color: #9ca3af; }
.dt-pill { display: inline-flex; padding: .25rem .625rem; font-size: .75rem; color: #111827; background: #f3f4f6; border-radius: .375rem; }
.dt-link { font-weight: 500; color: var(--tblr-primary); text-decoration: underline; text-underline-offset: 2px; }
.dt-muted { color: #9ca3af; }

/* Table footer */
.dt-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; font-size: .8125rem; color: #374151; }
.dt-pages { display: flex; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.dt-page { display: grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .5rem; font-size: .8125rem; color: #111827; background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; }
.dt-page:hover:not(:disabled) { background: #f9fafb; }
.dt-page.is-active { font-weight: 600; color: var(--tblr-primary); border-color: var(--tblr-primary); }
.dt-page:disabled { cursor: default; opacity: .45; }
.dt-page.is-gap { border-color: transparent; }
.dt-page .ti { font-size: 1rem; }

/* Page header: buttons on the right (e.g. Last update and Create) */
.page-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.page-head-actions .btn { height: 2.375rem; font-size: .8125rem; border-radius: .5rem; }

/* Row action column (edit, delete) */
.dt-table .dt-actions-col { width: 1%; }
.dt-row-actions { display: inline-flex; gap: .25rem; }
.dt-icon-btn { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; font-size: 1.125rem; color: #4b5563; background: none; border: 0; border-radius: .5rem; }
.dt-icon-btn:hover { color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), .08); }
.dt-icon-btn.is-danger:hover { color: #dc2626; background: #fef2f2; }

/* ---------- CRUD form panel and short notifications (crud.js) ---------- */

.crud-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; }
.crud-toast { display: flex; align-items: center; gap: .5rem; max-width: 24rem; padding: .625rem .875rem; font-size: .8125rem; color: #111827; background: #fff; border-left: 3px solid #16a34a; border-radius: .5rem; box-shadow: 0 8px 24px rgba(24, 36, 51, .14); }
.crud-toast .ti { font-size: 1.125rem; color: #16a34a; }
.crud-toast.is-error { border-left-color: #dc2626; }
.crud-toast.is-error .ti { color: #dc2626; }

/* Tabler Icons (.ti) in front of button text: Tabler only adds spacing for the .icon class.
   Icon-only buttons use .btn-icon (no spacing). */
.btn:not(.btn-icon) > .ti:first-child { margin-right: .375rem; font-size: 1.125rem; }

/* Create/Update/Delete form panel on the right (off-canvas) */
.crud-panel.offcanvas-end { width: 36rem; max-width: 100%; }
.crud-panel-form { display: flex; flex-direction: column; height: 100%; }
.crud-panel .offcanvas-header { border-bottom: 1px solid #eceef1; }
.crud-panel .offcanvas-title { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 600; }
.crud-panel .offcanvas-title .ti { font-size: 1.25rem; }
.crud-panel .offcanvas-body { flex: 1; overflow-y: auto; }
.crud-panel-footer { display: flex; justify-content: flex-end; gap: .5rem; padding: .875rem 1.25rem; border-top: 1px solid #eceef1; }
.crud-section { margin-top: .25rem; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; }
.crud-alert { margin: 0; font-size: .8125rem; white-space: pre-line; }
.crud-alert b { display: block; margin-bottom: .125rem; }
.crud-toast.is-delete { border-left-color: #dc2626; }
.crud-toast.is-delete .ti { color: #dc2626; }
.dt-icon-btn:disabled { cursor: not-allowed; opacity: .35; }

/* ---------- Menu checklist in the Role panel ---------- */

.role-menu-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.role-menu-count { flex: none; font-size: .75rem; color: #6b7280; }
.role-menu-tools { display: flex; gap: 1rem; margin: .5rem 0; }
.role-menu-list { max-height: 18rem; overflow-y: auto; padding: .25rem; border: 1px solid #e5e7eb; border-radius: .5rem; }
.role-menu-item { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .375rem .5rem .375rem calc(.5rem + var(--level, 0) * 1.5rem); font-size: .8125rem; border-radius: .375rem; cursor: pointer; }
.role-menu-item:hover { background: #f5f6f8; }
.role-menu-item .form-check-input { flex: none; margin: 0; }
.role-menu-item .ti { font-size: 1rem; color: #6b7280; }
.role-menu-item:has(:disabled) { cursor: default; }

/* ---------- User panel: role and menu access table ---------- */

.crud-panel.crud-panel-lg.offcanvas-end { width: 44rem; }
.user-access { max-height: 20rem; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: .5rem; }
.user-access-table { width: 100%; font-size: .8125rem; border-collapse: collapse; }
.user-access-table th { position: sticky; top: 0; z-index: 1; padding: .5rem .75rem; font-size: .6875rem; font-weight: 600; letter-spacing: .03em; text-align: center; text-transform: uppercase; color: #6b7280; background: #f9fafb; box-shadow: inset 0 -1px 0 #e5e7eb; }
.user-access-table th:first-child { text-align: left; }
.user-access-table th button { padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; border-bottom: 1px dashed currentColor; }
.user-access-table th button:hover:not(:disabled) { color: var(--tblr-primary); }
.user-access-table th button:disabled { border-bottom-color: transparent; }
.user-access-table td { padding: .4rem .75rem; text-align: center; border-bottom: 1px solid #f1f2f4; }
.user-access-table tr:last-child td { border-bottom: 0; }
.user-access-table .form-check-input { margin: 0; }
.user-access-table td.user-access-menu { padding-left: calc(.75rem + var(--level, 0) * 1.25rem); text-align: left; }