/* ======================================================
   APP-UI.CSS — Master Internal UI Framework
   Laravel Apps: Restaurant | Scheduling | Learning
   Version: 2.0 — Namespaced (agui- prefix)
   Prefix: agui-  (prevents conflicts with existing CSS)
   Usage: <link rel="stylesheet" href="{{ asset('css/app-ui.css') }}">
   ====================================================== */

/* ======================================================
   SECTION 1 — GLOBAL CSS VARIABLES
   Edit colors/spacing here → changes everywhere
   ====================================================== */
:root {
  /* Brand Colors */
  --agui-primary:        #1d4ed8;
  --agui-primary-hover:  #1e40af;
  --agui-primary-light:  #eff6ff;
  --agui-secondary:      #0f172a;
  --agui-accent:         #0ea5e9;

  /* Status Colors */
  --agui-success:        #16a34a;
  --agui-success-bg:     #f0fdf4;
  --agui-success-border: #bbf7d0;
  --agui-danger:         #dc2626;
  --agui-danger-bg:      #fef2f2;
  --agui-danger-border:  #fecaca;
  --agui-warning:        #d97706;
  --agui-warning-bg:     #fffbeb;
  --agui-info:           #0284c7;
  --agui-info-bg:        #f0f9ff;

  /* Neutral Palette */
  --agui-white:          #ffffff;
  --agui-bg-page:        #f1f5f9;
  --agui-bg-card:        #ffffff;
  --agui-bg-subtle:      #f8fafc;
  --agui-bg-muted:       #f1f5f9;

  /* Borders */
  --agui-border:         #e2e8f0;
  --agui-border-focus:   #93c5fd;

  /* Text */
  --agui-text-heading:   #0f172a;
  --agui-text-body:      #334155;
  --agui-text-muted:     #64748b;
  --agui-text-light:     #94a3b8;

  /* Spacing */
  --agui-space-xs:       4px;
  --agui-space-sm:       8px;
  --agui-space-md:       16px;
  --agui-space-lg:       24px;
  --agui-space-xl:       32px;
  --agui-space-2xl:      48px;

  /* Shape */
  --agui-radius-sm:      4px;
  --agui-radius:         8px;
  --agui-radius-lg:      12px;
  --agui-radius-xl:      16px;
  --agui-radius-full:    9999px;

  /* Shadows */
  --agui-shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --agui-shadow:     0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.05);
  --agui-shadow-md:  0 8px 16px -4px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
  --agui-shadow-lg:  0 20px 40px -8px rgba(0,0,0,.12);

  /* Typography */
  --agui-font-sans:  'Segoe UI', system-ui, -apple-system, sans-serif;
  --agui-font-mono:  'Consolas', 'Courier New', monospace;
  --agui-text-xs:    0.75rem;
  --agui-text-sm:    0.875rem;
  --agui-text-base:  1rem;
  --agui-text-lg:    1.125rem;
  --agui-text-xl:    1.25rem;
  --agui-text-2xl:   1.5rem;
  --agui-text-3xl:   1.875rem;

  /* Transitions */
  --agui-transition:      all 0.2s ease;
  --agui-transition-slow: all 0.35s ease;

  /* Sidebar */
  --agui-sidebar-width:  240px;
  --agui-header-height:  64px;
}

/* ======================================================
   SECTION 2 — SCOPED RESET
   Only applies inside agui containers — safe alongside
   your existing header/global CSS
   ====================================================== */
.agui-page-content *,
.agui-card *,
.agui-item-card *,
.agui-form-container *,
.agui-table-wrapper *,
.agui-alert *,
.agui-page-header * {
  box-sizing: border-box;
}

/* ======================================================
   SECTION 3 — LAYOUT SYSTEM
   ====================================================== */
.agui-page-content {
  flex: 1;
  padding: var(--agui-space-xl) var(--agui-space-lg);
  font-family: var(--agui-font-sans);
  color: var(--agui-text-body);
}

