/* ══════════════════════════════════════════════════════════════════════════
   DarajaERP — Add Contact / Supplier modal
   Operational Workspace design language (daraja-operational-workspace.css).

   Scoped to .pos-contact-modal so it only affects this dialog. The modal's
   Blade markup is shared by POS, Sales, Purchases and Contacts, so this
   restyles it rather than rewriting 1000+ lines of shared markup — the
   overlap is caused by decorative addon boxes stealing width from a
   4-across row, which is fixable without touching the fields themselves.
   ══════════════════════════════════════════════════════════════════════════ */
.pos-contact-modal {
    --w-navy: #0B2345;
    --w-navy-soft: #123B61;
    --w-cyan: #0AA5D8;
    --w-cyan-dk: #087DAC;
    --w-ink: #102342;
    --w-muted: #697A94;
    --w-line: #DCE5EF;
    --w-surface: #FFFFFF;
    --w-canvas: #F3F7FB;
    --w-green: #0A9B72;
    --w-red: #D64B56;
    --w-r: 10px;

    width: 100%;
    max-width: 940px;
    font-family: var(--d-font-sans);
    color: var(--w-ink);
}

.pos-contact-modal .pos-modal-content,
.pos-contact-modal .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(11, 35, 69, .30);
    background: var(--w-surface);
}

/* ── header ── */
.pos-contact-modal .pos-modal-header {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--w-navy) 0%, var(--w-navy-soft) 62%, var(--w-cyan-dk) 100%);
    border: 0;
}
.pos-contact-modal .pos-modal-header-bg { display: none; }
.pos-contact-modal .pos-modal-header-content { display: flex; align-items: center; gap: 14px; }
.pos-contact-modal .pos-modal-icon {
    width: 40px; height: 40px; flex: none; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
}
.pos-contact-modal .pos-modal-title {
    margin: 0; color: #fff;
    font-size: 19px; font-weight: 700; letter-spacing: -.01em;
}
.pos-contact-modal .pos-modal-close {
    position: absolute; top: 16px; right: 16px;
    width: 32px; height: 32px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.18); border-radius: 9px;
    background: rgba(255,255,255,.10); color: rgba(255,255,255,.85);
    opacity: 1; text-shadow: none;
}
.pos-contact-modal .pos-modal-close:hover { background: rgba(255,255,255,.20); color: #fff; }

/* ── body: a real grid, not cramped 4-across Bootstrap columns ── */
.pos-contact-modal .pos-modal-body,
.pos-contact-modal .modal-body { padding: 22px 24px 8px; background: var(--w-surface); }

.pos-contact-modal .modal-body .row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4px 18px;
    margin: 0;
}
/* Bootstrap's clearfix would become two grid items and shift every field. */
.pos-contact-modal .modal-body .row::before,
.pos-contact-modal .modal-body .row::after { content: none; }
/* The same problem one level down: the markup also carries standalone
   <div class="clearfix"></div> elements between fields. There are no floats
   left for them to clear, but each is still a grid item holding a cell, which
   pushes every field after it one column out of line. */
.pos-contact-modal .modal-body .row > .clearfix { display: none; }
.pos-contact-modal .modal-body .row > [class*="col-"] {
    width: auto; float: none; padding: 0; grid-column: span 6;
}
.pos-contact-modal .modal-body .row > .col-md-3 { grid-column: span 3; }
.pos-contact-modal .modal-body .row > .col-md-4 { grid-column: span 4; }
.pos-contact-modal .modal-body .row > .col-md-6 { grid-column: span 6; }
.pos-contact-modal .modal-body .row > .col-md-8 { grid-column: span 8; }
.pos-contact-modal .modal-body .row > .col-md-12 { grid-column: span 12; }

.pos-contact-modal .form-group,
.pos-contact-modal .pos-form-group { margin-bottom: 16px; }

.pos-contact-modal .form-group > label,
.pos-contact-modal .control-label {
    display: block; margin-bottom: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; color: var(--w-muted); line-height: 1.3;
}

