/* ==========================================================================
   MARTIALTEK CRM - THE ULTIMATE MASTER THEME (UNIFIED & SAFE)
   ========================================================================== */

/* ==========================================================================
   SECTION 1: GLOBAL LAYOUT & NAVIGATION
   ========================================================================== */
body, html {
    background-color: var(--theme-bg-base) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--theme-text-main);
    overflow-x: hidden;
}

/* WIDE LAYOUT FOR DATA */
.apple-main-container { max-width: 96% !important; margin: 40px auto 40px auto !important; padding: 0; }

/* SAFE TYPOGRAPHY (No forced span/div coloring to protect badges & buttons) */
h1, h2, h3, h4, h5, h6, p, label { color: var(--theme-text-main); }
.text-muted, small, .help-block, th, .card-sub { color: var(--theme-text-muted) !important; }

a { color: var(--theme-primary); text-decoration: none; transition: 0.2s; }
a:hover { color: var(--theme-primary); opacity: 0.8; text-decoration: none; }

.header-title { font-size: 34px; font-weight: 800; color: var(--theme-text-headers, var(--theme-text-main)) !important; letter-spacing: -0.02em; margin: 0 0 25px 0; display: inline-block; }
.section-header { font-size: 16px !important; font-weight: 800 !important; color: var(--theme-text-main) !important; margin: 30px 0 15px 0 !important; border-bottom: 1px solid var(--theme-border) !important; padding-bottom: 10px !important; text-transform: uppercase; letter-spacing: 0.05em;}

/* PILL NAVIGATION */
.nav-wrapper { position: sticky; top: 20px; z-index: 1000; display: flex; justify-content: center; padding: 0; pointer-events: none; }
.apple-nav {
    pointer-events: auto; height: 70px; background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: saturate(180%) blur(25px); -webkit-backdrop-filter: saturate(180%) blur(25px);
    border: 1px solid var(--theme-border); box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    border-radius: 36px; display: flex; align-items: center; padding: 0 12px 0 24px; width: 96%; gap: 15px; 
}
.nav-brand { font-weight: 800; font-size: 17px; color: var(--theme-text-main) !important; display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none;}
.brand-logo-img { height: 44px; width: auto; object-fit:contain; border-radius: 4px; }
.brand-icon { background: var(--theme-primary); color: white; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 16px; }

.nav-links { display: flex; gap: 2px; align-items: center; }
.nav-links a { font-size: 13px; font-weight: 600; color: var(--theme-text-muted) !important; padding: 8px 12px; border-radius: 20px; transition: all 0.2s ease; display: flex; align-items: center; gap: 5px; cursor: pointer; text-decoration:none;}
.nav-links a:hover { color: var(--theme-text-main) !important; background: rgba(0, 0, 0, 0.05) !important; }
.nav-links a.active { color: #ffffff !important; background: var(--theme-primary) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }

.nav-dropdown { position: relative; display: flex; align-items: center; padding: 20px 0; }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--theme-bg-card); min-width: 180px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); border-radius: 12px; border: 1px solid var(--theme-border); padding: 8px; z-index: 1050; margin-top: -10px;}
.nav-dropdown-menu::after { content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 20px; background: transparent; }
.nav-dropdown:hover .nav-dropdown-menu { display: flex; flex-direction: column; }
.nav-dropdown-menu a { color: var(--theme-text-main) !important; padding: 10px 14px !important; border-radius: 8px !important; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; text-decoration: none;}
.nav-dropdown-menu a:hover { background: rgba(0,0,0,0.05) !important; color: var(--theme-primary) !important; }

.nav-actions { display: flex; align-items: center; margin-left: 10px; padding-left: 15px; border-left: 1px solid var(--theme-border); }
.nav-actions a { font-size: 13px; font-weight: 600; color: var(--theme-text-main) !important; background: var(--theme-input-bg); border: 1px solid var(--theme-border); padding: 8px 16px; border-radius: 20px; transition: 0.2s; text-decoration:none;}
.nav-actions a:hover { background: var(--theme-border); }

/* ==========================================================================
   SECTION 2: CARDS, INPUTS & BUTTONS
   ========================================================================== */
.apple-card, .modal-content, .pay-card {
    background-color: var(--theme-bg-card) !important; border: 1px solid var(--theme-border) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important; border-radius: var(--theme-radius) !important; 
    padding: 30px !important; margin-bottom: 30px !important;
}
.apple-card-header, .modal-header {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    background-color: transparent !important; border-bottom: 1px solid var(--theme-border) !important;
    border-top: none !important; padding: 0 0 15px 0 !important; margin: 0 0 25px 0 !important; flex-wrap: wrap !important; gap: 15px !important;
}
.apple-card-title, .modal-title { font-size: 20px !important; font-weight: 800 !important; margin: 0 !important; color: var(--theme-text-main) !important; }
.modal-footer { border-top: 1px solid var(--theme-border) !important; padding: 15px 0 0 0 !important; background: transparent !important; }

/* THE "RED BORDER" FIX - Neutral gray until clicked */
.form-group { margin-bottom: 20px !important; position: relative;}
label { font-size: 12px !important; font-weight: 800 !important; color: var(--theme-text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-bottom: 6px !important; display: block !important; }

.form-control, .excel-input, select, input[type="text"], input[type="number"], input[type="date"], textarea {
    background-color: var(--theme-input-bg) !important; border: 1px solid var(--theme-border) !important; 
    color: var(--theme-text-main) !important; border-radius: 8px !important; height: 44px !important;
    padding: 10px 14px !important; font-size: 14px !important; box-shadow: none !important;
    display: block !important; width: 100% !important; transition: border 0.2s, box-shadow 0.2s; font-weight: 500;
}
textarea.form-control { height: auto !important; }
.form-control::placeholder { color: var(--theme-text-muted) !important; opacity: 0.7 !important; }
.form-control:focus, .excel-input:focus { border-color: var(--theme-primary) !important; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15) !important; outline: none !important; }

select.form-control {
    -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2386868b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>') !important;
    background-repeat: no-repeat !important; background-position: right 15px center !important; background-size: 12px !important; padding-right: 40px !important;
}

.input-group { display: flex !important; align-items: stretch !important; width: 100% !important; }
.input-group .form-control { flex: 1 !important; margin-bottom:0 !important; }
.input-group-addon { background-color: var(--theme-bg-base) !important; border: 1px solid var(--theme-border) !important; color: var(--theme-text-muted) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 16px !important; font-weight: 600 !important; white-space: nowrap !important; }
.addon-left { border-radius: 8px 0 0 8px !important; border-right: none !important; }
.addon-right { border-radius: 0 8px 8px 0 !important; border-left: none !important; }

.chk-list, .form-check { display: flex !important; align-items: center !important; margin-bottom: 12px !important; gap: 8px; }
.chk-list input[type="checkbox"], .form-check input[type="checkbox"], .assoc-chk { accent-color: var(--theme-primary) !important; width: 18px !important; height: 18px !important; margin: 0 !important; cursor: pointer !important; }
.chk-list label, .form-check label, .assoc-container label { text-transform: none !important; font-size: 14px !important; color: var(--theme-text-main) !important; font-weight: 600 !important; cursor: pointer !important; margin: 0 !important; letter-spacing:normal !important; }

