/*
 * GHL (HighLevel / Highrise) visual theme for app.kabelsync.com.
 * Values measured from GHL's agency Sub-Accounts page (Highrise v4.7, Oct 2026).
 *
 * Loaded AFTER app.css so equal-specificity rules here win. Restyles colors,
 * fonts, buttons, inputs, badges, tables and cards only - no markup, layout
 * or behavior changes. Remove the <link> in layouts/*.blade.php to revert.
 */

:root {
    --ghl-primary-25: #F5F8FF;
    --ghl-primary-50: #EFF4FF;
    --ghl-primary-100: #D1E0FF;
    --ghl-primary-200: #B2CCFF;
    --ghl-primary-300: #84ADFF;
    --ghl-primary-400: #528BFF;
    --ghl-primary-500: #2970FF;
    --ghl-primary-600: #155EEF;
    --ghl-primary-700: #004EEB;
    --ghl-primary-800: #0040C1;
    --ghl-primary-900: #00359E;

    --ghl-gray-25: #FCFCFD;
    --ghl-gray-50: #F9FAFB;
    --ghl-gray-100: #F2F4F7;
    --ghl-gray-200: #EAECF0;
    --ghl-gray-300: #D0D5DD;
    --ghl-gray-400: #98A2B3;
    --ghl-gray-500: #667085;
    --ghl-gray-600: #475467;
    --ghl-gray-700: #344054;
    --ghl-gray-800: #1D2939;
    --ghl-gray-900: #101828;

    --ghl-success-50: #ECFDF3;
    --ghl-success-100: #D1FADF;
    --ghl-success-400: #32D583;
    --ghl-success-500: #12B76A;
    --ghl-success-600: #039855;
    --ghl-success-700: #027A48;

    --ghl-error-50: #FEF3F2;
    --ghl-error-100: #FEE4E2;
    --ghl-error-200: #FECDCA;
    --ghl-error-400: #F97066;
    --ghl-error-500: #F04438;
    --ghl-error-600: #D92D20;
    --ghl-error-700: #B42318;
    --ghl-error-800: #912018;

    --ghl-warning-50: #FFFAEB;
    --ghl-warning-500: #F79009;
    --ghl-warning-700: #B54708;

    --ghl-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --ghl-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
    --ghl-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
    --ghl-focus-ring: 0 1px 2px rgba(16, 24, 40, 0.05), 0 0 0 4px var(--ghl-primary-100);
    --ghl-radius: 8px;      /* cards, table wrappers */
    --ghl-radius-input: 4px;
    --ghl-radius-btn: 3px;
    --ghl-page-bg: #FCFCFD;
    --ghl-grid: #D0D5DD;    /* table grid lines */
    --ghl-btn-border: #E0E0E6;
    --ghl-warning-hl: #F0A020;
}

/* ---------- Typography ---------- */

html,
body,
.font-sans {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--ghl-gray-900);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    color: var(--ghl-gray-900);
    letter-spacing: -0.01em;
}

/* GHL uses outlined stroke icons, not filled ones */
body .material-icons {
    font-family: 'Material Icons Outlined', 'Material Icons';
}

/* ---------- Color remap: Tailwind palette -> GHL palette ---------- */

/* Page / surfaces */
.bg-gray-50 { background-color: var(--ghl-gray-50); }
.bg-gray-100 { background-color: var(--ghl-gray-100); }
/* app shell background (layouts/app.blade.php) = GHL content area */
.min-h-screen.bg-gray-100 { background-color: var(--ghl-page-bg); }
.bg-gray-200 { background-color: var(--ghl-gray-200); }
.bg-gray-500 { background-color: var(--ghl-gray-500); }
.bg-gray-800 { background-color: var(--ghl-gray-800); }

