/* WordPress-safe reset: scoped only to this app */
        .pharmacy-app,
        .pharmacy-app *,
        .pharmacy-app *::before,
        .pharmacy-app *::after {
            box-sizing: border-box;
        }

        /*
         * Do not apply negative margins or global layout resets to html/body.
         * WordPress themes and the admin bar need their original top spacing.
         */
        .pharmacy-app {
            width: 100%;
            max-width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            background: rgba(255,255,255,0.95);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0 0 80px 0 !important;
            padding: 0 !important;
            position: relative;
            isolation: isolate;
        }

        /* Prevent common WordPress content wrappers from clipping the app */
        .entry-content:has(.pharmacy-app),
        .wp-block-post-content:has(.pharmacy-app) {
            overflow: visible;
        }
        .app-header { background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%); color:white; padding:20px!important; text-align:center; position:relative; overflow:hidden; width:100%; }
        .app-header::before { content:'💊'; position:absolute; font-size:100px; opacity:0.1; right:20px; top:50%; transform:translateY(-50%); animation:float 6s ease-in-out infinite; }
        @keyframes float { 0%,100%{transform:translateY(-50%) rotate(0deg);}50%{transform:translateY(-60%) rotate(5deg);} }
        .app-header h1 { font-size:2em; color:white; margin-bottom:5px!important; text-shadow:2px 2px 4px rgba(0,0,0,0.2); }
        .sync-status { background:rgba(255,255,255,0.2); padding:6px 12px!important; border-radius:20px; display:inline-block; margin-top:8px!important; font-size:12px; }
        .nav-tabs { display:flex; background:#f8f9fa; border-bottom:3px solid #e9ecef; overflow-x:auto; width:100%; }
        .nav-tab { flex:1; padding:15px 10px!important; background:none; border:none; cursor:pointer; font-size:14px; font-weight:600; color:#666; transition:all 0.3s; position:relative; white-space:nowrap; min-width:100px; }
        .nav-tab:hover { background:#e9ecef; color:#11998e; }
        .nav-tab.active { color:#11998e; background:white; }
        .nav-tab.active::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:#11998e; }
        .app-content { flex:1; width:100%; padding:20px!important; }
        .tab-content { display:none; animation:fadeIn 0.5s; width:100%; }
        .tab-content.active { display:block; }
        @keyframes fadeIn { from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);} }
        .toast-container { position:fixed; top:20px; right:20px; z-index:999999; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
        .toast { background:white; padding:15px 20px!important; border-radius:10px; box-shadow:0 5px 20px rgba(0,0,0,0.3); display:flex; align-items:center; gap:10px; min-width:300px; max-width:400px; transform:translateX(400px); opacity:0; transition:all 0.3s ease; border-left:4px solid; pointer-events:all; }
        .toast.show { transform:translateX(0); opacity:1; }
        .toast.success{border-left-color:#11998e;} .toast.error{border-left-color:#e74c3c;} .toast.warning{border-left-color:#f39c12;} .toast.info{border-left-color:#667eea;}
        .toast-icon{font-size:20px;} .toast-content{flex:1;} .toast-title{font-weight:600;color:#333;margin-bottom:2px;} .toast-message{font-size:14px;color:#666;}
        .toast-close{background:none;border:none;font-size:18px;cursor:pointer;color:#999;padding:0!important;width:24px;height:24px;display:flex;align-items:center;justify-content:center;}


        /* WordPress admin-bar compatibility */
        .admin-bar .toast-container { top: 52px; }
        .admin-bar .password-overlay { padding-top: 32px !important; }

        @media screen and (max-width: 782px) {
            .admin-bar .toast-container { top: 66px; }
            .admin-bar .password-overlay { padding-top: 46px !important; }
        }

        /* ══════════════════════════════════════════
           MULTI-ROW ENTRY FORM (NEW)
        ══════════════════════════════════════════ */
        .entry-form { background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%); padding:25px!important; border-radius:15px; box-shadow:0 10px 30px rgba(0,0,0,0.1); width:100%; margin-bottom:20px!important; position:sticky; top:0; z-index:100; }
        .entry-form h2 { margin-bottom:10px!important; margin-top:-15px!important; color:#333; }
        .entry-form-subtitle { font-size:13px; color:#666; margin-bottom:16px!important; }

        /* Top meta row (date, supplier/customer) */
        .form-meta-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:16px!important; background:white; padding:14px!important; border-radius:10px; border:2px solid #e0e7ef; }
        .form-group { display:flex; flex-direction:column; }
        .form-group label { font-weight:600; color:#333; margin-bottom:6px!important; font-size:12px; text-transform:uppercase; letter-spacing:0.5px; }
        .form-group input,.form-group select { padding:10px!important; border:2px solid #ddd; border-radius:8px; font-size:14px; transition:all 0.3s; background:white; width:100%; }
        .form-group input:focus,.form-group select:focus { outline:none; border-color:#11998e; box-shadow:0 0 0 3px rgba(17,153,142,0.1); }

        /* Items table */
        .items-table-wrap { background:white; border-radius:10px; border:2px solid #e0e7ef; overflow:hidden; margin-bottom:14px!important; }
        .items-table-header { background:linear-gradient(135deg,#11998e,#38ef7d); padding:6px 10px!important; display:flex; align-items:center; justify-content:space-between; }
        .items-table-header span { color:white; font-weight:700; font-size:13px; letter-spacing:0.5px; }
        .items-grid { width:100%; border-collapse:collapse; table-layout:fixed; }
        .items-grid thead tr { background:#f0faf8; }
        .items-grid thead th { padding:9px 10px!important; font-size:11px; font-weight:700; color:#11998e; text-transform:uppercase; letter-spacing:0.6px; text-align:left; border-bottom:2px solid #d0ede9; white-space:nowrap; }
        .items-grid thead th:last-child { text-align:center; }
        .items-grid tbody tr { border-bottom:1px solid #f0f0f0; transition:background 0.15s; }
        .items-grid tbody tr:hover { background:#f8fffe; }
        .items-grid tbody tr:last-child { border-bottom:none; }
        .items-grid td { padding:7px 6px!important; vertical-align:middle; }
        .items-grid td input, .items-grid td select { padding:8px 10px!important; border:1.5px solid #ddd; border-radius:7px; font-size:13px; width:100%; min-width:0; background:white; transition:border-color 0.2s; outline:none; box-sizing:border-box!important; }
        .items-grid td input:focus, .items-grid td select:focus { border-color:#11998e; box-shadow:0 0 0 2px rgba(17,153,142,0.1); }
        .items-grid td input[readonly] { background:#f8f9fa; color:#666; cursor:default; }
        .items-grid td.row-num { color:#bbb; font-size:12px; font-weight:600; text-align:center; width:32px; }
        .items-grid td.row-total { font-weight:700; color:#11998e; font-size:13px; white-space:nowrap; min-width:120px; }
        .items-grid td.row-actions { text-align:center; width:42px; }
        .remove-row-btn { background:none; border:none; cursor:pointer; color:#e74c3c; font-size:18px; padding:2px 4px!important; border-radius:5px; line-height:1; transition:all 0.2s; }
        .remove-row-btn:hover { background:#fde8e8; color:#c0392b; }
        .remove-row-btn:disabled { color:#ddd; cursor:default; }

        /* Price hint inside cell */

        /* Stock badge inside cell */
        .stock-badge { font-size:10px; font-weight:600; padding:2px 6px!important; border-radius:10px; white-space:nowrap; display:inline-block; margin-top:3px!important; }
        .stock-badge.ok { background:#e8f5e9; color:#2e7d32; }
        .stock-badge.low { background:#fde8e8; color:#c0392b; }
        .stock-badge.none { background:#f5f5f5; color:#999; }

        .pharmacy-app .add-row-btn { background:transparent!important; background-color:transparent!important; border:2px dashed #11998e!important; color:#11998e!important; width:100%; padding:10px!important; cursor:pointer; font-size:13px; font-weight:600; border-radius:0 0 8px 8px; transition:none!important; display:flex; align-items:center; justify-content:center; gap:6px; appearance:none; -webkit-appearance:none; box-shadow:none!important; text-shadow:none!important; }
        .pharmacy-app .add-row-btn:hover,
        .pharmacy-app .add-row-btn:focus,
        .pharmacy-app .add-row-btn:focus-visible,
        .pharmacy-app .add-row-btn:active { background:transparent!important; background-color:transparent!important; color:#11998e!important; border-color:#11998e!important; box-shadow:none!important; outline:none!important; transform:none!important; }

        /* Summary bar */
        .entry-summary { background:white; border-radius:10px; padding:16px 20px!important; border-left:5px solid #11998e; display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:14px!important; }
        .summary-item { display:flex; flex-direction:column; gap:2px; }
        .summary-label { font-size:11px; color:#888; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }
        .summary-value { font-size:1.2em; font-weight:800; color:#11998e; }
        .summary-value.profit { color:#667eea; }
        .summary-value.negative { color:#e74c3c; }

        /* Sales entry form variant */
        .sales-entry-form { background:linear-gradient(135deg,#f5f7fa 0%,#dde8f5 100%); }
        .sales-entry-form .items-table-header { background:linear-gradient(135deg,#667eea,#764ba2); }
        .sales-entry-form .items-grid thead th { color:#667eea; }
        .sales-entry-form .items-grid thead tr { background:#f2f0fc; }
        .sales-entry-form .items-grid thead th { border-bottom-color:#d4cef5; }
        .sales-entry-form .items-table-wrap { border-color:#d4cef5; }
        .pharmacy-app .sales-entry-form .add-row-btn { border-color:#667eea!important; color:#667eea!important; background:transparent!important; background-color:transparent!important; }
        .pharmacy-app .sales-entry-form .add-row-btn:hover,
        .pharmacy-app .sales-entry-form .add-row-btn:focus,
        .pharmacy-app .sales-entry-form .add-row-btn:focus-visible,
        .pharmacy-app .sales-entry-form .add-row-btn:active { background:transparent!important; background-color:transparent!important; color:#667eea!important; border-color:#667eea!important; box-shadow:none!important; outline:none!important; transform:none!important; }
        .sales-entry-form .entry-summary { border-left-color:#667eea; }
        .sales-entry-form .form-meta-row { border-color:#d4cef5; }

        .form-actions { text-align:center; margin-top:4px!important; }
        .btn { padding:12px 25px!important; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.3s; text-transform:uppercase; letter-spacing:1px; margin:5px!important; display:inline-block; }
        .btn-primary { background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%); color:white; box-shadow:0 4px 15px rgba(17,153,142,0.4); }
        .btn-primary:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 6px 20px rgba(17,153,142,0.6); }
        .btn-success { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; }
        .btn-success:hover:not(:disabled) { transform:translateY(-2px); }
        .btn-warning { background:linear-gradient(135deg,#f39c12 0%,#f1c40f 100%); color:white; }
        .btn-warning:hover:not(:disabled) { transform:translateY(-2px); }
        .btn-danger { background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%); color:white; }
        .btn-danger:hover:not(:disabled) { transform:translateY(-2px); }
        .btn-pdf { background:linear-gradient(135deg,#c0392b 0%,#e74c3c 100%); color:white; box-shadow:0 4px 15px rgba(192,57,43,0.4); }
        .btn-pdf:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 6px 20px rgba(192,57,43,0.6); }
        .btn-small { padding:6px 12px!important; font-size:12px; }
        .btn:disabled { opacity:0.65; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
        .btn-spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,0.5); border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite; vertical-align:middle; margin-right:6px!important; }
        @keyframes spin { to { transform:rotate(360deg); } }

        .data-table { width:100%; border-collapse:collapse; margin-top:20px!important; background:white; border-radius:10px; overflow:hidden; box-shadow:0 5px 15px rgba(0,0,0,0.1); }
        .data-table th { background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%); color:white; padding:15px 12px!important; text-align:left; font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:1px; }
        .data-table td { padding:12px!important; border-bottom:1px solid #eee; font-size:14px; }
        .data-table tr:hover { background:#f8f9fa; }
        .data-table tr:last-child td { border-bottom:none; }
        .actions { display:flex; gap:5px; }
        .stock-high{color:#11998e;font-weight:bold;} .stock-medium{color:#f39c12;font-weight:bold;} .stock-low{color:#e74c3c;font-weight:bold;}
        .show-more-table-btn { display:block; width:100%; padding:12px!important; margin-top:10px!important; background:linear-gradient(135deg,#f5f7fa,#e0e7ef); border:2px dashed #b0bec5; border-radius:8px; font-size:13px; font-weight:600; color:#546e7a; cursor:pointer; text-align:center; transition:all 0.2s; }
        .show-more-table-btn:hover { background:linear-gradient(135deg,#e0e7ef,#cfd8dc); color:#11998e; border-color:#11998e; }
        .alert-box { background:#fff3cd; border:2px solid #ffc107; border-radius:10px; padding:0!important; margin-bottom:20px!important; overflow:hidden; }
        .alert-header { display:flex; justify-content:space-between; align-items:center; padding:15px!important; cursor:pointer; user-select:none; }
        .alert-header h3 { color:#856404; margin:0!important; }
        .alert-toggle { background:none; border:none; cursor:pointer; font-size:18px; color:#856404; padding:0!important; }
        .alert-body { padding:0 15px 15px!important; }
        .alert-section { margin-bottom:10px!important; }
        .alert-section-title { font-weight:bold; color:#856404; margin-bottom:5px!important; }
        .alert-item { padding:4px 0!important; border-bottom:1px solid #ffeaa7; font-size:13px; color:#856404; }
        .alert-item:last-child { border-bottom:none; }
        .show-more-alert-btn { background:none; border:1px solid #f39c12; color:#856404; padding:3px 10px!important; border-radius:12px; font-size:12px; cursor:pointer; margin-top:5px!important; }
        .show-more-alert-btn:hover { background:#ffc107; }
        .stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-bottom:20px!important; }
        .stat-card { background:white; padding:20px!important; border-radius:15px; box-shadow:0 5px 15px rgba(0,0,0,0.1); text-align:center; border-top:4px solid #11998e; }
        .stat-value { font-size:2em; font-weight:bold; color:#333; margin:10px 0!important; }
        .stat-label { color:#666; font-size:14px; text-transform:uppercase; letter-spacing:1px; }
        .live-badge { background:#11998e; color:white; padding:2px 8px!important; border-radius:12px; font-size:11px; margin-left:8px!important; animation:pulse 2s infinite; }
        @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
        .sub-tabs { display:flex; gap:5px; margin-bottom:20px!important; background:#f8f9fa; padding:5px!important; border-radius:10px; flex-wrap:wrap; }
        .sub-tab { flex:1; padding:10px!important; background:none; border:none; cursor:pointer; font-size:13px; font-weight:600; color:#666; border-radius:8px; transition:all 0.3s; white-space:nowrap; min-width:100px; }
        .sub-tab.active { background:white; color:#11998e; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
        .sub-tab-content { display:none; }
        .sub-tab-content.active { display:block; }
        .period-bar { background:white; border:2px solid #e9ecef; border-radius:14px; padding:14px 18px!important; margin-bottom:20px!important; display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
        .period-bar-label { font-size:12px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:.6px; white-space:nowrap; }
        .period-btns { display:flex; gap:6px; flex-wrap:wrap; }
        .period-btn { padding:6px 14px!important; border:1.5px solid #ddd; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; background:white; color:#777; transition:all .2s; }
        .period-btn.active { background:#11998e; border-color:#11998e; color:white; box-shadow:0 2px 8px rgba(17,153,142,.3); }
        .period-btn:hover:not(.active) { border-color:#11998e; color:#11998e; }
        .active-period-pill { font-size:11px; color:#11998e; font-weight:700; background:#e8f5e9; padding:4px 10px!important; border-radius:12px; white-space:nowrap; margin-left:auto; }
        .custom-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px!important; padding:12px 18px!important; background:#f8f9fa; border-radius:10px; }
        .custom-row label { font-size:12px; font-weight:600; color:#555; }
        .custom-row input[type=date] { padding:7px 10px!important; border:1.5px solid #ddd; border-radius:8px; font-size:13px; background:white; cursor:pointer; }
        .custom-row input[type=date]:focus { outline:none; border-color:#11998e; }
        .custom-row .apply-btn { padding:7px 16px!important; background:#11998e; color:white; border:none; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; letter-spacing:.5px; }
        .custom-row .apply-btn:hover { background:#0d8077; }
        /* Modern Reports graphs: one graph per row, stable canvas sizing, horizontal scroll only inside each chart */
        .graphs-grid { display:grid; grid-template-columns:1fr; gap:24px; width:100%; }
        .chart-card {
            background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
            border:1px solid rgba(17,153,142,0.10);
            border-radius:20px;
            box-shadow:0 12px 32px rgba(15,23,42,0.10);
            padding:22px!important;
            position:relative;
            overflow:hidden;
            width:100%;
            min-width:0;
        }
        .chart-card:hover { box-shadow:0 16px 40px rgba(15,23,42,0.14); transform:translateY(-1px); transition:all .25s ease; }
        .chart-card::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; }
        .chart-card.green::before  { background:linear-gradient(90deg,#11998e,#38ef7d); }
        .chart-card.blue::before   { background:linear-gradient(90deg,#667eea,#764ba2); }
        .chart-card.orange::before { background:linear-gradient(90deg,#f39c12,#f1c40f); }
        .chart-card.teal::before   { background:linear-gradient(90deg,#00b09b,#96c93d); }
        .chart-card.purple::before { background:linear-gradient(90deg,#a18cd1,#fbc2eb); }
        .chart-card.red::before    { background:linear-gradient(90deg,#e74c3c,#c0392b); }
        .chart-card h4 { font-size:14px; font-weight:800; color:#1f2937; margin-bottom:4px!important; text-transform:uppercase; letter-spacing:.55px; }
        .chart-subtitle { font-size:12px; color:#7b8794; margin-bottom:14px!important; }
        .chart-scroll { width:100%; overflow-x:auto; overflow-y:hidden; padding:4px 0 10px!important; -webkit-overflow-scrolling:touch; }
        .chart-scroll::-webkit-scrollbar { height:9px; }
        .chart-scroll::-webkit-scrollbar-track { background:#eef2f7; border-radius:12px; }
        .chart-scroll::-webkit-scrollbar-thumb { background:#c7d2df; border-radius:12px; }
        .chart-scroll::-webkit-scrollbar-thumb:hover { background:#11998e; }
        .chart-stage { position:relative; width:100%; min-width:780px; height:370px; }
        .chart-stage.tall { height:430px; }
        .chart-stage.compact { height:400px; }
        .chart-stage canvas { display:block; width:100%!important; height:100%!important; }
        .chart-empty-note { color:#94a3b8; font-size:12px; text-align:center; margin-top:8px!important; }
        .setup-panel { background:#e8f5e9; border:2px solid #4caf50; padding:20px!important; border-radius:10px; margin-bottom:20px!important; width:100%; }
        .setup-panel h3 { color:#2e7d32; margin-bottom:10px!important; }
        .firebase-config-form { display:grid; gap:10px; margin-top:15px!important; }
        .firebase-config-form input { padding:10px!important; border:2px solid #81c784; border-radius:8px; font-size:13px; width:100%; font-family:monospace; background:white; }
        .firebase-config-form input:focus { outline:none; border-color:#4caf50; }

        /* PASSWORD OVERLAY */
        .password-overlay { position:fixed; top:0; left:0; width:100vw!important; height:100vh!important; background:rgba(0,0,0,0.7); z-index:9999; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
        .password-box { background:white; padding:30px!important; border-radius:15px; box-shadow:0 20px 60px rgba(0,0,0,0.4); text-align:center; min-width:300px; max-width:400px; }
        .password-box h3 { color:#333; margin-bottom:5px!important; font-size:1.4em; }
        .password-box p { color:#666; font-size:13px; margin-bottom:20px!important; }
        .password-box input { width:100%!important; padding:12px!important; border:2px solid #ddd; border-radius:8px; font-size:16px; text-align:center; letter-spacing:4px; margin-bottom:15px!important; }
        .password-box input:focus { outline:none; border-color:#11998e; }
        .password-error { color:#e74c3c; font-size:13px; margin-top:-10px!important; margin-bottom:10px!important; display:none; }
        .search-bar-wrap { display:flex; align-items:center; gap:10px; margin-bottom:0px!important; }
        .search-bar { position:relative; flex:1; }
        .search-bar input { width:100%; padding:11px 42px 11px 16px!important; border:2px solid #ddd; border-radius:10px; font-size:14px; background:white; transition:all 0.3s; outline:none; }
        .search-bar input:focus { border-color:#11998e; box-shadow:0 0 0 3px rgba(17,153,142,0.1); }
        .search-bar .search-icon { position:absolute; right:13px; top:50%; transform:translateY(-50%); font-size:16px; pointer-events:none; color:#aaa; }
        .search-bar .clear-search { position:absolute; right:13px; top:50%; transform:translateY(-50%); font-size:16px; cursor:pointer; color:#aaa; background:none; border:none; padding:0!important; display:none; }
        .search-bar .clear-search:hover { color:#e74c3c; }
        .search-count { font-size:12px; color:#888; white-space:nowrap; font-weight:600; min-width:80px; text-align:right; }
        .search-count span { color:#11998e; font-weight:700; }
        mark { background:#fff176; color:#333; border-radius:2px; padding:0 2px!important; }
        .hidden { display:none !important; }

        /* ── PAYABLES ── */
        .payables-lock-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px!important; text-align:center; }
        .payables-lock-icon { font-size:64px; margin-bottom:20px!important; animation:lockPulse 2s ease-in-out infinite; }
        @keyframes lockPulse { 0%,100%{transform:scale(1);}50%{transform:scale(1.1);} }
        .payables-lock-screen h2 { color:#555; font-size:1.6em; margin-bottom:8px!important; }
        .payables-lock-screen p { color:#888; font-size:14px; margin-bottom:25px!important; max-width:320px; }
        .payables-unlock-form { background:white; padding:25px!important; border-radius:15px; box-shadow:0 8px 30px rgba(0,0,0,0.12); min-width:300px; max-width:360px; width:100%; }
        .payables-unlock-form input { width:100%!important; padding:12px!important; border:2px solid #ddd; border-radius:8px; font-size:16px; text-align:center; letter-spacing:4px; margin-bottom:12px!important; outline:none; transition:border-color 0.3s; }
        .payables-unlock-form input:focus { border-color:#11998e; }
        .payables-error { color:#e74c3c; font-size:13px; margin-bottom:10px!important; display:none; }
        .payable-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px!important; }
        .payable-stat-card { background:white; padding:18px!important; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.08); text-align:center; }
        .payable-stat-card.red { border-top:4px solid #e74c3c; }
        .payable-stat-card.orange { border-top:4px solid #f39c12; }
        .payable-stat-card.green { border-top:4px solid #11998e; }
        .payable-stat-card.blue { border-top:4px solid #667eea; }
        .payable-stat-value { font-size:1.6em; font-weight:bold; color:#333; margin:8px 0!important; }
        .payable-stat-label { color:#888; font-size:12px; text-transform:uppercase; letter-spacing:0.8px; }
        .payable-form { background:linear-gradient(135deg,#fce4ec 0%,#f8bbd0 100%); padding:22px!important; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,0.09); margin-bottom:24px!important; border-left:5px solid #e91e63; }
        .payable-form h2 { color:#880e4f; margin-bottom:6px!important; font-size:1.1em; }
        .payable-form-subtitle { color:#ad1457; font-size:13px; margin-bottom:16px!important; }
        .payable-form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:16px!important; }
        .payable-form .form-group input, .payable-form .form-group select { border-color:#f48fb1; }
        .payable-form .form-group input:focus, .payable-form .form-group select:focus { border-color:#e91e63; box-shadow:0 0 0 3px rgba(233,30,99,0.12); }
        .payable-calc { background:white; padding:16px!important; border-radius:10px; margin-top:14px!important; border-left:4px solid #e91e63; }
        .payable-calc .calc-row { display:flex; justify-content:space-between; padding:8px 0!important; border-bottom:1px solid #fce4ec; font-size:14px; }
        .payable-calc .calc-row:last-child { border-bottom:none; font-weight:700; font-size:1.1em; color:#e91e63; }
        .payable-prev-balance { background:#fff3e0; border:1px solid #ffcc02; border-radius:8px; padding:10px 14px!important; margin-bottom:12px!important; font-size:13px; color:#e65100; display:flex; align-items:center; gap:8px; }
        .payable-prev-balance strong { color:#bf360c; }
        .supplier-cards-grid { display:flex; flex-direction:column; gap:14px; margin-top:20px!important; }
        .supplier-card { background:white; border-radius:14px; box-shadow:0 4px 16px rgba(0,0,0,0.09); overflow:hidden; transition:box-shadow 0.2s; }
        .supplier-card:hover { box-shadow:0 8px 28px rgba(0,0,0,0.14); }
        .supplier-card-header { padding:16px 18px!important; display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; }
        .supplier-card-header.has-balance { background:linear-gradient(135deg,#fce4ec,#fff); border-left:5px solid #e91e63; }
        .supplier-card-header.cleared { background:linear-gradient(135deg,#e8f5e9,#fff); border-left:5px solid #11998e; }
        .supplier-card-name { font-size:1em; font-weight:700; color:#333; margin-bottom:2px!important; }
        .supplier-card-meta { font-size:12px; color:#888; }
        .supplier-card-balance { text-align:right; }
        .supplier-card-balance-amt { font-size:1.2em; font-weight:800; }
        .supplier-card-balance-amt.owing { color:#e91e63; }
        .supplier-card-balance-amt.clear { color:#11998e; }
        .supplier-card-balance-label { font-size:11px; color:#aaa; text-transform:uppercase; letter-spacing:0.5px; }
        .supplier-card-toggle { color:#aaa; font-size:18px; margin-left:10px!important; transition:transform 0.25s; flex-shrink:0; }
        .supplier-card-toggle.open { transform:rotate(180deg); }
        .supplier-txn-wrap { display:none; border-top:1px solid #f0f0f0; }
        .supplier-txn-wrap.open { display:block; }
        .supplier-txn-table { width:100%; border-collapse:collapse; }
        .supplier-txn-table th { background:#f8f9fa; color:#555; padding:10px 14px!important; font-size:11px; text-transform:uppercase; letter-spacing:0.8px; text-align:left; border-bottom:2px solid #eee; }
        .supplier-txn-table td { padding:10px 14px!important; font-size:13px; border-bottom:1px solid #f5f5f5; vertical-align:middle; }
        .supplier-txn-table tr:last-child td { border-bottom:none; }
        .supplier-txn-table tr:hover td { background:#fafafa; }
        .txn-running-balance { font-weight:700; }
        .txn-running-balance.owing { color:#e91e63; }
        .txn-running-balance.clear { color:#11998e; }
        .supplier-card-footer { padding:10px 18px!important; background:#fafafa; border-top:1px solid #f0f0f0; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
        .payable-badge { display:inline-block; padding:3px 10px!important; border-radius:12px; font-size:11px; font-weight:700; }
        .badge-paid { background:#d4edda; color:#155724; }
        .badge-partial { background:#fff3cd; color:#856404; }
        .badge-pending { background:#f8d7da; color:#721c24; }
        .payable-progress-bar { height:6px; background:#eee; border-radius:4px; overflow:hidden; margin-top:3px!important; width:80px; display:inline-block; vertical-align:middle; }
        .payable-progress-fill { height:100%; border-radius:4px; transition:width 0.4s ease; }

        @media (max-width:900px) {
            .items-grid { font-size:12px; display:block; overflow-x:auto; }
            .items-grid thead th, .items-grid td { white-space:nowrap; }
        }
        @media (max-width:768px) {
            .app-header{padding:15px!important;} .app-header h1{font-size:1.5em;} .app-header::before{font-size:60px;}
            .nav-tab{padding:12px 8px!important;font-size:12px;min-width:80px;}
            .app-content{padding:15px!important;} .entry-form{padding:15px!important;}
            .stats-grid{grid-template-columns:repeat(2,1fr);}
            .chart-stage{min-width:720px;height:340px;} .chart-stage.tall{height:390px;}
            .data-table{font-size:12px;display:block;overflow-x:auto;}
            .data-table th,.data-table td{padding:8px!important;white-space:nowrap;}
            .actions{flex-direction:column;}
            .btn{padding:10px 20px!important;font-size:12px;}
            .toast{min-width:250px;max-width:calc(100vw - 40px);}
            .sub-tab{min-width:90px;font-size:12px;}
            .period-bar{flex-direction:column;align-items:flex-start;}
            .active-period-pill{margin-left:0;}
            .payable-stats-grid{grid-template-columns:repeat(2,1fr);}
        }
        @media (min-width:1200px) { .form-meta-row{grid-template-columns:repeat(5,1fr);} }

/* Access-code fields: visually masked without using type=password, so browser password managers do not offer to save them. */
.ip-private-input {
    -webkit-text-security: disc !important;
    text-security: disc !important;
    caret-color: #11998e;
}
.ip-private-input::placeholder {
    -webkit-text-security: none !important;
    text-security: none !important;
}

/* Matching password design for Reports and Payables */
.password-lock-icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 10px !important;
}
.shared-password-screen {
    min-height: 520px;
    padding: 40px 20px !important;
    background: rgba(17,153,142,0.04);
    border-radius: 15px;
}
.shared-password-screen .password-box {
    width: 100%;
    min-width: 0;
    max-width: 400px;
}
.password-box .ip-private-input {
    font-family: Arial, sans-serif !important;
}


/* Force stable Add Another button appearance against WordPress theme states */
.pharmacy-app button.add-row-btn,
.pharmacy-app button.add-row-btn:hover,
.pharmacy-app button.add-row-btn:focus,
.pharmacy-app button.add-row-btn:focus-visible,
.pharmacy-app button.add-row-btn:active,
.pharmacy-app button.add-row-btn:visited {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #11998e !important;
    border: 2px dashed #11998e !important;
    box-shadow: none !important;
    outline: 0 !important;
    filter: none !important;
    opacity: 1 !important;
    text-decoration: none !important;
    transform: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.pharmacy-app .sales-entry-form button.add-row-btn,
.pharmacy-app .sales-entry-form button.add-row-btn:hover,
.pharmacy-app .sales-entry-form button.add-row-btn:focus,
.pharmacy-app .sales-entry-form button.add-row-btn:focus-visible,
.pharmacy-app .sales-entry-form button.add-row-btn:active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #667eea !important;
    border-color: #667eea !important;
}
.pharmacy-app button.add-row-btn::before,
.pharmacy-app button.add-row-btn::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
}