/* My Clients (01Shared/Clients.aspx, JS/Clients.js). Builds on CS/Calculator.css.
   A table of names on the left, the selected person's estimates on the right. */

.mc.calc-page { max-width: 1240px; }
.mc-top { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 14px; }
.mc-top h1 { font-size: 1.5rem; margin: 0; }
.mc-top .hint { margin: 2px 0 0; }
.mc-signin p { margin: 0 0 12px; }

.mc-wrap { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 400px; }
.mc .card { margin-bottom: 0; }

/* Search and filter */
.mc-tools { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.mc-tools input, .mc-tools select {
    background: var(--field); border: 1px solid var(--field-line); border-radius: 8px; color: var(--ink); font: inherit; min-height: 38px; padding: 7px 10px;
}
.mc-tools input { flex: 1 1 220px; max-width: 320px; }
.mc-tools input:focus, .mc-tools select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.mc-count { color: var(--muted); font-size: .85rem; margin-left: auto; }
html.dark .mc-tools input, html.dark .mc-tools select { background: #0f1828; }

/* The table */
.mc-scroll { overflow-x: auto; }
.mc-table { border-collapse: collapse; font-size: .9rem; width: 100%; }
.mc-table th {
    border-bottom: 2px solid var(--line); color: var(--muted); font-size: .72rem; letter-spacing: .05em; padding: 8px;
    text-align: left; text-transform: uppercase; white-space: nowrap;
}
.mc-table th[data-sort] { cursor: pointer; user-select: none; }
.mc-table th[data-sort]:hover, .mc-table th.on { color: var(--brand); }
.mc-table th.up::after { content: " \25B2"; }
.mc-table th.down::after { content: " \25BC"; }
.mc-table td { border-bottom: 1px solid var(--line); padding: 9px 8px; vertical-align: middle; }
.mc-table .r { text-align: right; }
.mc-table tbody tr[data-key] { cursor: pointer; }
.mc-table tbody tr[data-key]:hover td { background: var(--brand-soft); }
.mc-table tbody tr[data-key]:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.mc-table tr.sel td { background: var(--brand-soft); }
.mc-table tr.sel td:first-child { box-shadow: inset 4px 0 0 var(--brand); }
.mc-table tr.mc-none td { color: var(--muted); padding: 24px 8px; text-align: center; }
.mc-name { overflow-wrap: anywhere; }   /* plain weight: clients are the bold ones */
.mc-email { color: var(--muted); max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-tag { background: var(--bg); border-radius: 6px; display: inline-block; font-size: .76rem; margin: 1px 0; padding: 1px 7px; white-space: nowrap; }
.mc-cnt { background: var(--brand-soft); border-radius: 999px; color: var(--brand); font-size: .78rem; font-weight: 700; padding: 1px 8px; }
.mc-dim { color: var(--muted); }

.mc-foot { align-items: center; display: flex; flex-wrap: wrap; font-size: .85rem; gap: 10px; justify-content: space-between; margin-top: 12px; }
.mc-foot a { color: var(--muted); }
.mc-pager { align-items: center; display: flex; gap: 10px; }
.mc-pager span { color: var(--muted); }
.mc-pager button {
    background: var(--field); border: 1px solid var(--field-line); border-radius: 8px; color: var(--ink); cursor: pointer; font: inherit; padding: 4px 12px;
}
.mc-pager button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.mc-pager button:disabled { cursor: default; opacity: .45; }

/* The selected person */
.mc-panel { position: sticky; top: 12px; }
.mc-pick { color: var(--muted); font-size: .9rem; margin: 0; }
.mc-pick p { margin: 0 0 8px; }
.mc-pick b { color: var(--ink); }
.mc-pick ul { margin: 0 0 10px; padding-left: 18px; }
.mc-pick li + li { margin-top: 4px; }
.mc-link { background: none; border: 0; color: var(--brand); cursor: pointer; font: inherit; font-weight: 600; padding: 0; }
.mc-link:hover { text-decoration: underline; }
.mc-none .mc-btn { margin-top: 12px; }

.mc-topbtns { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.mc-who { font-size: 1.2rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.mc-contact { color: var(--muted); font-size: .88rem; margin: 3px 0 16px; overflow-wrap: anywhere; }
.mc-contact a { color: var(--brand); }
.mc-panel h2 { align-items: center; border-bottom: 1px solid var(--line); color: var(--brand); display: flex; padding-bottom: 8px; }
.mc-r { color: var(--muted); font-weight: 600; letter-spacing: 0; margin-left: auto; text-transform: none; }

.mc-est {
    align-items: center; background: var(--field); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 8px;
    display: flex; gap: 10px; padding: 8px 12px;
}
.mc-est + .mc-est { margin-top: 6px; }
.mc-est div { flex: 1; min-width: 0; }
.mc-est b { display: block; font-size: .92rem; overflow-wrap: anywhere; }
.mc-est span { color: var(--muted); display: block; font-size: .8rem; }
.mc-est a { color: var(--brand); font-weight: 600; text-decoration: none; }
.mc-est a:hover { text-decoration: underline; }
html.dark .mc-est { background: #0f1828; }

.mc-new { background: #fffdf6; border: 1px dashed var(--field-line); border-left: 4px solid #f59e0b; border-radius: 8px; margin-top: 12px; padding: 10px 12px; }
html.dark .mc-new { background: #1f1a10; }
.mc-new p { font-size: .88rem; font-weight: 600; margin: 0 0 8px; }
.mc-new > span { color: var(--muted); display: block; font-size: .78rem; margin-top: 6px; }
.mc-calcs { display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); }
.mc-calcs a {
    background: var(--field); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font-size: .85rem;
    padding: 6px 4px; text-align: center; text-decoration: none;
}
.mc-calcs a:hover, .mc-calcs a:focus-visible { border-color: var(--brand); color: var(--brand); }

@media (max-width: 900px) {
    .mc-wrap { grid-template-columns: 1fr; }
    .mc-panel { position: static; }
    .mc-email { display: none; }
}
@media (max-width: 560px) {
    .mc-top { flex-direction: column; }
    .mc-table th:nth-child(2), .mc-table td:nth-child(2) { display: none; }   /* calculators column */
}

/* ---- Clients (stage 2): making a client, names that might be them, their contact details ---- */
.mc-hidden { display: none !important; }
.mc-ic { fill: none; flex: none; height: 16px; margin-right: 5px; stroke: #15803d; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; vertical-align: -2px; width: 16px; }
html.dark .mc-ic { stroke: #4ade80; }
.mc-who .mc-ic { height: 19px; vertical-align: -3px; width: 19px; }
.mc-badge { background: #e3f5e8; border-radius: 999px; color: #15803d; font-size: .72rem; font-weight: 700; margin-left: 4px; padding: 2px 9px; vertical-align: 3px; }
html.dark .mc-badge { background: #14321f; color: #4ade80; }
.mc-note { color: var(--muted); font-size: .82rem; margin: 2px 0 10px; }
.mc-panel h2.mc-gap { margin-top: 20px; }

.mc-msg { background: #e3f5e8; border-radius: 8px; color: #15803d; font-size: .88rem; font-weight: 600; margin: -6px 0 12px; padding: 8px 12px; }
.mc-msg.bad { background: var(--alert-soft); color: var(--alert); }
html.dark .mc-msg { background: #14321f; color: #4ade80; }
html.dark .mc-msg.bad { background: var(--alert-soft); color: var(--alert); }

.mc-btn {
    background: var(--field); border: 1px solid var(--field-line); border-radius: 9px; color: var(--ink); cursor: pointer;
    font: inherit; font-size: .9rem; min-height: 38px; padding: 7px 14px;
}
.mc-btn:hover { border-color: var(--brand); color: var(--brand); }
.mc-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.mc-btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
html.dark .mc-btn.primary:hover { background: #2f6fe0; border-color: #2f6fe0; }
.mc-btn.ok { background: #15803d; border-color: #15803d; color: #fff; font-weight: 600; }
.mc-btn.ok:hover { background: #116632; color: #fff; }
.mc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* "Make Carla a client" and its form */
.mc-make { align-items: flex-start; background: #e3f5e8; border: 1px solid #a9dcb7; border-radius: 10px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; padding: 10px 12px; }
.mc-make p { font-size: .88rem; margin: 0; }
html.dark .mc-make { background: #14321f; border-color: #1f5a35; }
.mc-form { background: var(--field); border: 2px solid #15803d; border-radius: 12px; margin-bottom: 16px; padding: 14px; }
.mc-form h3 { color: var(--ink); font-size: 1rem; margin: 0; }
html.dark .mc-form { background: #0f1828; }
.mc-grid { display: grid; gap: 10px 14px; grid-template-columns: 1fr 1fr; }
.mc-grid > div { min-width: 0; }
.mc-span2 { grid-column: 1 / -1; }
.mc-grid label { color: var(--muted); display: block; font-size: .8rem; font-weight: 600; margin-bottom: 3px; }
.mc-grid input, .mc-grid textarea {
    background: var(--field); border: 1px solid var(--field-line); border-radius: 8px; color: var(--ink); font: inherit; padding: 7px 10px; width: 100%;
}
.mc-grid textarea { min-height: 76px; resize: vertical; }
.mc-grid input:focus, .mc-grid textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
html.dark .mc-grid input, html.dark .mc-grid textarea { background: #0f1828; }
.mc-from { color: var(--muted); font-size: .74rem; margin-top: 2px; overflow-wrap: anywhere; }

/* "Are any of these Carla too?" */
.mc-maybe { background: #fffbe8; border: 1px solid #ecd58f; border-radius: 10px; margin-bottom: 16px; padding: 10px 12px; }
html.dark .mc-maybe { background: #241e0e; border-color: #5c4a17; }
.mc-maybe h3 { color: var(--ink); font-size: .95rem; margin: 0; }
.mc-mb { background: var(--field); border: 1px solid var(--line); border-radius: 8px; margin-top: 8px; padding: 2px 10px 6px; }
html.dark .mc-mb { background: #0f1828; }
.mc-mb label { align-items: center; cursor: pointer; display: flex; font-size: .9rem; gap: 8px; padding: 6px 0; }
.mc-mb label input { accent-color: var(--brand); flex: none; height: 16px; width: 16px; }
.mc-mb label b { overflow-wrap: anywhere; }
.mc-mb label span { color: var(--muted); font-size: .78rem; margin-left: auto; overflow-wrap: anywhere; text-align: right; }
.mc-mbe { align-items: center; border-top: 1px dashed var(--line); display: flex; font-size: .84rem; gap: 8px; padding: 5px 0 3px 24px; }
.mc-mbe div { flex: 1; min-width: 0; }
.mc-mbe small { color: var(--muted); display: block; font-size: .78rem; }
.mc-mbe a { color: var(--brand); font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* Taking an estimate back out of a client */
.mc-x { background: none; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 4px 6px; }
.mc-x:hover { background: var(--alert-soft); color: var(--alert); }
.mc-form .mc-maybe { margin: 14px 0 0; }
/* "Is this one of my clients?" on a plain name */
.mc-owner { align-items: center; background: var(--field); border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 10px; margin-top: 8px; padding: 8px 10px; }
html.dark .mc-owner { background: #0f1828; }
.mc-owner div { flex: 1; min-width: 0; }
.mc-owner b { display: block; overflow-wrap: anywhere; }
.mc-owner span { color: var(--muted); display: block; font-size: .8rem; }
.mc-owner .mc-btn { white-space: nowrap; }
/* "I already have a client named ..." before making or renaming a client */
.mc-dup { background: var(--alert-soft); border: 1px solid #f1b8b2; border-radius: 10px; margin-top: 12px; padding: 10px 12px; }
html.dark .mc-dup { border-color: #6b2c2a; }
.mc-dup h3 { color: var(--alert); font-size: .95rem; margin: 0; }
/* A "Prepared for" name that isn't a client yet: a grey sheet (rows line up with the clients' icon either way) */
.mc-loose .mc-ic { stroke: var(--muted); opacity: .8; }
html.dark .mc-loose .mc-ic { stroke: var(--muted); }
.mc-legend { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: .8rem; gap: 4px 16px; }
.mc-legend > span { align-items: center; display: inline-flex; }