/* The decorative addon boxes are what squeezed the inputs until placeholders
   clipped ("Alternate contac"). Removing them returns the width to the field. */
.pos-contact-modal .input-group-addon,
.pos-contact-modal .pos-input-addon { display: none !important; }
.pos-contact-modal .input-group,
.pos-contact-modal .pos-input-group { display: block; width: 100%; }

.pos-contact-modal .form-control,
.pos-contact-modal .pos-form-control,
.pos-contact-modal select.form-control,
.pos-contact-modal .select2-container--default .select2-selection--single {
    width: 100% !important;
    height: 42px; min-height: 42px;
    padding: 0 13px;
    border: 1px solid var(--w-line) !important;
    border-radius: var(--w-r) !important;
    background: #FBFCFE !important;
    color: var(--w-ink);
    font-size: 13.5px;
    box-shadow: none !important;
}
.pos-contact-modal textarea.form-control { height: auto; min-height: 80px; padding: 11px 13px; }
.pos-contact-modal .form-control:focus,
.pos-contact-modal .pos-form-control:focus {
    border-color: var(--w-cyan) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(10,165,216,.14) !important;
}
.pos-contact-modal .select2-container { width: 100% !important; }
.pos-contact-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px; padding: 0; color: var(--w-ink);
}
.pos-contact-modal .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 9px; }