.agui-container    { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--agui-space-lg); }
.agui-container-sm { width: 100%; max-width: 640px;  margin: 0 auto; padding: 0 var(--agui-space-lg); }
.agui-container-md { width: 100%; max-width: 800px;  margin: 0 auto; padding: 0 var(--agui-space-lg); }
.agui-container-lg { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--agui-space-lg); }

/* Flex helpers */
.agui-flex         { display: flex; }
.agui-flex-col     { display: flex; flex-direction: column; }
.agui-flex-center  { display: flex; align-items: center; justify-content: center; }
.agui-flex-between { display: flex; align-items: center; justify-content: space-between; }
.agui-flex-wrap    { flex-wrap: wrap; }
.agui-items-center { align-items: center; }
.agui-gap-sm { gap: var(--agui-space-sm); }
.agui-gap-md { gap: var(--agui-space-md); }
.agui-gap-lg { gap: var(--agui-space-lg); }

/* Grid helpers */
.agui-grid-2       { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--agui-space-lg); }
.agui-grid-3       { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--agui-space-lg); }
.agui-grid-4       { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--agui-space-lg); }
.agui-grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--agui-space-lg); }
.agui-grid-auto    { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--agui-space-lg); }
.agui-grid-auto-lg { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: var(--agui-space-lg); }

/* Admin shell layout */
.agui-admin-layout { display: flex; min-height: 100vh; }
.agui-admin-layout .agui-main-area { flex: 1; display: flex; flex-direction: column; overflow-x: hidden; }

/* ======================================================
   SECTION 4 — PAGE HEADER
   ====================================================== */

/* Default: left-aligned title, right-aligned actions */
.agui-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--agui-space-md);
  margin-bottom: var(--agui-space-xl);
  font-family: var(--agui-font-sans);
  width: 100%;
}
.agui-page-header-left { flex: 1; }
.agui-page-header-left h1 {
  font-size: var(--agui-text-2xl);
  font-weight: 700;
  color: var(--agui-text-heading);
  line-height: 1.2;
  margin: 0;
}
.agui-breadcrumb {
  font-size: var(--agui-text-sm);
  color: var(--agui-text-muted);
  margin-top: var(--agui-space-xs);
}
.agui-breadcrumb a { color: var(--agui-text-muted); text-decoration: none; transition: var(--agui-transition); }
.agui-breadcrumb a:hover { color: var(--agui-primary); }
.agui-page-header-actions { display: flex; gap: var(--agui-space-sm); flex-wrap: wrap; align-items: center; }

/* ── Centered variant ──
   Stacks title → subtitle → buttons all centered on the page.
   Add agui-page-header--centered to the .agui-page-header div.         */
.agui-page-header--centered {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.agui-page-header--centered .agui-page-header-left {
  width: 100%;
  text-align: center;
}
.agui-page-header--centered .agui-page-header-left h1 {
  text-align: center;
}
.agui-page-header--centered .agui-breadcrumb {
  text-align: center;
}
.agui-page-header--centered .agui-page-header-actions {
  justify-content: center;
  width: 100%;
}

/* ── Standalone page title (no breadcrumb needed) ──
   Use when the page only needs a centered h1 + subtitle, no action buttons. */
.agui-page-title {
  text-align: center;
  margin-bottom: var(--agui-space-xl);
  font-family: var(--agui-font-sans);
}
.agui-page-title h1 {
  font-size: var(--agui-text-2xl);
  font-weight: 700;
  color: var(--agui-text-heading);
  margin: 0 0 var(--agui-space-xs);
}
.agui-page-title p {
  font-size: var(--agui-text-sm);
  color: var(--agui-text-muted);
  margin: 0;
}

/* ── Centered button row (standalone, not inside page-header) ──
   Use for toggle button bars, action rows that need to be centered. */
.agui-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--agui-space-sm);
  justify-content: center;
  margin-bottom: var(--agui-space-lg);
}
.agui-btn-row--left  { justify-content: flex-start; }
.agui-btn-row--right { justify-content: flex-end; }