/* Text grays */
.text-gray-50 { color: var(--ghl-gray-50); }
.text-gray-200 { color: var(--ghl-gray-200); }
.text-gray-300 { color: var(--ghl-gray-300); }
.text-gray-400 { color: var(--ghl-gray-400); }
.text-gray-500 { color: var(--ghl-gray-500); }
.text-gray-600 { color: var(--ghl-gray-600); }
.text-gray-700 { color: var(--ghl-gray-700); }
.text-gray-800 { color: var(--ghl-gray-800); }
.text-gray-900, .text-black { color: var(--ghl-gray-900); }
.hover\:text-gray-400:hover { color: var(--ghl-gray-400); }
.hover\:text-gray-500:hover { color: var(--ghl-gray-500); }
.hover\:text-gray-700:hover { color: var(--ghl-gray-700); }
.hover\:text-gray-800:hover { color: var(--ghl-gray-800); }
.hover\:text-gray-900:hover { color: var(--ghl-gray-900); }
.hover\:bg-gray-50:hover, .focus\:bg-gray-50:focus, .active\:bg-gray-50:active { background-color: var(--ghl-gray-50); }
.hover\:bg-gray-100:hover, .focus\:bg-gray-100:focus, .active\:bg-gray-100:active { background-color: var(--ghl-gray-100); }

/* Borders */
.border-gray-100 { border-color: var(--ghl-gray-200); }
.border-gray-200 { border-color: var(--ghl-gray-200); }
.border-gray-300 { border-color: var(--ghl-gray-200); }
.border-gray-400 { border-color: var(--ghl-gray-300); }
.hover\:border-gray-300:hover { border-color: var(--ghl-gray-300); }
.ring-gray-300 { --tw-ring-color: var(--ghl-gray-300); }

/* Brand: purple / indigo / blue -> GHL primary blue */
.bg-purple-50, .bg-indigo-50 { background-color: var(--ghl-primary-50); }
.bg-purple-200 { background-color: var(--ghl-primary-50); }
.bg-purple-600, .bg-indigo-600, .bg-indigo-500 { background-color: var(--ghl-primary-600); }
.bg-purple-700 { background-color: var(--ghl-primary-700); }
.hover\:bg-purple-700:hover, .hover\:bg-indigo-600:hover, .focus\:bg-indigo-600:focus { background-color: var(--ghl-primary-700); }
.focus\:bg-indigo-100:focus { background-color: var(--ghl-primary-50); }

.text-purple-50, .text-purple-100, .text-purple-200 { color: var(--ghl-primary-50); }
.text-purple-400 { color: var(--ghl-primary-400); }
.text-purple-500, .text-indigo-500 { color: var(--ghl-primary-500); }
.text-purple-600, .text-indigo-600 { color: var(--ghl-primary-600); }
.text-indigo-700 { color: var(--ghl-primary-600); }
.text-purple-900 { color: var(--ghl-primary-700); }
.text-blue-800 { color: var(--ghl-primary-800); }
.hover\:text-purple-50:hover { color: #fff; }
.hover\:text-purple-600:hover, .hover\:text-purple-700:hover, .hover\:text-indigo-900:hover { color: var(--ghl-primary-800); }
.focus\:text-indigo-800:focus { color: var(--ghl-primary-800); }

.border-blue-500, .border-indigo-400 { border-color: var(--ghl-primary-600); }
.focus\:border-blue-300:focus, .focus\:border-indigo-300:focus { border-color: var(--ghl-primary-300); }
.focus\:border-indigo-700:focus { border-color: var(--ghl-primary-700); }
.focus\:ring-blue-200:focus, .focus\:ring-indigo-200:focus { --tw-ring-color: var(--ghl-primary-100); }

.from-purple-800 { --tw-gradient-from: var(--ghl-primary-700); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 78, 235, 0)); }
.to-purple-500 { --tw-gradient-to: var(--ghl-primary-500); }

/* Success */
.bg-green-400 { background-color: var(--ghl-success-500); }
.bg-green-500 { background-color: var(--ghl-success-600); }
.text-green-400 { color: var(--ghl-success-500); }
.text-green-500 { color: var(--ghl-success-600); }
.text-green-600 { color: var(--ghl-success-700); }

