/* ==========================================================================
   Chapy admin in the app's own style (2026-10-11). Loaded last, after chapy-theme.css.
   Same language as the Flutter app: white page, soft grey fills, mint for what is selected,
   the green gradient for the main actions, round corners (22–28 for cards, pills for buttons),
   and NO borders, NO drop shadows, no boxes inside boxes.
   Colours = ChapyTokens / ProfileStyle in gomeet_flutter.
   ========================================================================== */

:root {
  --app-green: #10B981;            /* ChapyTokens.primaryGreen */
  --app-green-2: #00D492;          /* ChapyTokens.accentGreen */
  --app-gradient: linear-gradient(90deg, #10B981 0%, #00D492 100%);
  --app-mint: #E3F6EE;             /* ProfileStyle.activeFill */
  --app-mint-ink: #047857;
  --app-soft: #F1F4F8;             /* ProfileStyle.softFill */
  --app-soft-2: #F7F9FB;
  --app-card: #F4F6F9;               /* card surface on the white page */
  --app-page: #FFFFFF;
  --app-title: #1A1D29;            /* ChapyTokens.titleDark */
  --app-text: #4B5563;             /* ChapyTokens.textSecondaryGrey */
  --app-muted: #6B7280;            /* ChapyTokens.subtextGrey */
  --app-red: #DC2626;
  --app-red-soft: #FEF2F2;
  --app-orange: #C2410C;
  --app-orange-soft: #FFF4E6;
  --app-blue: #1D4ED8;
  --app-blue-soft: #EAF2FF;

  /* The old theme variables now point at the app palette */
  --chapy-canvas: var(--app-page);
  --chapy-card: var(--app-card);
  --chapy-sidebar: var(--app-page);
  --chapy-border: transparent;
  --chapy-border-subtle: transparent;
  --chapy-title: var(--app-title);
  --chapy-navy: var(--app-title);
  --chapy-primary-orange: var(--app-green);
  --chapy-primary-orange-end: var(--app-green-2);
  --chapy-gradient-orange: var(--app-gradient);
  --chapy-orange: var(--app-green);
  --chapy-orange-tint: var(--app-mint);
  --chapy-orange-border: transparent;
  --chapy-emerald-border: transparent;
  --chapy-red-border: transparent;
  --chapy-blue: var(--app-green);
  --chapy-blue-tint: var(--app-mint);
  --chapy-blue-hover: var(--app-green);
  --chapy-purple: var(--app-green);
  --chapy-purple-tint: var(--app-mint);
  --chapy-radius-sm: 12px;
  --chapy-radius-md: 16px;
  --chapy-radius-lg: 22px;
  --chapy-radius-card: 24px;
  --chapy-shadow-card: none;
  --chapy-shadow-hover: none;
  --chapy-shadow-dropdown: none;
}

/* ---- No outlines, no shadows anywhere (spinners and check boxes keep the border they are drawn with) */
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
body *:not(.spinner-border):not(.spinner-grow):not(.form-check-input):not(.chapy-keep-border) {
  border-color: transparent !important;
}
hr, .chapy-dropup-divider, .dropdown-divider { background: transparent !important; opacity: 0 !important; }

/* Keyboard focus stays visible without a shadow */
:focus-visible { outline: 2px solid rgba(16, 185, 129, 0.55) !important; outline-offset: 2px; }

body, .page-wrapper, .page-body-wrapper, .page-body {
  background: var(--app-page) !important;
  color: var(--app-text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .chapy-page-title { color: var(--app-title) !important; letter-spacing: -0.01em; }

/* ---- Sidebar: soft column, mint selection */
.sidebar-wrapper { background: var(--app-soft-2) !important; }
.chapy-sidebar-brand { background: transparent !important; }
.chapy-nav-group-title { color: var(--app-muted) !important; }
.chapy-nav-link { border-radius: 16px !important; color: var(--app-text) !important; }
.chapy-nav-link:hover { background: var(--app-soft) !important; color: var(--app-title) !important; }
.chapy-nav-link.active { background: var(--app-mint) !important; color: var(--app-mint-ink) !important; font-weight: 600 !important; }
.chapy-nav-link.active i, .chapy-nav-link.active svg { color: var(--app-green) !important; }
.chapy-nav-counter, .counter-alert { background: var(--app-red-soft) !important; color: var(--app-red) !important; }
.counter-promo { background: var(--app-mint) !important; color: var(--app-mint-ink) !important; }
.chapy-sidebar-user { background: var(--app-page) !important; border-radius: 20px !important; }
.chapy-user-avatar, .chapy-dropup-avatar { background: var(--app-gradient) !important; color: #fff !important; }
.chapy-admin-dropup { background: var(--app-page) !important; border-radius: 22px !important; }
.chapy-dropup-item { border-radius: 14px !important; }
.chapy-dropup-item:hover, .chapy-dropup-item.active { background: var(--app-soft) !important; }
.chapy-dropup-item-danger:hover { background: var(--app-red-soft) !important; }
.chapy-mobile-topbar { background: var(--app-page) !important; }

/* ---- Cards: one soft surface, no outline. A box inside a card is flattened (no box in a box). */
.chapy-card, .card, .chapy-kpi-card, .modal-content, .dropdown-menu {
  background: var(--app-card) !important;
  border-radius: 24px !important;
}
.chapy-card .chapy-card, .chapy-card .card, .card .card, .chapy-card .chapy-kpi-card, .card .chapy-kpi-card {
  background: var(--app-page) !important;
  border-radius: 18px !important;
}
.card-header, .card-footer, .card-body { background: transparent !important; }
.chapy-kpi-card:hover { transform: none !important; }
.modal-content { background: var(--app-page) !important; border-radius: 28px !important; }
.modal-header, .modal-footer { background: transparent !important; }
.modal-backdrop.show { opacity: 0.35 !important; }

/* ---- Tables: no lines; rows are white pills on the soft card */
.table, table.dataTable, .table-modern { border-collapse: separate !important; border-spacing: 0 8px !important; background: transparent !important; }
.table > :not(caption) > * > *, table.dataTable tbody td, table.dataTable thead th {
  background: transparent !important;
}
.table thead th, table.dataTable thead th {
  color: var(--app-muted) !important; font-weight: 600 !important; text-transform: none !important;
  letter-spacing: 0 !important; font-size: 12.5px !important;
}
.table tbody tr, table.dataTable tbody tr { background: var(--app-page) !important; }
.table tbody tr td:first-child, table.dataTable tbody tr td:first-child { border-radius: 16px 0 0 16px !important; }
.table tbody tr td:last-child, table.dataTable tbody tr td:last-child { border-radius: 0 16px 16px 0 !important; }
.table tbody tr:hover, table.dataTable tbody tr:hover { background: var(--app-soft) !important; }
.table-light, .table-light > * > *, thead.table-light th { background: transparent !important; }

/* ---- Fields: soft fill, white on focus */
.form-control, .form-select, .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], textarea, select {
  background-color: var(--app-soft) !important;
  border-radius: 14px !important;
  color: var(--app-title) !important;
}
.form-control:focus, .form-select:focus, textarea:focus, select:focus, input:focus { background-color: var(--app-page) !important; }
.form-control::placeholder, textarea::placeholder { color: #9CA3AF !important; }
.form-label { color: var(--app-title) !important; }
.form-check-input { border-color: #C7CDD6 !important; }
.form-check-input:checked { background-color: var(--app-green) !important; border-color: var(--app-green) !important; }
.input-group-text { background: var(--app-soft) !important; border-radius: 14px !important; }

/* ---- Buttons: pills. Main action = green gradient; the rest = soft fills with coloured text */
.btn { border-radius: 999px !important; font-weight: 600 !important; }
.btn-primary, .btn-create, .btn-emerald, .btn-success, .btn-add-bracket {
  background: var(--app-gradient) !important; color: #fff !important;
}
.btn-primary:hover, .btn-create:hover, .btn-emerald:hover, .btn-success:hover { filter: brightness(0.97); }
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-dark {
  background: var(--app-soft) !important; color: var(--app-title) !important;
}
.btn-outline-primary, .btn-outline-success, .btn-outline-info, .btn-edit-tier {
  background: var(--app-mint) !important; color: var(--app-mint-ink) !important;
}
.btn-outline-danger, .btn-danger, .btn-delete-tier {
  background: var(--app-red-soft) !important; color: var(--app-red) !important;
}
.btn-outline-warning, .btn-warning { background: var(--app-orange-soft) !important; color: var(--app-orange) !important; }
.btn:hover { transform: none !important; }
.btn-close { border-radius: 999px !important; background-color: var(--app-soft) !important; opacity: 0.8; }

/* ---- Badges / chips: soft pills */
.badge, .chapy-badge { border-radius: 999px !important; font-weight: 600 !important; }
.badge.bg-light, .badge-muted, .bg-light.badge { background: var(--app-soft) !important; color: var(--app-text) !important; }
.badge-success-custom, .badge.bg-success, .badge-store { background: var(--app-mint) !important; color: var(--app-mint-ink) !important; }
.badge-danger-custom, .badge.bg-danger, .badge-alert { background: var(--app-red-soft) !important; color: var(--app-red) !important; }
.badge.bg-warning, .badge-warning-custom { background: var(--app-orange-soft) !important; color: var(--app-orange) !important; }
.badge.bg-info, .badge-provider, .badge.bg-primary, .bg-primary.badge { background: var(--app-blue-soft) !important; color: var(--app-blue) !important; }
.text-primary { color: var(--app-green) !important; }
.bg-primary:not(.badge) { background: var(--app-gradient) !important; }

/* ---- Tabs and filter chips: soft pills, mint when selected */
.nav-tabs, .nav-pills { gap: 8px; }
.nav-tabs .nav-link, .nav-pills .nav-link {
  border-radius: 999px !important; background: var(--app-soft) !important; color: var(--app-text) !important;
}
.nav-tabs .nav-link.active, .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background: var(--app-mint) !important; color: var(--app-mint-ink) !important;
}

/* ---- Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button, .pagination .page-item .page-link {
  border-radius: 999px !important; background: var(--app-soft) !important; color: var(--app-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .pagination .page-item.active .page-link {
  background: var(--app-mint) !important; color: var(--app-mint-ink) !important;
}

/* ---- Progress bars and timelines */
.progress { background: var(--app-soft) !important; border-radius: 999px !important; }
.chapy-timeline-icon { border-radius: 999px !important; }

/* Images keep round corners but lose their frames */
img.rounded-circle, img.rounded-3, img.rounded { border-width: 0 !important; }

/* Filter tabs written as small link buttons (All / Dogs / Cats / Lost …): mint when selected, like the app */
.d-flex > a.btn.btn-sm.btn-primary, .d-flex > a.btn.btn-sm.btn-success {
  background: var(--app-mint) !important; color: var(--app-mint-ink) !important;
}
.d-flex > a.btn.btn-sm.btn-danger { background: var(--app-red-soft) !important; color: var(--app-red) !important; }
.d-flex > a.btn.btn-sm.btn-outline-secondary { background: var(--app-soft) !important; color: var(--app-text) !important; }

/* Bootstrap helpers that force a shadow */
.shadow-sm, .shadow, .shadow-lg, .toast, .popover, .tooltip-inner { box-shadow: none !important; }

/* ---- Sidebar stays put. The template's script adds .close_icon on every window narrower than 1385 px,
   which slid the menu off-screen (0.3 s) on each page load while the content kept its left margin.
   On a computer the menu is always shown, without any slide; on a phone it is the drawer opened by the
   top-bar button (theme: .open). */
@media (min-width: 992px) {
  .sidebar-wrapper, .sidebar-wrapper.close_icon { transform: none !important; transition: none !important; }
}
@media (max-width: 991px) {
  .sidebar-wrapper, .sidebar-wrapper.close_icon { transform: translateX(-100%) !important; }
  .sidebar-wrapper.open, .sidebar-wrapper.close_icon.open { transform: translateX(0) !important; }
}
.page-wrapper .page-body-wrapper .page-body { transition: none !important; }

/* The template page loader (animated dots over every page) is not shown: pages appear at once */
.loader-wrapper { display: none !important; }

/* Titles in sentence case, like the app (the template capitalised every word) */
.page-title h1, .page-title h2, .page-title h3, .page-title h4, .page-title h5, .card-header h5 { text-transform: none !important; }