/*!
 * Asim & Co — brand layer
 * ---------------------------------------------------------------------------
 * Loaded AFTER the Materialize core/theme stylesheets. It only overrides
 * tokens and a small set of components, so template updates stay drop-in.
 * Every colour is expressed as a CSS custom property with a light and a dark
 * value, so the built-in style switcher keeps working.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  --ac-primary: #a93439;
  --ac-primary-rgb: 169, 52, 57;
  --ac-primary-hover: #8e272c;
  --ac-primary-soft: rgba(169, 52, 57, 0.1);
  --ac-ink: #313a46;

  --ac-surface: #ffffff;
  --ac-surface-sunken: #f5f6f8;
  --ac-border: #e4e6eb;
  --ac-border-strong: #d5d8df;
  --ac-heading: #2b3241;
  --ac-body: #5b6474;
  --ac-muted: #8b93a3;

  --ac-radius: 10px;
  --ac-radius-sm: 8px;
  --ac-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --ac-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --ac-shadow-lg: 0 12px 28px -8px rgba(16, 24, 40, 0.18);
}

/* The template toggles .dark-style on <html> via its own style switcher. */
html.dark-style {
  --ac-surface: #2f3349;
  --ac-surface-sunken: #25293c;
  --ac-border: #434966;
  --ac-border-strong: #4d5470;
  --ac-heading: #e4e6f4;
  --ac-body: #b2b6cc;
  --ac-muted: #8085a3;
  --ac-primary-soft: rgba(214, 96, 101, 0.16);
  --ac-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  --ac-shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------- typography */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -0.003em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ac-heading);
  letter-spacing: -0.018em;
  font-weight: 600;
}

.ac-page-title {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.ac-page-subtitle {
  font-size: 0.8125rem;
  color: var(--ac-muted);
  margin: 0.25rem 0 0;
}

/* Tabular figures keep numeric columns aligned. */
.ac-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ------------------------------------------------------------------ brand */
.app-brand-link .ac-brand-logo,
.auth-cover-brand .ac-brand-logo {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: contain;
  border-radius: 50%;
}

.auth-cover-brand .ac-brand-logo {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}

.ac-brand-name {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ac-heading);
  white-space: nowrap;
}

.ac-brand-sub {
  display: block;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

/* Hide the wordmark when the menu is collapsed, keep the seal centred. */
.layout-menu-collapsed:not(.layout-menu-hover) .app-brand-link .ac-brand-text {
  display: none;
}

/* ------------------------------------------------------------------- menu */
.menu-vertical .menu-item .menu-link {
  border-radius: var(--ac-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
}

.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: var(--ac-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px -2px rgba(var(--ac-primary-rgb), 0.55);
}

.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon {
  color: #fff !important;
}

.menu-vertical .menu-sub .menu-item.active > .menu-link {
  font-weight: 600;
}

/* Section captions between menu groups. */
.menu-header {
  padding: 1.25rem 1rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-muted);
  white-space: nowrap;
}

.layout-menu-collapsed:not(.layout-menu-hover) .menu-header {
  text-align: center;
  padding-inline: 0;
  overflow: hidden;
}

.layout-menu-collapsed:not(.layout-menu-hover) .menu-header > span {
  display: none;
}

.menu-header-divider {
  display: none;
  height: 1px;
  background: var(--ac-border);
  margin: 0.75rem auto;
  width: 1.25rem;
}

.layout-menu-collapsed:not(.layout-menu-hover) .menu-header-divider {
  display: block;
}

/* --------------------------------------------------------------- surfaces */
.card {
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow);
}

.card-header {
  border-bottom: 1px solid var(--ac-border);
  padding-block: 1rem;
  background: transparent;
}

.card-header.ac-card-header-flush {
  border-bottom: 0;
  padding-bottom: 0.75rem;
}

/* Compact stat tile used on the dashboard. */
.ac-stat {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.25rem;
}

.ac-stat-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--ac-radius-sm);
  font-size: 1.375rem;
}

.ac-stat-value {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ac-heading);
  font-variant-numeric: tabular-nums;
}

.ac-stat-label {
  font-size: 0.8125rem;
  color: var(--ac-muted);
  margin: 0.125rem 0 0;
}