.pos-contact-modal .help-block,
.pos-contact-modal small { font-size: 11.5px; color: #95A3B8; }

/* individual / business choice */
.pos-contact-modal .pos-radio-group { display: flex; gap: 10px; align-items: center; height: 42px; }
.pos-contact-modal .pos-radio-label {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 16px; height: 42px; margin: 0;
    border: 1px solid var(--w-line); border-radius: var(--w-r);
    background: #FBFCFE; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--w-ink);
}
.pos-contact-modal .pos-radio-label:hover { border-color: var(--w-cyan); background: #fff; }

/* secondary disclosure */
.pos-contact-modal .btn-link,
.pos-contact-modal a[data-toggle="collapse"],
.pos-contact-modal .pos-more-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; margin: 4px 0 8px;
    border: 1px solid var(--w-line) !important;
    border-radius: var(--w-r);
    background: #fff !important;
    color: var(--w-cyan) !important;
    font-size: 12.5px; font-weight: 600; text-decoration: none !important;
    box-shadow: none !important;
}
.pos-contact-modal .btn-link:hover { background: #EAF7FC !important; }

/* ── footer ── */
.pos-contact-modal .modal-footer,
.pos-contact-modal .pos-modal-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    margin: 0; padding: 16px 24px;
    border-top: 1px solid var(--w-line);
    background: var(--w-canvas);
}
.pos-contact-modal .modal-footer .btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 42px; padding: 0 20px;
    border: 1px solid var(--w-line); border-radius: var(--w-r);
    background: #fff; color: var(--w-ink);
    font-size: 13px; font-weight: 600;
}
.pos-contact-modal .modal-footer .btn:hover { background: #EEF3F9; }
.pos-contact-modal .modal-footer .btn-primary,
.pos-contact-modal .modal-footer button[type="submit"] {
    border-color: transparent;
    background: linear-gradient(135deg, var(--w-cyan), var(--w-cyan-dk));
    color: #fff;
    box-shadow: 0 4px 14px rgba(10,165,216,.32);
}
.pos-contact-modal .modal-footer .btn-primary:hover { color: #fff; }

@media (max-width: 991px) {
    .pos-contact-modal .modal-body .row > [class*="col-"] { grid-column: span 6 !important; }
}
@media (max-width: 767px) {
    .pos-contact-modal .modal-body .row > [class*="col-"] { grid-column: span 12 !important; }
    .pos-contact-modal .pos-modal-header { padding: 16px 18px; }
    .pos-contact-modal .modal-body { padding: 18px 18px 4px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Layout pass — written against the live DOM rather than guessed at.
   The modal's fields are Bootstrap col-md-* inside .row; the cramping comes
   from four col-md-3 controls sharing one row while each still reserved room
   for an addon box.
   ══════════════════════════════════════════════════════════════════════════ */

/* Contact channels: two across, not four. Placeholders like "Alternate
   contact number" simply do not fit a quarter-width control. */
.pos-contact-modal .modal-body .row > .col-md-3:not(#more_div .col-md-3) { grid-column: span 6; }

/* Inside More information the fields are short (city, zip, custom 1-10),
   so four across is right there. */
.pos-contact-modal #more_div .col-md-3 { grid-column: span 3; }
.pos-contact-modal #more_div .col-md-4 { grid-column: span 4; }
.pos-contact-modal #more_div .col-md-6 { grid-column: span 6; }
.pos-contact-modal #more_div .col-md-8 { grid-column: span 8; }
.pos-contact-modal #more_div .col-md-12 { grid-column: span 12; }
/* Offsets are a float-grid idea; in a real grid the column start says it. */
.pos-contact-modal #more_div > .col-md-offset-2 { grid-column: 3 / span 8; }
.pos-contact-modal #more_div {
    grid-column: span 12;
    display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 4px 18px;
}
.pos-contact-modal #more_div.hide { display: none; }

/* The Bootstrap reset above only reaches `.row > [class*="col-"]`, and these
   are children of #more_div, not of .row. So they kept float:left and a
   percentage width -- and a grid item that is `width: 25%` inside a 3-of-12
   area collapses to a sliver, which is what reduced the address block to
   stubs reading "La", "St", "Bu".

   Only direct children: columns nested deeper (inside the shipping block) sit
   in ordinary Bootstrap rows and still want their float widths. */
.pos-contact-modal #more_div > [class*="col-"] {
    width: auto;
    float: none;
    padding: 0;
}

/* Bootstrap clears floats with empty <div class="clearfix">. There are no
   floats left to clear here, but each one is still a grid item taking a cell,
   which pushed every following field one column out of alignment. */
.pos-contact-modal #more_div > .clearfix { display: none; }

/* The <hr>s are the only structure this form has — make them read as
   section rules rather than stray lines. */
.pos-contact-modal .modal-body hr {
    grid-column: span 12;
    margin: 18px 0 14px;
    border: 0; border-top: 1px solid var(--w-line);
}
.pos-contact-modal .modal-body .col-md-12:has(> hr) { grid-column: span 12; }

/* "More Informations" was a centred primary button — it read as a submit
   action. As a full-width ghost row it reads as the disclosure it is. */
.pos-contact-modal .more_btn {
    display: flex !important; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 42px; margin: 6px 0 4px; float: none !important;
    border: 1px dashed #C9D6EA !important; border-radius: var(--w-r) !important;
    background: #FBFCFE !important; color: var(--w-cyan) !important;
    font-size: 12.5px !important; font-weight: 600 !important;
    box-shadow: none !important;
}
.pos-contact-modal .more_btn:hover { background: #EAF7FC !important; border-style: solid !important; }

/* Individual / Business as a segmented choice. */
.pos-contact-modal .pos-radio-group { flex-wrap: wrap; }
.pos-contact-modal .pos-radio-input { position: absolute; opacity: 0; pointer-events: none; }
.pos-contact-modal .pos-radio-input:checked + .pos-radio-mark + * ,
.pos-contact-modal .pos-radio-label:has(.pos-radio-input:checked) {
    border-color: var(--w-cyan); background: #EAF7FC; color: var(--w-navy);
}
.pos-contact-modal .pos-radio-mark {
    width: 14px; height: 14px; flex: none; border-radius: 50%;
    border: 2px solid #C3D0E0; background: #fff;
}
.pos-contact-modal .pos-radio-label:has(.pos-radio-input:checked) .pos-radio-mark {
    border-color: var(--w-cyan); box-shadow: inset 0 0 0 3px #fff; background: var(--w-cyan);
}

/* Shipping map block should not collapse to nothing. */
.pos-contact-modal #map:not(:empty) { height: 220px; border-radius: var(--w-r); overflow: hidden; }

/* Help text under a field shouldn't push the next row out of alignment. */
.pos-contact-modal .help-block { margin: 6px 0 0; }