/* ============================================================================
   Omnitech CRM — Customer Profile form skin  (v1, 2026-08-18)
   File: assets/css/custom.css
         Perfex loads this file automatically when it exists
         (application/helpers/assets_helper.php, after style.css) — so there is
         NO PHP edit and nothing to change in any view.
   Scope: every rule is scoped to .client-form, which exists on exactly one
          form in the admin area: application/views/admin/clients/groups/
          profile.php — the Add customer / Edit customer profile form.
          No other page in the CRM is affected.
   Field order, field names, input names and markup are UNCHANGED.
   Rollback: rename or delete this file. Nothing else to undo.
   ============================================================================ */

.client-form{
  --of-ink:#101828;
  --of-ink-2:#475467;
  --of-ink-3:#8792a4;
  --of-line:#e4e8ee;
  --of-line-2:#eef1f5;
  --of-field:#ffffff;
  --of-field-2:#f8fafc;
  --of-brand:#2b5cff;
  --of-brand-soft:#eef3ff;
  --of-danger:#e11d48;
  --of-r:10px;
  --of-shadow:0 1px 2px rgba(16,24,40,.04);
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
}

/* ---------- 1. Page & panel ---------- */
.client-form .customer-profile-group-heading,
h4.customer-profile-group-heading{
  font-size:19px;font-weight:650;letter-spacing:-.01em;color:var(--of-ink,#101828);
  margin:0 0 20px;
}

/* ---------- 2. Tabs → segmented control ---------- */
.client-form .nav-tabs.customer-profile-tabs{
  border-bottom:0;
  background:#f2f4f8;
  border:1px solid #e9edf3;
  border-radius:12px;
  padding:4px;
  display:inline-flex;
  gap:2px;
  box-shadow:inset 0 1px 2px rgba(16,24,40,.03);
}
.client-form .nav-tabs.customer-profile-tabs>li{float:none;margin:0}
.client-form .nav-tabs.customer-profile-tabs>li>a{
  border:0!important;background:transparent;border-radius:8px;
  padding:8px 15px;font-size:13.5px;font-weight:550;color:#667085;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.client-form .nav-tabs.customer-profile-tabs>li>a:hover{background:rgba(255,255,255,.65);color:#344054}
.client-form .nav-tabs.customer-profile-tabs>li.active>a{
  background:#fff;color:#101828;font-weight:650;
  box-shadow:0 1px 2px rgba(16,24,40,.07),0 0 0 1px rgba(16,24,40,.04);
}
.client-form .nav-tabs.customer-profile-tabs>li>a .badge{
  background:#e7ebf2;color:#586170;border-radius:999px;font-size:11px;font-weight:650;padding:2px 7px;
}
.client-form .nav-tabs.customer-profile-tabs>li.active>a .badge{background:var(--of-brand-soft);color:var(--of-brand)}
.client-form .tab-content.mtop15{margin-top:22px}

/* ---------- 3. Labels ---------- */
.client-form label.control-label,
.client-form .form-group>label{
  font-size:12.5px;font-weight:600;color:var(--of-ink-2);
  letter-spacing:.005em;margin-bottom:7px;line-height:1.35;
}
.client-form .req,
.client-form small.req{color:var(--of-danger);font-weight:700;margin-right:5px}

/* ---------- 4. Inputs / textareas ---------- */
.client-form .form-control{
  height:42px;padding:9px 13px;font-size:14px;color:var(--of-ink);
  background:var(--of-field);
  border:1px solid var(--of-line);
  border-radius:var(--of-r);
  box-shadow:var(--of-shadow);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.client-form .form-control::placeholder{color:#a9b2c0}
.client-form .form-control:hover:not(:focus){border-color:#cfd6e0}
.client-form .form-control:focus{
  border-color:var(--of-brand);
  box-shadow:0 0 0 3.5px rgba(43,92,255,.13);
  background:#fff;
}
.client-form textarea.form-control{min-height:104px;padding:11px 13px;line-height:1.55;resize:vertical}
.client-form .form-group{margin-bottom:20px}

/* ---------- 5. Selects (bootstrap-select) ----------
   bootstrap-select copies .form-control onto its wrapper <div>, so the
   input rule above must be neutralised there or you get a double border. */
.client-form .bootstrap-select.form-control{
  border:0;padding:0;height:auto;background:transparent;box-shadow:none;
}
.client-form .bootstrap-select.form-control:hover,
.client-form .bootstrap-select.form-control:focus{border:0;box-shadow:none}
.client-form .bootstrap-select>.btn.dropdown-toggle{
  height:42px;padding:9px 34px 9px 13px;font-size:14px;color:var(--of-ink);
  background:var(--of-field);border:1px solid var(--of-line);border-radius:var(--of-r);
  box-shadow:var(--of-shadow);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.client-form .bootstrap-select>.btn.dropdown-toggle:hover{border-color:#cfd6e0}
.client-form .bootstrap-select.open>.btn.dropdown-toggle,
.client-form .bootstrap-select>.btn.dropdown-toggle:focus{
  border-color:var(--of-brand);box-shadow:0 0 0 3.5px rgba(43,92,255,.13);outline:0!important;
}
.client-form .bootstrap-select .caret{border-top-color:#98a2b3}
.client-form .bootstrap-select .dropdown-menu{
  border:1px solid var(--of-line);border-radius:12px;padding:6px;
  box-shadow:0 12px 32px -8px rgba(16,24,40,.18),0 2px 6px rgba(16,24,40,.06);
}
.client-form .bootstrap-select .dropdown-menu li a{border-radius:8px;padding:8px 10px;font-size:13.5px}

/* ---------- 6. Input groups (Website / Short link / date) ---------- */
.client-form .input-group .form-control{border-radius:var(--of-r) 0 0 var(--of-r)}
.client-form .input-group-btn>.btn{
  height:42px;border-radius:0 var(--of-r) var(--of-r) 0;
  border:1px solid var(--of-line);border-left:0;
  background:var(--of-field-2);color:var(--of-ink-3);
  display:flex;align-items:center;justify-content:center;min-width:44px;
  transition:background .15s ease,color .15s ease;
}
.client-form .input-group-btn>.btn:hover{background:var(--of-brand-soft);color:var(--of-brand)}
/* the addon itself is the table-cell — it must stay table-cell or the
   Bootstrap input-group collapses onto two lines */
.client-form .input-group-addon{
  height:42px;padding:9px 13px;min-width:44px;text-align:center;vertical-align:middle;
  border:1px solid var(--of-line);border-left:0;border-radius:0 var(--of-r) var(--of-r) 0;
  background:var(--of-field-2);color:var(--of-ink-3);
}

/* ---------- 7. Checkbox groups → selectable chips ---------- */
.client-form .form-group.chk>br{display:none}
.client-form .form-group.chk>label.control-label{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.055em;
  text-transform:uppercase;color:var(--of-ink-3);margin-bottom:10px;
}
.client-form .form-group.chk .checkbox{
  padding:0;margin:0 0 7px;min-height:0;
}
.client-form .form-group.chk .checkbox.checkbox-inline{margin-right:7px}
.client-form .form-group.chk .checkbox input[type=checkbox]{
  position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;
}
.client-form .form-group.chk .checkbox>label.cf-chk-label{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;margin:0;
  font-size:13.5px;font-weight:500;color:var(--of-ink-2);
  background:#fff;border:1px solid var(--of-line);border-radius:9px;
  cursor:pointer;transition:all .15s ease;
}
/* the box: overrides the awesome-bootstrap-checkbox ::before, which is
   absolutely positioned at margin-left:-20px — it has to be reset to static
   or the chip's tick box lands outside the chip */
.client-form .form-group.chk .checkbox>label.cf-chk-label::before{
  content:"";flex:0 0 auto;position:static;margin:0;left:auto;top:auto;
  width:16px;height:16px;border-radius:5px;
  border:1.5px solid #cbd3df;background:#fff;transition:all .15s ease;
}
/* the Glyphicons tick (::after) is absolutely positioned to the old box
   location, so hide it — the filled box below is the checked state */
.client-form .form-group.chk .checkbox>label.cf-chk-label::after{display:none}
.client-form .form-group.chk .checkbox>label.cf-chk-label:hover{
  border-color:#c3ccda;background:#fbfcfe;
}
.client-form .form-group.chk .checkbox input[type=checkbox]:checked+label.cf-chk-label{
  border-color:#b7c8ff;background:var(--of-brand-soft);color:#1c3fb0;font-weight:600;
}
.client-form .form-group.chk .checkbox input[type=checkbox]:checked+label.cf-chk-label::before{
  border-color:var(--of-brand);background:var(--of-brand);
  box-shadow:inset 0 0 0 2px #fff;
}
.client-form .form-group.chk .checkbox input[type=checkbox]:focus-visible+label.cf-chk-label{
  box-shadow:0 0 0 3.5px rgba(43,92,255,.13);
}

/* ---------- 8. Plain checkboxes (primary contact, invoice sync) ---------- */
.client-form .checkbox-info>label,
.client-form .checkbox-default>label{font-size:13.5px;color:var(--of-ink-2)}

/* ---------- 9. Inline "edit field" pencil ----------
   style.css floats this link left, in front of the label, which indents every
   custom-field label. Pull it out of the flow into the top-right of its column
   instead (the Bootstrap column is already position:relative). */
.client-form .custom-field-inline-edit-link{
  position:absolute;float:none;margin:0;
  right:15px;top:1px;font-size:11px;color:#c8cfda;opacity:0;z-index:3;
  transition:opacity .15s ease,color .15s ease;
}
.client-form [class*="col-md-"]:hover>.custom-field-inline-edit-link{opacity:1}
.client-form .custom-field-inline-edit-link:hover{color:var(--of-brand)}

/* ---------- 10. Dividers, alerts, sub-headings ---------- */
.client-form hr{border-top:1px solid var(--of-line-2);margin:26px 0}
.client-form .alert-warning{
  background:#fffaf0;border:1px solid #fbe6bd;color:#8a5a1b;border-radius:12px;padding:14px 16px;
}
.client-form .bs-section-title,
.client-form .tab-pane h4{
  font-weight:650;color:var(--of-ink);letter-spacing:-.005em;
  padding-top:20px;border-top:1px solid var(--of-line-2);margin-top:6px;
}

/* ---------- 11. Buttons ---------- */
.client-form .btn-primary{
  background:var(--of-brand);border-color:var(--of-brand);border-radius:9px;
  padding:9px 18px;font-size:13.5px;font-weight:600;
  box-shadow:0 1px 2px rgba(16,24,40,.08);transition:filter .15s ease,box-shadow .15s ease;
}
.client-form .btn-primary:hover{filter:brightness(1.06);box-shadow:0 3px 10px -2px rgba(43,92,255,.45)}
.client-form .btn-default{
  background:#fff;border:1px solid var(--of-line);color:var(--of-ink-2);
  border-radius:9px;padding:9px 16px;font-size:13.5px;font-weight:600;
}
.client-form .btn-default:hover{background:var(--of-field-2);border-color:#cfd6e0}

/* ---------- 12. Tables (Customer Admins) ---------- */
.client-form .table th{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--of-ink-3);
  border-bottom:1px solid var(--of-line);font-weight:700;
}
.client-form .table td{border-bottom:1px solid var(--of-line-2);font-size:13.5px;color:var(--of-ink-2)}
.client-form .table tbody tr:hover td{background:#fafbfd}

/* ---------- 13a. Stop the float-stagger ----------
   Perfex renders all custom fields as floats inside ONE .row, so a field
   whose label wraps to two lines drags the next field up beside it and
   leaves the big empty holes visible today. Switching that single row to
   flex-wrap keeps the exact same DOM order but lays each line out cleanly
   and bottom-aligns the controls in a line. Desktop only — below 992px
   Bootstrap stacks col-md-* to full width and we leave that alone.       */
@media (min-width:992px){
  .client-form .custom-fields-form-row{display:flex;flex-wrap:wrap;align-items:stretch}
  .client-form .custom-fields-form-row>[class*="col-md-"]{float:none;display:flex;flex-direction:column}
  /* two-line label slot so every control on a line starts at the same
     baseline, even when a field name wraps (e.g. "DinDin Credentials
     Backend (https://…)") */
  .client-form .custom-fields-form-row>[class*="col-md-"]>.form-group:not(.chk)>label.control-label{
    display:flex;align-items:flex-end;min-height:2.7em;margin-bottom:7px;
  }
}

/* ---------- 13b. Field width fixes (no DB change needed) ----------
   Corporate Name (id 38) and FEIN (id 37) go from col-md-3 (25%)
   to half width each, matching Current plan.                     */
.client-form .custom-fields-form-row>[class*="col-md-"]:has([data-fieldid="38"]),
.client-form .custom-fields-form-row>[class*="col-md-"]:has([data-fieldid="37"]){
  width:50%;
}
/* Long single-line links read better wide */
.client-form .custom-fields-form-row>[class*="col-md-"]:has([data-fieldid="2"]){width:100%}

/* ---------- 14. Textarea label that is really a URL note ---------- */
.client-form .form-group>label[for*="[13]"]{font-weight:600;color:var(--of-ink-2);word-break:break-all}

/* ---------- 15. Focus visibility for keyboard users ---------- */
.client-form a:focus-visible,.client-form button:focus-visible{
  outline:2px solid var(--of-brand);outline-offset:2px;border-radius:6px;
}

/* ============================================================================
   OPTIONAL — section headings on the Custom Fields / Elavon tabs.
   Uncomment the block below to switch them on. The mid-form headings are
   anchored to custom field ids (2 = DinDin Online Order Link,
   13 = Email Address Link), so if those fields are reordered in
   Setup -> Custom Fields the headings travel with them.
   ============================================================================ */
/*
@media (min-width:992px){
  /* shared eyebrow look */
  .client-form #custom_fields .custom-fields-form-row::before,
  .client-form #elavon .custom-fields-form-row::before,
  .client-form #custom_fields .custom-fields-form-row>[class*="col-md-"]:has([data-fieldid="2"])::before,
  .client-form #custom_fields .custom-fields-form-row>[class*="col-md-"]:has([data-fieldid="13"])::before{
    font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:#98a2b3;padding-bottom:10px;border-bottom:1px solid #eef1f5;
  }
  /* heading at the top of the row: the row is a flex container, so its
     ::before can be a full-width flex item — no extra markup needed */
  .client-form #custom_fields .custom-fields-form-row::before{
    content:"Plan & account";flex:0 0 100%;margin:0 15px 22px;
  }
  .client-form #elavon .custom-fields-form-row::before{
    content:"Merchant application";flex:0 0 100%;margin:0 15px 22px;
  }
  .client-form .custom-fields-form-row::after{display:none}
  /* mid-form headings: only ever attached to a field that already owns a
     full-width line, so nothing beside it can fall out of alignment */
  .client-form #custom_fields .custom-fields-form-row>[class*="col-md-"]:has([data-fieldid="2"])::before{
    content:"Online presence & services";display:block;margin:14px 0 22px;
  }
  .client-form #custom_fields .custom-fields-form-row>[class*="col-md-"]:has([data-fieldid="13"])::before{
    content:"Notes & credentials";display:block;margin:14px 0 22px;
  }
}
*/