/* ---------------------------------------------------------------- tables */
.table > :not(caption) > * > * {
  padding: 0.75rem 1.25rem;
}

table.dataTable thead th {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac-muted);
  background: var(--ac-surface-sunken);
  border-bottom: 1px solid var(--ac-border) !important;
  white-space: nowrap;
}

table.dataTable tbody tr:hover > td {
  background: var(--ac-primary-soft);
}

table.dataTable tbody td {
  vertical-align: middle;
  border-bottom: 1px solid var(--ac-border);
}

/* The toolbar above every data table. */
.ac-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ac-border);
}

.ac-table-toolbar .dataTables_filter,
.ac-table-toolbar .dataTables_length {
  margin: 0;
}

.ac-table-toolbar .dataTables_filter label,
.ac-table-toolbar .dataTables_length label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ac-muted);
}

/* Search field with a leading magnifier. */
.ac-table-toolbar .dataTables_filter input {
  min-width: 240px;
  height: 38px;
  border-radius: var(--ac-radius-sm);
  border: 1px solid var(--ac-border-strong);
  background-color: var(--ac-surface);
  padding: 0.4rem 0.75rem;
  margin: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ac-table-toolbar .dataTables_filter input:focus {
  border-color: var(--ac-primary);
  box-shadow: 0 0 0 3px var(--ac-primary-soft);
  outline: 0;
}

.ac-table-toolbar .dataTables_length select {
  height: 38px;
  border-radius: var(--ac-radius-sm);
  border: 1px solid var(--ac-border-strong);
  padding-inline: 0.625rem 1.75rem;
}

.ac-table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--ac-border);
}

.ac-table-footer .dataTables_info {
  font-size: 0.8125rem;
  color: var(--ac-muted);
  padding: 0;
}

.ac-table-footer .dataTables_paginate {
  margin: 0 !important;
}

/* Empty state shown when a table has no rows or no search matches. */
.ac-empty {
  padding: 3rem 1.5rem;
  text-align: center;
}

.ac-empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 0.875rem;
  border-radius: 50%;
  background: var(--ac-surface-sunken);
  color: var(--ac-muted);
  font-size: 1.75rem;
}

.ac-empty-title {
  font-weight: 600;
  color: var(--ac-heading);
  margin-bottom: 0.25rem;
}

.ac-empty-text {
  font-size: 0.875rem;
  color: var(--ac-muted);
  margin: 0;
}

/* Row action buttons stay on one line and share a consistent size. */
.ac-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}

.ac-row-actions .btn {
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-padding-y: 0.3rem;
  line-height: 1;
}

.ac-row-actions .btn i {
  font-size: 1.05rem;
}

/* --------------------------------------------------------------- avatars */
.ac-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--ac-primary-soft);
  color: var(--ac-primary);
  text-transform: uppercase;
}

.ac-avatar-sm {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  font-size: 0.6875rem;
}

.ac-avatar-lg {
  width: 56px;
  height: 56px;
  flex-basis: 56px;
  font-size: 1.125rem;
}

.ac-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.ac-identity-name {
  font-weight: 600;
  color: var(--ac-heading);
  line-height: 1.25;
}

.ac-identity-meta {
  font-size: 0.75rem;
  color: var(--ac-muted);
  line-height: 1.25;
}

/* ---------------------------------------------------------------- navbar */
.layout-navbar {
  box-shadow: var(--ac-shadow-sm);
}

.ac-navbar-search {
  position: relative;
  max-width: 420px;
  width: 100%;
}

.ac-navbar-search input {
  height: 38px;
  padding-inline: 2.25rem 3.5rem;
  border-radius: 999px;
  border: 1px solid var(--ac-border);
  background: var(--ac-surface-sunken);
  font-size: 0.875rem;
  width: 100%;
  color: var(--ac-body);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ac-navbar-search input:focus {
  background: var(--ac-surface);
  border-color: var(--ac-primary);
  box-shadow: 0 0 0 3px var(--ac-primary-soft);
  outline: 0;
}

.ac-navbar-search .ac-search-icon {
  position: absolute;
  inset-inline-start: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ac-muted);
  pointer-events: none;
  font-size: 1.125rem;
}

