/* =====================================================================
   Davila CRM — global.css
   Variables, reset, shared components. Loaded on every page.
   No inline styles ever. Separate CSS file per view.
   ===================================================================== */

:root {
    --color-primary:       #e2e8f0;
    --color-secondary:     #3b82f6;
    --color-accent:        #3b82f6;
    --color-accent-hover:  #2563eb;
    --color-accent-light:  #1e3a5f;
    --color-bg:            #1a1f2e;
    --color-surface:       #242938;
    --color-border:        #2e3650;
    --color-border-strong: #3d4d6a;
    --color-text:          #e2e8f0;
    --color-text-muted:    #8899b4;
    --color-text-light:    #5a6a84;
    --color-text-inverse:  #ffffff;
    --color-success:       #22c55e;
    --color-success-bg:    #14291e;
    --color-warning:       #f59e0b;
    --color-warning-bg:    #2a1f0a;
    --color-danger:        #ef4444;
    --color-danger-bg:     #2a1010;
    --color-info:          #3b82f6;
    --color-info-bg:       #0f1e38;

    --sidebar-width:     240px;
    --topnav-height:     60px;
    --font-sans:         'Inter', system-ui, -apple-system, sans-serif;
    --font-size-base:    16px;
    --line-height-base:  1.6;

    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
    --space-4: 16px;  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;

    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-pill: 9999px;

    --shadow-sm:       0 1px 3px rgba(0, 0, 0, .08);
    --shadow-md:       0 4px 12px rgba(0, 0, 0, .10);
    --transition-fast: 150ms ease;
}

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

html  { font-size: var(--font-size-base); scroll-behavior: smooth; }

body  {
    font-family:            var(--font-sans);
    line-height:            var(--line-height-base);
    color:                  var(--color-text);
    background-color:       var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a {
    color:      var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; color: var(--color-primary); }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
p  { margin-bottom: var(--space-4); }

/* ── Forms ──────────────────────────────────────────────────────────── */
.form-group    { margin-bottom: var(--space-5); }
.form-row      { display: grid; grid-template-columns: 1fr 1fr;     gap: var(--space-4); }
.form-row-3    { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }

.form-label {
    display:       block;
    font-size:     .875rem;
    font-weight:   500;
    color:         var(--color-text);
    margin-bottom: var(--space-2);
}

.form-input,
.form-select,
.form-textarea {
    display:          block;
    width:            100%;
    padding:          var(--space-2) var(--space-3);
    font-size:        1rem;
    font-family:      var(--font-sans);
    color:            var(--color-text);
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-md);
    transition:       border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance:       none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline:    none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(46, 109, 164, .15);
}
.form-input::placeholder { color: var(--color-text-light); }
.form-textarea { resize: vertical; min-height: 100px; }

/* Password toggle wrapper — no inline styles needed */
.password-wrap          { position: relative; }
.password-wrap .form-input { padding-right: 44px; }

.password-toggle {
    position:    absolute;
    right:       10px;
    top:         50%;
    transform:   translateY(-50%);
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       var(--color-text-muted);
    padding:     4px;
    display:     flex;
    align-items: center;
    transition:  color var(--transition-fast);
    line-height: 1;
}
.password-toggle:hover { color: var(--color-accent); }
.password-toggle svg   { width: 20px; height: 20px; }

/* JS toggles this class — no inline display needed */
.hidden { display: none; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    padding:         var(--space-2) var(--space-5);
    font-size:       .9375rem;
    font-weight:     500;
    font-family:     var(--font-sans);
    border-radius:   var(--radius-md);
    border:          1px solid transparent;
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background-color var(--transition-fast), border-color var(--transition-fast);
}
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.btn--primary   { background-color: var(--color-accent);  color: var(--color-text-inverse); border-color: var(--color-accent); }
.btn--primary:hover { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-text-inverse); text-decoration: none; }

.btn--secondary { background-color: transparent; color: var(--color-accent); border-color: var(--color-accent); }
.btn--secondary:hover { background-color: var(--color-accent-light); text-decoration: none; }

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

