/* ============================================================================
   CRM / PORTAL / DOCUMENTS — staff and standalone client surfaces.
   Loaded only by the pages that need it, not on the public marketing site.
   ========================================================================= */

/* ---- CRM shell ---------------------------------------------------------- */
.crm{padding:var(--s-6) 0 var(--sec-y)}
.crm-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
          flex-wrap:wrap}
.crm-head .crm-actions{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.crm-search{display:flex;gap:var(--s-2)}
.crm-search input{padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:9px;
                  font-size:.95rem;min-width:220px;font-family:inherit}
.crm-subnav{display:flex;gap:6px;margin:var(--s-1) 0 var(--s-3);flex-wrap:wrap}
.crm-subnav a{padding:7px 16px;border-radius:9px;font-weight:700;font-size:.92rem;
              color:var(--muted);background:var(--paper-2)}
.crm-subnav a.on{background:var(--navy);color:#fff}
.crm-subnav a:hover{text-decoration:none}
.crm-stages{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:var(--s-4) 0}
.crm-stage{background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);
           padding:7px 14px;font-weight:600;font-size:.9rem;color:var(--navy)}
.crm-stage:hover{text-decoration:none;border-color:var(--navy)}
.crm-stage.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.crm-stage b{margin-left:5px}
.crm-stage.s-won.on,.crm-stage.s-lost.on,.crm-stage.s-new.on{color:#fff}

/* ---- CRM tables --------------------------------------------------------- */
.crm-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);
               background:#fff}
.crm-table{width:100%;border-collapse:collapse;min-width:640px}
.crm-table th{text-align:left;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.03em;
              color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line)}
.crm-table td{padding:11px 14px;border-bottom:1px solid #eef2f6;font-size:.92rem;
              vertical-align:top}
