/* CarpaTech client portal, the customer-facing screens.
 *
 * Everything here is prefixed c- so it cannot collide with the shell styles in
 * index.html. Where a shell class already does the job (.panel, .rows, .chip,
 * .plan, .cmp) this file leaves it alone and reuses it.
 *
 * Tokens only. No colour is written out longhand except where an alpha wash of
 * an existing token is needed, which a var() cannot express. */

/* ------------------------------------------------------------- feedback -- */
.c-load{display:flex;align-items:center;gap:.6rem;color:var(--soft);font-size:.9rem;padding:1.2rem 0}
.c-load__d{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);
           animation:c-pulse 1.1s ease-in-out infinite}
@keyframes c-pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
/* Motion is decoration here. Somebody who has asked for less of it still gets
   the words, which are the part that matters. */
@media (prefers-reduced-motion:reduce){ .c-load__d{animation:none;opacity:.9} }

.c-err{background:rgba(224,119,106,.08);border:1px solid rgba(224,119,106,.35);
       border-radius:10px;padding:.9rem 1.1rem;font-size:.9rem;margin-bottom:1.2rem;color:#f0b1a8}
.c-err b{display:block;font-weight:500;color:var(--ink);margin-bottom:.2rem}
.c-err .muted{font-size:.82rem;margin:.4rem 0 0}

/* Not an alarm. It is a nudge, so it is gold rather than red, and it says how
   many rather than just that there are some. */
.c-attn{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
        background:rgba(217,165,32,.07);border:1px solid rgba(217,165,32,.32);
        border-radius:12px;padding:.9rem 1.2rem;margin-bottom:1.4rem}
.c-attn__t{flex:1;font-size:.92rem;color:var(--ink)}
.c-attn__b{background:var(--accent);border:0;border-radius:999px;padding:.45rem 1.1rem;
           color:#2a1f05;font-family:var(--font);font-weight:500;font-size:.84rem;cursor:pointer}
.c-attn__b:hover{filter:brightness(1.08)}

.c-bar{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.6rem}

/* ------------------------------------------------------ property cards --- */
.c-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1rem}
/* A button, not a div, so it is reachable by keyboard and announced as
   actionable without any aria bolted on afterwards. */
.c-card{display:block;width:100%;text-align:left;background:var(--panel);
        border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.5rem;
        font-family:var(--font);color:var(--ink);font-weight:300;cursor:pointer;
        transition:border-color .15s,transform .15s}
.c-card:hover{border-color:var(--steel);transform:translateY(-1px)}
.c-card:focus-visible{outline:2px solid var(--steel);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .c-card:hover{transform:none} }
.c-card__h{display:flex;align-items:baseline;gap:.8rem}
.c-card__n{font-size:1.1rem;font-weight:400;flex:1;line-height:1.3}
.c-card__s{display:block;color:var(--soft);font-size:.85rem;margin-top:.2rem}
.c-card__f{display:block;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);
           color:var(--soft);font-size:.82rem}

.c-badges{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.9rem}
.c-badge{display:inline-block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
         font-weight:500;padding:.25rem .6rem;border-radius:999px;border:1px solid var(--line);
         color:var(--soft)}
.c-badge--plan{border-color:rgba(217,165,32,.45);color:var(--accent)}
.c-badge--none{border-color:var(--line);color:var(--soft)}
.c-badge--warn{border-color:rgba(34,102,145,.6);color:#8ec2e6}

/* Four numbers in a row read faster than four label-and-value lines, and the
   card is a glance, not a report. */
.c-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:1.1rem}
.c-fact{display:block;text-align:center}
.c-fact b{display:block;font-size:1.3rem;font-weight:300;line-height:1.1;
          font-variant-numeric:tabular-nums}
.c-fact small{display:block;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
              color:var(--soft);margin-top:.25rem}

/* --------------------------------------------------------- property page -- */
.c-grid{margin-bottom:1.2rem}
.c-tier{color:var(--accent);text-transform:capitalize}
.c-dev{font-weight:400}
.c-link{background:none;border:0;padding:.3rem 0 0;color:var(--accent);font-family:var(--font);
        font-size:.75rem;cursor:pointer;text-align:left;display:block}
.c-link:hover{text-decoration:underline}
.c-upsell p{font-size:.9rem;margin:0 0 .6rem}
.c-upsell .btn2{margin-top:.5rem}
.c-dl{font-size:.85rem}

/* -------------------------------------------------------------- tickets -- */
.c-trows{border-top:1px solid var(--line)}
.c-sla{display:inline-block;margin-top:.35rem}

.c-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.c-filter{background:none;border:1px solid var(--line);border-radius:999px;
          padding:.4rem .9rem;color:var(--soft);font-family:var(--font);font-size:.82rem;
          font-weight:300;cursor:pointer}
