/* ============================================================
   SaaS Platform — Base Stylesheet
   Uses CSS custom properties for white-label theming.
   All theme colours come from :root overrides injected by
   the IdentifyTenant middleware via the Blade layout.
   ============================================================ */

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-family, 'Inter', system-ui, sans-serif);
  background-color: #f8fafc;
  color: #1e293b;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-weight: 600; line-height: 1.25; color: #0f172a; }
h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
p  { color: #475569; }
a  { color: var(--primary, #2563eb); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: .8125rem; color: #64748b; }
code  { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: .875em;
        background: #f1f5f9; padding: .125rem .375rem; border-radius: .25rem; }

/* ── Layout Utilities ──────────────────────────────────────── */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-1        { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1 { gap: .25rem; }  .gap-2 { gap: .5rem; }  .gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }    .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; }
.grid { display: grid; }
.grid-cols-1  { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2  { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-cols-4  { grid-template-columns: repeat(4, minmax(0,1fr)); }
.col-span-2   { grid-column: span 2 / span 2; }
.col-span-3   { grid-column: span 3 / span 3; }
.hidden       { display: none !important; }
.block        { display: block; }
.w-full       { width: 100%; }
.h-screen     { height: 100vh; }
.overflow-hidden  { overflow: hidden; }
.overflow-y-auto  { overflow-y: auto; }
.overflow-x-auto  { overflow-x: auto; }
.relative     { position: relative; }
.absolute     { position: absolute; }
.fixed        { position: fixed; }
.inset-0      { inset: 0; }
.z-50         { z-index: 50; }
.min-w-0      { min-width: 0; }

/* Spacing helpers */
.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}
.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}
.px-2{padding-inline:.5rem}.px-3{padding-inline:.75rem}.px-4{padding-inline:1rem}
.px-5{padding-inline:1.25rem}.px-6{padding-inline:1.5rem}
.py-1{padding-block:.25rem}.py-2{padding-block:.5rem}.py-2\.5{padding-block:.625rem}
.py-3{padding-block:.75rem}.py-3\.5{padding-block:.875rem}.py-4{padding-block:1rem}
.py-5{padding-block:1.25rem}.py-6{padding-block:1.5rem}.py-8{padding-block:2rem}
.py-12{padding-block:3rem}.py-16{padding-block:4rem}
.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}
.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}
.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}
.space-y-1>*+*{margin-top:.25rem}.space-y-2>*+*{margin-top:.5rem}
.space-y-3>*+*{margin-top:.75rem}.space-y-4>*+*{margin-top:1rem}
.space-y-5>*+*{margin-top:1.25rem}.space-y-6>*+*{margin-top:1.5rem}
.space-x-2>*+*{margin-left:.5rem}