/* Error */
.bg-red-100 { background-color: var(--ghl-error-50); }
.bg-red-400 { background-color: var(--ghl-error-500); }
.bg-red-500, .bg-red-600 { background-color: var(--ghl-error-600); }
.bg-red-700 { background-color: var(--ghl-error-700); }
.hover\:bg-red-500:hover, .hover\:bg-red-600:hover, .focus\:bg-red-600:focus, .active\:bg-red-600:active { background-color: var(--ghl-error-700); }
.text-red-400 { color: var(--ghl-error-500); }
.text-red-500 { color: var(--ghl-error-600); }
.text-red-600, .text-red-800 { color: var(--ghl-error-600); }
.border-red-500 { border-color: var(--ghl-error-500); }
.focus\:border-red-700:focus { border-color: var(--ghl-error-700); }
.focus\:ring-red-200:focus { --tw-ring-color: var(--ghl-error-100); }
/* Delete icons hovered yellow; GHL uses a darker red */
.hover\:text-yellow-400:hover, .hover\:text-rose-700:hover { color: var(--ghl-error-700); }

/* Warning */
.bg-yellow-500 { background-color: var(--ghl-warning-500); }
.text-yellow-500 { color: var(--ghl-warning-500); }

/* ---------- Cards / panels (GHL: white, 1px #EAECF0 border, 8px radius, flat) ---------- */

.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
    --tw-shadow: 0 0 0 1px var(--ghl-gray-200);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Floating dropdowns / popovers keep a GHL popover shadow */
.absolute.shadow, .absolute.shadow-md, .absolute.shadow-lg, .absolute.shadow-xl,
.fixed.shadow-lg, .fixed.shadow-xl {
    --tw-shadow: 0 0 0 1px var(--ghl-gray-200), var(--ghl-shadow-lg);
}

.rounded-xl, .rounded-lg { border-radius: var(--ghl-radius); }
@media (min-width: 640px) { .sm\:rounded-lg { border-radius: var(--ghl-radius); } }
.rounded-md { border-radius: 6px; }

/* Page header bar under the nav: GHL page title 20px / 600 / #101828 */
header.bg-white.shadow {
    --tw-shadow: 0 1px 0 0 var(--ghl-gray-200);
}

header.bg-white h2 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: var(--ghl-gray-900);
}

/* ---------- Top navigation (GHL header: white, soft drop shadow) ---------- */

nav.bg-white {
    border-bottom-color: transparent;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.11);
    position: relative;
    z-index: 20;
}

nav a.inline-flex,
nav a.block {
    font-size: 14px;
    font-weight: 400;
    color: var(--ghl-gray-700);
}

nav a.inline-flex:hover,
nav a.block:hover {
    color: var(--ghl-gray-900);
}

/* active tab: GHL #004EEB text + 3px underline (2px border + 1px inset so nothing shifts) */
nav a.border-indigo-400,
nav a.border-indigo-400:hover {
    color: var(--ghl-primary-700);
    border-color: var(--ghl-primary-700);
    box-shadow: inset 0 -1px 0 var(--ghl-primary-700);
}

nav button.inline-flex {
    font-size: 14px;
    font-weight: 500;
    color: var(--ghl-gray-700);
}

/* ---------- Buttons (GHL hr-button: 3px radius, 14px / 400, no shadow) ---------- */

/* Primary: the app's purple-200 button pattern -> GHL solid blue */
.button,
button.bg-purple-200,
a.bg-purple-200,
input[type="submit"].bg-purple-200 {
    background-color: var(--ghl-primary-600);
    color: #fff;
    border: 1px solid var(--ghl-primary-600);
    border-radius: var(--ghl-radius-btn);
    font-weight: 500;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.button:hover,
button.bg-purple-200:hover,
a.bg-purple-200:hover,
input[type="submit"].bg-purple-200:hover {
    background-color: var(--ghl-primary-700);
    border-color: var(--ghl-primary-700);
    color: #fff;
}

.button:focus-visible,
button.bg-purple-200:focus-visible,
a.bg-purple-200:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ghl-primary-100);
}

button:disabled,
.button:disabled,
.disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ---------- Form controls (GHL hr-input: 4px radius, #D0D5DD, 14px) ---------- */

[type="text"],
[type="email"],
[type="password"],
[type="number"],
[type="search"],
[type="url"],
[type="tel"],
[type="date"],
[type="datetime-local"],
input:not([type]):not(.rounded-none),
select,
textarea,
.form-input,
.form-select,
.form-textarea {
    border-color: var(--ghl-gray-300);
    border-radius: var(--ghl-radius-input);
    color: var(--ghl-gray-900);
    font-size: 14px;
    box-shadow: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--ghl-gray-500);
    opacity: 1;
}