.ac-navbar-search kbd {
  position: absolute;
  inset-inline-end: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6875rem;
  padding: 0.1rem 0.35rem;
  border-radius: 5px;
  background: var(--ac-surface);
  border: 1px solid var(--ac-border-strong);
  color: var(--ac-muted);
  pointer-events: none;
}

/* Result list rendered under the navbar search field. */
.ac-search-results {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 0.5rem);
  z-index: 1050;
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow-lg);
  padding: 0.375rem;
  max-height: 340px;
  overflow-y: auto;
  display: none;
}

.ac-search-results.show {
  display: block;
}

.ac-search-group {
  padding: 0.5rem 0.625rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

.ac-search-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--ac-radius-sm);
  color: var(--ac-body);
  text-decoration: none;
  font-size: 0.875rem;
}

.ac-search-item:hover,
.ac-search-item.is-active {
  background: var(--ac-primary-soft);
  color: var(--ac-primary);
}

.ac-search-item i {
  font-size: 1.125rem;
  opacity: 0.75;
}

.ac-search-item .ac-search-hint {
  margin-inline-start: auto;
  font-size: 0.75rem;
  color: var(--ac-muted);
}

.ac-search-empty {
  padding: 1.25rem 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ac-muted);
}

/* ----------------------------------------------------------------- forms */
.form-label,
.col-form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ac-heading);
  margin-bottom: 0.375rem;
}

.form-label .ac-required {
  color: var(--ac-primary);
  margin-inline-start: 0.125rem;
}

.form-control,
.form-select {
  border-radius: var(--ac-radius-sm);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ac-primary);
  box-shadow: 0 0 0 3px var(--ac-primary-soft);
}

.form-text {
  font-size: 0.75rem;
  color: var(--ac-muted);
}

/* Grouped permission picker on the role form. */
.ac-permission-group {
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  overflow: hidden;
}

.ac-permission-group + .ac-permission-group {
  margin-top: 0.875rem;
}

.ac-permission-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background: var(--ac-surface-sunken);
  border-bottom: 1px solid var(--ac-border);
}

.ac-permission-group-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ac-heading);
  margin: 0;
  text-transform: capitalize;
}

.ac-permission-group-body {
  padding: 0.875rem 1rem;
}

/* --------------------------------------------------------------- buttons */
.btn {
  border-radius: var(--ac-radius-sm);
  font-weight: 500;
}

.btn-primary {
  --bs-btn-bg: var(--ac-primary);
  --bs-btn-border-color: var(--ac-primary);
  --bs-btn-hover-bg: var(--ac-primary-hover);
  --bs-btn-hover-border-color: var(--ac-primary-hover);
  --bs-btn-active-bg: var(--ac-primary-hover);
  --bs-btn-active-border-color: var(--ac-primary-hover);
  --bs-btn-disabled-bg: var(--ac-primary);
  --bs-btn-disabled-border-color: var(--ac-primary);
}

/* --------------------------------------------------- page header + crumbs */
.ac-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.ac-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  list-style: none;
  padding: 0;
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  color: var(--ac-muted);
}

.ac-breadcrumb a {
  color: var(--ac-muted);
  text-decoration: none;
}

.ac-breadcrumb a:hover {
  color: var(--ac-primary);
}

.ac-breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-inline-start: 0.375rem;
  color: var(--ac-border-strong);
}

.ac-breadcrumb li[aria-current='page'] {
  color: var(--ac-heading);
  font-weight: 500;
}

/* ---------------------------------------------------------------- footer */
.ac-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ac-muted);
}

/* -------------------------------------------------------------- a11y/misc */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ac-primary);
  outline-offset: 2px;
}

/* The template's own customizer launcher is not part of the product. */
.template-customizer-open-btn,
.template-customizer {
  display: none !important;
}

@media print {
  .layout-menu,
  .layout-navbar,
  .content-footer,
  .ac-table-toolbar,
  .ac-row-actions,
  .ac-no-print {
    display: none !important;
  }

  .card {
    border: 0;
    box-shadow: none;
  }
}