.c-filter:hover{color:var(--ink);border-color:var(--steel)}
.c-filter b{font-weight:500;color:var(--ink);margin-left:.2rem}
.c-filter.is-on{background:var(--steel);border-color:var(--steel);color:#fff}
.c-filter.is-on b{color:#fff}

.c-body{font-size:.92rem;line-height:1.65;margin:0}
.c-thread{margin-bottom:.4rem}

/* Attachments in the thread. A photograph is the point of asking for one, so it
   is shown rather than listed, with the download link kept underneath for the
   times somebody wants the file itself. */
.c-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.6rem;
         margin-top:.8rem}
.c-media__i{margin:0}
.c-media__i img,.c-media__i video{width:100%;height:7.5rem;object-fit:cover;border-radius:8px;
        background:var(--bg);border:1px solid var(--line);display:block}
.c-media__i figcaption{margin-top:.35rem;font-size:.72rem;overflow:hidden;text-overflow:ellipsis;
        white-space:nowrap}
.c-media__doc{display:flex;align-items:center;justify-content:center;height:7.5rem;
        border-radius:8px;background:var(--bg);border:1px solid var(--line);color:var(--accent);
        font-size:.78rem;padding:.5rem;text-align:center}

/* ---------------------------------------------------------------- forms -- */
.c-lbl{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
       color:var(--soft);font-weight:500;margin:1.1rem 0 .4rem}
.c-form .c-lbl:first-child{margin-top:0}
.c-form input,.c-form select,.c-form textarea,
.c-reply textarea{width:100%;padding:.7rem .8rem;background:var(--bg);color:var(--ink);
       border:1px solid var(--line);border-radius:8px;font-family:var(--font);
       font-size:.92rem;font-weight:300;line-height:1.55}
.c-form textarea,.c-reply textarea{resize:vertical}
.c-form input:focus,.c-form select:focus,.c-form textarea:focus,
.c-reply textarea:focus{outline:none;border-color:var(--steel)}
.c-two{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:560px){ .c-two{grid-template-columns:1fr} }

.c-reply{margin-top:1.2rem;border-top:1px solid var(--line);padding-top:1.1rem}
.c-replybar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
            margin-top:1rem;flex-wrap:wrap}
.c-replybar .muted{font-size:.82rem;flex:1;min-width:8rem}

/* --------------------------------------------------------- attachments --- */
.c-attach{margin-top:.6rem}
/* Overrides the shell's blanket label rule, which is uppercase and spaced for a
   field caption. This one is a button. */
.c-attach__b{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
       border:1px dashed var(--line);border-radius:10px;padding:.6rem 1rem;
       color:var(--soft);font-size:.86rem;font-weight:400;text-transform:none;
       letter-spacing:0;margin:0}
.c-attach__b:hover{border-color:var(--steel);color:var(--ink)}
.c-attach__i{color:var(--accent);font-size:1.1rem;line-height:1}
.c-attach__h{color:var(--soft);font-size:.76rem;margin:.5rem 0 0}

.c-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.6rem;
         margin-top:.8rem}
.c-file{position:relative;display:flex;align-items:center;gap:.6rem;padding:.5rem;
        background:var(--bg);border:1px solid var(--line);border-radius:10px}
.c-file__t{width:3rem;height:3rem;flex:0 0 auto;object-fit:cover;border-radius:7px;
           background:var(--panel);border:1px solid var(--line)}
.c-file__t--doc{display:flex;align-items:center;justify-content:center;font-size:.6rem;
           letter-spacing:.06em;color:var(--accent)}
.c-file__n{flex:1;min-width:0;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;
           white-space:nowrap}
.c-file__n small{display:block;color:var(--soft);font-size:.7rem}
.c-file__x{flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:50%;background:none;
           border:1px solid var(--line);color:var(--soft);cursor:pointer;line-height:1;
           font-size:.95rem;padding:0}
.c-file__x:hover{color:var(--bad);border-color:var(--bad)}

/* ---------------------------------------------------------------- quote -- */
.c-quote{border-color:rgba(34,102,145,.4)}
/* The one table on these screens that genuinely needs to scroll on a phone. It
   scrolls inside its own box so the page body never does. */
.c-qwrap{overflow-x:auto;margin-bottom:1rem}
.c-q{width:100%;border-collapse:collapse;font-size:.86rem;min-width:22rem}
.c-q td{padding:.55rem .4rem;border-bottom:1px solid var(--line);color:var(--soft)}
.c-q td:first-child{color:var(--ink);padding-left:0}
.c-q td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.c-q tr:last-child td{border-bottom:0}

.c-qsum{margin-left:auto;max-width:20rem;font-size:.88rem}
.c-qsum div{display:flex;justify-content:space-between;gap:1.5rem;padding:.4rem 0}
.c-qsum span{color:var(--soft)}
.c-qsum b{font-weight:400;font-variant-numeric:tabular-nums}
.c-qsum__t{border-top:1px solid var(--line);margin-top:.3rem;padding-top:.6rem !important}
.c-qsum__t b{font-size:1.15rem;font-weight:400;color:var(--accent)}

.c-qbtns{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.c-qnote{font-size:.82rem;margin:.8rem 0 0}

.c-pay{display:block;text-align:center;text-decoration:none;margin-top:1rem;
       background:var(--steel);color:#fff;border-radius:999px;padding:.8rem 1rem;
       font-weight:500;font-size:.95rem}
.c-pay:hover{filter:brightness(1.12)}
.c-paid{margin-top:1rem;padding:.8rem 1rem;border-radius:10px;
        background:rgba(63,154,109,.1);border:1px solid rgba(63,154,109,.35)}
.c-paid b{display:block;font-weight:500;color:#5bbd8c;font-size:.9rem}
.c-paid .muted{font-size:.8rem}

.c-foot{text-align:left;margin-top:1.5rem}