[type="text"]:focus,
[type="email"]:focus,
[type="password"]:focus,
[type="number"]:focus,
[type="search"]:focus,
[type="url"]:focus,
[type="tel"]:focus,
[type="date"]:focus,
[type="datetime-local"]:focus,
input:not([type]):not(.rounded-none):focus,
select:focus,
textarea:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--ghl-primary-500);
    --tw-ring-color: transparent;
    box-shadow: 0 0 0 2px var(--ghl-primary-100);
    outline: none;
}

input[type="checkbox"],
input[type="radio"] {
    border-color: var(--ghl-gray-300);
    color: var(--ghl-primary-600);
    box-shadow: none;
}

input[type="checkbox"] { border-radius: 4px; }

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    --tw-ring-color: var(--ghl-primary-100);
}

/* the middle input of a joined group (e.g. Dashboard "Create Account") stays square */
.rounded-r-none + input:not(.rounded-l-none),
.rounded-r-none + .relative > input { border-radius: 0; }

label {
    color: var(--ghl-gray-700);
}

/* ---------- Status pills -> GHL hr-tag (round, 22px, 12px, no border) ---------- */

.activePill,
span.rounded-full[class*="bg-"] {
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    display: inline-block;
    box-shadow: none;
}

.activePill,
span.rounded-full.bg-green-400,
span.rounded-full.bg-green-500 {
    background-color: var(--ghl-success-50);
    color: var(--ghl-success-700);
}

span.rounded-full.bg-red-400,
span.rounded-full.bg-red-500,
span.rounded-full.bg-red-600 {
    background-color: var(--ghl-error-50);
    color: var(--ghl-error-700);
}

/* integration names (Blueprint, Sycle, ...) = GHL blue tag */
span.rounded-full.bg-purple-600,
span.rounded-full.bg-indigo-600,
span.rounded-full.bg-indigo-500 {
    background-color: rgba(21, 94, 239, 0.10);
    color: var(--ghl-primary-600);
}

span.rounded-full.bg-yellow-500 {
    background-color: rgba(240, 160, 32, 0.12);
    color: var(--ghl-warning-hl);
}

span.rounded-full.bg-gray-500,
span.rounded-full.bg-gray-800 {
    background-color: var(--ghl-gray-100);
    color: var(--ghl-gray-700);
}

/* Tag chips (Blueprint / Sycle / CounselEar connection pages) */
.tags-input {
    border-color: var(--ghl-gray-300);
    border-radius: var(--ghl-radius-input);
}

.tags-input-tag {
    border-radius: 11px;
    font-weight: 500;
    font-size: 12px;
    padding: 2px 8px;
    background-color: rgba(21, 94, 239, 0.10);
    color: var(--ghl-primary-600);
}

.tags-input-remove { color: var(--ghl-primary-600); }

.highlight {
    background-color: var(--ghl-primary-50);
    color: var(--ghl-primary-700);
}

/* ---------- Tables -> GHL hr-data-table ---------- */
/* 13px, header #F9FAFB 13px/500 #101828, #D0D5DD grid lines, 8px 12px padding */

table {
    font-size: 13px;
    color: var(--ghl-gray-600);
}

table thead th {
    background-color: var(--ghl-gray-50);
    color: var(--ghl-gray-900);
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid var(--ghl-grid);
}

table thead th + th {
    border-left: 1px solid var(--ghl-grid);
}

table td.border,
table th.border,
table td.border-gray-300,
table td.border-gray-200 {
    border-color: var(--ghl-grid);
}

table tbody tr {
    transition: background-color .1s ease;
}

table tbody tr:hover > td {
    background-color: var(--ghl-gray-50);
}

/* row name links: GHL shows names dark / medium, blue on hover */
table a.font-bold {
    font-weight: 500;
    color: var(--ghl-gray-800);
}

table a.font-bold:hover {
    color: var(--ghl-primary-600);
}

/* row icon actions */
table .material-icons {
    font-size: 20px;
}

table a.material-icons.text-gray-700 {
    color: var(--ghl-gray-500);
}

table a.material-icons.text-gray-700:hover {
    color: var(--ghl-primary-600);
}