/* ======================================================
   SECTION 5 — CARD COMPONENTS
   ====================================================== */

/* Standard card */
.agui-card {
  background: var(--agui-bg-card);
  border: 1px solid var(--agui-border);
  border-radius: var(--agui-radius-lg);
  box-shadow: var(--agui-shadow-sm);
  overflow: hidden;
  font-family: var(--agui-font-sans);
}
.agui-card-body   { padding: var(--agui-space-lg); }
.agui-card-header {
  padding: var(--agui-space-md) var(--agui-space-lg);
  border-bottom: 1px solid var(--agui-border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--agui-bg-subtle);
}
.agui-card-header h2,
.agui-card-header h3 { font-size: var(--agui-text-lg); font-weight: 600; color: var(--agui-text-heading); margin: 0; }
.agui-card-footer {
  padding: var(--agui-space-md) var(--agui-space-lg);
  border-top: 1px solid var(--agui-border);
  background: var(--agui-bg-subtle);
}

/* Stat card */
.agui-stat-card {
  background: var(--agui-bg-card);
  border: 1px solid var(--agui-border);
  border-radius: var(--agui-radius-lg);
  padding: var(--agui-space-lg);
  box-shadow: var(--agui-shadow-sm);
  transition: var(--agui-transition);
  font-family: var(--agui-font-sans);
}
.agui-stat-card:hover { box-shadow: var(--agui-shadow-md); transform: translateY(-2px); }
.agui-stat-label { font-size: var(--agui-text-sm); color: var(--agui-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.agui-stat-value { font-size: var(--agui-text-3xl); font-weight: 700; color: var(--agui-text-heading); margin-top: var(--agui-space-xs); }
.agui-stat-icon  { width: 44px; height: 44px; border-radius: var(--agui-radius); display: flex; align-items: center; justify-content: center; background: var(--agui-primary-light); color: var(--agui-primary); font-size: 1.25rem; margin-bottom: var(--agui-space-md); }

/* Item card (list views) */
.agui-item-card {
  background: var(--agui-bg-card);
  border: 1px solid var(--agui-border);
  border-radius: var(--agui-radius-lg);
  box-shadow: var(--agui-shadow-sm);
  transition: var(--agui-transition);
  overflow: hidden;
  font-family: var(--agui-font-sans);
}
.agui-item-card:hover { box-shadow: var(--agui-shadow-md); }
.agui-item-card-header {
  padding: var(--agui-space-md) var(--agui-space-lg);
  border-bottom: 1px solid var(--agui-border);
  background: var(--agui-bg-subtle);
  display: flex; align-items: center; justify-content: space-between;
}
.agui-item-card-body   { padding: var(--agui-space-lg); }
.agui-item-card-footer {
  padding: var(--agui-space-md) var(--agui-space-lg);
  border-top: 1px solid var(--agui-border);
  background: var(--agui-bg-subtle);
  display: flex; gap: var(--agui-space-sm); align-items: center;
}

/* ======================================================
   SECTION 6 — BUTTONS
   ====================================================== */
.agui-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--agui-space-xs);
  padding: 10px 18px;
  font-size: var(--agui-text-sm);
  font-family: var(--agui-font-sans);
  font-weight: 600;
  border-radius: var(--agui-radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--agui-transition);
  white-space: nowrap;
  line-height: 1;
}
.agui-btn:hover { text-decoration: none; }

.agui-btn-primary   { background: var(--agui-primary);  color: var(--agui-white); border-color: var(--agui-primary); }
.agui-btn-primary:hover { background: var(--agui-primary-hover); border-color: var(--agui-primary-hover); color: var(--agui-white); }

