/* ── Forms ────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }

label {
    display: block;
    color: #4a5568;
    font-weight: 500;
    margin-bottom: 6px;
    font-size: 14px;
}

input, select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: white;
    color: #2d3748;
}

/* The rule above is meant for text fields. Left to apply to checkboxes and
   radios it stretches each one across its whole row and squeezes the label
   beside it to nothing — which is exactly what made the org selector look
   broken. They size to their own glyph. */
input[type="checkbox"], input[type="radio"] {
    width: auto;
    padding: 0;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.12);
}

textarea { resize: vertical; min-height: 80px; }

/* ── Buttons ──────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 40px;
    white-space: nowrap;
    touch-action: manipulation;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102,126,234,0.35);
}

.btn-secondary {
    background: #f7fafc;
    color: #4a5568;
    border: 1px solid #e2e8f0;
}
.btn-secondary:hover:not(:disabled) { background: #edf2f7; }

/* Icon-only buttons (PDF download/share pairs) — square padding, no label. */
.btn-icon { padding: 9px 11px; }
.btn-icon svg { display: block; }
.action-btn svg { display: inline-block; vertical-align: -2px; }

.btn-danger { background: #fc8181; color: white; }
.btn-danger:hover:not(:disabled) { background: #f56565; }

.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.btn-group { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* ── Tables ───────────────────────────────────────────── */
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; }

/* Scroll shadows: a table with more columns than fit gives no hint of that on
   a touch device, where the scrollbar is invisible until a finger is already
   on it. This is the classic two-gradient "scroll shadow" trick — a shadow
   layer that scrolls with the content (so it sits right at the true edge of
   what's visible) paired with an opaque fade layer that stays pinned to the
   container (so the shadow fades out under it rather than cutting off
   sharply). The shadow is invisible at each end because there is nothing left
   to reveal there, which is what makes it read as "more this way" rather than
   a decorative border. Pepup's grids are the widest in the app (some run past
   30 columns), which is what made this loss of an affordance actually bite.
   Applying it to every table-container rather than only Pepup's costs
   nothing on a table that fits and helps identically wherever one doesn't. */
.table-container {
    background:
        linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 100% 0,
        linear-gradient(to right, rgba(45, 55, 72, 0.16), rgba(45, 55, 72, 0)),
        linear-gradient(to left, rgba(45, 55, 72, 0.16), rgba(45, 55, 72, 0)) 100% 0;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
    /* The fade layers scroll with the table (so they stay glued to whichever
       edge is actually cut off); the shadow layers stay put against the
       container (so they mark the container's true edge). */
    background-attachment: local, local, scroll, scroll;
}

table { width: 100%; border-collapse: collapse; min-width: 400px; }

th {
    background: #f7fafc;
    padding: 11px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

td {
    padding: 11px 12px;
    border-bottom: 1px solid #f0f4f8;
    font-size: 14px;
    color: #2d3748;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafbff; }

.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.status-active { background: #c6f6d5; color: #22543d; }
.status-inactive { background: #fed7d7; color: #742a2a; }
.status-void { background: #e2e8f0; color: #718096; }

.action-btns { display: flex; gap: 6px; flex-wrap: wrap; }

.action-btn {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    min-height: 30px;
    white-space: nowrap;
}
.action-btn-edit { background: #bee3f8; color: #2c5282; }
.action-btn-delete { background: #fed7d7; color: #742a2a; }

/* ── Messages ─────────────────────────────────────────── */
.message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    display: none;
    animation: slideIn 0.25s ease-out;
}
.message.show { display: block; }
.message.success { background: #c6f6d5; color: #22543d; border-left: 4px solid #48bb78; }
.message.error   { background: #fed7d7; color: #742a2a; border-left: 4px solid #f56565; }
.message.info    { background: #bee3f8; color: #2c5282; border-left: 4px solid #4299e1; }

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Loading ──────────────────────────────────────────── */
#loadingOverlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
#loadingOverlay.show { display: flex; }

.loader {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Warning Banner ───────────────────────────────────── */
.warning-banner {
    padding: 10px 14px;
    background: #fefcbf;
    color: #744210;
    border-left: 4px solid #f6ad55;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
}

/* ── Toggle Switch ────────────────────────────────────── */
.toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e0;
    border-radius: 24px;
    transition: 0.25s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle input:checked + .toggle-slider { background: #667eea; }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ── Modals ───────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.modal-box {
    background: white;
    border-radius: 16px;
    padding: 28px 28px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    max-height: 90vh;
    overflow-y: auto;
}

/* Org filter — the multi-select that replaced the "Include sub-orgs" checkbox
   on the grids. Sits in the same header row the checkbox used to occupy, so it
   has to stay compact and not push the heading around. */
.orgfilter {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

.orgfilter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 13px;
    color: #4a5568;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    max-width: 260px;
}

.orgfilter-toggle:hover { border-color: #cbd5e0; }

.orgfilter-toggle:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 1px;
}

.orgfilter-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A narrowed filter is the usual explanation for "rows are missing", so make
   it visually obvious that one is applied rather than leaving it to be read. */
.orgfilter-narrowed .orgfilter-toggle {
    border-color: #667eea;
    color: #4c51bf;
    background: #f7f8ff;
}

.orgfilter-caret { font-size: 10px; color: #a0aec0; }

.orgfilter-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 2000;
    min-width: 240px;
    max-width: 320px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.14);
    padding: 6px;
    /* An org tree with many outlets, or a wide column-visibility list, can be
       taller than a phone screen. Uncapped, that content ran straight off the
       bottom of the viewport with no way to reach it — not a cosmetic
       overflow, an unreachable control. Every panel that shares this "toggle
       button opens an absolutely-positioned box" pattern gets the same cap:
       this one, .col-picker-panel (the per-grid column-visibility gear, built
       entirely from inline styles in JS, so this is the only place it's
       capped at all), and Pepup's own .pepup-filter-panel below. */
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

.col-picker-panel,
.pepup-filter-panel {
    max-height: min(60vh, 480px);
    overflow-y: auto;
}

/* Below ~640px a corner-anchored dropdown stops being a safe pattern: the
   toggle button that anchors it is rarely at the screen edge, so a
   fixed-width box positioned relative to that button can run off either side
   — confirmed on the Sales/Purchases Filters panel, which overflowed the
   right edge by 23px and the bottom by 555px with nothing to scroll it.
   Rather than compute a safe anchor per button, all three panel types
   convert to the same fixed, viewport-anchored sheet: full width minus a
   margin, pinned near the bottom, capped height. That is unconditionally
   on-screen no matter where its toggle sits.
   !important is necessary and narrow in scope: every instance of these three
   panels sets position/right/left/width inline (JS-built, in the case of the
   column picker), and inline styles otherwise win over any external rule —
   including one inside a media query. */
@media (max-width: 640px) {
    .orgfilter-panel,
    .col-picker-panel,
    .pepup-filter-panel {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: 12px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: 70vh !important;
    }
}

.orgfilter-actions {
    display: flex;
    gap: 6px;
    padding: 4px 4px 8px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 4px;
}

.orgfilter-actions button {
    flex: 1;
    padding: 5px 8px;
    font-size: 12px;
    color: #4a5568;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
}

.orgfilter-actions button:hover { background: #edf2f7; }

.orgfilter-list {
    max-height: 260px;
    overflow-y: auto;
}

/* Name on the left, checkbox on the right. Only the name carries the depth
   indent — the checkboxes stay in one straight column, which is what makes a
   list of six outlets scannable. */
.orgfilter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px;
    font-size: 13px;
    color: #2d3748;
    border-radius: 6px;
    cursor: pointer;
    white-space: normal;
}

.orgfilter-name {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.orgfilter-item:hover { background: #f7fafc; }

/* The base stylesheet sets `input { width: 100% }` for form fields. Applied to
   these checkboxes it stretched each one to the full row width and collapsed
   the label beside it to nothing, which is what made this list look broken. */
.orgfilter-item input[type="checkbox"] {
    cursor: pointer;
    flex: none;
    width: auto;
    min-width: 0;
    margin: 0;
}

/* Phone input — country picker glued to the left of the number field, styled to
   read as one control. The number input keeps whatever width the form gave it. */
.phoneinput {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.phoneinput-country {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    font-size: 14px;
    color: #2d3748;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-right: none;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
}

.phoneinput-country:hover { background: #edf2f7; }
.phoneinput-country:focus-visible { outline: 2px solid #667eea; outline-offset: -2px; }

.phoneinput-flag { font-size: 16px; line-height: 1; }
.phoneinput-dial { font-variant-numeric: tabular-nums; }
.phoneinput-caret { font-size: 10px; color: #a0aec0; }

.phoneinput input.phoneinput-number {
    flex: 1;
    min-width: 0;
    border-radius: 0 8px 8px 0;
}

.phoneinput-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 2500;
    width: 300px;
    max-width: 90vw;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.14);
    padding: 6px;
}

.phoneinput-search {
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 6px;
}

.phoneinput-list {
    max-height: 260px;
    overflow-y: auto;
}

.phoneinput-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    font-size: 13px;
    color: #2d3748;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}

.phoneinput-option:hover { background: #f7fafc; }
.phoneinput-option.is-selected { background: #ebf4ff; color: #4c51bf; }
.phoneinput-optname { flex: 1; min-width: 0; }
.phoneinput-empty { padding: 12px 8px; font-size: 13px; color: #a0aec0; text-align: center; }

/* Import result panel. A partial import is the common case — some rows in,
   some skipped — so the styling has to read as "look at this", not as a plain
   success or a plain failure. */
.import-report {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
}

.import-report-ok      { background: #c6f6d5; color: #22543d; border-left: 4px solid #48bb78; }
.import-report-partial { background: #fefcbf; color: #744210; border-left: 4px solid #f6ad55; }
.import-report-error   { background: #fed7d7; color: #742a2a; border-left: 4px solid #f56565; }

.import-report-list {
    margin: 8px 0 0;
    padding-left: 20px;
    max-height: 220px;
    overflow-y: auto;
}

.import-report-list li { margin-bottom: 2px; }
.import-report-hint { margin: 8px 0 0; opacity: 0.85; }

/* "Same as parent" tick beneath an org's billing fields. Sits under the input
   it governs rather than beside it, so the field keeps its full width. */
.inherit-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 400;
    color: #718096;
    cursor: pointer;
}

.inherit-toggle input { cursor: pointer; }

/* An inheriting field is read-only, and its placeholder shows what will be
   used — greying it makes clear the blank is deliberate, not unsaved. */
.form-group input:disabled,
.form-group textarea:disabled {
    background: #f7fafc;
    color: #a0aec0;
    cursor: not-allowed;
}

/* Show/hide toggle for app-password fields (SMTP passwords). These are long,
   easy to mistype, and rejected only after a save — letting someone check what
   they pasted beats guessing why the send failed. */
.pwd-wrap {
    position: relative;
}

.pwd-wrap input {
    padding-right: 40px;
}

.pwd-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 6px 8px;
    color: #a0aec0;
    border-radius: 6px;
}

.pwd-toggle:hover { background: #f7fafc; color: #4a5568; }
.pwd-toggle:focus-visible { outline: 2px solid #667eea; outline-offset: 1px; }

/* ── ItemPicker (type-to-search for services/products) ───────────────── */
.ipk { display: inline-block; width: 100%; min-width: 0; }
.ipk-input {
    width: 100%;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}
.ipk-input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 2px rgba(102,126,234,0.15); }
.ipk-menu {
    position: fixed;
    z-index: 5000;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow-y: auto;
    padding: 4px 0;
}
.ipk-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: baseline;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
}
.ipk-row:hover, .ipk-row.ipk-hi { background: #f0f4ff; }
.ipk-name { font-weight: 500; color: #2d3748; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ipk-sub { font-size: 11px; color: #a0aec0; white-space: nowrap; }
.ipk-price { font-size: 12px; font-weight: 600; color: #4a5568; min-width: 52px; text-align: right; }
.ipk-empty { padding: 8px 12px; font-size: 12px; color: #a0aec0; }
.ipk.ipk-item { min-width: 190px; }
.ipk.ipk-prof { width: 230px; }
.ipk.ipk-prof .ipk-input { font-size: 12px; }