.crm-table tbody tr{cursor:pointer}
.crm-table tbody tr:hover{background:#f6f9fc}
.crm-kv{width:100%;border-collapse:collapse;margin:var(--s-3) 0 var(--s-2);background:#fff;
        border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.crm-kv td{padding:9px 14px;border-bottom:1px solid #eef2f6;font-size:.93rem;vertical-align:top}
/* 110px broke "Import duty" and "Clearing (typical)" onto two lines mid-phrase */
.crm-kv td:first-child{color:var(--muted);width:1%;white-space:nowrap;padding-right:22px;
                       font-weight:600}

/* ---- CRM badges --------------------------------------------------------- */
.crm-badge{display:inline-block;padding:2px 9px;border-radius:var(--r-pill);font-size:.74rem;
           font-weight:800;background:var(--paper-2);color:var(--navy)}
.crm-badge.s-new{background:#eaf3ff;color:#1a56b0}
.crm-badge.s-contacted{background:#fff4e0;color:#a9700a}
.crm-badge.s-quoted{background:#efe7ff;color:#6b3fb0}
.crm-badge.s-won{background:#eafaf0;color:var(--ok)}
.crm-badge.s-lost{background:#fde8e8;color:#b33636}
.crm-badge.tk-open{background:#eaf3ff;color:#1a56b0}
.crm-badge.tk-pending{background:#fff4e0;color:#a9700a}
.crm-badge.tk-resolved{background:#eafaf0;color:var(--ok)}
.crm-badge.tk-closed{background:var(--paper-2);color:var(--muted)}
.org-kind{font-size:var(--t-xs);font-weight:800;text-transform:uppercase;padding:2px 7px;
          border-radius:5px;background:var(--paper-2);color:var(--navy)}
.org-kind.k-platform{background:#0f1b2d;color:#fff}
.org-kind.k-dealer{background:#eaf3ff;color:#1a56b0}
.org-kind.k-subdealer{background:#efe7ff;color:#6b3fb0}
.org-kind.k-client{background:#eafaf0;color:var(--ok)}

/* ---- CRM detail + forms -------------------------------------------------- */
.crm-lead{display:grid;grid-template-columns:1.6fr .9fr;gap:var(--s-7);align-items:start;
          margin-top:var(--s-3)}
@media(max-width:760px){.crm-lead{grid-template-columns:1fr}}
.crm-timeline{list-style:none;padding:0;margin:var(--s-2) 0}
.crm-timeline li{padding:var(--s-2) 0;border-bottom:1px dashed #e5ebf1;display:flex;gap:var(--s-3)}
.crm-timeline .ev-when{white-space:nowrap;min-width:92px}
.crm-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-5);
          display:grid;gap:var(--s-3);box-shadow:var(--shadow);position:sticky;top:80px}
.crm-form label{display:grid;gap:5px;font-weight:600;font-size:.88rem;color:var(--navy)}
.crm-form input,.crm-form select,.crm-form textarea{padding:9px 11px;border:1px solid var(--line);
                                                    border-radius:9px;font-size:.95rem;
                                                    font-family:inherit}
.crm-form .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.crm-import{display:flex;gap:6px}
.crm-import input{padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:9px;
                  font-size:.9rem;min-width:230px;font-family:inherit}
.v-form{max-width:620px;margin-top:var(--s-3)}
.v-more{margin:2px 0}
.v-more summary{cursor:pointer;font-weight:700;font-size:var(--t-sm);color:var(--accent)}
.v-more label{margin-top:var(--s-3)}

/* ---- vehicle status timeline --------------------------------------------- */
.v-timeline{list-style:none;padding:0;margin:var(--s-2) 0 var(--s-1)}
.v-timeline li{display:flex;align-items:center;gap:var(--s-3);padding:7px 0;position:relative}
.v-timeline .v-dot{width:14px;height:14px;border-radius:50%;background:#d6dee6;
                   border:2px solid #d6dee6;flex:none}
.v-timeline li.done .v-dot{background:var(--ok);border-color:var(--ok)}
.v-timeline li.done .v-step{color:var(--navy);font-weight:700}
.v-timeline li.pending .v-step{color:var(--muted)}
.v-timeline .v-step{flex:1}
.v-photolabel{font-weight:700;color:var(--navy);margin:var(--s-3) 0 6px}
.v-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s-2)}
.v-photos img{width:100%;height:74px;object-fit:cover;border-radius:var(--r-sm);
              border:1px solid var(--line)}

/* ---- tickets ------------------------------------------------------------- */
.tk-prio{font-size:var(--t-xs);font-weight:800;text-transform:uppercase;padding:2px 7px;
         border-radius:5px}
.tk-prio.p-low{background:var(--paper-2);color:var(--muted)}
.tk-prio.p-normal{background:#eaf3ff;color:#1a56b0}
.tk-prio.p-high{background:#fde8e8;color:#b33636}
.tk-thread{margin:var(--s-3) 0}
.tk-msg{border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s-3) var(--s-4);
        margin-bottom:var(--s-3);background:#fff}
.tk-msg.tk-internal{background:#fffbeb;border-color:#f2e0a8}
.tk-msg-head{display:flex;gap:var(--s-2);align-items:center;margin-bottom:var(--s-1)}
.tk-note-tag{font-size:.68rem;font-weight:800;text-transform:uppercase;background:#f2e0a8;
             color:#8a6d1a;padding:1px 6px;border-radius:5px}
.tk-msg-body{color:var(--navy);line-height:1.55;font-size:.95rem}
.tk-check{flex-direction:row!important;align-items:center;gap:var(--s-2)!important;font-weight:600;
          font-size:var(--t-sm)}
.tk-check input{width:auto}
.share-link{background:#eaf3ff;border:1px solid #b9d7ff;border-radius:9px;padding:9px 12px;
            margin:var(--s-2) 0;font-size:.9rem}
.share-link a{font-weight:700}
.share-gen{margin:var(--s-2) 0}

/* ---- API tokens ---------------------------------------------------------- */
.api-token{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
           padding:var(--s-4);margin-bottom:var(--s-3);box-shadow:var(--shadow)}
.api-token.api-off{opacity:.6}
.api-token-head{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;
                margin-bottom:var(--s-2)}
.api-key{display:block;background:#0f1b2d;color:#8fe3b0;padding:var(--s-2) var(--s-3);
         border-radius:var(--r-sm);font-size:var(--t-xs);overflow-x:auto;white-space:nowrap;
         margin-bottom:var(--s-2);font-family:var(--font-num)}
.api-token-form{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}
.api-token-form input[type=url]{flex:1;min-width:220px;padding:var(--s-2) 11px;
                                border:1px solid var(--line);border-radius:9px;font-size:.9rem}
.api-docs{background:#0f1b2d;color:#cdd7e3;padding:var(--s-4);border-radius:var(--r-sm);
          overflow-x:auto;font-size:var(--t-xs);line-height:1.5;font-family:var(--font-num)}

/* ---- price layers -------------------------------------------------------- */
.layer-list td{padding:var(--s-2) var(--s-3)}
.lx-del{border:0;background:none;color:var(--red);cursor:pointer;padding:0 4px;line-height:1;
        display:inline-grid;place-items:center}
.layer-add{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:var(--s-2) 0 var(--s-1)}
.layer-add select,.layer-add input{padding:7px 9px;border:1px solid var(--line);
                                   border-radius:var(--r-sm);font-size:.9rem;font-family:inherit}

/* ---- client portal (standalone, neutral brand) --------------------------- */
.portal-body{background:#f4f7fa}
.portal-head{background:var(--navy);color:#fff;padding:var(--s-3) 0}
.portal-headin{display:flex;align-items:center;gap:var(--s-3)}
.portal-brand{font-weight:800;font-size:1.1rem;letter-spacing:-.01em}
.portal-logo{height:30px;width:auto;border-radius:4px;background:#fff;padding:2px}
.portal{max-width:760px;padding:var(--s-6) var(--s-4) var(--sec-y)}
.portal-title{font-size:1.7rem;margin:6px 0 2px}
.portal-sub{margin:0 0 var(--s-3)}
.portal-hero{width:100%;max-height:340px;object-fit:cover;border-radius:var(--radius);
             margin-bottom:var(--s-4)}
.portal-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
             padding:var(--s-5);margin-bottom:var(--s-4);box-shadow:var(--shadow)}
.portal-card h2{font-size:1.05rem;margin:0 0 var(--s-3);color:var(--navy)}
.portal-eta{margin:var(--s-3) 0 0;font-size:var(--t-base);color:var(--navy);background:#eafaf0;
            border-radius:var(--r-sm);padding:9px 12px}
.portal-form{display:grid;gap:var(--s-3)}
.portal-form .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.portal-foot{padding:var(--s-6) 0 var(--s-8);text-align:center}
.portal-contacts{color:var(--navy);margin:0 0 6px;font-size:.9rem;font-weight:600}
.portal-contacts a{color:var(--navy);text-decoration:underline}
.portal-price{display:flex;justify-content:space-between;align-items:baseline}
.portal-price span{font-size:var(--t-base);color:var(--muted)}
.portal-price b{font-size:1.5rem;color:var(--navy)}
.pc-list{display:grid;gap:var(--s-3)}
.pc-card{display:flex;align-items:center;gap:var(--s-4);background:#fff;border:1px solid var(--line);
         border-radius:var(--radius);padding:var(--s-3) var(--s-4);box-shadow:var(--shadow)}
.pc-card:hover{text-decoration:none;border-color:var(--navy)}
.pc-thumb{width:88px;height:66px;border-radius:9px;background-size:cover;background-position:center;
          flex:none;background-color:#e6ecf2}
.pc-thumb.pc-noimg{display:flex;align-items:center;justify-content:center;color:var(--muted)}
.pc-body{flex:1;color:var(--navy);min-width:0}
.pc-status{margin-top:var(--s-1);display:flex;gap:6px;align-items:center}
.pc-badge{background:#eafaf0;color:var(--ok);font-weight:800;font-size:var(--t-xs);padding:2px 8px;
          border-radius:var(--r-pill)}
.pc-arrow{color:var(--muted);flex:none}

/* ---- documents ----------------------------------------------------------- */
.doc-new-row{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:var(--s-1) 0 var(--s-3)}
.doc-list td{padding:var(--s-2) var(--s-3)}
.doc-line{display:flex;justify-content:space-between;gap:var(--s-3);align-items:center;
          padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
          margin-bottom:var(--s-2);background:#fff;color:var(--navy)}
.doc-line:hover{text-decoration:none;border-color:var(--navy)}
.doc-line-r{display:flex;gap:var(--s-2);align-items:center;white-space:nowrap}
.doc-need{color:var(--accent);font-weight:700;font-size:var(--t-sm)}
.doc-body{background:#e9edf1;padding:var(--s-6) var(--s-3)}
.doc-sheet{max-width:720px;margin:0 auto;background:#fff;padding:var(--s-7) var(--s-8);
           border-radius:6px;box-shadow:0 2px 14px rgba(15,27,45,.12)}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;
          border-bottom:3px solid var(--navy);padding-bottom:var(--s-4);margin-bottom:var(--s-5)}
.doc-logo{height:42px;margin-bottom:6px}
.doc-brand{font-size:1.3rem;font-weight:800;color:var(--navy)}
.doc-meta{text-align:right}
.doc-meta h1{font-size:1.3rem;margin:0;text-transform:uppercase;letter-spacing:.02em}
.doc-num{font-weight:700;color:var(--muted)}
.doc-vehicle{background:#f4f7fa;padding:9px 12px;border-radius:var(--r-sm);font-size:.95rem}
.doc-title{font-size:1.05rem;margin:var(--s-3) 0 6px}
.doc-lines{width:100%;border-collapse:collapse;margin:var(--s-2) 0}
.doc-lines th,.doc-lines td{padding:9px 4px;border-bottom:1px solid #eef2f6;text-align:left}
.doc-lines .doc-amt{text-align:right;white-space:nowrap}
.doc-lines tfoot td{font-weight:800;border-top:2px solid var(--line);border-bottom:0;
                    font-size:1.05rem}
.doc-notes{color:var(--muted);font-size:.92rem;margin-top:var(--s-3)}
.doc-accepted{background:#eafaf0;color:var(--ok);font-weight:700;padding:9px 12px;
              border-radius:var(--r-sm);margin-top:var(--s-3)}
.doc-actions{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;margin-top:var(--s-6)}
.doc-accept-form{display:flex;gap:var(--s-2)}
.doc-accept-form input{padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-sm)}
@media print{
  .no-print{display:none!important}
  .doc-body{background:#fff;padding:0}
  .doc-sheet{box-shadow:none;max-width:100%;padding:0}
}

/* ---- back-office on a phone --------------------------------------------- */
/* Paired form fields and the fixed-width data tables were the only things dragging the
   CRM sideways at 390px. */
.crm-form .two>*,.crm-lead>*,.crm-form{min-width:0}
@media(max-width:520px){
  .crm-form .two,.portal-form .two{grid-template-columns:1fr}
  .crm-head{align-items:flex-start}
  .crm-search input,.crm-import input{min-width:0;width:100%}
  .crm-search,.crm-import{width:100%}
}