.agui-btn-secondary { background: var(--agui-white); color: var(--agui-text-body); border-color: var(--agui-border); }
.agui-btn-secondary:hover { background: var(--agui-bg-muted); color: var(--agui-text-heading); }

.agui-btn-success   { background: var(--agui-success); color: var(--agui-white); border-color: var(--agui-success); }

.agui-btn-danger    { background: var(--agui-danger); color: var(--agui-white); border-color: var(--agui-danger); }
.agui-btn-danger:hover { background: #b91c1c; color: var(--agui-white); }

.agui-btn-outline   { background: transparent; color: var(--agui-primary); border-color: var(--agui-primary); }
.agui-btn-outline:hover { background: var(--agui-primary); color: var(--agui-white); }

.agui-btn-ghost     { background: transparent; color: var(--agui-text-muted); border-color: transparent; }
.agui-btn-ghost:hover { background: var(--agui-bg-muted); color: var(--agui-text-heading); }

.agui-btn-sm { padding: 6px 12px; font-size: var(--agui-text-xs); }
.agui-btn-lg { padding: 13px 24px; font-size: var(--agui-text-base); }

/* ======================================================
   SECTION 7 — FORMS
   ====================================================== */
.agui-form-container { max-width: 680px; margin: 0 auto; }

.agui-form-group {
  margin-bottom: var(--agui-space-lg);
  font-family: var(--agui-font-sans);
}

.agui-form-label {
  display: block;
  font-size: var(--agui-text-sm);
  font-weight: 600;
  color: var(--agui-text-heading);
  margin-bottom: var(--agui-space-xs);
  font-family: var(--agui-font-sans);
}
.agui-required { color: var(--agui-danger); margin-left: 2px; }

/* Inputs scoped inside agui-form-group — does NOT touch global inputs */
.agui-form-group .agui-form-control {
  width: 100%;
  padding: 10px 14px;
  font-size: var(--agui-text-base);
  font-family: var(--agui-font-sans);
  color: var(--agui-text-body);
  background: var(--agui-white);
  border: 1.5px solid var(--agui-border);
  border-radius: var(--agui-radius);
  transition: var(--agui-transition);
  appearance: none;
  line-height: 1.5;
  box-sizing: border-box;
  display: block;
}
.agui-form-group .agui-form-control:focus {
  outline: none;
  border-color: var(--agui-border-focus);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.agui-form-group .agui-form-control:disabled {
  background: var(--agui-bg-muted);
  color: var(--agui-text-muted);
  cursor: not-allowed;
}
.agui-form-group textarea.agui-form-control { min-height: 100px; resize: vertical; }

.agui-form-hint { font-size: var(--agui-text-xs); color: var(--agui-text-muted); margin-top: var(--agui-space-xs); }

.agui-form-check { display: flex; align-items: center; gap: var(--agui-space-sm); }
.agui-form-check input[type="checkbox"],
.agui-form-check input[type="radio"] { width: 18px; height: 18px; accent-color: var(--agui-primary); cursor: pointer; }

.agui-img-preview {
  display: inline-block;
  border: 1.5px solid var(--agui-border);
  border-radius: var(--agui-radius);
  padding: var(--agui-space-xs);
  background: var(--agui-bg-subtle);
  margin-top: var(--agui-space-sm);
}
.agui-img-preview img { border-radius: var(--agui-radius-sm); display: block; }

/* ======================================================
   SECTION 8 — TABLES
   ====================================================== */
.agui-table-wrapper {
  overflow-x: auto;
  border-radius: var(--agui-radius-lg);
  border: 1px solid var(--agui-border);
  box-shadow: var(--agui-shadow-sm);
  background: var(--agui-bg-card);
  font-family: var(--agui-font-sans);
}
.agui-table { width: 100%; border-collapse: collapse; font-size: var(--agui-text-sm); }
.agui-table thead { background: var(--agui-bg-subtle); }
.agui-table thead th {
  padding: 13px var(--agui-space-md);
  text-align: left; font-weight: 600;
  color: var(--agui-text-muted); font-size: var(--agui-text-xs);
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--agui-border); white-space: nowrap;
}
.agui-table tbody tr { border-bottom: 1px solid var(--agui-border); transition: var(--agui-transition); }
.agui-table tbody tr:last-child { border-bottom: none; }
.agui-table tbody tr:hover { background: var(--agui-bg-subtle); }
.agui-table tbody td { padding: 13px var(--agui-space-md); color: var(--agui-text-body); vertical-align: middle; }
.agui-table-actions { display: flex; gap: var(--agui-space-xs); align-items: center; }

/* ======================================================
   SECTION 9 — ALERTS & FLASH MESSAGES
   ====================================================== */
.agui-alert {
  display: flex; align-items: flex-start; gap: var(--agui-space-sm);
  padding: var(--agui-space-md) var(--agui-space-lg);
  border-radius: var(--agui-radius); border: 1px solid;
  font-size: var(--agui-text-sm); margin-bottom: var(--agui-space-lg);
  font-family: var(--agui-font-sans);
}
.agui-alert-success { background: var(--agui-success-bg); border-color: var(--agui-success-border); color: var(--agui-success); }
.agui-alert-danger  { background: var(--agui-danger-bg);  border-color: var(--agui-danger-border);  color: var(--agui-danger); }
.agui-alert-warning { background: var(--agui-warning-bg); border-color: #fde68a; color: var(--agui-warning); }
.agui-alert-info    { background: var(--agui-info-bg);    border-color: #bae6fd; color: var(--agui-info); }
.agui-alert ul { margin: 0; padding-left: var(--agui-space-md); }
.agui-alert li { margin-bottom: 2px; }

/* ======================================================
   SECTION 10 — BADGES / STATUS PILLS
   ====================================================== */
.agui-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--agui-radius-full);
  font-size: var(--agui-text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  font-family: var(--agui-font-sans);
}
.agui-badge-success { background: var(--agui-success-bg);    color: var(--agui-success); }
.agui-badge-danger  { background: var(--agui-danger-bg);     color: var(--agui-danger); }
.agui-badge-warning { background: var(--agui-warning-bg);    color: var(--agui-warning); }
.agui-badge-info    { background: var(--agui-info-bg);       color: var(--agui-info); }
.agui-badge-neutral { background: var(--agui-bg-muted);      color: var(--agui-text-muted); }
.agui-badge-primary { background: var(--agui-primary-light); color: var(--agui-primary); }

/* ======================================================
   SECTION 11 — NAVIGATION / SIDEBAR
   ====================================================== */
.agui-top-header {
  height: var(--agui-header-height);
  background: var(--agui-white);
  border-bottom: 1px solid var(--agui-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--agui-space-xl);
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--agui-shadow-sm);
  font-family: var(--agui-font-sans);
}
.agui-brand { font-size: var(--agui-text-lg); font-weight: 700; color: var(--agui-text-heading); }

.agui-sidebar {
  width: var(--agui-sidebar-width);
  background: var(--agui-secondary);
  min-height: 100vh; display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; height: 100%;
  overflow-y: auto; z-index: 200;
  transition: var(--agui-transition-slow);
  font-family: var(--agui-font-sans);
}
.agui-sidebar-brand {
  padding: var(--agui-space-lg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: var(--agui-text-base); font-weight: 700; color: var(--agui-white);
}
.agui-sidebar-nav { flex: 1; padding: var(--agui-space-md) 0; }
.agui-sidebar-section-label {
  padding: var(--agui-space-sm) var(--agui-space-lg);
  font-size: var(--agui-text-xs); text-transform: uppercase;
  letter-spacing: .1em; color: rgba(255,255,255,.35);
  font-weight: 600; margin-top: var(--agui-space-sm);
}
.agui-sidebar-link {
  display: flex; align-items: center; gap: var(--agui-space-sm);
  padding: 10px var(--agui-space-lg);
  color: rgba(255,255,255,.70); font-size: var(--agui-text-sm); font-weight: 500;
  transition: var(--agui-transition); border-left: 3px solid transparent;
  text-decoration: none;
}
.agui-sidebar-link:hover,
.agui-sidebar-link.agui-active { background: rgba(255,255,255,.07); color: var(--agui-white); text-decoration: none; }
.agui-sidebar-link.agui-active { border-left-color: var(--agui-accent); }
.agui-with-sidebar { margin-left: var(--agui-sidebar-width); }

/* ======================================================
   SECTION 12 — DASHBOARD GRID
   ====================================================== */
.agui-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: var(--agui-space-lg);
  margin-bottom: var(--agui-space-xl);
}

/* ======================================================
   SECTION 13 — IMAGE DISPLAY
   ====================================================== */
.agui-display-image {
  width: 100%; max-height: 200px; object-fit: cover;
  border-radius: var(--agui-radius); border: 1px solid var(--agui-border);
}
.agui-no-image {
  width: 100%; height: 120px;
  background: var(--agui-bg-muted); border: 1.5px dashed var(--agui-border);
  border-radius: var(--agui-radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--agui-text-muted); font-size: var(--agui-text-sm);
  font-family: var(--agui-font-sans);
}

/* ======================================================
   SECTION 14 — UTILITY HELPERS
   ====================================================== */
.agui-text-center   { text-align: center; }
.agui-text-right    { text-align: right; }
.agui-text-muted    { color: var(--agui-text-muted); }
.agui-text-sm       { font-size: var(--agui-text-sm); }
.agui-text-xs       { font-size: var(--agui-text-xs); }
.agui-text-lg       { font-size: var(--agui-text-lg); }
.agui-font-bold     { font-weight: 700; }
.agui-font-semibold { font-weight: 600; }

.agui-mt-sm  { margin-top: var(--agui-space-sm); }
.agui-mt-md  { margin-top: var(--agui-space-md); }
.agui-mt-lg  { margin-top: var(--agui-space-lg); }
.agui-mt-xl  { margin-top: var(--agui-space-xl); }
.agui-mb-sm  { margin-bottom: var(--agui-space-sm); }
.agui-mb-md  { margin-bottom: var(--agui-space-md); }
.agui-mb-lg  { margin-bottom: var(--agui-space-lg); }
.agui-mb-xl  { margin-bottom: var(--agui-space-xl); }
.agui-p-sm   { padding: var(--agui-space-sm); }
.agui-p-md   { padding: var(--agui-space-md); }
.agui-p-lg   { padding: var(--agui-space-lg); }
.agui-w-full { width: 100%; }
.agui-hidden { display: none !important; }
.agui-divider { border: none; border-top: 1px solid var(--agui-border); margin: var(--agui-space-lg) 0; }

/* ======================================================
   SECTION 15 — RESPONSIVE BREAKPOINTS
   ====================================================== */

/* Tablet */
@media (max-width: 1024px) {
  .agui-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .agui-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 768px) {
  .agui-page-content    { padding: var(--agui-space-lg) var(--agui-space-md); }
  .agui-container,
  .agui-container-md,
  .agui-container-sm    { padding: 0 var(--agui-space-md); }

  /* Default header stacks left on mobile */
  .agui-page-header               { flex-direction: column; align-items: flex-start; }
  .agui-page-header-actions       { width: 100%; }
  .agui-page-header-actions .agui-btn { flex: 1; justify-content: center; }

  /* Centered header stays centered on mobile */
  .agui-page-header--centered                              { align-items: center; }
  .agui-page-header--centered .agui-page-header-left       { text-align: center; }
  .agui-page-header--centered .agui-page-header-actions    { justify-content: center; }
  .agui-page-header--centered .agui-page-header-actions .agui-btn { flex: 0 1 auto; }

  /* Button row centered on mobile */
  .agui-btn-row .agui-btn { flex: 0 1 auto; }

  .agui-grid-2,
  .agui-grid-3,
  .agui-grid-4 { grid-template-columns: 1fr; }

  .agui-sidebar             { transform: translateX(-100%); }
  .agui-sidebar.agui-open   { transform: translateX(0); width: 260px; }
  .agui-with-sidebar        { margin-left: 0; }
  .agui-form-container      { max-width: 100%; }
  .agui-top-header          { padding: 0 var(--agui-space-md); }

  /* Stacked card table on mobile */
  .agui-table thead { display: none; }
  .agui-table tbody tr {
    display: block; border: 1px solid var(--agui-border);
    border-radius: var(--agui-radius); margin-bottom: var(--agui-space-md);
    background: var(--agui-bg-card); box-shadow: var(--agui-shadow-sm);
  }
  .agui-table tbody td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px var(--agui-space-md); border-bottom: 1px solid var(--agui-border);
    font-size: var(--agui-text-sm);
  }
  .agui-table tbody td:last-child { border-bottom: none; }
  .agui-table tbody td::before {
    content: attr(data-label);
    font-weight: 600; color: var(--agui-text-muted);
    font-size: var(--agui-text-xs); text-transform: uppercase;
    margin-right: var(--agui-space-sm);
  }

  .agui-item-card-footer          { flex-wrap: wrap; }
  .agui-item-card-footer .agui-btn { flex: 1; justify-content: center; }
}