/* table wrapper: GHL hr-data-table-wrapper is bordered, not shadowed */
table.shadow-xl, table.shadow-lg, table.shadow {
    --tw-shadow: 0 0 0 1px var(--ghl-gray-200);
}

/* ---------- Pagination (GHL: 32px, 4px radius, blue outline on current) ---------- */

nav[role="navigation"] a,
nav[role="navigation"] span[aria-current="page"] > span,
nav[role="navigation"] span[aria-disabled="true"] > span {
    font-size: 14px;
    color: var(--ghl-gray-700);
    border-color: var(--ghl-btn-border);
}

nav[role="navigation"] span[aria-current="page"] > span {
    background-color: #fff;
    color: var(--ghl-primary-600);
    border-color: var(--ghl-primary-500);
}

/* ---------- Jetstream buttons (login, profile, teams, modal Cancel/Delete) ---------- */
/* stock: dark gray / white / red, text-xs UPPERCASE tracking-widest -> GHL hr-button */

button.tracking-widest,
a.tracking-widest {
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--ghl-radius-btn);
    box-shadow: none;
}

.tracking-widest.bg-gray-800 {
    background-color: var(--ghl-primary-600);
    border-color: var(--ghl-primary-600);
    color: #fff;
}
.tracking-widest.bg-gray-800:hover,
.tracking-widest.bg-gray-800:active { background-color: var(--ghl-primary-700); }
.tracking-widest.bg-gray-800:focus { border-color: var(--ghl-primary-700); box-shadow: 0 0 0 3px var(--ghl-primary-100); }

.tracking-widest.bg-white {
    border-color: var(--ghl-btn-border);
    color: var(--ghl-gray-700);
}
.tracking-widest.bg-white:hover { background-color: var(--ghl-gray-50); color: var(--ghl-gray-900); }
.tracking-widest.bg-white:focus { border-color: var(--ghl-primary-500); box-shadow: 0 0 0 3px var(--ghl-primary-100); }

.tracking-widest.bg-red-600 { background-color: var(--ghl-error-600); }
.tracking-widest.bg-red-600:hover { background-color: var(--ghl-error-700); }
.tracking-widest.bg-red-600:focus { box-shadow: 0 0 0 3px var(--ghl-error-100); }

/* ---------- Tab buttons (Account edit apps, K-Phone locations) -> GHL segmented tabs ---------- */
/* Alpine toggles bg-purple-700 (active) / bg-purple-200 (inactive) on these */

button.w-full.shadow-md.bg-purple-200,
button.w-full.shadow-md.bg-purple-200:hover {
    background-color: #fff;
    color: var(--ghl-gray-700);
    border: 1px solid var(--ghl-gray-300);
    box-shadow: none;
}
button.w-full.shadow-md.bg-purple-200:hover { background-color: var(--ghl-gray-50); color: var(--ghl-gray-900); }

button.w-full.shadow-md.bg-purple-700,
button.w-full.shadow-md.bg-purple-700:hover {
    background-color: var(--ghl-primary-50);
    color: var(--ghl-primary-700);
    border: 1px solid var(--ghl-primary-600);
    box-shadow: none;
}

/* ---------- Headings: GHL uses semibold, smaller display sizes ---------- */

.text-3xl.font-bold { font-size: 24px; line-height: 32px; font-weight: 600; }
.text-2xl.font-bold { font-size: 18px; line-height: 28px; font-weight: 600; }
.font-bold { font-weight: 600; }

/* ---------- Links / icons ---------- */

a.text-purple-400 { color: var(--ghl-primary-600); }
a.text-purple-400:hover { color: var(--ghl-primary-800); }

/* info "?" icons next to fields: GHL gray, blue on hover */
.material-icons.text-purple-400 { color: var(--ghl-gray-400); }
.material-icons.text-purple-400:hover { color: var(--ghl-primary-600); }

/* tooltip bubble (components/tooltip.blade.php) -> GHL dark tooltip */
.absolute.bg-purple-700.text-purple-200 {
    background-color: var(--ghl-gray-900);
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: var(--ghl-shadow-lg);
}