/* BUTTONS */
.btn { border-radius: 8px !important; font-weight: 700 !important; padding: 8px 16px !important; transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important; border: none !important; height: 44px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px; font-size:14px !important; cursor: pointer; }
.btn-sm { height: 36px !important; padding: 6px 14px !important; font-size: 13px !important; }
.btn-xs { height: 28px !important; padding: 4px 10px !important; font-size: 11px !important; border-radius: 6px !important;}
.btn-primary { background-color: var(--theme-primary) !important; color: #fff !important; box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; }
.btn-success { background-color: var(--theme-success) !important; color: #fff !important; }
.btn-danger { background-color: var(--theme-danger) !important; color: #fff !important; }
.btn-warning { background-color: #ff9500 !important; color: #fff !important; }
.btn-info { background-color: #5ac8fa !important; color: #fff !important; }
.btn-default { background-color: var(--theme-input-bg) !important; color: var(--theme-text-main) !important; border: 1px solid var(--theme-border) !important; }
.btn-default:hover { background-color: rgba(0,0,0,0.05) !important; }

/* BADGES */
.badge, .badge-pill, .label { padding: 4px 10px !important; border-radius: 12px !important; font-size: 11px !important; font-weight: 800 !important; display: inline-block !important; text-transform: uppercase; letter-spacing: 0.05em; }
.label-primary { background-color: rgba(0,122,255,0.1) !important; color: var(--theme-primary) !important; border: 1px solid rgba(0,122,255,0.2) !important; }
.label-success, .badge-active { background-color: rgba(52,199,89,0.1) !important; color: var(--theme-success) !important; border: 1px solid rgba(52,199,89,0.2) !important; }
.label-danger { background-color: rgba(255,59,48,0.1) !important; color: var(--theme-danger) !important; border: 1px solid rgba(255,59,48,0.2) !important; }
.label-warning { background-color: rgba(255,149,0,0.1) !important; color: #ff9500 !important; border: 1px solid rgba(255,149,0,0.2) !important; }
.label-default, .badge-inactive { background-color: var(--theme-input-bg) !important; color: var(--theme-text-muted) !important; border: 1px solid var(--theme-border) !important; }

/* ==========================================================================
   SECTION 3: TABLES & DASHBOARD TILES
   ========================================================================== */
.apple-table, .apple-excel-table { width: 100%; border-collapse: collapse; margin: 0; background: var(--theme-bg-card); }
.apple-table th, .apple-excel-table th { background: rgba(0,0,0,0.02) !important; color: var(--theme-text-muted) !important; padding: 12px 16px; text-transform: uppercase; font-size: 11px; font-weight: 800; border-bottom: 2px solid var(--theme-border) !important; text-align: left; position: sticky; top: 0; z-index: 10; letter-spacing: 0.05em; }
.apple-table td, .apple-excel-table td { padding: 16px; border-bottom: 1px solid var(--theme-border) !important; color: var(--theme-text-main) !important; font-size: 14px; vertical-align: middle; }
.apple-table tr:hover td { background: rgba(0,0,0,0.02) !important; }

.bento-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 40px; }
.bento-card {
    background: var(--theme-bg-card); border-radius: 12px; padding: 16px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid var(--theme-border);
    transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; 
    display: flex; flex-direction: column; justify-content: space-between; min-height: 110px; text-decoration: none !important;
}
.bento-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); z-index:2; }

/* Bento Colors (Safely forcing internal text colors) */
.bento-card.card-dark { background-color: var(--theme-bg-card) !important; border-color: var(--theme-border) !important; }
.bento-card.card-dark h3, .bento-card.card-dark p, .bento-card.card-dark span { color: var(--theme-text-main) !important; }
.bento-card.card-dark .card-icon { color: var(--theme-text-main) !important; opacity: 0.05 !important; }

.bento-card.card-blue { background-color: #f0f8ff !important; border-color: #cce5ff !important; }
.bento-card.card-blue h3, .bento-card.card-blue p, .bento-card.card-blue span { color: #003366 !important; }
.bento-card.card-green { background-color: #f0fdf4 !important; border-color: #c3e6cb !important; }
.bento-card.card-green h3, .bento-card.card-green p, .bento-card.card-green span { color: #0f401b !important; }
.bento-card.card-purple { background-color: #f9f0ff !important; border-color: #e2c3ff !important; }
.bento-card.card-purple h3, .bento-card.card-purple p, .bento-card.card-purple span { color: #3b177d !important; }
.bento-card.card-orange { background-color: #fff5e6 !important; border-color: #ffe0b2 !important; }
.bento-card.card-orange h3, .bento-card.card-orange p, .bento-card.card-orange span { color: #7a3000 !important; }

.bento-card:not(.card-dark) .card-icon { color: rgba(0,0,0,0.08) !important; }
.bento-card:not(.card-dark) .stat-text { opacity: 0.85; font-weight: 700; }
.card-icon { position: absolute; right: -10px; top: -10px; font-size: 80px; transform: rotate(-10deg); pointer-events: none; opacity: 0.08 !important;}
.card-img-icon { position: absolute; right: -10px; top: -10px; width: 95px; height: 95px; object-fit: contain; transform: rotate(-10deg); pointer-events: none; opacity: 0.12; filter: grayscale(100%); }
.bento-card h3 { font-size: 28px !important; font-weight: 800 !important; margin: 0 0 2px 0 !important; letter-spacing: -0.5px !important; }
.bento-card p { font-size: 13px !important; font-weight: 700 !important; margin: 0 !important; text-transform: uppercase; letter-spacing: 0.05em; }
.card-stats { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; font-weight: 700; }

/* ==========================================================================
   SECTION 4: PAGE SPECIFIC - ADD / EDIT / ADMIN
   ========================================================================== */
.photo-drop-zone { width: 110px; height: 110px; border: 2px dashed var(--theme-border) !important; border-radius: 24px !important; background: rgba(128,128,128,0.04) !important; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.2s; margin: 0 auto; }
.photo-drop-zone:hover, .dropzone-wrapper:hover { border-color: var(--theme-primary) !important; background: rgba(0,0,0,0.05) !important; }
.dropzone-wrapper { border: 2px dashed var(--theme-border) !important; border-radius: 12px !important; background: var(--theme-input-bg) !important; text-align: center; cursor: pointer; display: flex; flex-direction:column; align-items: center; justify-content: center; transition: all 0.2s; }
.photo-preview { width: 110px; height: 110px; object-fit: cover; border-radius: 24px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; cursor: pointer; transition: 0.2s; margin: 0 auto; }
.photo-preview:hover { opacity: 0.8 !important; }

.shop-row { background: var(--theme-input-bg) !important; border: 1px solid var(--theme-border) !important; border-radius: 12px !important; padding: 15px !important; margin-bottom: 15px !important; display: flex !important; align-items: center !important; gap: 10px; }
.parent-box { background-color: rgba(255,59,48,0.05) !important; padding: 25px !important; border-left: 4px solid var(--theme-danger) !important; border-radius: 12px !important; border: 1px solid var(--theme-border) !important; margin-bottom:20px;}
.assoc-container { padding:20px !important; background:var(--theme-input-bg) !important; border-radius: 12px !important; border: 1px solid var(--theme-border) !important; border-left:4px solid var(--theme-primary) !important; margin-top:15px !important; }
.doc-card { background: var(--theme-input-bg) !important; border: 1px solid var(--theme-border) !important; border-radius: 12px !important; padding: 25px 20px !important; text-align: center !important; transition: all 0.2s ease; margin-bottom: 15px; }
.doc-card:hover { border-color: var(--theme-primary) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important; }

#customAutocompleteList { display:none; position:absolute; top:48px; left:0; z-index:9999; background:var(--theme-input-bg); border:1px solid var(--theme-border); border-radius:10px; width:calc(100% - 70px); max-height:200px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,0.2); }
.autocomplete-item { padding:15px !important; cursor:pointer !important; border-bottom:1px solid var(--theme-border) !important; font-size:15px !important; font-weight:600 !important; color:var(--theme-text-main) !important; }
.autocomplete-item:hover { background-color: rgba(0,0,0,0.05) !important; color: var(--theme-primary) !important; }

.badge-fam { background: rgba(0,122,255,0.15) !important; color: var(--theme-primary) !important; border:1px solid var(--theme-primary) !important; }

.nav-pills-custom { margin:0; padding:0; list-style:none; }
.prog-list-item { cursor: pointer; border-radius: 12px; margin-bottom: 4px; transition: all 0.2s ease; }
.prog-list-item > a { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; text-decoration: none; font-weight: 500; border-radius: 12px; color: var(--theme-text-main); }
.prog-list-item > a:hover { background-color: rgba(0,0,0,0.05); color: var(--theme-primary); }
.prog-list-item.active > a { background-color: var(--theme-primary) !important; color: #fff !important; }
.prog-list-item.active .label { background-color: rgba(0,0,0,0.2) !important; color: #fff !important; border:none; }
.icon-choice { width: 70px; height: 70px; border: 2px solid var(--theme-border); background: var(--theme-bg-card); border-radius: 12px; cursor: pointer; padding: 8px; transition: 0.2s; display: flex; justify-content: center; align-items: center; }
.icon-choice:hover { border-color: var(--theme-primary) !important; transform: scale(1.1); box-shadow: 0 4px 15px rgba(0,0,0,0.15); z-index: 2; }

/* ==========================================================================
   SECTION 5: PAGE SPECIFIC - PAYMENTS & SPREADSHEETS
   ========================================================================== */
.search-wrapper { position: relative; }
.search-wrapper input { padding-left: 36px !important; width: 260px; color: var(--theme-text-main) !important; }
.search-wrapper i { position: absolute; left: 14px; top: 15px; color: var(--theme-text-muted); }

.month-grid { display: flex; gap: 6px; padding: 0 24px 24px 24px !important; background: transparent; }
.month-box { flex: 1; text-align: center; background: var(--theme-input-bg) !important; border: 1px solid var(--theme-border) !important; border-radius: 8px !important; padding: 8px 0 !important; font-size: 11px !important; font-weight: 700 !important; color: var(--theme-text-main) !important; cursor:pointer; transition:0.2s; }
.month-box:hover { background: rgba(0,0,0,0.05) !important; transform:scale(1.05); }

.month-grid-mini { display: flex; flex-wrap: wrap; gap: 4px; width: 150px; margin: 0 auto; justify-content:center; }
.m-box { width: 22px; height: 22px; line-height: 22px; text-align: center; background: var(--theme-input-bg); border: 1px solid var(--theme-border); border-radius: 4px; font-size: 10px; font-weight: 700; color: var(--theme-text-muted); cursor: pointer; transition: 0.2s;}
.m-box:hover { transform: scale(1.1); z-index:2; background: rgba(0,0,0,0.1); color: var(--theme-text-main); }

.Approved { background: rgba(52,199,89,0.15) !important; color: var(--theme-success) !important; border-color: var(--theme-success) !important; }
.Denied { background: rgba(255,59,48,0.15) !important; color: var(--theme-danger) !important; border-color: var(--theme-danger) !important; }
.row-approved { border-left-color: var(--theme-success) !important; }
.row-denied { border-left-color: var(--theme-danger) !important; }

.table-wrapper { overflow-x: auto; max-height: 65vh; border-bottom: 1px solid var(--theme-border); }
.apple-excel-table { min-width: 1400px; }
.apple-excel-table td.readonly { background: rgba(0,0,0,0.02) !important; padding: 12px 15px !important; }
.row-dirty td { background: rgba(255, 149, 0, 0.05) !important; }
.row-dirty td.readonly { background: rgba(255, 149, 0, 0.08) !important; }
.row-dirty .excel-input { border-color: #ff9500 !important; color: #ff9500 !important; font-weight: bold; }
.save-bar { position: sticky; top: 0; background: var(--theme-bg-card); padding: 15px 24px; border-bottom: 1px solid var(--theme-border); z-index: 100; display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; }
.btn-excel { background: var(--theme-success); color: white; border: none; padding: 10px 20px; font-weight: 700; border-radius: 8px; transition: 0.2s; cursor: pointer; display:flex; align-items:center; gap:6px; font-size:14px; }
.btn-excel:disabled { background: var(--theme-input-bg); color:var(--theme-text-muted); cursor: not-allowed; box-shadow: none; border: 1px solid var(--theme-border);}

/* ==========================================================================
   SECTION 6: PAGE SPECIFIC - QR GENERATOR
   ========================================================================== */
.color-swatch-container { display: flex; gap: 10px; margin-bottom: 25px; align-items: center; flex-wrap: wrap; }
.color-swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.active { border-color: var(--theme-text-main); transform: scale(1.15); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.radio-group { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
.radio-group label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 15px; font-weight: 600; text-transform: none; }
.logo-panel { background: var(--theme-input-bg); border: 1px solid var(--theme-border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.crop-toggle-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px !important; font-weight: 600 !important; cursor: pointer; text-transform: none !important; margin-bottom:0 !important; background: var(--theme-bg-card); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--theme-border); transition:0.2s; }
.cropper-container-box { width: 100%; max-height: 250px; background: var(--theme-bg-card); border-radius: 8px; overflow: hidden; margin-top: 15px; border: 1px dashed var(--theme-border); }
.qr-output-container { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--theme-input-bg); border: 2px dashed var(--theme-border); border-radius: 16px; padding: 40px; min-height: 400px; transition: 0.3s; }
.qr-output-container.has-code { border-style: solid; border-color: var(--theme-primary); background: var(--theme-bg-card); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
#qrcode { background: #ffffff; padding: 15px; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); display: none; }
.empty-state { text-align: center; color: var(--theme-text-muted); }
.history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; }
.history-card { background: var(--theme-input-bg); border: 1px solid var(--theme-border); border-radius: 12px; padding: 15px; text-align: center; transition: 0.2s; position: relative; }

/* ==========================================================================
   SECTION 7: PAGE SPECIFIC - REPORTS
   ========================================================================== */
.welcome-feature { background: var(--theme-input-bg); border: 1px solid var(--theme-border); padding: 15px 25px; border-radius: 12px; display: flex; align-items: center; gap: 12px; transition: border-color 0.2s; }
.welcome-feature:hover { border-color: var(--theme-primary); }
.filter-group-box { background: var(--theme-input-bg); border: 1px solid var(--theme-border); border-radius: 12px; padding: 12px 15px; min-width: 160px; flex: 1; transition: 0.2s; }
.filter-group-box:hover { border-color: var(--theme-primary); }
.btn-export { font-weight: 700; padding: 8px 16px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; transition: 0.2s; border: none; }
.btn-export-excel { background: #107c41; color: #fff; }
.btn-export-pdf { background: #d24726; color: #fff; }
.chk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.chk-grid li { display: flex; align-items: center; background: var(--theme-input-bg); border: 1px solid var(--theme-border); padding: 10px 12px; border-radius: 8px; transition: 0.2s; }
.chk-grid li:hover { border-color: var(--theme-primary); }
.chk-grid li input[type=checkbox] { accent-color: var(--theme-primary); width: 18px; height: 18px; margin: 0 10px 0 0 !important; cursor: pointer; flex-shrink: 0; }
.chk-grid li label { margin: 0 !important; font-weight: 600 !important; font-size: 13px !important; color: var(--theme-text-main) !important; cursor: pointer; flex-grow: 1; text-transform: none !important; }
.filter-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
.report-list { list-style: none; padding: 0; margin: 0; }
.report-list li a { display: block; padding: 15px 20px; border-bottom: 1px solid var(--theme-border); color: var(--theme-text-main); font-weight: 600; transition: 0.2s; border-radius: 8px; }
.report-list li a:hover { background: var(--theme-input-bg); color: var(--theme-primary); transform: translateX(5px); }

/* ==========================================================================
   SECTION 8: PUBLIC FORMS & BUILDER ENGINE (FormGen, LeadsTrials, ViewForm)
   ========================================================================== */
#editor-app-root { display: flex; flex-direction: column; background-color: #f1f3f5 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; }
#editor-app-root * { color: #111111 !important; } 
#editor-app-root .sidebar-left, #editor-app-root .sidebar-left * { color: #ffffff !important; }
#editor-app-root .btn-top-save, #editor-app-root .btn-top-save * { color: #ffffff !important; }
#editor-app-root .form-label, #editor-app-root .canvas-paragraph, #editor-app-root .prop-group label { color: #6c757d !important; }
#editor-dock { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-top: 1px solid var(--theme-border); box-shadow: 0 -10px 30px rgba(0,0,0,0.1); z-index: 9999; padding: 15px 20px; display: none; }
.dock-toolbar { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }

.paper-container { max-width: 850px; margin: 40px auto 180px auto; background: var(--theme-bg-card) !important; padding: 50px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); border: 1px solid var(--theme-border); }
.paper-container input[type="text"], .paper-container input[type="number"], .paper-container textarea { border: 1px solid var(--theme-primary) !important; border-radius: 8px !important; background: transparent !important; padding: 8px 12px !important; width: 100% !important; outline: none !important; }
.form-title { color: var(--theme-primary) !important; font-weight: 800 !important; font-size: 1.8rem !important; text-align: center; text-transform: uppercase; margin-bottom: 25px !important; }
.legal-box { border: 1px solid var(--theme-border) !important; padding: 15px !important; font-size: 0.85rem !important; margin-bottom: 20px !important; background: rgba(0,0,0,0.02); border-radius: 8px;}
#signature-pad, .sig-canvas { border: 2px dashed var(--theme-primary) !important; border-radius: 8px !important; width: 100%; height: 150px; cursor: crosshair; background: rgba(0,0,0,0.02) !important; }
.btn-danger-submit { background: var(--theme-primary) !important; color: white !important; border: none; padding: 15px; font-size: 18px !important; font-weight: bold !important; border-radius: 8px !important; width: 100%; margin-top: 30px; cursor: pointer; transition: 0.2s; }
.row-grid { display: flex; flex-wrap: wrap; margin: -5px; width: 100%;}
.form-block { padding: 5px; position: relative; border: 1px dashed transparent; border-radius: 4px; transition: 0.1s all; width:100%; box-sizing:border-box;}
.edit-tools { display: none; position: absolute; top: -14px; right: 10px; background: #212529; color: #fff !important; border-radius: 4px; padding: 4px 10px; font-size: 12px; font-weight: bold; z-index: 100; box-shadow: 0 4px 6px rgba(0,0,0,0.2); }
.edit-mode-active .form-block { border: 1px dashed #adb5bd; background-color: #fcfcfc !important; }
.edit-mode-active .form-block:hover { border-color: #0d6efd; z-index: 50; }
.edit-mode-active .form-block:hover .edit-tools { display: block; }
.sortable-ghost { opacity: 0.4; background-color: #e8f5e9 !important; border: 2px dashed #198754 !important; }

/* ==========================================================================
   SECTION 9: PAGE SPECIFIC - CHECK-IN KIOSK
   ========================================================================== */
.header-area { text-align: center; margin-top: 2vh; margin-bottom: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.header-logo { max-height: 140px; margin-bottom: 15px; border-radius: 12px; object-fit: contain; }
.disc-btn { background: var(--theme-input-bg); border: 2px solid var(--theme-border); border-radius: 16px; padding: 20px 10px; width: 130px; text-align: center; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.disc-btn i { font-size: 32px; color: var(--theme-text-muted); margin-bottom: 12px; transition: 0.2s; }
.disc-btn span { font-size: 14px; font-weight: 700; color: var(--theme-text-main); }
.disc-btn.selected { background: var(--theme-primary); border-color: var(--theme-primary); transform: scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.disc-btn.selected i, .disc-btn.selected span { color: #ffffff; }

.pin-display { width: 100%; height: 75px; font-size: 45px; text-align: center; border: 1px solid var(--theme-border); border-radius: 16px; margin-bottom: 25px; color: var(--theme-text-main); letter-spacing: 12px; font-weight: bold; font-family: 'SF Mono', monospace; background: var(--theme-input-bg); outline: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; max-width: 300px; margin: 0 auto; }
.key-btn { background: var(--theme-input-bg); border: 1px solid var(--theme-border); border-radius: 50%; width: 85px; height: 85px; font-size: 32px; font-weight: 600; color: var(--theme-text-main); cursor: pointer; transition: all 0.1s; margin: 0 auto; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.key-btn:active { background: var(--theme-bg-base); transform: scale(0.92); }

.msg-urgent { margin-top: 25px; font-size: 28px; text-align: center; color: #ffffff; background: var(--theme-danger); padding: 30px; border-radius: 16px; border: 5px solid #8b0000; box-shadow: 0 0 40px rgba(255, 59, 48, 0.8); }
@keyframes pulseUrgent { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,59,48, 0.7); } 50% { transform: scale(1.02); box-shadow: 0 0 0 30px rgba(255,59,48, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,59,48, 0); } }
.pulse-bg { animation: pulseUrgent 1.5s infinite; }

/* ==========================================================================
   SECTION 10: PAGE SPECIFIC - PDF SIGNER (signdocument.aspx)
   ========================================================================== */
#topBar { position: fixed; top: 0; left: 0; width: 100%; background: #222; color: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.8); z-index: 9999; height: 60px; box-sizing: border-box; }
#pdfScrollContainer { margin-top: 60px; padding: 20px; display: flex; justify-content: center; min-height: calc(100vh - 60px); box-sizing: border-box; }
#pdfWrapper { position: relative; box-shadow: 0 0 20px rgba(0,0,0,0.8); background: white; transform-origin: top center; margin-bottom: 50px; }
.form-data-input { font-family: sans-serif; background: rgba(60,141,188,0.1); border: 1px solid #3c8dbc; padding: 2px; color: #333; width: 100%; height: 100%; box-sizing: border-box; }

/* ==========================================================================
   SECTION 11: PAGE SPECIFIC - LOGIN (login.aspx)
   ========================================================================== */
.login-container { width: 100%; max-width: 420px; padding: 15px; margin: 0 auto; margin-top: 8vh; }
.login-logo { text-align: center; margin-bottom: 30px; display: flex; flex-direction: column; align-items: center; }
.login-logo img { max-width: 250px; height: auto; max-height: 100px; object-fit: contain; }
.login-logo h1 { font-weight: 800; margin: 10px 0 0 0; font-size: 28px; color: var(--theme-text-main); letter-spacing: -0.02em; }
.login-box-body { background: var(--theme-bg-card); padding: 40px; border-radius: var(--theme-radius); box-shadow: 0 10px 40px rgba(0,0,0,0.1); border: 1px solid var(--theme-border); }
.login-msg { text-align: center; margin-bottom: 25px; font-weight: 700; color: var(--theme-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 13px; }
.btn-dojo { background-color: var(--theme-primary) !important; color: #fff !important; font-weight: 700; font-size: 16px; border: none; border-radius: 8px; height: 48px; transition: all 0.2s; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 100%; display: block; }
.btn-dojo:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.footer-text { text-align: center; margin-top: 30px; color: var(--theme-text-muted); font-size: 12px; font-weight: 500; }

/* --- UTILITIES & FLEX GRIDS --- */
.flex-row { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; margin-bottom: 24px; }
.flex-col-3 { width: 25%; padding: 0 12px; }
.flex-col-4 { width: 33.333%; padding: 0 12px; }
.flex-col-5 { width: 41.666%; padding: 0 12px; }
.flex-col-6 { width: 50%; padding: 0 12px; }
.flex-col-8 { width: 66.666%; padding: 0 12px; }
.flex-col-12 { width: 100%; padding: 0 12px; }

.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-danger { color: var(--theme-danger) !important; }
.text-success { color: var(--theme-success) !important; }
.text-primary, .text-blue { color: var(--theme-primary) !important; }

.segmented-control { display: flex; background: var(--theme-input-bg); padding: 4px; border-radius: 10px; border: 1px solid var(--theme-border); width: fit-content; }
.seg-btn { border: none; background: transparent; padding: 8px 20px; font-size: 14px; font-weight: 600; color: var(--theme-text-muted); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; }
.seg-btn.active { background: var(--theme-primary); color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }



/* ==========================================================================
   SECTION 12: DASHBOARD ROSTER & TABLE FIXES
   ========================================================================== */

/* 1. Restore the missing white card behind the table */
.roster-container {
    background: var(--theme-bg-card) !important;
    border-radius: var(--theme-radius) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
    border: 1px solid var(--theme-border) !important;
    padding: 30px !important;
    margin-bottom: 40px !important;
}

.roster-header {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    margin-bottom: 25px !important; flex-wrap: wrap !important; gap: 15px !important;
}

.roster-title {
    font-size: 22px !important; font-weight: 800 !important; margin: 0 !important;
    display: flex !important; align-items: center !important; gap: 10px !important; color: var(--theme-text-main) !important;
}

.roster-count {
    font-size: 13px !important; font-weight: 600 !important; color: var(--theme-text-muted) !important;
    background: var(--theme-input-bg) !important; padding: 4px 10px !important;
    border-radius: 20px !important; border: 1px solid var(--theme-border) !important;
}

/* 2. Fix the Table Lines - Force them to be subtle gray instead of aggressive Red */
.apple-table th { border-bottom: 2px solid rgba(128,128,128,0.2) !important; }
.apple-table td { border-bottom: 1px solid rgba(128,128,128,0.1) !important; }

/* 3. Restore the Search Box styling */
.search-wrapper { position: relative; }
.search-wrapper input {
    background: var(--theme-input-bg) !important; border: 1px solid var(--theme-border) !important;
    border-radius: 8px !important; padding: 10px 14px 10px 36px !important; font-size: 14px !important;
    color: var(--theme-text-main) !important; box-shadow: none !important; height: 44px !important; width: 260px;
}
.search-wrapper i { position: absolute; left: 14px; top: 15px; color: var(--theme-text-muted) !important; }

/* 4. Restore the Active/Inactive Segmented Buttons */
.segmented-control { 
    display: flex; background: var(--theme-input-bg) !important; padding: 4px; 
    border-radius: 10px; border: 1px solid var(--theme-border) !important; width: fit-content; 
}
.seg-btn { 
    border: none !important; background: transparent !important; padding: 8px 20px !important; 
    font-size: 14px !important; font-weight: 600 !important; color: var(--theme-text-muted) !important; 
    border-radius: 8px !important; cursor: pointer; transition: all 0.2s ease; 
}
.seg-btn.active { 
    background: var(--theme-primary) !important; color: #fff !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; 
}

/* 5. Restore the Action Buttons in the table rows */
.actions-flex { display: flex; align-items: center; gap: 14px; }
.btn-edit { 
    background: var(--theme-input-bg) !important; color: var(--theme-text-main) !important; 
    border: 1px solid var(--theme-border) !important; padding: 6px 14px !important; 
    border-radius: 8px !important; font-size: 12px !important; font-weight: 600 !important; 
    text-decoration: none !important; display: inline-block; 
}
.btn-edit:hover { background: rgba(128,128,128,0.1) !important; color: var(--theme-text-main) !important; }
.msg-icon { color: #ff9500 !important; font-size: 18px !important; cursor: pointer; }
.email-icon { color: var(--theme-primary) !important; font-size: 18px !important; cursor: pointer; }


/* ==========================================================================
   SECTION 13: THE "IDIOT-PROOF" PREMIUM FORM OVERRIDES
   Forces a high-end look regardless of extreme user color choices in the DB.
   ========================================================================== */

/* 1. CARDS: Prevent user theme colors from making cards look like neon boxes */
.apple-card, .modal-content, .pay-card, .bento-card {
    border: 1px solid rgba(128, 128, 128, 0.2) !important; /* Always subtle gray, NEVER neon theme colors */
}

/* 2. INPUTS: Always neutral borders until focused */
.form-control, .excel-input, select, input[type="text"], input[type="number"], input[type="date"], textarea {
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    background-color: var(--theme-input-bg) !important;
    color: var(--theme-text-main) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}
.form-control:focus, .excel-input:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(128, 128, 128, 0.15) !important; /* Subtle glow */
}

/* 3. ADDON BOXES (The "Black Shit" Fix): Must contrast slightly with input, NEVER use Page BG */
.input-group-addon, .addon-left, .addon-right, .phone-addon {
    background-color: rgba(128, 128, 128, 0.06) !important; /* Soft gray tint */
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    color: var(--theme-text-main) !important;
}

/* 4. FLAWLESS ALIGNMENT & ROUNDED CORNERS FOR INPUT GROUPS (Like the PIN Code) */
.input-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
}
.input-group .form-control {
    margin: 0 !important;
    z-index: 2 !important; /* Keep input border above the addon */
}
/* Left Addon (Base Price) */
.addon-left { border-radius: 8px 0 0 8px !important; border-right: none !important; }
.input-right { border-radius: 0 8px 8px 0 !important; }

/* Right Addon (PIN Code) */
.input-left { border-radius: 8px 0 0 8px !important; }
.addon-right { border-radius: 0 8px 8px 0 !important; border-left: none !important; }

/* 5. CHECKBOXES (Fixing the floating Programs text) */
.chk-list, .form-check {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}
.chk-list input[type="checkbox"], .form-check input[type="checkbox"], .assoc-chk {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    accent-color: var(--theme-primary) !important;
}
.chk-list label, .form-check label, .assoc-container label {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--theme-text-main) !important;
    padding-top: 2px !important;
    text-transform: none !important;
}

/* 6. PLUS/MINUS ICONS (Fixing Add Phone/Email Buttons) */
.add-btn, .remove-btn, .remove-contact-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--theme-text-muted) !important;
    font-size: 20px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    transition: 0.2s !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
.add-btn:hover { color: var(--theme-success) !important; background: rgba(52,199,89,0.1) !important; }
.remove-btn:hover, .remove-contact-btn:hover { color: var(--theme-danger) !important; background: rgba(255,59,48,0.1) !important; }

/* 7. "ADD ITEM" SHOP BUTTONS */
.shop-add {
    color: var(--theme-primary) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    background: rgba(128,128,128,0.05) !important;
    transition: 0.2s !important;
    margin-top: 10px !important;
    border: 1px solid rgba(128,128,128,0.2) !important;
}
.shop-add:hover {
    background: var(--theme-primary) !important;
    color: #fff !important;
}

/* ==========================================================================
   SECTION 14: THE "ASP.NET & INPUT GROUP" EMERGENCY FIX
   ========================================================================== */

/* 1. FIX THE CHECKBOXES (ASP.NET wraps them in a span, breaking flexbox) */
.chk-list span, .prog-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.chk-list input[type="checkbox"], .prog-checkbox input[type="checkbox"] {
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}
.chk-list label, .prog-checkbox label {
    margin: 0 !important;
    padding-top: 2px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* 2. FIX THE PIN CODE & PRICES (Stitching the input groups back together) */
.input-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
}
.input-group .form-control {
    flex: 1 1 auto !important;
    margin: 0 !important;
    border-radius: 8px 0 0 8px !important; /* Force flat right side */
}
.input-group .addon-right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(128, 128, 128, 0.08) !important;
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    border-left: none !important;
    border-radius: 0 8px 8px 0 !important; /* Round the right side */
    padding: 0 15px !important;
    color: var(--theme-text-main) !important;
    white-space: nowrap !important;
}
.input-group .addon-left {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(128, 128, 128, 0.08) !important;
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    border-right: none !important;
    border-radius: 8px 0 0 8px !important; /* Round the left side */
    padding: 0 15px !important;
    color: var(--theme-text-main) !important;
    white-space: nowrap !important;
}
.input-group .addon-left + .form-control {
    border-radius: 0 8px 8px 0 !important; /* Force flat left side if addon is first */
}

/* 3. KILL THE RED BORDERS (Protecting Parent Box & Add Photo from DB Theme) */
.parent-box {
    border: 1px solid rgba(128, 128, 128, 0.2) !important;
    border-left: 4px solid var(--theme-danger) !important;
}
.photo-drop-zone {
    border: 2px dashed rgba(128, 128, 128, 0.3) !important;
}
.photo-drop-zone:hover {
    border-color: var(--theme-primary) !important;
}

/* ==========================================================================
   SECTION 15: THE INPUT GROUP OVERLAP & PIN CODE SIZING FIX
   ========================================================================== */

/* 1. Stop inputs from forcing 100% width inside groups, which causes overlap */
.input-group .form-control {
    width: auto !important;
    min-width: 0 !important; /* Prevents blowing out of the container */
    flex: 1 1 auto !important; /* Allows it to fill safe space normally */
}

/* 2. Force the PIN box to stay small and NOT stretch across the screen */
input[id$="txtPin"] {
    flex: 0 0 140px !important; /* Locks the box to exactly 140px */
    width: 140px !important;
}

/* 3. Protect the "Available" text from ever being crushed or overlapped again */
.input-group-addon, .addon-right, .addon-left {
    flex: 0 0 auto !important; /* Stops the addon box from shrinking */
    width: auto !important;
    min-width: max-content !important; /* Forces it to respect the size of the text inside */
}


/* ==========================================================================
   SECTION 16: PAYMENTS CARD & FILTER FIXES (The Missing Layout)
   ========================================================================== */

/* 1. Fix the top filter stack to be a neat horizontal row */
.filter-group { 
    display: flex !important; 
    gap: 15px !important; 
    align-items: center !important; 
    flex-wrap: wrap !important; 
    justify-content: flex-end !important;
}

/* 2. Fix the Payment Card Container & Left-Border Status Color */
.pay-card {
    border-left: 6px solid var(--theme-primary) !important;
    display: flex !important; 
    flex-direction: column !important;
    padding: 0 !important; /* Remove the default 30px padding so header can flush to edges */
    overflow: hidden !important;
}
.pay-card.row-approved { border-left-color: var(--theme-success) !important; }
.pay-card.row-denied { border-left-color: var(--theme-danger) !important; }

/* 3. Fix the Card Header (Name, Email, Buttons) */
.pay-card-header {
    padding: 16px 24px !important; 
    border-bottom: 1px solid var(--theme-border) !important;
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    flex-wrap: wrap !important; 
    gap: 15px !important;
    background: rgba(128,128,128,0.03) !important; /* Very subtle gray header */
}
.pay-card-title { 
    font-size: 18px !important; font-weight: 800 !important; margin: 0 !important; 
    color: var(--theme-text-main) !important; display: flex !important; align-items: center !important; gap: 10px !important; 
}
.pay-card-sub { 
    font-size: 13px !important; color: var(--theme-text-muted) !important; font-weight: 600 !important; 
    display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-left: 15px !important; 
}
.profile-link { color: var(--theme-text-main) !important; text-decoration: none !important; transition: 0.2s !important; }
.profile-link:hover { color: var(--theme-primary) !important; }
.action-btns { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }

/* 4. Fix the Card Body (The Financial Data Grid) */
.pay-card-body { 
    padding: 24px !important; 
    display: flex !important; 
    flex-wrap: wrap !important; 
    gap: 32px !important; 
    align-items: center !important; 
}
.info-block { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 6px !important; 
}
.info-label { 
    font-weight: 800 !important; color: var(--theme-text-muted) !important; 
    font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; 
}
.info-val { 
    color: var(--theme-text-main) !important; font-weight: 600 !important; font-size: 15px !important; 
}

/* 5. Fix the Total Box & Dividers */
.total-block { 
    background: var(--theme-input-bg) !important; border: 1px solid var(--theme-border) !important; 
    padding: 12px 24px !important; border-radius: 12px !important; text-align: center !important; 
    display: flex !important; flex-direction: column !important; gap: 4px !important; 
}
.total-block .info-val { font-size: 22px !important; color: var(--theme-success) !important; font-weight: 800 !important; }
.vertical-divider { border-left: 1px solid var(--theme-border) !important; height: 48px !important; margin: 0 10px !important; }

/* 6. Fix the "Status for 2026" Label */
.status-year-label { 
    font-size: 11px !important; font-weight: 800 !important; color: var(--theme-text-muted) !important; 
    text-align: center !important; margin-bottom: 12px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; 
}
/* ==========================================================================
   SECTION 17: STICKY HEADER TRANSPARENCY FIX
   ========================================================================== */

/* 1. Force table headers to have a SOLID background so rows cannot bleed through */
.apple-table th, .apple-excel-table th { 
    background-color: var(--theme-bg-base) !important; /* Solid color, NO transparency */
    z-index: 50 !important; /* Forces the header above all inputs and checkboxes */
}

/* 2. Ensure the Save Bar stays perfectly solid and above the table */
.save-bar {
    background-color: var(--theme-bg-card) !important;
    z-index: 100 !important;
}


/* ==========================================================================
   SECTION 18: MODAL & BUTTON POLISH (THE OVERLAP FIX)
   ========================================================================== */

/* 1. Untangle the Modal Container from the Apple Card Padding */
.modal-content {
    padding: 0 !important; /* Remove the 30px padding inherited from .apple-card */
    margin-bottom: 0 !important;
    border: 1px solid rgba(128, 128, 128, 0.2) !important; /* Neutral gray border */
    border-radius: 16px !important;
    box-shadow: 0 15px 50px rgba(0,0,0,0.2) !important; /* Premium drop shadow */
    background-color: var(--theme-bg-card) !important;
    overflow: hidden !important;
}

/* 2. Flawless Modal Header */
.modal-header {
    padding: 24px 24px 20px 24px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15) !important; /* Soft gray line */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: transparent !important;
}

/* 3. Flawless Modal Body */
.modal-body {
    padding: 30px 24px !important;
    background: transparent !important;
}

/* 4. Flawless Modal Footer */
.modal-footer {
    padding: 20px 24px !important;
    border-top: 1px solid rgba(128, 128, 128, 0.15) !important; /* Soft gray line */
    background-color: rgba(128, 128, 128, 0.03) !important; /* Slight tint to anchor the bottom */
    margin: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

/* 5. Fix Default Buttons (Stop Cancel/Close from being Bright Red) */
.btn-default {
    background-color: var(--theme-input-bg) !important;
    color: var(--theme-text-main) !important;
    border: 1px solid rgba(128, 128, 128, 0.3) !important; /* Always Neutral Gray */
}
.btn-default:hover {
    background-color: rgba(128, 128, 128, 0.1) !important;
    border-color: rgba(128, 128, 128, 0.5) !important;
    color: var(--theme-text-main) !important;
}

/* 6. Fix the "X" Close Button in the Header */
.modal-header .close {
    color: var(--theme-text-muted) !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    opacity: 0.5 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.modal-header .close:hover {
    opacity: 1 !important;
    color: var(--theme-danger) !important;
}

/* 7. Protect internal Tables inside Modals from the Red Theme Border */
.modal-body table td, .modal-body table th {
    border-bottom: 1px solid rgba(128,128,128,0.15) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}



/* ==========================================================================
   SECTION 20: REPORTS PAGE POLISH (Filter Size, Red Lines & Sidebar)
   ========================================================================== */

/* 1. Respect inline padding on cards (Shrinks the massive Filter and Sidebar boxes) */
.apple-card[style*="padding:0"], .apple-card[style*="padding: 0"], .apple-card[style*="padding: 0px"] { 
    padding: 0 !important; 
}
.apple-card[style*="padding:10px"], .apple-card[style*="padding: 10px"] { 
    padding: 10px !important; 
}
.apple-card[style*="padding:25px"], .apple-card[style*="padding: 25px"] { 
    padding: 25px !important; 
}

/* 2. Kill the ugly red divider lines in the left sidebar menu */
.report-list li a {
    border-bottom: 1px solid rgba(128, 128, 128, 0.15) !important;
}

/* 3. Kill the red borders on the 3 big feature boxes in the center */
.welcome-feature {
    border: 1px solid rgba(128, 128, 128, 0.2) !important;
}
.welcome-feature:hover {
    border-color: var(--theme-primary) !important; /* Only glows on hover */
    background-color: rgba(128, 128, 128, 0.03) !important;
}



/* ==========================================================================
   SECTION 21: DEFAULT BUTTON HOVER & NAV DIVIDER FIX
   ========================================================================== */

/* 1. Force all Default Buttons to have a clean gray border (Kills the Red border) */
.btn-default {
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    background-color: var(--theme-input-bg) !important;
}


/* 2. Fix the Hover State: Keep it solid, do NOT let the black background bleed through */
.btn-default:hover,
.modal-footer .btn-default:hover {
    background-color: var(--theme-bg-card) !important; /* Keeps it completely solid */
    color: var(--theme-primary) !important; /* Changes text to your theme color */
    border-color: var(--theme-primary) !important; /* Changes border to your theme color */
    opacity: 1 !important;
}

/* 3. Fix the Red Line in the Top Navigation (between Check In and Log Out) */
.nav-actions {
    border-left: 1px solid rgba(128, 128, 128, 0.3) !important; /* Force a clean gray line */
}


/* ==========================================================================
   SECTION 12: INPUT GROUP BLOWOUT FIX & RED BORDER KILLER
   ========================================================================== */

/* 1. Stop the text box from shoving the button out of the card */
.input-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}
.input-group .form-control {
    flex: 1 1 100% !important; /* Tells the input to take available space */
    width: 1% !important; /* The magic CSS trick that stops it from overflowing */
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 8px 0 0 8px !important; /* Flat right edge */
}

/* 2. Fuse the Button perfectly to the input */
.input-group-btn {
    display: flex !important;
    align-items: stretch !important;
    flex: 0 0 auto !important; /* Prevents the button from shrinking */
    width: auto !important;
}
.input-group-btn .btn {
    margin: 0 !important;
    border-radius: 0 8px 8px 0 !important; /* Flat left edge, rounded right edge */
    height: 44px !important; /* Matches the text box perfectly */
}

/* 3. Kill the aggressive Red Lines under the H4 titles inside the cards */
.apple-card h4[style*="border-bottom"] {
    border-bottom: 1px solid rgba(128, 128, 128, 0.2) !important;
}

/* ==========================================================================
   SECTION 22: THE FORM GENERATOR OVERLAY & TABLE HEADER FIX
   ========================================================================== */

/* 1. Fix the broken "Working..." overlay (Hide it, and make it float when active) */
#aiProcessingOverlay, #processingOverlay, #dropOverlay {
    display: none; 
    position: fixed !important; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85) !important; 
    backdrop-filter: blur(10px); 
    z-index: 9999 !important; 
    text-align: center; 
    padding-top: 30vh; 
}

/* 2. Fix the Black Table Headers (They must match the Card, not the Page) */
.apple-table th, .apple-excel-table th {
    background-color: var(--theme-bg-card) !important; /* Solid color matching the card */
    color: var(--theme-text-muted) !important;
    border-bottom: 2px solid rgba(128, 128, 128, 0.2) !important; /* Subtle gray line */
    z-index: 50 !important; /* Keeps it above scrolling rows */
}

/* 3. Fix the Red border on the inline Copy buttons */
.input-group .btn-default {
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    background-color: var(--theme-input-bg) !important;
}
.input-group .btn-default:hover {
    border-color: var(--theme-primary) !important;
}



/* ==========================================================================
   SECTION 23: FORM GENERATOR TABLE BUTTONS (The Missing Layout)
   ========================================================================== */

/* 1. Restore the Flexbox layout for the Link & Access column */
.action-container { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 12px !important; 
}
.action-row { 
    display: flex !important; 
    gap: 10px !important; 
    align-items: center !important; 
    flex-wrap: wrap !important; 
}

/* 2. Make these specific table buttons sleeker (38px instead of 44px) so they don't look bloated */
.btn-action { 
    height: 38px !important; 
    padding: 6px 14px !important; 
    font-size: 13px !important; 
    border-radius: 8px !important; 
}

/* 3. Make sure the Copy Link input box shrinks to match the sleeker buttons */
.input-group .form-control[id^="link_"] {
    height: 38px !important;
    font-size: 13px !important;
}

/* 4. Restore the custom purple QR Button */
.btn-qr { 
    background-color: #6f42c1 !important; 
    color: white !important; 
    border: 1px solid #6f42c1 !important; 
}
.btn-qr:hover { 
    background-color: #59339d !important; 
    border-color: #59339d !important; 
}


/* ==========================================================================
   SECTION 24: THE INPUT GROUP DIRECT BUTTON FIX (Copy Link Button)
   ========================================================================== */

/* 1. Fuse direct buttons (like the copy button) seamlessly to the text box */
.input-group > .btn {
    border-radius: 0 8px 8px 0 !important; /* Flat on the left, rounded on the right */
    border-left: none !important; /* Kill the double border gap */
    margin: 0 !important;
    height: 38px !important; /* Force it to perfectly match the 38px input box height */
    flex: 0 0 auto !important; /* Prevent it from shrinking */
}

/* 2. Ensure the input box it attaches to is perfectly flat on the right */
.input-group > .form-control {
    border-radius: 8px 0 0 8px !important; /* Rounded on the left, flat on the right */
}

/* ==========================================================================
   SECTION 25: FORM GENERATOR BUTTON ALIGNMENT (THE FINAL FIX)
   ========================================================================== */

/* 1. Turn the main container into a wrapping flex row */
.action-container { 
    display: flex !important; 
    flex-direction: row !important; 
    flex-wrap: wrap !important; 
    gap: 10px !important; 
}

/* 2. "Delete" the HTML rows visually so all elements can mingle together */
.action-row { 
    display: contents !important; 
}

/* 3. Force the URL Link box to take up the entire top line */
.action-row > .input-group {
    width: 100% !important;
    flex: 1 1 100% !important;
    order: 1 !important; /* Forces it to the top */
    margin-bottom: 2px !important;
}

/* 4. Force all buttons onto the second line in the EXACT order you requested */
.action-row > .btn-success { order: 2 !important; } /* Open */
.action-row > .btn-info    { order: 3 !important; } /* Orig PDF */
.action-row > .btn-qr      { order: 4 !important; } /* Create QR */

/* 5. Shove the Eye Icon to the very end of the line */
.action-row > .btn-default { order: 5 !important; } /* Eye Icon */

/* ==========================================================================
   SECTION 26: PAGE HEADER BUTTON ALIGNMENT FIX
   ========================================================================== */

/* Force the header container to take up the full width and stay on one line */
.page-header-flex { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: space-between !important; 
    width: 100% !important; 
    flex-wrap: nowrap !important;
}

/* Ensure the title stays neatly on the left */
.page-header-flex h1.header-title {
    margin: 0 !important; 
    flex-shrink: 0 !important;
}

/* Physically shove the "Create New Form" (or any header button) to the far right */
.page-header-flex .btn { 
    margin-left: auto !important; 
    flex-shrink: 0 !important;
}


/* ==========================================================================
   SECTION 27: FORM GENERATOR PADDING & ALIGNMENT PERFECTION
   ========================================================================== */

/* 1. Restore the breathing room between the Top Header and the White Card */
.page-header-flex {
    margin-bottom: 30px !important; 
}

/* 2. Fix the FAT Icon-Only Buttons (Management Actions on the right) */
.apple-table td:last-child .btn {
    width: 38px !important; /* Force a perfect square */
    height: 38px !important;
    padding: 0 !important; /* Kill the excessive horizontal padding */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.apple-table td:last-child .btn i {
    margin: 0 !important; /* Center the icon perfectly */
}

/* 3. Make the Eye Icon button a perfect square too */
.action-row > .btn-default {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.action-row > .btn-default i { margin: 0 !important; }

/* 4. Flawlessly fuse the Copy Button and URL Input */
.action-row > .input-group {
    display: flex !important;
    align-items: stretch !important;
    height: 38px !important; /* Force uniform height */
    margin-bottom: 10px !important; /* Create a gap before the buttons below it */
}
.action-row > .input-group .form-control {
    height: 38px !important;
    border-radius: 8px 0 0 8px !important;
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    border-right: none !important; /* Kill the double border */
    margin: 0 !important;
    box-shadow: none !important;
}
.action-row > .input-group .btn {
    height: 38px !important;
    border-radius: 0 8px 8px 0 !important;
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    margin: 0 !important;
    padding: 0 14px !important;
    background-color: var(--theme-input-bg) !important;
}
.action-row > .input-group .btn:hover {
    background-color: rgba(128, 128, 128, 0.1) !important;
}

/* 5. Clean up the padding on the Open, Orig PDF, and Create QR buttons */
.action-row > .btn:not(.btn-default) {
    height: 38px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
}



/* ==========================================================================
   SECTION 28: LEADS & TRIALS PAGE FIXES (Menu, Info Box, Copy Group, CKEditor)
   ========================================================================== */

/* 1. Restore the Left Sidebar Menu (Pills) */
.nav-pills-custom { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.nav-pills-custom li { margin-bottom: 8px !important; }
.nav-pills-custom li a { 
    display: flex !important; align-items: center !important; gap: 12px !important; 
    padding: 14px 20px !important; text-decoration: none !important; 
    font-weight: 600 !important; font-size: 15px !important; border-radius: 12px !important; 
    color: var(--theme-text-main) !important; background: var(--theme-input-bg) !important; 
    border: 1px solid rgba(128,128,128,0.2) !important; transition: all 0.2s ease !important;
}
.nav-pills-custom li a i { font-size: 18px !important; color: var(--theme-text-muted) !important; transition: 0.2s !important; }
.nav-pills-custom li a:hover { 
    background-color: rgba(128,128,128,0.05) !important; 
    border-color: var(--theme-primary) !important; 
}
.nav-pills-custom li a:hover i { color: var(--theme-primary) !important; }
.nav-pills-custom li.active a { 
    background-color: var(--theme-primary) !important; color: #fff !important; 
    border-color: var(--theme-primary) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; 
}
.nav-pills-custom li.active a i { color: #fff !important; }

/* 2. Restore the Blue Info Box (Primary Intake Form explanation) */
.info-box { 
    background: rgba(0,122,255,0.05) !important; 
    border: 1px solid rgba(0,122,255,0.2) !important; 
    padding: 15px 20px !important; 
    border-radius: 12px !important; 
    margin-bottom: 25px !important; 
    display: flex !important; 
    gap: 15px !important; 
    align-items: flex-start !important; 
}
.info-box i { font-size: 24px !important; color: var(--theme-primary) !important; margin-top: 2px !important; }
.info-box p { margin: 0 !important; color: var(--theme-text-main) !important; font-size: 14px !important; line-height: 1.5 !important; }

/* 3. Restore the "Public Link" Copy Group */
.copy-group { 
    display: flex !important; 
    align-items: stretch !important; 
    margin-bottom: 25px !important; 
    width: 100% !important; 
}
.copy-group .form-control { 
    flex: 1 1 100% !important; width: 1% !important; min-width: 0 !important;
    border-radius: 8px 0 0 8px !important; 
    border-right: none !important; 
    font-family: monospace !important; 
    background: rgba(128,128,128,0.03) !important; 
    margin: 0 !important; 
    height: 44px !important; 
}
.copy-group .btn { 
    flex: 0 0 auto !important; width: auto !important;
    border-radius: 0 8px 8px 0 !important; 
    margin: 0 !important; 
    height: 44px !important; 
    border: 1px solid rgba(128,128,128,0.3) !important; 
    background: var(--theme-input-bg) !important; 
    color: var(--theme-text-main) !important; 
}
.copy-group .btn:hover { background: rgba(128,128,128,0.1) !important; }

/* 4. FIX CKEDITOR BUG: Stop forcing hidden textareas to display! */
textarea[style*="display: none"], textarea[style*="display:none"] {
    display: none !important;
}

/* 5. Kill the ugly red line under the title */
.tab-pane > div[style*="border-bottom"] {
    border-bottom: 1px solid rgba(128, 128, 128, 0.2) !important;
}



/* ==========================================================================
   SECTION 29: LEADS & TRIALS EDITOR (THE BUILDER UI FIX)
   Reconstructs the drag-and-drop sandbox layout that was stripped out.
   ========================================================================== */

/* 1. Force the Editor to use 100% of the screen width */
body:has(#editor-app-root) .apple-main-container {
    max-width: 100% !important; 
    padding: 0 !important; 
    margin: 0 !important;
}

/* 2. The Main Application Wrapper */
#editor-app-root {
    display: flex; flex-direction: column; background-color: #f1f3f5 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    height: calc(100vh - 70px); /* Fills the screen below the nav */
    margin-top: 10px;
}

/* Isolate text colors so the builder doesn't inherit the global black theme */
#editor-app-root * { color: #111111 !important; }
#editor-app-root .sidebar-left, #editor-app-root .sidebar-left * { color: #ffffff !important; }
#editor-app-root .btn-top-save, #editor-app-root .btn-top-save * { color: #ffffff !important; }
#editor-app-root .form-label, #editor-app-root .canvas-paragraph, #editor-app-root .prop-group label { color: #6c757d !important; }

/* 3. The Top Control Bar (Preview & Save) */
.page-header-sandbox {
    background-color: #ffffff !important; padding: 15px 30px !important; border-bottom: 1px solid #ced4da !important;
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; z-index: 200;
}
.btn-back-link { font-weight: 700 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; text-decoration: none !important; margin-bottom: 8px !important; display: inline-block !important; color: var(--theme-primary) !important;}
.page-header-sandbox .header-title { font-size: 24px !important; font-weight: 800 !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; }

.btn-top { border-radius: 8px !important; font-weight: 700 !important; padding: 10px 20px !important; transition: all 0.2s !important; border: none !important; display:inline-flex !important; align-items:center !important; gap:8px !important; font-size:14px !important; cursor: pointer !important; height: 44px !important;}
.btn-top-preview { background-color: #e9ecef !important; border: 1px solid #ced4da !important; color: #333 !important;}
.btn-top-save { background-color: var(--theme-primary) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; border-color: var(--theme-primary) !important; }

/* 4. The Workspace Layout (Left Menu + Center Canvas + Right Properties) */
.builder-wrapper {
    display: flex !important; flex-direction: row !important;
    height: 100% !important; min-height: 600px !important; overflow: hidden !important; position: relative !important;
    flex-grow: 1;
}

/* 5. Left Sidebar (The Element Palette) */
.sidebar-left { width: 280px !important; background-color: #2a3042 !important; flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; border-right: 1px solid #1f2433 !important; z-index: 100; }
.sidebar-header { padding: 15px 20px !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; background-color: #222736 !important; border-bottom: 1px solid #1f2433 !important; color: #a6b0cf !important;}
.element-list { list-style: none !important; padding: 0 !important; margin: 0 !important; overflow-y: auto !important; flex-grow: 1 !important; }
.element-item { padding: 12px 20px !important; border-bottom: 1px solid #1f2433 !important; display: flex !important; align-items: center !important; gap: 15px !important; cursor: grab !important; font-size: 14px !important; font-weight: 500 !important; transition: background 0.2s !important; }
.element-item:hover { background-color: #32394e !important; }
.element-icon { width: 30px !important; text-align: center !important; font-size: 18px !important; color: #a6b0cf !important; }
.jb-element-section { background-color: #1a1e29 !important; padding: 10px 20px !important; font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: #6b7594 !important;}

/* 6. The Center Canvas Area (The White Paper) */
.canvas-area {
    flex-grow: 1 !important; background-color: #e9ecef !important; overflow-y: auto !important; padding: 40px !important;
    display: flex !important; flex-direction: column !important; align-items: center !important;
}
.paper-canvas {
    width: 100% !important; max-width: 850px !important; background-color: #ffffff !important; border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08) !important; padding: 50px 60px !important; border: 1px solid #ced4da !important;
    min-height: 800px !important; flex-shrink: 0 !important; margin: 0 auto;
}

/* 7. The Right Sidebar (Sliding Properties Panel) */
.sidebar-right {
    width: 320px !important; background-color: #ffffff !important; border-left: 1px solid #ced4da !important;
    display: flex !important; flex-direction: column !important; flex-shrink: 0 !important;
    margin-right: -320px !important; transition: margin-right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    position: relative !important; z-index: 90 !important; box-shadow: -5px 0 15px rgba(0,0,0,0.03) !important;
}
.sidebar-right.open { margin-right: 0 !important; }
.props-header { padding: 20px !important; border-bottom: 1px solid #ced4da !important; display: flex !important; justify-content: space-between !important; align-items: center !important; background-color: #f8f9fa !important; }
.props-header h4 { margin: 0 !important; font-size: 16px !important; font-weight: 800 !important; }
.props-close { cursor: pointer !important; font-size: 20px !important; transition: 0.2s !important; font-weight:300 !important; }
.props-close:hover { color: #dc3545 !important; }
.props-body { padding: 20px !important; overflow-y: auto !important; flex-grow: 1 !important; }
.prop-group { margin-bottom: 20px !important; }
.prop-input, .prop-textarea { width: 100% !important; border: 1px solid #ced4da !important; border-radius: 6px !important; padding: 10px !important; font-size: 14px !important; background-color: #ffffff !important; outline: none !important; transition: 0.2s !important; box-sizing: border-box !important; }
.prop-textarea { resize: vertical !important; min-height: 100px !important; }

/* 8. The Drag & Drop Form Elements (Inside the Canvas) */
.brand-logo { text-align: center !important; margin-bottom: 30px !important; padding-bottom: 20px !important; border-bottom: 2px solid var(--theme-primary) !important; }
.brand-logo img { max-height: 90px !important; max-width: 100% !important; object-fit: contain !important; }
.form-title { color: var(--theme-primary) !important; font-weight: 800 !important; font-size: 1.8rem !important; text-align: center !important; text-transform: uppercase !important; margin: 0 0 25px 0 !important; }
.canvas-header { font-weight: 800 !important; font-size: 1.2rem !important; margin-bottom: 10px !important; margin-top: 20px !important; border-bottom: 2px solid #111111 !important; padding-bottom: 5px !important; pointer-events:none !important; }
.canvas-paragraph { font-size: 0.95rem !important; line-height: 1.5 !important; pointer-events:none !important; color:#555 !important;}
.canvas-divider { border-top: 2px solid #cccccc !important; margin: 20px 0 !important; pointer-events: none !important; }
.form-label { font-size: 11px !important; margin-bottom: 6px !important; display: block !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing:0.05em !important; pointer-events: none !important; }
.canvas-input, .canvas-select { border: 1px solid var(--theme-primary) !important; border-radius: 8px !important; background-color: #ffffff !important; padding: 12px 14px !important; font-size: 15px !important; width: 100% !important; box-sizing: border-box !important; pointer-events: none !important; }
.cb-container { display: flex !important; flex-wrap: wrap !important; gap: 15px !important; margin-bottom: 5px !important; pointer-events: none !important; }
.form-check { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 5px !important; }
.form-check-input { width: 18px !important; height: 18px !important; margin: 0 !important; }
.form-check-label { font-size: 0.9rem !important; font-weight: 600 !important; text-transform:none !important; }

/* 9. System Built-in Blocks */
.canvas-legal-box { border: 1px solid #ced4da !important; padding: 20px !important; font-size: 13px !important; background-color: #f8f9fa !important; border-radius: 8px !important; pointer-events:none !important; color:#555 !important;}
.canvas-photo-box { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 15px !important; background-color: #f8f9fa !important; border: 1px solid #ced4da !important; border-radius: 8px !important; pointer-events:none !important; }
.canvas-photo-box input { width: 22px !important; height: 22px !important; margin: 0 !important; }
.canvas-photo-box label { font-size: 14px !important; font-weight: normal !important; margin: 0 !important; line-height: 1.5 !important; text-transform:none !important; }
.canvas-sig-title { font-size: 16px !important; font-weight: 800 !important; margin: 0 0 5px 0 !important; pointer-events:none !important; }
.canvas-sig-sub { font-size: 13px !important; margin: 0 0 10px 0 !important; pointer-events:none !important; color:#666 !important;}
.canvas-sig-box { border: 2px dashed var(--theme-primary) !important; border-radius: 8px !important; width: 100% !important; height: 180px !important; display:flex !important; align-items:center !important; justify-content:center !important; font-weight:bold !important; background-color:rgba(0,0,0,0.01) !important; pointer-events:none !important;}
.canvas-btn-submit { background-color: var(--theme-primary) !important; color: white !important; border: none !important; padding: 16px !important; font-size: 18px !important; font-weight: 800 !important; border-radius: 8px !important; width: 100% !important; margin-top: 10px !important; pointer-events:none !important;}

/* 10. The Hover & Selection Controls (The Grid System) */
.row-grid { display: flex !important; flex-wrap: wrap !important; margin-right: -10px !important; margin-left: -10px !important; min-height: 200px !important; padding-bottom:50px !important; transition: 0.2s !important; width: 100% !important;}
.form-block { padding: 10px !important; position: relative !important; width: 100% !important; border: 1px dashed transparent !important; border-radius: 8px !important; transition: 0.2s !important; cursor: pointer !important; box-sizing: border-box !important;}
.form-block:hover { border-color: rgba(0,0,0,0.2) !important; background-color: rgba(0,0,0,0.02) !important; }
.form-block.active-element { border: 2px solid var(--theme-primary) !important; background-color: rgba(220,53,69,0.04) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; z-index: 10 !important; }
.flex-100 { width: 100% !important; } .flex-50 { width: 50% !important; } .flex-33 { width: 33.3333% !important; } .flex-25 { width: 25% !important; }

/* 11. The Floating Action Tools (Move / Resize / Del) */
.block-tools { position: absolute !important; top: -16px !important; right: 0 !important; background-color: #111111 !important; border-radius: 6px !important; padding: 4px 8px !important; display: none !important; gap: 10px !important; z-index: 100 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important; }
.form-block.active-element .block-tools { display: flex !important; }
.tool-btn { font-size: 12px !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 4px !important; font-weight: 600 !important; color:#fff !important;}
.tool-btn:hover { opacity: 0.7 !important; }
.tool-drag { cursor: grab !important; color: #ffc107 !important; }
.tool-del { color: #ff3b30 !important; }

/* ==========================================================================
   SECTION 30: THE BUILDER UI "BOX" FIX (Rounding & Spacing)
   ========================================================================== */

/* 1. Matches standard page layout gap exactly */
	body:has(#editor-app-root) .apple-main-container {
    max-width: 96% !important; 
    margin: 40px auto 40px auto !important; 
    padding: 0 !important;
}

/* 2. Turn the Editor itself into a gorgeous, rounded Apple-style window */
#editor-app-root {
    border-radius: 16px !important; /* Premium rounded corners */
    overflow: hidden !important; /* CRITICAL: Forces the square header & sidebar to respect the rounded corners */
    box-shadow: 0 15px 50px rgba(0,0,0,0.15) !important; /* Deep, floating shadow */
    border: 1px solid var(--theme-border) !important;
    height: calc(100vh - 160px) !important; /* Shrink height so it doesn't bleed off the bottom of the screen */
    margin-top: 0 !important;
}

/* 3. Clean up the internal borders so they don't double-stack with the new rounded wrapper */
.page-header-sandbox {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* ==========================================================================
   SECTION 32: PREMIUM TABLE ACTION BUTTONS (Inbox Page)
   ========================================================================== */

/* 1. Reset standard button behavior for these specific action buttons */
.btn-action-view, .btn-action-convert, .btn-action-delete {
    height: 36px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. "View" Button: Neutral Gray, pops with Primary color */
.btn-action-view {
    background: var(--theme-input-bg) !important;
    color: var(--theme-text-main) !important;
    border: 1px solid rgba(128,128,128,0.3) !important;
    padding: 0 14px !important;
}
.btn-action-view i { 
    margin-right: 6px !important; 
    color: var(--theme-primary) !important; 
}
.btn-action-view:hover { 
    background: rgba(128,128,128,0.05) !important; 
}

/* 3. "Convert" Button: Soft Green tint, ignites solid green on hover */
.btn-action-convert {
    width: 36px !important; /* Perfect square */
    padding: 0 !important;
    background: rgba(52,199,89,0.15) !important; /* Soft Green Background */
    color: var(--theme-success) !important;
}
.btn-action-convert i { margin: 0 !important; }
.btn-action-convert:hover { 
    background: var(--theme-success) !important; 
    color: #fff !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 4px 10px rgba(52,199,89,0.2) !important;
}

/* 4. "Delete" Button: Soft Red tint, ignites solid red on hover */
.btn-action-delete {
    width: 36px !important; /* Perfect square */
    padding: 0 !important;
    background: rgba(255,59,48,0.15) !important; /* Soft Red Background */
    color: var(--theme-danger) !important;
}
.btn-action-delete i { margin: 0 !important; }
.btn-action-delete:hover { 
    background: var(--theme-danger) !important; 
    color: #fff !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 4px 10px rgba(255,59,48,0.2) !important;
}



/* ==========================================================================
   SECTION 33: TABLE ACTIONS (Inbox & Global Button Formats)
   ========================================================================== */
.table-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
}
.table-actions .btn {
    height: 38px !important; /* Unified height */
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
}
.table-actions .btn-icon {
    width: 38px !important; /* Force icon buttons into perfect squares */
    padding: 0 !important;
}
.table-actions .btn i { margin: 0 !important; }
.table-actions .btn:not(.btn-icon) { padding: 0 14px !important; }
.table-actions .btn:not(.btn-icon) i { margin-right: 6px !important; }



/* ==========================================================================
   SECTION 34: THE "VIEW BUTTON" CRUSH FIX
   Rescues text buttons from the global 38px square override.
   ========================================================================== */

/* 1. Rescue the View button from being crushed to 38px */
.apple-table td .table-actions .btn:not(.btn-icon) {
    width: auto !important; /* Kills the 38px lock */
    min-width: max-content !important; /* Forces the box to stretch around the word "View" */
    padding: 0 14px !important; /* Restores the horizontal padding */
    border: 1px solid rgba(128, 128, 128, 0.3) !important; /* Kills the red theme border */
    background-color: var(--theme-bg-card) !important;
    color: var(--theme-text-main) !important;
}

/* 2. Restore the space between the icon and the word "View" */
.apple-table td .table-actions .btn:not(.btn-icon) i {
    margin-right: 6px !important;
    margin-left: 0 !important;
}

/* 3. Subtle hover effect (Premium Gray, not Neon Red) */
.apple-table td .table-actions .btn:not(.btn-icon):hover {
    background-color: rgba(128, 128, 128, 0.05) !important;
    border-color: rgba(128, 128, 128, 0.5) !important;
}



/* ==========================================================================
   SECTION 35: ADMIN SETTINGS UI & GRIDVIEW EDIT FIXES
   Restores Menu Spacing, Dropzones, and ASP.NET GridView Edit/Save Icons
   ========================================================================== */

/* 1. Fix the "Programs" Header and the [+] Button in the Left Sidebar */
ul.nav-pills-custom li:has(.pull-right) {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 20px !important;
    margin-top: 15px !important;
    border-top: 1px solid rgba(128,128,128,0.2) !important;
}
ul.nav-pills-custom li a.pull-right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: var(--theme-input-bg) !important;
    border: 1px solid rgba(128,128,128,0.3) !important;
    border-radius: 8px !important;
    position: static !important; /* Overrides floating */
    float: none !important;
    padding: 0 !important;
    transition: 0.2s !important;
}
ul.nav-pills-custom li a.pull-right:hover {
    background: var(--theme-success) !important;
    border-color: var(--theme-success) !important;
    color: #fff !important;
}
ul.nav-pills-custom li a.pull-right i { margin: 0 !important; color: inherit !important; font-size: 14px !important; }

/* 2. Fix the Squished Active Menu Items (e.g. "Fitness" tab) */
ul.nav-pills-custom .prog-list-item a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 20px !important;
    min-height: 48px !important;
}
ul.nav-pills-custom .prog-list-item a .label { margin: 0 !important; }

/* 3. Restore the spacious Drag & Drop PDF Box */
.dropzone-wrapper {
    padding: 40px 20px !important;
    min-height: 180px !important;
    border: 2px dashed rgba(128,128,128,0.4) !important;
    background: rgba(128,128,128,0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    transition: 0.2s !important;
}
.dropzone-wrapper:hover {
    border-color: var(--theme-primary) !important;
    background: rgba(128,128,128,0.05) !important;
}

/* 4. Transform tiny GridView Action Links into Clickable Premium Buttons */
.apple-table td a:not(.btn) {
    text-decoration: none !important; 
    display: inline-block !important; 
    margin: 0 2px !important; 
}
.apple-table td a:not(.btn) i.fa {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    background-color: var(--theme-input-bg) !important;
    border: 1px solid rgba(128,128,128,0.3) !important;
    transition: all 0.2s !important;
}

/* Edit Icon */
.apple-table td a i.fa-edit, .apple-table td a i.fa-pencil { color: var(--theme-primary) !important; }
.apple-table td a i.fa-edit:hover, .apple-table td a i.fa-pencil:hover { background-color: var(--theme-primary) !important; color: #fff !important; }

/* Delete / Trash Icon */
.apple-table td a i.fa-trash { color: var(--theme-danger) !important; }
.apple-table td a i.fa-trash:hover { background-color: var(--theme-danger) !important; color: #fff !important; }

/* Save (Floppy Disk) Icon - Green Tint */
.apple-table td a i.fa-save { 
    color: var(--theme-success) !important; 
    border-color: rgba(52,199,89,0.4) !important; 
    background-color: rgba(52,199,89,0.1) !important;
}
.apple-table td a i.fa-save:hover { background-color: var(--theme-success) !important; color: #fff !important; }

/* Cancel (X) Icon */
.apple-table td a i.fa-times { color: var(--theme-text-muted) !important; }
.apple-table td a i.fa-times:hover { background-color: rgba(128,128,128,0.15) !important; color: var(--theme-text-main) !important; }

/* Keep Inputs Inside the GridView Edit Mode Clean */
.apple-table td input[type="text"] {
    width: 100% !important;
    min-width: 120px !important;
    margin: 0 !important;
}

/* ==========================================================================
   SECTION 36: EMAIL MODAL FIXES (Tags, Attachments & Inputs)
   Restores the UI for the Email Composer
   ========================================================================== */

/* 1. The Recipient Input Container (Looks like a text box but holds tags) */
#recipientContainer { 
    border: 1px solid rgba(128,128,128,0.3) !important; 
    padding: 6px 10px !important; 
    min-height: 44px !important; 
    border-radius: 8px !important; 
    cursor: text !important; 
    background: var(--theme-input-bg) !important; 
    display: flex !important; 
    flex-wrap: wrap !important; 
    align-items: center !important; 
    gap: 6px !important;
    transition: border 0.2s, box-shadow 0.2s !important;
}
#recipientContainer:focus-within {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(128, 128, 128, 0.15) !important;
}

/* 2. The Recipient Email Tag (The Bubble) */
.tag-bubble { 
    background: var(--theme-primary) !important; 
    color: #fff !important; 
    padding: 4px 10px 4px 12px !important; 
    border-radius: 16px !important; 
    font-size: 13px !important; 
    font-weight: 600 !important; 
    display: inline-flex !important; 
    align-items: center !important; 
    gap: 8px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* 3. The 'X' Button on the Tag */
.tag-remove { 
    cursor: pointer !important; 
    font-weight: bold !important; 
    font-size: 16px !important; 
    line-height: 1 !important; 
    opacity: 0.6 !important; 
    transition: 0.2s !important;
    margin-left: 4px !important;
}
.tag-remove:hover { opacity: 1 !important; }

/* 4. The raw input field inside the container */
#recipientInput { 
    border: none !important; 
    outline: none !important; 
    background: transparent !important; 
    color: var(--theme-text-main) !important; 
    min-width: 150px !important; 
    flex-grow: 1 !important; 
    font-size: 14px !important; 
    padding: 4px 0 !important;
}

/* 5. Attachment List Styling */
#fileListDisplay { 
    margin-top: 10px !important; 
    font-size: 13px !important; 
    color: var(--theme-text-muted) !important; 
}
.file-item { 
    border: 1px solid rgba(128,128,128,0.2) !important; 
    padding: 8px 12px !important; 
    display: flex !important; 
    justify-content: space-between !important;
    align-items: center !important;
    color: var(--theme-text-main) !important;
    background: rgba(128,128,128,0.03) !important;
    border-radius: 6px !important;
    margin-bottom: 6px !important;
}
.att-remove { 
    color: var(--theme-danger) !important; 
    font-weight: bold !important; 
    cursor: pointer !important; 
    font-size: 18px !important;
    transition: 0.2s !important;
}
.att-remove:hover { opacity: 0.7 !important; }

/* 6. Overlays for Sending Animation */
#processingOverlay, #dropOverlay {
    border-radius: 16px !important;
}