/* Small phones */
@media (max-width: 480px) {
  .agui-btn                       { padding: 9px 14px; font-size: var(--agui-text-xs); }
  .agui-page-header-left h1       { font-size: var(--agui-text-xl); }
  .agui-stat-value                { font-size: var(--agui-text-2xl); }
}

/* ======================================================
   SECTION 16 — SETTINGS TILES
   Used on admin settings / navigation hub pages.
   Works across all apps (restaurant, scheduling, subscription).
   Modifier .agui-settings-tile--accent for visually distinct tiles.
   ====================================================== */
.agui-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--agui-space-md);
}

.agui-settings-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--agui-space-sm);
  padding: var(--agui-space-lg) var(--agui-space-md);
  background: var(--agui-bg-subtle);
  border: 1.5px solid var(--agui-border);
  border-radius: var(--agui-radius-lg);
  text-decoration: none;
  color: var(--agui-text-heading);
  font-family: var(--agui-font-sans);
  font-size: var(--agui-text-sm);
  font-weight: 600;
  text-align: center;
  transition: var(--agui-transition);
  min-height: 100px;
}
.agui-settings-tile:hover {
  background: var(--agui-primary-light);
  border-color: var(--agui-primary);
  color: var(--agui-primary);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--agui-shadow-md);
}

/* Accent variant — use for tiles that need a distinct visual treatment */
.agui-settings-tile--accent {
  border-color: var(--agui-accent);
  background: var(--agui-info-bg);
  color: var(--agui-info);
}
.agui-settings-tile--accent:hover {
  background: var(--agui-accent);
  border-color: var(--agui-accent);
  color: var(--agui-white);
}

.agui-settings-icon {
  font-size: 1.6rem;
  line-height: 1;
}
.agui-settings-label {
  line-height: 1.2;
}

/* Tablet */
@media (max-width: 1024px) {
  .agui-settings-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

/* Mobile — 3 columns */
@media (max-width: 768px) {
  .agui-settings-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--agui-space-sm);
  }
  .agui-settings-tile {
    padding: var(--agui-space-md) var(--agui-space-sm);
    min-height: 85px;
    font-size: var(--agui-text-xs);
  }
  .agui-settings-icon {
    font-size: 1.35rem;
  }
}

/* Small phones — 2 columns */
@media (max-width: 400px) {
  .agui-settings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}