/* Sravana Maasam Cheera Pasupu Kunkuma — Application Portal Design v2: clean institutional look (maroon + gold on white), no emoji, inline SVG icons, restrained motion. Built to survive being embedded inside a WordPress/Elementor page: the popup/admin overlays are appended directly to and hardened with !important against host-theme CSS (global text-transform/letter-spacing resets, background overrides, etc). */ /* Theme tokens live on :root (NOT #scpkApp) on purpose: .scpk-overlay, .scpk-modal and .scpk-admin-overlay are appended directly to , outside #scpkApp's DOM subtree, to escape host-page CSS conflicts (see note above) — but that also means a var() scoped to #scpkApp would not be inherited by them. :root is inherited everywhere in the document, including elements appended to later, so this is what actually makes the popup/admin panel pick up the theme colors at all. Caught this by diffing computed styles (var lookup returned empty string outside #scpkApp), not by eyeballing a screenshot — screenshots lie, computed styles don't. */ :root { --scpk-maroon: #7A1F3D; --scpk-maroon-dark: #591530; --scpk-gold: #B8862E; --scpk-paper: #FFFFFF; --scpk-paper-tint: #FBF7F1; --scpk-line: #E7DED2; --scpk-text: #2B2118; --scpk-text-soft: #6B6055; --scpk-danger: #A13434; --scpk-danger-bg: #FCEDED; --scpk-ok: #1E7E4F; --scpk-ok-bg: #E9F6EE; } #scpkApp, #scpkApp *, .scpk-overlay, .scpk-overlay *, .scpk-admin-overlay, .scpk-admin-overlay * { box-sizing: border-box !important; text-transform: none !important; letter-spacing: normal !important; font-family: -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif !important; } #scpkApp { background: var(--scpk-paper); color: var(--scpk-text); max-width: 460px; margin: 20px auto; border-radius: 12px; box-shadow: 0 1px 3px rgba(43,33,24,.08), 0 8px 24px rgba(43,33,24,.08); overflow: hidden; border: 1px solid var(--scpk-line); line-height: 1.45; font-size: 15px; } .scpk-icon { width: 1em; height: 1em; vertical-align: -0.15em; display: inline-block; } /* ---------- language toggle ---------- */ .scpk-lang-toggle { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 14px; background: var(--scpk-paper-tint); border-bottom: 1px solid var(--scpk-line); } .scpk-lang-toggle button { border: 1px solid var(--scpk-line); background: #fff; color: var(--scpk-text-soft); font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; } .scpk-lang-toggle button.active { background: var(--scpk-maroon); border-color: var(--scpk-maroon); color: #fff; } /* ---------- header ---------- */ .scpk-header { text-align: center; padding: 28px 20px 22px; background: var(--scpk-paper); border-bottom: 3px solid var(--scpk-gold); } .scpk-header .scpk-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.2px !important; text-transform: uppercase !important; color: var(--scpk-gold); margin-bottom: 8px; } .scpk-header h1 { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--scpk-maroon); line-height: 1.4; } .scpk-header .scpk-sub { font-size: 13px; font-weight: 500; color: var(--scpk-text-soft); } .scpk-body { padding: 22px 20px 26px; } /* ---------- district chip (landing, locked from URL) ---------- */ .scpk-district-badge { display: flex; align-items: center; gap: 10px; text-align: left; margin: 0 0 18px; padding: 12px 14px; border-radius: 8px; background: var(--scpk-paper-tint); border: 1px solid var(--scpk-line); border-left: 4px solid var(--scpk-maroon); } .scpk-district-badge .scpk-icon { color: var(--scpk-maroon); flex-shrink: 0; width: 22px; height: 22px; } .scpk-district-badge .scpk-tag { font-size: 10.5px; font-weight: 700; color: var(--scpk-text-soft); letter-spacing: .6px !important; text-transform: uppercase !important; } .scpk-district-badge .scpk-name { font-size: 17px; font-weight: 800; color: var(--scpk-maroon); word-break: break-word; } /* ---------- district picker (fallback, no URL param) ---------- */ .scpk-picker-title { font-size: 13px; font-weight: 700; color: var(--scpk-text-soft); margin: 0 0 12px; text-transform: uppercase !important; letter-spacing: .5px !important; } .scpk-district-grid { display: flex; flex-direction: column; gap: 10px; } .scpk-district-card { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--scpk-line); border-radius: 8px; padding: 14px 16px; text-align: left; font-size: 15px; font-weight: 700; color: var(--scpk-text); cursor: pointer; transition: border-color .15s, background .15s; } .scpk-district-card .scpk-chevron { color: var(--scpk-gold); flex-shrink: 0; } .scpk-district-card:hover, .scpk-district-card:active { background: var(--scpk-paper-tint); border-color: var(--scpk-maroon); } /* ---------- buttons ---------- */ .scpk-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; font-size: 15.5px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; color: #fff !important; background: var(--scpk-maroon); margin-top: 18px; min-height: 48px; transition: background .12s; } .scpk-btn:hover { background: var(--scpk-maroon-dark); } .scpk-btn:active { transform: translateY(1px); } .scpk-btn:disabled { opacity: .6; cursor: default; } .scpk-btn-small { display: inline-flex; width: auto; padding: 8px 14px; font-size: 13px; margin: 0; border-radius: 6px; min-height: auto; } .scpk-btn-outline { background: #fff !important; color: var(--scpk-maroon) !important; border: 1px solid var(--scpk-maroon); } .scpk-btn-outline:hover { background: var(--scpk-paper-tint) !important; } .scpk-admin-link { text-align: center; margin-top: 20px; } .scpk-admin-link a { color: var(--scpk-text-soft) !important; font-size: 12.5px; text-decoration: none; border-bottom: 1px dotted var(--scpk-text-soft); cursor: pointer; } /* ---------- form fields ---------- */ .scpk-field { margin-bottom: 15px; } .scpk-field label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--scpk-text-soft) !important; margin-bottom: 6px; text-transform: uppercase !important; letter-spacing: .3px !important; } .scpk-field label .scpk-icon { color: var(--scpk-gold); width: 14px; height: 14px; } .scpk-field input, .scpk-field select { width: 100%; padding: 12px 13px; font-size: 16px; font-weight: 600; color: var(--scpk-text) !important; border: 1.5px solid var(--scpk-line); border-radius: 7px; background: #fff !important; -webkit-appearance: none; appearance: none; } .scpk-field input:focus, .scpk-field select:focus { outline: none; border-color: var(--scpk-maroon); box-shadow: 0 0 0 3px rgba(122,31,61,.10); } .scpk-hint { font-size: 12px; color: var(--scpk-text-soft); margin-top: 5px; min-height: 14px; } .scpk-lookup-box { background: var(--scpk-ok-bg); border: 1px solid #bfe2cc; border-radius: 7px; padding: 9px 11px; font-size: 12.5px; font-weight: 600; color: #1c5c3c !important; margin-top: 8px; display: none; } .scpk-lookup-box.show { display: block; } .scpk-lookup-box select { margin-top: 6px; } .scpk-lookup-box.scpk-lookup-error { background: var(--scpk-danger-bg); border: 1px solid #f0c4c4; color: var(--scpk-danger) !important; } .scpk-error-box { display: flex; align-items: center; gap: 8px; background: var(--scpk-danger-bg); border: 1px solid #f0c4c4; color: var(--scpk-danger) !important; border-radius: 7px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; margin: 0 0 14px; display: none; } .scpk-error-box.show { display: flex; } /* ================================================================ POPUP OVERLAY — appended directly to , hardened against host-theme CSS conflicts (Elementor sections, transform-based sticky/parallax effects on ancestors, aggressive global resets). ================================================================ */ .scpk-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; background: rgba(20,14,8,.92) !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; z-index: 2147483647 !important; padding: 20px 14px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .scpk-modal { background: #fff !important; border-radius: 12px; max-width: 420px; width: 100%; margin: auto; padding: 0 0 22px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.35); color: var(--scpk-text) !important; line-height: 1.45; overflow: hidden; } .scpk-modal-head { background: var(--scpk-maroon); color: #fff; padding: 18px 44px 16px 20px; position: relative; } .scpk-modal-head h2 { margin: 0; font-size: 16.5px; font-weight: 800; color: #fff !important; } .scpk-modal-body { padding: 20px 20px 0; } .scpk-modal-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.18) !important; border: none; width: 30px; height: 30px; border-radius: 50%; color: #fff !important; cursor: pointer; display: flex; align-items: center; justify-content: center; } .scpk-modal-close:hover { background: rgba(255,255,255,.3) !important; } .scpk-modal .scpk-district-badge { margin: 0 20px 18px; border-radius: 7px; } .scpk-success-icon { width: 56px; height: 56px; margin: 6px auto 14px; border-radius: 50%; background: var(--scpk-ok-bg); color: var(--scpk-ok); display: flex; align-items: center; justify-content: center; } .scpk-success-icon .scpk-icon { width: 30px; height: 30px; } .scpk-appno { text-align: center; font-size: 17px; font-weight: 800; background: var(--scpk-paper-tint); border: 1.5px dashed var(--scpk-gold); border-radius: 8px; padding: 12px; margin: 14px 0; color: var(--scpk-maroon) !important; letter-spacing: .5px !important; } /* ================================================================ ADMIN PANEL — full-screen overlay, own utilitarian data-dense look. ================================================================ */ .scpk-admin-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; background: #F4F1EC !important; z-index: 2147483646 !important; overflow-y: auto !important; padding: 14px; color: #2B2118 !important; } .scpk-admin-topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .scpk-admin-topbar h2 { color: #591530 !important; font-size: 17px; margin: 0; font-weight: 800; } .scpk-logout-btn { background: #fff !important; border: 1px solid #A13434; color: #A13434 !important; font-weight: 700; padding: 7px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; } .scpk-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; } .scpk-stat-box { background: #fff; border: 1px solid #E7DED2; border-radius: 8px; padding: 10px 4px; text-align: center; } .scpk-stat-box .num { font-size: 18px; font-weight: 800; color: #591530 !important; } .scpk-stat-box .lbl { font-size: 9.5px; font-weight: 700; color: #6B6055 !important; text-transform: uppercase !important; letter-spacing: .3px !important; } .scpk-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; } .scpk-filter-bar select, .scpk-filter-bar input[type=text] { padding: 8px 10px; border: 1px solid #D9CFC0; border-radius: 6px; font-size: 13px; font-weight: 600; color: #2B2118 !important; background: #fff !important; } .scpk-bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; } .scpk-bulk-bar button { padding: 7px 12px; border-radius: 6px; border: 1px solid transparent; font-weight: 700; cursor: pointer; font-size: 12px; } .scpk-btn-approve { background: #E9F6EE !important; color: #1E7E4F !important; border-color: #1E7E4F !important; } .scpk-btn-reject { background: #FCEDED !important; color: #A13434 !important; border-color: #A13434 !important; } .scpk-btn-delete { background: #FCEDED !important; color: #A13434 !important; border-color: #A13434 !important; } .scpk-btn-word { background: #FFF6E2 !important; color: #8A5A00 !important; border-color: #B8862E !important; } .scpk-btn-csv { background: #EAF1FB !important; color: #1C4E8A !important; border-color: #1C4E8A !important; } .scpk-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid #E7DED2; background: #fff; } table.scpk-table { width: 100%; border-collapse: collapse; font-size: 12px; } table.scpk-table th, table.scpk-table td { border: 1px solid #EEE7DA; padding: 7px 8px; word-break: break-word; text-align: left; color: #2B2118 !important; } table.scpk-table th { background: #FBF7F1; font-weight: 800; color: #591530 !important; position: sticky; top: 0; } .scpk-badge { display: inline-block; padding: 3px 8px; border-radius: 10px; font-size: 10px; font-weight: 800; } .scpk-badge-pending { background: #FFF3D6 !important; color: #8A5A00 !important; } .scpk-badge-approved { background: #E9F6EE !important; color: #1E7E4F !important; } .scpk-badge-rejected { background: #FCEDED !important; color: #A13434 !important; } .scpk-row-actions button { margin: 2px; padding: 4px 7px; font-size: 10.5px; border-radius: 5px; border: none; font-weight: 700; cursor: pointer; } .scpk-row-actions .a-approve { background: #E9F6EE !important; color: #1E7E4F !important; } .scpk-row-actions .a-reject { background: #FCEDED !important; color: #A13434 !important; } .scpk-row-actions .a-edit { background: #FFF3D6 !important; color: #8A5A00 !important; } .scpk-row-actions .a-delete { background: #FCEDED !important; color: #A13434 !important; } .scpk-row-actions .a-public { background: #EAF1FB !important; color: #1C4E8A !important; } .scpk-edit-row input { width: 100%; padding: 4px 6px; font-size: 12px; font-weight: 600; border: 1px solid #ccc; border-radius: 4px; background: #fff !important; color: #2B2118 !important; } .scpk-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0 4px; font-size: 12.5px; font-weight: 700; color: #6B6055 !important; } .scpk-pagination button { padding: 6px 14px; border-radius: 6px; border: 1px solid #D9CFC0; background: #fff !important; color: #591530 !important; font-weight: 700; cursor: pointer; font-size: 12.5px; } .scpk-pagination button:disabled { opacity: .4; cursor: default; } /* ---------- mobile refinements ---------- */ @media (max-width: 420px) { #scpkApp { margin: 0 auto; border-radius: 0; border-left: none; border-right: none; } .scpk-header h1 { font-size: 17px; } .scpk-modal { border-radius: 0; } .scpk-overlay { padding: 0 !important; align-items: stretch !important; } .scpk-overlay .scpk-modal { min-height: 100%; margin: 0; } .scpk-stats { grid-template-columns: repeat(3, 1fr); } } /* ---------- print (admin table only) ---------- */ @media print { body * { visibility: hidden !important; } .scpk-table-wrap, .scpk-table-wrap * { visibility: visible !important; } .scpk-table-wrap { position: absolute; left: 0; top: 0; width: 100%; border: none; } }