/* bpgupload-modern.css
   Framework7-inspired modern styling for the bpgupload.com upload pages.
   Adapted from adama-dev/assets/css/adama-mobile.css.

   Bootstrap 3 is still loaded alongside this stylesheet. To avoid clashes:
   - Form-specific rules (.form-group, .form-control, label) are scoped under
     the .modern-form parent class — only the pages we redesign opt in.
   - Component rules (.card, .alert-box, .action-btn, .text-caption, etc.)
     are global, using class names that DON'T exist in Bootstrap 3.
*/

/* ============================================================
   Color palette + design tokens
   ============================================================ */
:root {
    --bpg-primary:         #009ef7;
    --bpg-primary-dark:    #0078c8;
    --bpg-primary-light:   #e8f4fd;
    --bpg-success:         #50cd89;
    --bpg-warning:         #ffc107;
    --bpg-danger:          #f1416c;
    --bpg-info:            #009ef7;

    --bpg-text:            #1c1c1e;
    --bpg-text-secondary:  #6c757d;
    --bpg-text-muted:      #8e8e93;

    --bpg-border:          #e0e0e0;
    --bpg-border-soft:     #f0f0f0;
    --bpg-bg:              #f7f7f8;
    --bpg-card-bg:         #ffffff;

    --bpg-font-family:     'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --bpg-radius:          10px;
    --bpg-radius-lg:       16px;
    --bpg-shadow-card:     0 1px 3px rgba(0, 0, 0, 0.08);
    --bpg-shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   Cards
   ============================================================ */
.card {
    background: var(--bpg-card-bg);
    border-radius: var(--bpg-radius);
    box-shadow: var(--bpg-shadow-card);
    margin: 0 0 16px 0;
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    font-weight: 600;
    font-size: 15px;
    color: var(--bpg-text);
    border-bottom: 1px solid var(--bpg-border-soft);
    background: #fafbfc;
}
.card-header .icon {
    font-size: 20px;
    color: var(--bpg-primary);
    flex-shrink: 0;
}
.card-header span { flex: 1 1 auto; }

.card-content {
    padding: 18px;
}

.card-section {
    padding: 14px 18px;
    border-top: 1px solid var(--bpg-border-soft);
    background: #fafbfc;
}

/* ============================================================
   Alert boxes (inline messages)
   ============================================================ */
.alert-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--bpg-radius);
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 12px 0;
}
.alert-box .icon { font-size: 22px; flex-shrink: 0; }
.alert-box span { flex: 1 1 auto; }
.alert-success { background: #d4edda; color: #155724; }
.alert-warning { background: #fff3cd; color: #856404; }
.alert-danger  { background: #f8d7da; color: #721c24; }
.alert-info    { background: #cce5ff; color: #004085; }

/* ============================================================
   Action buttons
   ============================================================ */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: none;
    border-radius: var(--bpg-radius);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    transition: transform 0.1s ease, opacity 0.1s ease, background 0.15s ease;
    -webkit-appearance: none;
    text-decoration: none;
}
.action-btn:active { transform: scale(0.98); opacity: 0.9; }
.action-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 158, 247, 0.25); }
.action-btn .icon { font-size: 18px; }

.action-btn-primary   { background: var(--bpg-primary);   color: #ffffff; }
.action-btn-primary:hover   { background: var(--bpg-primary-dark); color: #ffffff; }

.action-btn-secondary { background: #e8eaed;          color: var(--bpg-text); }
.action-btn-secondary:hover { background: #d6d9dc; color: var(--bpg-text); }

.action-btn-danger    { background: var(--bpg-danger);    color: #ffffff; }
.action-btn-danger:hover    { background: #c82333; color: #ffffff; }

.action-btn-success   { background: var(--bpg-success);   color: #ffffff; }
.action-btn-success:hover   { background: #41b378; color: #ffffff; }

.action-btn-block {
    display: flex;
    width: 100%;
}

.action-btn-elevated  { box-shadow: var(--bpg-shadow-elevated); }

/* ============================================================
   Typography helpers
   ============================================================ */
.text-title    { font-size: 17px; font-weight: 600; color: var(--bpg-text); }
.text-section  { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--bpg-text); }
.text-body     { font-size: 15px; font-weight: 400; color: var(--bpg-text); }
.text-label    { font-size: 13px; font-weight: 500; color: var(--bpg-text-secondary); }
.text-caption  { font-size: 12px; font-weight: 400; color: var(--bpg-text-muted); }
.text-muted    { color: var(--bpg-text-muted); }
.text-primary-color { color: var(--bpg-primary); }
.text-danger-color  { color: var(--bpg-danger); }
.text-success-color { color: var(--bpg-success); }

/* ============================================================
   Hero / page header
   ============================================================ */
.modern-hero {
    background: linear-gradient(135deg, var(--bpg-primary) 0%, var(--bpg-primary-dark) 100%);
    color: #ffffff;
    padding: 32px 24px;
    text-align: center;
}
.modern-hero h1 {
    margin: 0 0 8px 0;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.modern-hero p {
    margin: 0;
    font-size: 15px;
    opacity: 0.92;
}

.modern-hero-card {
    background: var(--bpg-card-bg);
    border-radius: var(--bpg-radius-lg);
    padding: 28px 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    max-width: 540px;
    margin: 32px auto;
    text-align: center;
}
.modern-hero-card h2 {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--bpg-text);
}
.modern-hero-card p {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: var(--bpg-text-secondary);
}

/* ============================================================
   Modern form (opt-in via .modern-form parent class)
   ============================================================ */
.modern-form { font-family: var(--bpg-font-family); }

.modern-form .form-group {
    margin-bottom: 16px;
}
.modern-form .form-group:last-child { margin-bottom: 0; }

.modern-form label,
.modern-form .control-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--bpg-text-secondary);
    margin-bottom: 6px;
    padding: 0;
}
.modern-form .control-label .required-star,
.modern-form .required-star {
    color: var(--bpg-danger);
    margin-left: 2px;
}

.modern-form input[type="text"],
.modern-form input[type="email"],
.modern-form input[type="tel"],
.modern-form input[type="password"],
.modern-form input[type="number"],
.modern-form input[type="date"],
.modern-form input[type="time"],
.modern-form input[type="datetime-local"],
.modern-form .form-control,
.modern-form select,
.modern-form textarea {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    color: var(--bpg-text);
    background: var(--bpg-card-bg);
    border: 1px solid #d1d1d6;
    border-radius: var(--bpg-radius);
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    line-height: 1.4;
    box-shadow: none;
    height: auto;
}
.modern-form textarea { resize: vertical; min-height: 92px; }
.modern-form input:focus,
.modern-form .form-control:focus,
.modern-form select:focus,
.modern-form textarea:focus {
    border-color: var(--bpg-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 158, 247, 0.15);
}
.modern-form input::placeholder,
.modern-form textarea::placeholder { color: #c7c7cc; }

/* Select2 v3 + v4 — bring it close to our input style without rewriting select2.css */
.modern-form .select2-container .select2-choice,
.modern-form .select2-container--default .select2-selection--single {
    height: 42px;
    border: 1px solid #d1d1d6;
    border-radius: var(--bpg-radius);
    background: var(--bpg-card-bg);
    padding: 4px 12px;
    font-size: 14px;
}
.modern-form .select2-container .select2-choice > .select2-chosen,
.modern-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    color: var(--bpg-text);
    padding: 0;
}
.modern-form .select2-container--default.select2-container--open .select2-selection--single,
.modern-form .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--bpg-primary);
    box-shadow: 0 0 0 3px rgba(0, 158, 247, 0.15);
}

/* Inline form row (multi-column inside a card) — uses Bootstrap col-* still */
.modern-form .row + .row { margin-top: 0; }

/* Bootstrap-validator error feedback inside .modern-form */
.modern-form .help-block.with-errors {
    color: var(--bpg-danger);
    font-size: 12px;
    margin-top: 4px;
}
.modern-form .has-error input,
.modern-form .has-error select,
.modern-form .has-error textarea,
.modern-form .has-error .form-control {
    border-color: var(--bpg-danger);
    box-shadow: 0 0 0 3px rgba(241, 65, 108, 0.15);
}

/* Remember-me / checkbox row */
.modern-form .checkbox-inline,
.modern-form .checkbox {
    padding: 0;
    margin: 0;
}
.modern-form .checkbox-inline label,
.modern-form .checkbox label,
.modern-form label.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bpg-text);
    margin: 0;
    cursor: pointer;
}

/* Native checkboxes & radios — three different stylesheets try to hide these by default:
   - F7 bundle: `input[type=checkbox]{display:none}`
   - devoops style_v1.css: `.checkbox-inline input[type=checkbox] { position:absolute; clip:rect(0,0,0,0); }`
   - Bootstrap 3: positions checkbox absolutely to the left
   We need !important on every defensive property to win against all three. */
.modern-form input[type="checkbox"],
.modern-form input[type="radio"] {
    display: inline-block !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    clip: auto !important;
    clip-path: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    accent-color: var(--bpg-primary);
    vertical-align: middle;
    cursor: pointer;
    box-shadow: none;
    border: none;
    background: none;
    flex-shrink: 0;
}

/* ============================================================
   Per-file metadata zone — replaces the legacy .box.file-zone look
   ============================================================ */
.file-zone-card {
    background: var(--bpg-card-bg);
    border: 1px solid var(--bpg-border-soft);
    border-radius: var(--bpg-radius);
    box-shadow: var(--bpg-shadow-card);
    margin: 0 0 12px 0;
    overflow: hidden;
}
.file-zone-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bpg-primary-light);
    color: var(--bpg-primary-dark);
    font-weight: 600;
    font-size: 14px;
    word-break: break-all;
}
.file-zone-card-header .icon {
    font-size: 18px;
    color: var(--bpg-primary);
    flex-shrink: 0;
}
.file-zone-card-content { padding: 14px 16px; }