/* field-mapping chips: GHL has no gradients -> solid primary */
.bg-gradient-to-r.from-purple-800 {
    background-image: none;
    background-color: var(--ghl-primary-600);
}
.bg-gradient-to-r.from-purple-800 .text-purple-100,
.bg-gradient-to-r.from-purple-800.text-purple-100 { color: #fff; }

/* ---------- Colors used in views but missing from the compiled app.css ---------- */

.bg-emerald-100 { background-color: var(--ghl-success-50); }
.text-emerald-500, .text-emerald-600 { color: var(--ghl-success-600); }
.text-emerald-800 { color: var(--ghl-success-700); }
.border-purple-200 { border-color: var(--ghl-gray-200); }
.hover\:bg-purple-100:hover { background-color: var(--ghl-primary-50); }
.text-purple-800 { color: var(--ghl-primary-800); }
.text-rose-400 { color: var(--ghl-error-500); }
.divide-y > :not([hidden]) ~ :not([hidden]) { border-top: 1px solid var(--ghl-gray-200); }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ghl-gray-200); }

/* slate -> GHL gray */
.bg-slate-200 { background-color: var(--ghl-gray-100); }
.bg-slate-300, .disabled\:bg-slate-300:disabled { background-color: var(--ghl-gray-200); }
.bg-slate-600 { background-color: var(--ghl-gray-600); }
.text-slate-900, .disabled\:text-slate-800:disabled { color: var(--ghl-gray-900); }

/* remaining stock grays on Jetstream / pagination states */
.hover\:bg-gray-700:hover { background-color: var(--ghl-primary-700); }
.active\:bg-gray-900:active, .bg-gray-900 { background-color: var(--ghl-gray-900); }
.focus\:border-gray-300:focus { border-color: var(--ghl-gray-300); }
.focus\:border-gray-900:focus { border-color: var(--ghl-primary-700); }
.focus\:text-gray-500:focus, .active\:text-gray-500:active { color: var(--ghl-gray-500); }
.focus\:text-gray-700:focus, .active\:text-gray-700:active { color: var(--ghl-gray-700); }
.focus\:text-gray-800:focus, .active\:text-gray-800:active { color: var(--ghl-gray-800); }
.ring-black.ring-opacity-5 { --tw-ring-color: var(--ghl-gray-200); }

/* more badges: emerald "Active", gray "Inactive", slate pill */
span.rounded-full.bg-emerald-100 { background-color: var(--ghl-success-50); color: var(--ghl-success-700); }
span.rounded-full.bg-gray-200,
span.rounded-full.bg-slate-600 { background-color: var(--ghl-gray-100); color: var(--ghl-gray-700); }

/* ---------- Tables with uppercase headers (Missing Files, Syncing Errors) ---------- */

table thead th.uppercase {
    text-transform: none;
    letter-spacing: normal;
    font-size: 13px;
    font-weight: 500;
    color: var(--ghl-gray-900);
}

/* ---------- Modals (Jetstream dialog / confirmation) ---------- */

.fixed .bg-gray-500.opacity-75 { background-color: rgba(16, 24, 40, 0.7); opacity: 1; }
.px-6.py-4.bg-gray-100.text-right {
    background-color: #fff;
    border-top: 1px solid var(--ghl-gray-200);
}
.px-6.py-4 > .text-lg { font-weight: 600; color: var(--ghl-gray-900); }

/* Jetstream form-section action bar */
.bg-gray-50.text-right { border-top: 1px solid var(--ghl-gray-200); }

/* "loading" pulse used on sync pages: purple -> GHL blue */
@keyframes change-background {
    0% { color: var(--ghl-primary-100); }
    50% { color: var(--ghl-primary-600); }
    100% { color: var(--ghl-primary-100); }
}

/* ---------- Radius: authored "flat side" utilities always win ---------- */
/* (the theme sets default radii on inputs/buttons above; joined input groups
   rely on these to stay flush, including their sm: variants) */

.rounded-none { border-radius: 0 !important; }
.rounded-r-none { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.rounded-l-none { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.rounded-t-none { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.rounded-b-none { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.rounded-sm { border-radius: 2px; }

@media (min-width: 640px) {
    .sm\:rounded-none { border-radius: 0 !important; }
    .sm\:rounded-r-none { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
    .sm\:rounded-l-none { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
}