/* SAZ Vida components. Plain CSS so it works with the Tailwind CDN and with the built CSS alike.
   Brand colours come from the SAZ Vida Healthcare logo: blue #0077b6, cyan #00b4d8, light cyan #48cae4. */
:root {
  --brand-700: #0077b6; --brand-600: #0a84c1; --brand-500: #00b4d8; --brand-200: #90e0ef; --brand-50: #ecfbff;
}
[x-cloak] { display: none !important; }

/* buttons */
.btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .5rem; padding: .5rem .9rem; font-size: .875rem; font-weight: 500; line-height: 1.25rem;
  transition: background-color .15s, box-shadow .15s, color .15s; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--brand-700); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.btn-primary:hover { background: #035f92; }
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-danger:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.btn-secondary { background: #fff; color: #1f2937; border: 1px solid #d1d5db; }
.btn-secondary:hover { background: #f9fafb; }
.btn-danger { background: #e11d48; color: #fff; }
.btn-danger:hover { background: #be123c; }
.btn-ghost { color: #4b5563; padding: .4rem .6rem; }
.btn-ghost:hover { background: #f3f4f6; color: #111827; }
.btn-primary[disabled], .btn-secondary[disabled] { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: .3rem .6rem; font-size: .8rem; }

/* cards and layout */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.card-pad { padding: 1.25rem; }
.label { display: block; font-size: .8rem; font-weight: 500; color: #374151; margin-bottom: .3rem; }
.help { font-size: .75rem; color: #6b7280; margin-top: .25rem; }
.error { font-size: .75rem; color: #e11d48; margin-top: .25rem; }
.kbd { border: 1px solid #e5e7eb; border-bottom-width: 2px; border-radius: .3rem; padding: 0 .3rem; font-size: .7rem; color: #6b7280; background: #fff; }

/* tables */
.table { width: 100%; font-size: .875rem; }
.table thead th { text-align: left; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; padding: .7rem 1rem; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
.table tbody td { padding: .75rem 1rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.row-link { cursor: pointer; }
.table tbody tr.row-link:hover { background: #f8fafc; }

/* sidebar (same look as Licensify) */
#sidebar { background: linear-gradient(180deg, #0a84c1 0%, #0568a3 100%); color: rgba(255,255,255,.95); }
#sidebar .nav-link { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-radius: .6rem; font-size: .9rem; color: rgba(255,255,255,.92); transition: background-color .15s; }
#sidebar .nav-link:hover { background: rgba(255,255,255,.14); color: #fff; }
#sidebar .nav-link.is-current { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 #90e0ef; }
#sidebar .nav-link svg { width: 1.15rem; height: 1.15rem; flex: none; }
#sidebar .nav-section { padding: 1rem .8rem .35rem; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); }
#sidebar .sidebar-line { border-color: rgba(255,255,255,.18); }

/* drawer (slide-over) */
.drawer-panel { width: 100%; max-width: 36rem; }

/* auth pages */
.auth-bg { background: radial-gradient(1200px 600px at 10% -10%, #caf0f8 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #dbeafe 0%, transparent 55%), #f8fafc; }

/* htmx loading states */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request.dim-on-load, .htmx-request .dim-on-load { opacity: .55; transition: opacity .2s; }

/* allauth pages we did not restyle one by one (they use plain elements) */
.allauth-default h1 { font-size: 1.25rem; font-weight: 600; margin-bottom: .75rem; color: #111827; }
.allauth-default p { font-size: .9rem; color: #4b5563; margin: .5rem 0; }
.allauth-default form { display: flex; flex-direction: column; gap: .85rem; margin-top: 1rem; }
.allauth-default label { font-size: .8rem; font-weight: 500; color: #374151; }
.allauth-default input[type=text], .allauth-default input[type=email], .allauth-default input[type=password],
.allauth-default input[type=number], .allauth-default select, .allauth-default textarea {
  display: block; width: 100%; border: 1px solid #d1d5db; border-radius: .5rem; padding: .55rem .75rem; font-size: .9rem; margin-top: .25rem; }
.allauth-default button, .allauth-default input[type=submit] { background: var(--brand-700); color: #fff; border-radius: .5rem; padding: .55rem .9rem; font-size: .875rem; font-weight: 500; }
.allauth-default a { color: var(--brand-700); }
.allauth-default ul { margin: .5rem 0; padding-left: 1.1rem; list-style: disc; font-size: .9rem; color: #374151; }
.allauth-default table { width: 100%; font-size: .875rem; }
.allauth-default .errorlist { color: #e11d48; font-size: .8rem; list-style: none; padding: 0; }