.btn--danger    { background-color: var(--color-danger); color: var(--color-text-inverse); border-color: var(--color-danger); }
.btn--danger:hover { background-color: #b91c1c; border-color: #b91c1c; color: var(--color-text-inverse); text-decoration: none; }

.btn--sm   { padding: 6px 14px; font-size: .875rem; }
.btn--full { width: 100%; }

/* ── Flash Messages ──────────────────────────────────────────────────── */
.flash {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--space-3);
    padding:       var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size:     .9375rem;
    margin-bottom: var(--space-5);
    border:        1px solid transparent;
}
.flash--success { background-color: var(--color-success-bg); color: #166534; border-color: #86efac; }
.flash--error   { background-color: var(--color-danger-bg);  color: #991b1b; border-color: #fca5a5; }
.flash--warning { background-color: var(--color-warning-bg); color: #92400e; border-color: #fcd34d; }
.flash--info    { background-color: var(--color-info-bg);    color: #1e40af; border-color: #93c5fd; }

/* ── Cards ───────────────────────────────────────────────────────────── */
.card         { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card__header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.card__title  { font-size: 1rem; font-weight: 600; color: var(--color-primary); }
.card__body   { padding: var(--space-5); }
.card__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); background-color: var(--color-bg); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ── Tables ──────────────────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }
.table         { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th,
.table td      { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); }
.table th      { font-weight: 600; font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); background-color: var(--color-bg); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover         { background-color: #f8fafc; }
.table__empty  { color: var(--color-text-muted); font-style: italic; text-align: center; padding: var(--space-7); }

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge         { display: inline-flex; align-items: center; padding: 2px var(--space-2); font-size: .75rem; font-weight: 500; border-radius: var(--radius-pill); }
.badge--success { background-color: var(--color-success-bg); color: #166534; }
.badge--danger  { background-color: var(--color-danger-bg);  color: #991b1b; }
.badge--warning { background-color: var(--color-warning-bg); color: #92400e; }
.badge--info    { background-color: var(--color-info-bg);    color: #1e40af; }
.badge--neutral { background-color: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.badge--blue    { background-color: #dbeafe; color: #1d4ed8; }
.badge--purple  { background-color: #ede9fe; color: #6d28d9; }
.badge--amber   { background-color: #fef3c7; color: #92400e; }

/* ── Page Header ─────────────────────────────────────────────────────── */
.page-header         { margin-bottom: var(--space-6); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.page-header__text   { flex: 1; }
.page-title          { font-size: 1.625rem; font-weight: 600; color: var(--color-primary); margin-bottom: var(--space-1); }
.page-subtitle       { font-size: .9375rem; color: var(--color-text-muted); }
.page-header__actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

/* ── Error pages ─────────────────────────────────────────────────────── */
.layout-error   { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-6); }
.error-page     { text-align: center; max-width: 420px; }
.error-page__code    { display: block; font-size: 6rem; font-weight: 700; color: var(--color-border-strong); line-height: 1; margin-bottom: var(--space-4); }
.error-page__title   { font-size: 1.5rem; margin-bottom: var(--space-3); }
.error-page__message { color: var(--color-text-muted); margin-bottom: var(--space-6); }

/* ── Utilities ───────────────────────────────────────────────────────── */
.text-muted   { color: var(--color-text-muted); }
.text-danger  { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-center  { text-align: center; }
.mb-0         { margin-bottom: 0; }
.mt-0         { margin-top: 0; }
.sr-only      { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Spacing helpers used in views */
.card--spaced-top    { margin-top: var(--space-5); }
.card--spaced-bottom { margin-bottom: var(--space-5); }
.page-title--spaced  { margin-top: var(--space-3); }

/* =====================================================================
   Shared module styles — used by Construction, Web Design, Accounting,
   Blueprints. Lives in global.css so every page has access.
   ===================================================================== */

/* ── Stats strip ─────────────────────────────────────────────────────── */
.mod-stats        { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.mod-stat         { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); }
.mod-stat--blue   { border-top: 3px solid var(--color-accent); }
.mod-stat--green  { border-top: 3px solid var(--color-success); }
.mod-stat--amber  { border-top: 3px solid var(--color-warning); }
.mod-stat--red    { border-top: 3px solid var(--color-danger); }
.mod-stat__label  { font-size: .8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.mod-stat__value  { font-size: 1.875rem; font-weight: 700; color: var(--color-primary); line-height: 1; }
.mod-stat__sub    { font-size: .8125rem; color: var(--color-text-muted); margin-top: var(--space-1); }

/* ── Pipeline board ──────────────────────────────────────────────────── */
.mod-pipeline          { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); margin-bottom: var(--space-6); align-items: start; }
.mod-pipeline--5col    { grid-template-columns: repeat(5,1fr); }
.mod-pipeline--6col    { grid-template-columns: repeat(6,1fr); }
.mod-column            { background-color: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-3); min-height: 100px; }
.mod-column__header    { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.mod-column__title     { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.mod-column__count     { font-size: .75rem; font-weight: 600; background-color: var(--color-border); color: var(--color-text-muted); border-radius: var(--radius-pill); padding: 1px 8px; }
.mod-column__empty     { font-size: .8125rem; color: var(--color-text-muted); font-style: italic; }

/* ── Pipeline cards ──────────────────────────────────────────────────── */
.mod-card              { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-fast), border-color var(--transition-fast); }
.mod-card:hover        { box-shadow: var(--shadow-md); border-color: var(--color-accent); }
.mod-card:last-child   { margin-bottom: 0; }
.mod-card__link        { display: block; text-decoration: none; color: inherit; }
.mod-card__link:hover  { text-decoration: none; }
.mod-card__name        { font-weight: 600; font-size: .9375rem; color: var(--color-primary); margin-bottom: 2px; }
.mod-card__sub         { font-size: .8125rem; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.mod-card__value       { font-size: .9375rem; font-weight: 600; color: var(--color-success); }
.mod-card__alert       { font-size: .75rem; color: var(--color-danger); font-weight: 500; margin-top: var(--space-1); }
.mod-card__warn        { font-size: .75rem; color: var(--color-warning); margin-top: var(--space-1); }

/* ── Follow-up alert bar ─────────────────────────────────────────────── */
.mod-followup-bar        { background-color: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.mod-followup-bar__title { font-weight: 600; color: #c2410c; margin-bottom: var(--space-3); font-size: .9375rem; }
.mod-followup-list       { display: flex; flex-direction: column; gap: var(--space-2); }
.mod-followup-item       { display: flex; align-items: center; gap: var(--space-3); font-size: .9375rem; flex-wrap: wrap; }
.mod-followup-item__name { font-weight: 600; color: var(--color-primary); min-width: 140px; }
.mod-followup-item__note { color: var(--color-text-muted); flex: 1; }
.mod-followup-item__date { font-size: .8125rem; color: var(--color-danger); font-weight: 500; white-space: nowrap; }

/* ── Detail page layout ──────────────────────────────────────────────── */
.mod-detail-grid   { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-5); align-items: start; }
.mod-header-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

/* ── Stage progress bar ──────────────────────────────────────────────── */
.mod-stage-bar               { display: flex; align-items: center; gap: 0; margin-bottom: var(--space-5); overflow-x: auto; padding-bottom: var(--space-2); }
.mod-stage-step              { display: flex; align-items: center; flex-shrink: 0; }
.mod-stage-step__label       { padding: 7px 14px; font-size: .8125rem; font-weight: 500; border-radius: var(--radius-pill); white-space: nowrap; border: 1px solid var(--color-border); background-color: var(--color-bg); color: var(--color-text-muted); }
.mod-stage-step--active .mod-stage-step__label { background-color: var(--color-accent); color: #fff; border-color: var(--color-accent); font-weight: 600; }
.mod-stage-step--done   .mod-stage-step__label { background-color: var(--color-success-bg); color: #166534; border-color: #86efac; }
.mod-stage-arrow             { width: 20px; height: 2px; background-color: var(--color-border); flex-shrink: 0; }

/* ── Update / activity feed ──────────────────────────────────────────── */
.mod-update-feed        { display: flex; flex-direction: column; }
.mod-update-item        { display: flex; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.mod-update-item:last-child { border-bottom: none; }
.mod-update-icon        { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .875rem; background-color: var(--color-bg); }
.mod-update-body        { flex: 1; min-width: 0; }
.mod-update-text        { font-size: .9375rem; color: var(--color-text); white-space: pre-wrap; }
.mod-update-meta        { font-size: .8125rem; color: var(--color-text-muted); margin-top: var(--space-1); }
.mod-update-amount      { font-weight: 600; color: var(--color-success); font-size: .875rem; }

/* ── Log form ────────────────────────────────────────────────────────── */
.mod-log-form        { background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-5); }
.mod-log-form__title { font-weight: 600; font-size: .9375rem; color: var(--color-primary); margin-bottom: var(--space-4); }

/* ── Form section labels ─────────────────────────────────────────────── */
.mod-form-section            { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-muted); margin-bottom: var(--space-3); margin-top: var(--space-5); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.mod-form-section:first-child { margin-top: 0; }

/* ── ZIP auto-fill row ───────────────────────────────────────────────── */
.mod-zip-row              { grid-template-columns: 140px 1fr 80px 1fr; }
.zip-wrap                 { position: relative; }
.zip-spinner              { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--color-text-muted); white-space: nowrap; pointer-events: none; }
.form-input--autofilled   { background-color: #f0fdf4; border-color: #86efac; }

/* ── Misc shared ─────────────────────────────────────────────────────── */
.mod-checkbox-row           { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-5); }
.mod-checkbox-row--spaced   { margin-bottom: var(--space-4); }
.mod-avatar--con            { background-color: var(--color-secondary); }
.acc-services-checkboxes    { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.acc-service-check          { display: flex; align-items: center; gap: 6px; font-size: .9375rem; }
.web-resolution-note        { font-size: .875rem; color: var(--color-success); margin-top: var(--space-2); font-style: italic; }
.bp-completed-title         { font-size: 1rem; font-weight: 600; color: var(--color-primary); margin-bottom: var(--space-4); margin-top: var(--space-6); }
.bp-table-name              { font-weight: 600; }
.bp-table-phone             { font-size: .8125rem; color: var(--color-text-muted); }
.bp-table-fee               { font-weight: 600; color: var(--color-success); }
.info-value--bold           { font-weight: 600; }
.info-value--price          { font-weight: 700; color: var(--color-success); }
.info-value--mono           { font-family: monospace; font-size: .875rem; word-break: break-all; }
.info-value--permit         { font-weight: 600; font-family: monospace; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1200px) { .mod-pipeline { grid-template-columns: repeat(3,1fr); } .mod-stats { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 900px)  { .mod-detail-grid { grid-template-columns: 1fr; } .mod-zip-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px)  { .mod-pipeline { grid-template-columns: repeat(2,1fr); } .mod-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px)  { .mod-pipeline { grid-template-columns: 1fr; } .mod-stats { grid-template-columns: 1fr; } }

/* ── Stage / type tab buttons ─────────────────────────────────────────
   Used on show pages for Move to Stage, activity type tabs, update
   type tabs. Defined here so all modules have access without needing
   contacts.css loaded.
   ───────────────────────────────────────────────────────────────────── */
.activity-type-tabs {
    display:       flex;
    gap:           var(--space-2);
    flex-wrap:     wrap;
    margin-bottom: var(--space-4);
}

.activity-type-tab {
    padding:          6px 14px;
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-pill);
    font-size:        .875rem;
    font-family:      var(--font-sans);
    cursor:           pointer;
    background-color: var(--color-surface);
    color:            var(--color-text-muted);
    transition:       background-color var(--transition-fast),
                      color var(--transition-fast),
                      border-color var(--transition-fast);
}
.activity-type-tab.tab-active,
.activity-type-tab:hover {
    background-color: var(--color-accent);
    color:            var(--color-text-inverse);
    border-color:     var(--color-accent);
}

/* ── Contact / project detail header ─────────────────────────────────
   Used on contacts/show, blueprints/show, construction/show,
   webdesign/show, accounting/show. Global so all modules have access.
   ───────────────────────────────────────────────────────────────────── */
.contact-detail-header  {
    display:       flex;
    align-items:   center;
    gap:           var(--space-4);
    margin-bottom: var(--space-5);
}

.contact-detail-avatar {
    width:            60px;
    height:           60px;
    border-radius:    50%;
    background-color: var(--color-accent);
    color:            var(--color-text-inverse);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        1.375rem;
    font-weight:      700;
    flex-shrink:      0;
}

.contact-detail-name    { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }
.contact-detail-company { font-size: 1rem; color: var(--color-text-muted); margin-top: 2px; }

/* ── Info list (key/value pairs on detail pages) ──────────────────────
   Used on every show page across all modules.
   ───────────────────────────────────────────────────────────────────── */
.contact-info-list              { list-style: none; }
.contact-info-list li           { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: .9375rem; }
.contact-info-list li:last-child { border-bottom: none; }
.contact-info-label             { width: 120px; flex-shrink: 0; font-size: .875rem; color: var(--color-text-muted); padding-top: 1px; }
.contact-info-value             { color: var(--color-text); word-break: break-word; flex: 1; }

/* ── Account / profile page ───────────────────────────────────────────── */
.account-grid {
    display:               grid;
    grid-template-columns: 280px 1fr;
    gap:                   var(--space-5);
    align-items:           start;
}
.account-avatar {
    width:            80px;
    height:           80px;
    border-radius:    50%;
    background-color: var(--color-accent);
    color:            var(--color-text-inverse);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        1.75rem;
    font-weight:      700;
    margin:           0 auto var(--space-4);
}
.account-name       { font-size: 1.125rem; font-weight: 700; color: var(--color-text); text-align: center; margin-bottom: var(--space-1); }
.account-email      { font-size: .9375rem; color: var(--color-text-muted); text-align: center; margin-bottom: var(--space-3); word-break: break-all; }
.account-role       { text-align: center; margin-bottom: var(--space-3); }
.account-last-login { font-size: .8125rem; color: var(--color-text-muted); text-align: center; margin-top: var(--space-3); }
@media (max-width: 768px) { .account-grid { grid-template-columns: 1fr; } }