/* ============================================================
   Uppy dashboard sizing override (was in includes/uppyuploader.cfm)
   ============================================================ */
.uppy-Root .uppy-Dashboard-inner {
    width: 100% !important;
    min-height: 300px;
}

/* ============================================================
   F7 bare-button reset — F7's bundle globally sets:
     button { display: block }
     button { width: 100% }
   which breaks any third-party widget that uses bare <button>
   elements (Uppy's dashboard toolbar, jQuery UI datepicker, etc).
   F7's own .button class is higher-specificity so it still wins.
   ============================================================ */
button {
    display: inline-block;
    width: auto;
}

/* ============================================================
   F7 viewport release — we only use F7 for toast/dialog/preloader,
   NOT as the page shell. Without this, F7's framework7-root class
   locks the viewport at 100vh with overflow:hidden so the page
   can't scroll past the fold.
   ============================================================ */
html, body {
    height: auto !important;
    overflow-x: hidden;
    overflow-y: auto !important;
}
.framework7-root,
#app.framework7-root {
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* ============================================================
   F7 toast color variants (used by window.bpgToast)
   ============================================================ */
.bpg-toast .toast-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--bpg-radius);
}
.bpg-toast .toast-content .icon { font-size: 20px; flex-shrink: 0; }
.bpg-toast .bpg-toast-text { flex: 1 1 auto; line-height: 1.35; }

.bpg-toast-success .toast-content { background: #50cd89; color: #ffffff; }
.bpg-toast-error   .toast-content { background: #f1416c; color: #ffffff; }
.bpg-toast-warning .toast-content { background: #ffc107; color: #1c1c1e; }
.bpg-toast-info    .toast-content { background: #009ef7; color: #ffffff; }

/* F7 preloader/dialog tweaks — match adama blue */
.dialog-button { color: var(--bpg-primary); }
.preloader-default .preloader-inner-circle { color: var(--bpg-primary); }

/* ============================================================
   Misc helpers
   ============================================================ */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 8px !important; }
.mt-2 { margin-top: 16px !important; }
.mt-3 { margin-top: 24px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 8px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mb-3 { margin-bottom: 24px !important; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.flex-row    { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.flex-end    { justify-content: flex-end; }
.flex-grow   { flex: 1 1 auto; }