/* ── Colours ───────────────────────────────────────────────── */
.text-white     { color: #fff; }
.text-gray-400  { color: #9ca3af; }
.text-gray-500  { color: #6b7280; }
.text-gray-600  { color: #4b5563; }
.text-gray-700  { color: #374151; }
.text-gray-800  { color: #1f2937; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-800 { color: #1e293b; }
.text-blue-500  { color: #3b82f6; }
.text-blue-600  { color: #2563eb; }
.text-red-500   { color: #ef4444; }
.text-red-600   { color: #dc2626; }
.text-green-600 { color: #16a34a; }
.text-emerald-600 { color: #059669; }
.text-amber-500 { color: #f59e0b; }
.text-amber-700 { color: #b45309; }
.text-amber-800 { color: #92400e; }
.text-purple-500 { color: #a855f7; }
.text-indigo-500 { color: #6366f1; }
.text-pink-500  { color: #ec4899; }
.text-primary   { color: var(--primary, #2563eb); }

.bg-white      { background-color: #fff; }
.bg-gray-50    { background-color: #f9fafb; }
.bg-gray-100   { background-color: #f3f4f6; }
.bg-slate-100  { background-color: #f1f5f9; }
.bg-blue-50    { background-color: #eff6ff; }
.bg-blue-100   { background-color: #dbeafe; }
.bg-red-50     { background-color: #fef2f2; }
.bg-red-100    { background-color: #fee2e2; }
.bg-green-50   { background-color: #f0fdf4; }
.bg-green-600  { background-color: #16a34a; }
.bg-amber-50   { background-color: #fffbeb; }
.bg-purple-100 { background-color: #f3e8ff; }
.bg-primary    { background-color: var(--primary, #2563eb); }
.bg-black\/40  { background-color: rgba(0,0,0,.4); }

/* ── Borders ───────────────────────────────────────────────── */
.border        { border: 1px solid #e2e8f0; }
.border-b      { border-bottom: 1px solid #e2e8f0; }
.border-t      { border-top: 1px solid #e2e8f0; }
.border-gray-100  { border-color: #f3f4f6; }
.border-gray-200  { border-color: #e5e7eb; }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }
.border-blue-200  { border-color: #bfdbfe; }
.border-green-200 { border-color: #bbf7d0; }
.border-red-200   { border-color: #fecaca; }
.border-amber-200 { border-color: #fde68a; }
.border-white\/10 { border-color: rgba(255,255,255,.1); }
.divide-y > *+* { border-top: 1px solid #f1f5f9; }
.divide-gray-50 > *+* { border-top-color: #f9fafb; }
.divide-gray-100 > *+* { border-top-color: #f3f4f6; }
.border-dashed    { border-style: dashed; }

/* ── Border Radius ─────────────────────────────────────────── */
.rounded     { border-radius: .25rem; }
.rounded-lg  { border-radius: .5rem; }
.rounded-xl  { border-radius: .75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full{ border-radius: 9999px; }

/* ── Shadows ───────────────────────────────────────────────── */
.shadow     { box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06); }
.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }

/* ── Text Utilities ────────────────────────────────────────── */
.text-xs   { font-size: .75rem;   line-height: 1rem; }
.text-sm   { font-size: .875rem;  line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;     line-height: 1; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold   { font-weight: 700; }
.font-mono   { font-family: 'JetBrains Mono', monospace; }
.tracking-wide    { letter-spacing: .025em; }
.tracking-wider   { letter-spacing: .05em; }
.tracking-widest  { letter-spacing: .1em; }
.uppercase  { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.whitespace-nowrap { white-space: nowrap; }
.underline  { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.leading-tight  { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }

/* ── Width / Height ────────────────────────────────────────── */
.w-8  { width: 2rem; }   .w-9  { width: 2.25rem; }  .w-10 { width: 2.5rem; }
.w-44 { width: 11rem; }  .w-56 { width: 14rem; }    .w-60 { width: 15rem; }
.w-64 { width: 16rem; }
.h-2  { height: .5rem; } .h-8  { height: 2rem; }    .h-9  { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.max-w-md  { max-width: 28rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.min-w-56  { min-width: 14rem; }
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* ── Transitions ───────────────────────────────────────────── */
.transition       { transition: all .15s ease; }
.transition-all   { transition: all .15s ease; }
.duration-200     { transition-duration: .2s; }

/* ── Opacity ───────────────────────────────────────────────── */
.opacity-0    { opacity: 0; }
.opacity-100  { opacity: 1; }

/* ── Group hover ───────────────────────────────────────────── */
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:bg-gray-50  { background: #f9fafb; }

/* ── Transforms ────────────────────────────────────────────── */
.-translate-y-1\/2 { transform: translateY(-50%); }
.left-3  { left: .75rem; }
.top-1\/2 { top: 50%; }
.top-3   { top: .75rem; }
.right-3 { right: .75rem; }
.bottom-4 { bottom: 1rem; }
.right-4  { right: 1rem; }
.last\:border-0:last-child { border: 0; }

/* ── Components ────────────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .5rem 1rem; border-radius: .5rem;
  font-size: .875rem; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; transition: all .15s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary  { background: var(--primary,#2563eb); color: #fff; border-color: var(--primary,#2563eb); }
.btn-primary:hover  { filter: brightness(.9); }
.btn-secondary { background: #f8fafc; color: #374151; border-color: #e2e8f0; }
.btn-secondary:hover { background: #f1f5f9; }
.btn-danger   { background: #ef4444; color: #fff; border-color: #ef4444; }
.btn-danger:hover  { background: #dc2626; }
.btn-success  { background: #22c55e; color: #fff; }
.btn-ghost    { background: transparent; color: #64748b; border-color: transparent; }
.btn-ghost:hover { background: #f1f5f9; }
.btn-sm       { padding: .375rem .75rem; font-size: .8125rem; }
.btn-lg       { padding: .75rem 1.5rem; font-size: 1rem; }
.btn-block    { width: 100%; justify-content: center; }

/* Form elements */
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-size: .875rem; font-weight: 500; color: #374151; margin-bottom: .375rem; }
.form-label span { color: #ef4444; }
.form-control {
  display: block; width: 100%;
  padding: .625rem .875rem;
  border: 1.5px solid #e2e8f0; border-radius: .5rem;
  font-size: .875rem; color: #1e293b;
  background: #f8fafc;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus {
  outline: none; border-color: var(--primary,#2563eb);
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary,#2563eb) 12%, transparent);
}
.form-control.error { border-color: #ef4444; }
textarea.form-control { resize: vertical; min-height: 6rem; }
select.form-control { cursor: pointer; }
.form-text  { font-size: .75rem; color: #64748b; margin-top: .25rem; }
.form-error { font-size: .75rem; color: #ef4444; margin-top: .25rem; }
.form-check { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.form-check input[type=checkbox],
.form-check input[type=radio]  { width: 1rem; height: 1rem; accent-color: var(--primary,#2563eb); cursor: pointer; }

/* Cards */
.card { background: #fff; border-radius: .75rem; border: 1px solid #e2e8f0; overflow: hidden; }
.card-header {
  padding: 1.125rem 1.5rem; border-bottom: 1px solid #f1f5f9;
  display: flex; align-items: center; justify-content: space-between;
}
.card-header h3 { font-size: 1rem; font-weight: 600; color: #1e293b; }
.card-body   { padding: 1.5rem; }
.card-footer { padding: 1rem 1.5rem; background: #f8fafc; border-top: 1px solid #f1f5f9; }

/* Badges */
.badge {
  display: inline-flex; align-items: center;
  padding: .2rem .6rem; border-radius: 9999px;
  font-size: .75rem; font-weight: 500; line-height: 1;
}
.badge-green  { background: #dcfce7; color: #16a34a; }
.badge-red    { background: #fee2e2; color: #dc2626; }
.badge-yellow { background: #fef9c3; color: #ca8a04; }
.badge-blue   { background: #dbeafe; color: #2563eb; }
.badge-purple { background: #f3e8ff; color: #9333ea; }
.badge-gray   { background: #f1f5f9; color: #64748b; }
.badge-amber  { background: #fef3c7; color: #d97706; }

/* Tables */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  padding: .75rem 1rem; text-align: left;
  font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: #64748b; border-bottom: 2px solid #e2e8f0;
  background: #f8fafc; white-space: nowrap;
}
.data-table td {
  padding: .875rem 1rem; border-bottom: 1px solid #f1f5f9;
  font-size: .875rem; color: #374151; vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: #f8fafc; }

/* Stat cards */
.stat-card {
  background: #fff; border-radius: .75rem;
  border: 1px solid #e2e8f0; padding: 1.25rem 1.5rem;
}
.stat-number { font-size: 1.75rem; font-weight: 700; color: #1e293b; line-height: 1; }
.stat-label  { font-size: .75rem; color: #64748b; text-transform: uppercase; letter-spacing: .05em; margin-top: .25rem; }

/* Alerts */
.alert {
  padding: .875rem 1rem; border-radius: .5rem;
  display: flex; align-items: flex-start; gap: .625rem;
  font-size: .875rem;
}
.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.alert-error   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.alert-info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
.alert-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }

/* Pagination */
.pagination { display: flex; align-items: center; gap: .25rem; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; padding: 0 .5rem;
  border: 1px solid #e2e8f0; border-radius: .375rem;
  font-size: .8125rem; color: #374151; text-decoration: none; transition: all .15s;
}
.pagination a:hover       { background: #f1f5f9; }
.pagination .active span  { background: var(--primary,#2563eb); color: #fff; border-color: var(--primary,#2563eb); }
.pagination .disabled span { color: #cbd5e1; cursor: default; }

/* Color picker */
.color-swatch {
  width: 2.5rem; height: 2.5rem; border-radius: .375rem;
  border: 2px solid #e2e8f0; cursor: pointer; overflow: hidden;
}
.color-swatch input[type=color] { width: 200%; height: 200%; margin: -25%; border: 0; cursor: pointer; }

/* Toggle switch */
.toggle { position: relative; display: inline-flex; width: 2.5rem; height: 1.375rem; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 9999px;
  cursor: pointer; transition: .2s;
}
.toggle-slider::before {
  content: ''; position: absolute; height: 1rem; width: 1rem; left: .1875rem; bottom: .1875rem;
  background: #fff; border-radius: 50%; transition: .2s;
}
.toggle input:checked + .toggle-slider { background: var(--primary,#2563eb); }
.toggle input:checked + .toggle-slider::before { transform: translateX(1.125rem); }

/* Sidebar nav */
.nav-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1rem; color: rgba(255,255,255,.75);
  border-radius: .5rem; transition: all .15s;
  font-size: .875rem; text-decoration: none;
  border-left: 3px solid transparent;
}
.nav-link:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.nav-link.active { background: rgba(255,255,255,.15); color: #fff; font-weight: 600; border-left-color: rgba(255,255,255,.8); }
.sidebar-brand { min-height: 100vh; }

/* Material icons sizing */
.material-icons.text-sm   { font-size: .875rem; }
.material-icons.text-base { font-size: 1rem; }
.material-icons.text-lg   { font-size: 1.125rem; }
.material-icons.text-xl   { font-size: 1.25rem; }
.material-icons.text-2xl  { font-size: 1.5rem; }
.material-icons.text-3xl  { font-size: 1.875rem; }
.material-icons.text-4xl  { font-size: 2.25rem; }
.material-icons.text-5xl  { font-size: 3rem; }

/* Backdrop blur */
.backdrop-blur-sm { backdrop-filter: blur(4px); }

/* Progress bar */
.progress { background: #e2e8f0; border-radius: 9999px; height: .5rem; overflow: hidden; }
.progress-bar { background: var(--primary,#2563eb); height: 100%; border-radius: 9999px; transition: width .3s; }

/* Responsive grid breakpoints */
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .md\:block { display: block; }
  .md\:hidden { display: none; }
  .md\:flex   { display: flex; }
  .md\:inline { display: inline; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lg\:col-span-2  { grid-column: span 2/span 2; }
  .lg\:flex        { display: flex; }
}
@media (min-width: 1280px) {
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .xl\:col-span-2  { grid-column: span 2/span 2; }
  .xl\:block       { display: block; }
}
@media (max-width: 767px) {
  .hidden-mobile { display: none; }
  aside#sidebar  { display: none; }
  aside#sidebar.open { display: flex; position: fixed; inset: 0; z-index: 40; width: 16rem; }
}

/* Dark mode */
.dark body { background: #0f172a; color: #e2e8f0; }
.dark .bg-white { background: #1e293b; }
.dark .card     { background: #1e293b; border-color: #334155; }
.dark .form-control { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.dark .data-table th { background: #1e293b; color: #94a3b8; }
.dark .data-table td { border-color: #1e293b; color: #cbd5e1; }
.dark .data-table tbody tr:hover td { background: #334155; }

/* Scrollbar styling */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }