/* =====================================================
   ✅ IPO HISAB KITAB — CENTRAL STYLESHEET (app.css)
   Single source of truth for layout + components.
   Loaded once by header/sidebar.php — pages must NOT
   define their own <style> blocks for these patterns.
   ===================================================== */

/* -----------------------------------------------------
   1. GLOBAL / LAYOUT (moved from sidebar.php)
   ----------------------------------------------------- */
body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    overflow-x: hidden;
    background-color: #f4f6f9;
}

.header {
    height: 60px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
}
.logo { font-size: 1.2rem; color: #333; font-weight: 700; }
.right-section { display: flex; align-items: center; gap: 20px; }
.right-section i { font-size: 1.2rem; cursor: pointer; color: #555; }

.sidebar {
    width: 250px;
    background-color: #343a40;
    color: #fff;
    padding: 10px 0;
    position: fixed;
    top: 60px; left: 0;
    height: calc(100% - 60px);
    border-right: 1px solid #ddd;
    transition: all 0.3s ease;
    z-index: 200;
    overflow-y: auto;
}
.sidebar .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #c2c7d0;
    padding: 12px 20px;
    text-decoration: none;
    font-size: 0.95rem;
    border-left: 3px solid transparent;
    cursor: pointer;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
}
.sidebar .nav-link:hover { background-color: #495057; color: #fff; }
.sidebar .nav-link.active { background-color: #007bff; color: #fff; border-left: 3px solid #fff; }
.sidebar .nav-link i.icon-main { margin-right: 10px; font-size: 1.1rem; width: 20px; text-align: center; }
.sidebar-submenu { background-color: #2c3036; padding-left: 0; list-style: none; }
.sidebar-submenu .nav-link { padding-left: 50px; font-size: 0.9rem; padding-top: 8px; padding-bottom: 8px; }
.sidebar-submenu .nav-link.active { background-color: rgba(255,255,255,0.1); border-left-color: #007bff; }
.sidebar .nav-link[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.sidebar .bi-chevron-down { transition: transform 0.3s ease; font-size: 0.8rem; }
.sidebar-divider-text {
    padding: 20px 20px 5px;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6c757d;
    font-weight: bold;
    letter-spacing: 0.5px;
    border-top: 1px solid #454d55;
    margin-top: 10px;
}

.main-content {
    margin-left: 250px;
    padding: 20px;
    padding-top: 80px;
    transition: margin-left 0.3s ease;
    min-height: 100vh;
}
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0 !important; }
}
@media (min-width: 769px) {
    body.sidebar-closed .sidebar { transform: translateX(-100%); }
    body.sidebar-closed .main-content { margin-left: 0 !important; }
}
#overlay {
    position: fixed;
    top: 60px; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 150;
}
#overlay.show { display: block; }

/* ⚠️ GLOBAL SECURITY ALERT */
#global-security-popup {
    display: none;
    position: fixed;
    top: 75px; right: 20px;
    background: #dc3545;
    color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    z-index: 999999;
    max-width: 350px;
    border-left: 5px solid #a71d2a;
    animation: slideInRight 0.5s ease-out forwards;
    transition: opacity 0.5s ease;
    opacity: 1;
}
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* -----------------------------------------------------
   2. PAGE CONTAINER (shared by every page)
   ----------------------------------------------------- */
.trade-container {
    padding: 20px;
    max-width: 100%;
}

/* -----------------------------------------------------
   3. FORM CONTROLS — ONE UNIFORM HEIGHT EVERYWHERE
   ----------------------------------------------------- */
.trade-container .form-select,
.trade-container .form-control,
.dropdown-checkbox > .btn {
    height: calc(2.5rem + 2px);
    font-size: 1rem;
}
/* exceptions: multiline + small controls keep their natural size */
.trade-container textarea.form-control,
.trade-container .form-control-sm,
.dropdown-checkbox .dropdown-content .form-control {
    height: auto;
}

/* read-only computed value boxes (buy_sell etc.) */
.readonly-box {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    padding: .375rem .75rem;
    display: block;
    width: 100%;
    min-height: calc(2.5rem + 2px);
}

.calc-message {
    color: #6c757d;
    font-style: italic;
    font-size: 0.9em;
}

@media (max-width: 767.98px) {
    .auto-calc-hide-mobile { display: none !important; }
}

/* -----------------------------------------------------
   4. SELECT2 — closed control matches native controls,
      open panel matches the checkbox-dropdown panel
   ----------------------------------------------------- */
:root {
    /* Bootstrap 5's own form-select chevron — shared by ALL dropdown controls */
    --app-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.select2-container--default .select2-selection--single {
    font-size: 1rem;
    height: calc(2.5rem + 2px);
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    display: flex;                      /* vertical centering — same as native */
    align-items: center;
    background-image: var(--app-select-chevron);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding-left: 0;
    padding-right: 0;
    color: #212529;
    width: 100%;
}
/* native-select dark text for placeholder, instead of select2 grey */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #212529;
}
/* hide select2's own triangle arrow — the chevron background replaces it */
.select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }

/* focus ring identical to Bootstrap's .form-select:focus */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
    outline: 0;
}

/* open panel — floating rounded card, identical to the checkbox panel.
   Select2's --below/--above variants strip the top/bottom border and
   radius to glue the panel to the control; force them back so both
   dropdown types look the same. */
.select2-dropdown {
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    z-index: 1051;
}
.select2-dropdown--below,
.select2-container--open .select2-dropdown--below {
    border-top: 1px solid #dee2e6;
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
    margin-top: 2px;
}
.select2-dropdown--above,
.select2-container--open .select2-dropdown--above {
    border-bottom: 1px solid #dee2e6;
    border-bottom-left-radius: .375rem;
    border-bottom-right-radius: .375rem;
    margin-top: -2px;
}
.select2-search--dropdown { padding: 10px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: .25rem .5rem;
    font-size: 0.95rem;
    outline: none;
}
/* options list inset like the checkbox panel (10px), same scroll height */
.select2-results > .select2-results__options,
.select2-container--default .select2-results > .select2-results__options {
    max-height: 300px;
    padding: 0 10px 10px;
}
.select2-results__option {
    padding: 6px 10px;
    font-size: 0.95rem;
    border-radius: .25rem;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #0d6efd;
    color: #fff;
}

/* -----------------------------------------------------
   5. CHECKBOX DROPDOWN (multi-select filter) — styled to
      mirror the Select2 panel exactly
   ----------------------------------------------------- */
.dropdown-checkbox { position: relative; width: 100%; }

/* closed toggle: looks like a form field, not a button —
   same chevron, text color and focus ring as native selects */
.dropdown-checkbox > .btn {
    background-color: #fff;
    border: 1px solid #dee2e6;
    color: #212529;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-weight: 400;
    border-radius: .375rem;
    background-image: var(--app-select-chevron);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}
.dropdown-checkbox > .btn:hover,
.dropdown-checkbox > .btn:active {
    background-color: #fff;
    border-color: #dee2e6;
    color: #212529;
}
.dropdown-checkbox > .btn:focus {
    background-color: #fff;
    color: #212529;
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
    outline: 0;
}
/* the shared chevron background replaces the icon */
.dropdown-checkbox > .btn .bi-chevron-down { display: none; }

/* open panel: identical inner structure to the Select2 panel —
   fixed search bar on top, only the options list scrolls */
.dropdown-checkbox .dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 100%;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    z-index: 1051;
    padding: 0;              /* sections below carry their own padding */
    margin-top: 2px;         /* same gap under control as select2 panel */
}
/* search bar — fixed, same 10px inset as .select2-search--dropdown */
.dropdown-checkbox .dropdown-search { padding: 10px; }
.dropdown-checkbox .dropdown-content .form-control {
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: .25rem .5rem;
    font-size: 0.95rem;
}
/* Select All — fixed row between search and the scrolling list */
.dropdown-checkbox .dropdown-content > .dropdown-select-all {
    margin: 0 10px 2px !important;
}
/* options — the ONLY scrolling part, same metrics as select2 results */
.dropdown-checkbox .dropdown-options {
    max-height: 300px;
    overflow-y: auto;
    padding: 0 10px 10px;
}
.dropdown-checkbox .dropdown-content label {
    padding: 6px 10px;
    font-size: 0.95rem;
    border-radius: .25rem;
    cursor: pointer;
    margin-bottom: 0 !important;
}
.dropdown-checkbox .dropdown-content label:hover {
    background-color: #0d6efd;
    color: #fff;
}

/* -----------------------------------------------------
   6. DATA TABLES (trade list / reports)
   ----------------------------------------------------- */
.table-wrapper {
    max-height: 75vh;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
}

.ipo-table thead th {
    position: sticky;
    top: 0;
    background-color: #2c3e50;
    color: white;
    z-index: 10;
    white-space: nowrap;
    font-weight: 500;
    border: 1px solid #34495e;
    padding: 8px;
    font-size: 0.9rem;
    text-align: center;
}
.ipo-table tbody td {
    white-space: nowrap;
    vertical-align: middle;
    font-size: 0.85rem;
    padding: 6px 8px;
    border: 1px solid #ecf0f1;
    text-align: center;
}
.ipo-table tbody tr:hover { background-color: #f8f9fa; }

.table-buy td { background-color: #e8f5e9 !important; }
.table-sell td { background-color: #ffebee !important; }

/* -----------------------------------------------------
   7. REPORT / PIVOT TABLE EXTRAS
   (sticky first column, sticky grand-total footer)
   ----------------------------------------------------- */
.ipo-table thead th small {
    color: #cfd8e3;
    font-weight: 400;
}

.ipo-table .sticky-col {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 5;
}
.ipo-table thead th.sticky-col {
    z-index: 15;
    background-color: #2c3e50;   /* same as header row */
}

.ipo-table tfoot tr {
    position: sticky;
    bottom: 0;
    z-index: 12;
}
.ipo-table tfoot td {
    background-color: #f0f0f0;
    font-weight: bold;
    border: 1px solid #dee2e6;
    text-align: center;
    vertical-align: middle;
    font-size: 0.85rem;
    padding: 6px 8px;
    white-space: nowrap;
}
.ipo-table tfoot td.sticky-col {
    left: 0;
    z-index: 16;
    background-color: #f0f0f0;
}

.negative { color: #dc3545; font-weight: bold; }

/* Inline-editable report tables: compact inputs that must NOT inherit the
   42px form-control height used by page-level filters. */
.ipo-table td .form-control,
.ipo-table td .form-select {
    height: 30px;
    min-width: 90px;
    padding: 2px 6px;
    font-size: 0.8rem;
    border-radius: .25rem;
}
.ipo-table td .form-control:focus,
.ipo-table td .form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.2);
}

/* Sortable column headers */
.ipo-table thead th a {
    color: #dfe6ee;
    text-decoration: none;
}
.ipo-table thead th a:hover { color: #fff; text-decoration: underline; }

/* Row highlight after a successful inline save */
.ipo-table tr.row-saved td { background-color: #d4edda !important; transition: background-color .8s ease; }

/* -----------------------------------------------------
   7b. USER MANAGER (user_list.php)
   ----------------------------------------------------- */
.status-badge {
    display: inline-block;
    width: 100%;
    padding: 4px 6px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    text-align: center;
    text-transform: uppercase;
}
.status-active { background: #e0f8e9; color: #15803d; }
.status-inactive { background: #fee2e2; color: #b91c1c; }

.role-badge {
    display: block;
    background: #eef2ff;
    color: #4f46e5;
    padding: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    text-align: center;
}

.pass-group {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 2px 6px;
    background: #fff;
    min-width: 150px;
}
.pass-group input {
    border: none;
    background: transparent;
    font-family: monospace;
    font-size: 0.8rem;
    width: 100%;
    outline: none;
    height: auto;          /* opt out of the 42px control height */
}
.pass-toggle { cursor: pointer; color: #6c757d; font-size: 0.85rem; }

/* Mobile: user table rows become 3-column cards */
@media (max-width: 768px) {
    .user-table thead { display: none; }
    .user-table, .user-table tbody, .user-table tr { display: block; width: 100%; }
    .user-table tr {
        margin-bottom: 12px;
        padding: 10px;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .user-table td {
        padding: 6px 8px !important;
        font-size: 0.8rem;
        line-height: 1.25;
        background: #f8f9fa !important;
        border-radius: 6px;
        border: none !important;
        white-space: normal !important;
        text-align: left !important;
    }
    .user-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
        color: #6c757d;
        margin-bottom: 2px;
        text-transform: uppercase;
    }
    .user-table td[data-label="Actions"] {
        grid-column: 1 / -1;
        background: transparent !important;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
}

/* -----------------------------------------------------
   8. IPO CALENDAR (ipo_list.php)
   Desktop table + mobile card view with status tabs
   ----------------------------------------------------- */
.mobile-only { display: none !important; }
.desktop-only { display: block !important; }
.ipo-cards-container { display: none !important; }
.ipo-table-container { display: block !important; }

/* Row tints by IPO type (same pattern as .table-buy / .table-sell) */
.ipo-mainboard td { background-color: #ecf9ef !important; }
.ipo-sme td { background-color: #eef6ff !important; }

/* Rows/cards hidden until the JS pagination decides what to show */
.ipo-row, .ipo-card { display: none; }

@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .ipo-table-container { display: none !important; }
    .mobile-only { display: flex !important; }
    .ipo-cards-container { display: grid !important; gap: 12px; }

    .ipo-status-tabs { width: 100%; display: flex; overflow-x: auto; border-bottom: 1px solid #ddd; margin-bottom: 10px; background: #fff; }
    .ipo-status-tabs a { padding: 10px; flex: 1; text-align: center; color: #666; text-decoration: none; font-weight: 600; font-size: 13px; white-space: nowrap; border-bottom: 3px solid transparent; }
    .ipo-status-tabs a.active { border-bottom: 3px solid #333; color: #000; }

    .ipo-type-filters { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; }
    .type-checkboxes { display: flex; gap: 15px; }
    .type-checkboxes label { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }

    .ipo-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 0 8px; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
    .ipo-card.ipo-mainboard { border-left: 4px solid #28a745; }
    .ipo-card.ipo-sme { border-left: 4px solid #0d6efd; }

    .ipo-card .card-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f0f0; background: transparent; }
    .ipo-card .card-body { display: flex; gap: 10px; align-items: center; padding: 8px 0; }
    .ipo-card .card-body img { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; border: 1px solid #eee; background: #f8f9fa; }
    .ipo-card .card-footer { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; font-size: 12px; border-top: 1px solid #f0f0f0; padding: 8px 0; background: transparent; }

    .card-footer-item label { display: block; color: #6c757d; font-size: 10px; text-transform: uppercase; margin: 0; font-weight: 600; }
    .card-footer-item span { font-weight: 500; color: #212529; }

    .ipo-type-badge { background: #6c757d; color: white; padding: 2px 6px; border-radius: 12px; font-size: 10px; font-weight: bold; }
    .status-open { background: #28a745; color: white; padding: 2px 6px; border-radius: 12px; font-size: 10px; }
    .status-closed { background: #dc3545; color: white; padding: 2px 6px; border-radius: 12px; font-size: 10px; }
    .status-upcoming { background: #ffc107; color: black; padding: 2px 6px; border-radius: 12px; font-size: 10px; }
}

/* =====================================================
   📊 PORTFOLIO MANAGER (9_api_market/fyers) — v9
   ===================================================== */
.table-clean { width: 100%; border-collapse: collapse; background: white; border: 1px solid #dee2e6; table-layout: auto; }
.table-clean th { background: #f8f9fa; color: #495057; font-weight: 600; font-size: 0.65rem; text-transform: uppercase; padding: 6px 2px; border-bottom: 2px solid #dee2e6; white-space: normal; vertical-align: bottom; text-align: right; }
.table-clean th:nth-child(1), .table-clean th:nth-child(2), .table-clean th:nth-child(3), .table-clean th:nth-child(4) { text-align: left; }
.table-clean td { padding: 5px 2px; vertical-align: middle; border-bottom: 1px solid #eee; font-size: 0.75rem; white-space: nowrap; }
.table-clean td:nth-child(2) { white-space: normal; max-width: 130px; line-height: 1.1; font-weight: 600; }
.table-clean tbody tr:last-child td { border-bottom: none; }
.table-clean tbody tr:hover { background-color: #f8f9fa; }
.portfolio-summary-card { background: white; border-radius: 12px; padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1px solid #e9ecef; margin-bottom: 15px; }
.summary-label { color: #6c757d; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; display: block; margin-bottom: 3px; }
.summary-value { font-size: 1.4rem; font-weight: 800; color: #212529; white-space: nowrap; line-height: 1.2; }
.summary-sub-value { font-size: 1.1rem; font-weight: 600; color: #495057; white-space: nowrap; }
.divider-vertical { border-right: 1px solid #eee; }
@media (max-width: 992px) { .divider-vertical { border-right: none; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px; } }
.script-link { color: #0d6efd; font-weight: 600; text-decoration: none; border-bottom: 1px dotted #0d6efd; }
.script-link:hover { color: #0043a8; border-bottom: 1px solid #0043a8; }
.search-results { position: absolute; background: white; border: 1px solid #ccc; z-index: 1050; width: 100%; max-height: 250px; overflow-y: auto; display: none; border-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); left: 0; top: 100%; margin-top: 2px; }
.search-results.show { display: block; }
.search-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f0f0f0; font-size: 0.9rem; }
.search-item:hover { background-color: #f8f9fa; color: #0d6efd; }
.input-wrapper { position: relative; }
.mobile-card { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 8px; border: 1px solid #e9ecef; }
.mobile-card-header { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: flex-start; }
.mobile-header-top { display: flex; justify-content: space-between; align-items: start; width: 100%; }
.mobile-script-name { font-weight: 700; color: #0d6efd; font-size: 0.95rem; line-height: 1.2; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.mobile-isin { font-size: 0.65rem; color: #adb5bd; margin-top: 2px; }
.mobile-qty-badge { font-size: 0.8rem; background: #e7f1ff; color: #0d6efd; padding: 2px 6px; border-radius: 4px; font-weight: 600; border: 1px solid #cff4fc; }
.mobile-header-stats { display: flex; justify-content: space-between; margin-top: 8px; align-items: center; width: 100%; }
.mobile-total-pnl { font-size: 1rem; font-weight: 800; }
.mobile-total-pct { font-size: 0.85rem; font-weight: 600; margin-left: 5px; }
.mobile-card-body { padding: 8px 10px; }
.mobile-grid-row { display: grid; grid-template-columns: repeat(var(--pm-grid-cols, 4), 1fr); gap: 8px 4px; }
.mobile-col { text-align: right; overflow: hidden; }
.mobile-col-label { font-size: 0.6rem; color: #adb5bd; text-transform: uppercase; display: block; line-height: 1; margin-bottom: 2px; white-space: nowrap; }
.mobile-col-val { font-size: 0.8rem; font-weight: 600; color: #333; display: block; line-height: 1.2; white-space: nowrap; }
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { background-color: #f1f3f5; }
.sort-icon { font-size: 0.75rem; margin-left: 4px; color: #adb5bd; }
.sortable.asc .sort-icon::before { content: "\25B4"; color: #212529; }
.sortable.desc .sort-icon::before { content: "\25BE"; color: #212529; }
.no-arrow::after { display: none !important; }
.script-details-badge { font-size: 0.7rem; color: #0d6efd; background: #e7f1ff; padding: 4px 8px; border-radius: 4px; margin-top: 6px; border: 1px solid #cff4fc; display: block; width: fit-content; clear: both; }

/* =====================================================
   📈 PRICE HISTORY / MARKET VIEWER (9_api_market/fyers) — v9
   ===================================================== */
.tab-content-ph { display: none; }
.tab-content-ph.active { display: block; }
.ph-table { width: 100%; border-collapse: collapse; white-space: nowrap; min-width: 600px; }
.ph-table th, .ph-table td { border: 1px solid #e5e7eb; padding: 8px; text-align: right; font-size: 0.75rem; }
.ph-table th:first-child, .ph-table td:first-child { text-align: left; }
.ph-table th { background-color: #f3f4f6; font-weight: 600; text-align: center; }
.ph-table tbody tr:nth-child(even) { background-color: #f9fafb; }
.ph-table tbody tr:hover { background-color: #f1f5f9; }
.nse-bg { background-color: #2563eb !important; }
.bse-bg { background-color: #ea580c !important; }
.bse-col-start { border-left: 2px solid #ccc !important; }
.summary-header th { font-size: 0.7rem; color: #666; font-weight: normal; background: #f8f9fa; text-align: center !important; }
.summary-row td { background-color: #f9fafb; font-weight: bold; text-align: center !important; }
.bid-header { background-color: #166534 !important; color: white !important; text-align: center !important; }
.ask-header { background-color: #991b1b !important; color: white !important; text-align: center !important; }
.bid-cell { background-color: #f0fdf4; color: #166534; text-align: center !important; }
.ask-cell { background-color: #fef2f2; color: #991b1b; text-align: center !important; }

/* =====================================================
   📈 IPO PERFORMANCE TRACKER (8_Portfolio_Price) — v9
   ===================================================== */
.text-loss { color: #dc3545 !important; }
.text-gain { color: #198754 !important; }
.perf-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 1rem; border-left-width: 4px; border-left-style: solid; }
.perf-card.perf-mainboard { border-left-color: #28a745; }
.perf-card.perf-sme { border-left-color: #007bff; }
.perf-card-wrapper { padding: 0.75rem; }
.perf-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.perf-company-info h5 { margin: 0 0 2px; font-size: 1rem; font-weight: 600; }
.perf-company-info p { margin: 0; font-size: 0.75rem; color: #6c757d; }
.perf-card-badges { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.ipo-badge { padding: 0.25em 0.6em; border-radius: 1rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: #fff; }
.perf-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 0.75rem 0; margin-top: 0.5rem; border-top: 1px solid #f0f0f0; }
.data-point .label { font-size: 0.7rem; color: #6c757d; margin-bottom: 0; text-transform: uppercase; display: block; }
.data-point .value { font-size: 0.9rem; font-weight: 500; }
.details-toggle-container { border-top: 1px solid #f0f0f0; padding-top: 0.5rem; margin-top: 0.5rem; display: flex; gap: 0.5rem; justify-content: center; }
.details-toggle { font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 4px; }
.exchange-details { display: none; background-color: #f8f9fa; padding: 0.75rem; margin: 0.5rem -0.75rem -0.75rem; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

/* =====================================================
   ☀️ SOLAR MONITORING (15_other_utilities) — v9
   All rules scoped to .solar-page so the intentionally
   bold look never leaks into the sidebar or other pages.
   ===================================================== */
.solar-page .card { border-radius: 0.75rem; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.solar-page .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; }
.solar-page, .solar-page .card, .solar-page .table, .solar-page .form-control,
.solar-page .form-select, .solar-page .btn, .solar-page .badge, .solar-page span,
.solar-page div, .solar-page label, .solar-page p, .solar-page td, .solar-page th {
    font-weight: bold !important;
}
.solar-page i.bi { font-weight: normal !important; }
.solar-page .table-sm td, .solar-page .table-sm th { padding: 0.35rem 0.4rem; font-size: 0.9rem; vertical-align: middle; }
.solar-page .action-btn { padding: 0.2rem 0.4rem; font-size: 0.85rem; border-radius: 0.35rem; transition: all 0.2s; }
.solar-page .shadow-premium { box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important; }
.solar-page .form-floating > .form-control { height: calc(3rem + 2px); min-height: calc(3rem + 2px); }
.solar-page .form-floating > label { padding: 0.6rem 0.75rem; font-size: 0.95rem; }
.solar-page .form-floating > .form-control:focus ~ label::after,
.solar-page .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background-color: transparent !important; }
.solar-page .table-scroll-container { max-height: 350px; overflow-y: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.solar-page .table-scroll-container thead th { position: sticky; top: 0; background-color: #f8f9fa; z-index: 2; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.solar-page .chart-controls input, .solar-page .chart-controls select { font-size: 0.85rem; padding: 0.25rem 0.5rem; height: auto; min-height: 0; }
@media (max-width: 768px) {
    .solar-page .table-scroll-container { border-radius: 0.75rem; overflow-x: auto; overflow-y: auto; }
    .solar-page .header-badges { flex-direction: column; align-items: stretch !important; width: 100%; gap: 10px; margin-top: 10px; }
    .solar-page .header-badges > div { width: 100%; justify-content: center; }
}

/* =====================================================================
   9. 📱 GLOBAL MOBILE LAYER   (added 2026-08-09)
   ---------------------------------------------------------------------
   EVERYTHING in this section lives inside a max-width media query, so the
   desktop / large-screen appearance is byte-for-byte unchanged.

   It fixes the issues that affected EVERY module at once, rather than
   patching 46 pages one by one:

   1. body{overflow-x:hidden} was CLIPPING wide tables — columns past the
      screen edge could not be reached at all. Tables now scroll inside
      their own box instead of being cut off.
   2. Inputs smaller than 16px make iOS Safari zoom in on focus and leave
      the layout shifted. All controls are now >= 16px on phones.
   3. Toolbars, filter rows and button groups stack instead of squashing.
   4. Tap targets are raised to ~44px (Apple/Google minimum).
   ===================================================================== */
@media (max-width: 767.98px) {

    /* ---- 1. Tables scroll instead of being clipped -------------------
       .user-table already has its own card layout, so it is excluded. */
    .trade-container table:not(.user-table),
    .card-body table:not(.user-table) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;   /* momentum scrolling on iOS */
    }
    /* Data tables read better scrolling sideways than wrapping into slivers */
    .ipo-table:not(.user-table) th,
    .ipo-table:not(.user-table) td { white-space: nowrap; }

    /* A hint that there is more to the right */
    .trade-container table:not(.user-table)::-webkit-scrollbar { height: 6px; }
    .trade-container table:not(.user-table)::-webkit-scrollbar-thumb {
        background: rgba(13,110,253,.35); border-radius: 3px;
    }

    /* Wrappers that already exist keep working, just with momentum scroll */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* ---- 2. Stop iOS zooming the page when a field is focused -------- */
    .form-control, .form-select, input, select, textarea {
        font-size: 16px !important;
    }

    /* ---- 3. Comfortable tap targets ---------------------------------- */
    .btn { min-height: 44px; padding-top: .5rem; padding-bottom: .5rem; }
    .btn-sm { min-height: 36px; }
    .form-control, .form-select { min-height: 44px; }
    .form-check-input { width: 1.25rem; height: 1.25rem; }
    .nav-tabs .nav-link { padding: .6rem .9rem; }

    /* ---- 4. Toolbars and filter rows stack instead of squashing ------- */
    .trade-container .d-flex.justify-content-between { flex-wrap: wrap; gap: .5rem; }
    .trade-container .btn-group:not(.btn-group-sm) { display: flex; width: 100%; }
    .trade-container .btn-group:not(.btn-group-sm) > .btn { flex: 1 1 auto; }

    /* Action buttons at the end of a toolbar go full width and stay reachable */
    .trade-container form .d-flex.gap-2 > .btn,
    .trade-container .card-body > .d-flex.gap-2 > .btn { flex: 1 1 auto; }

    /* ---- 5. Tighter chrome so more content fits ----------------------- */
    .trade-container { padding-left: .75rem; padding-right: .75rem; }
    .card-body { padding: .85rem; }
    h4 { font-size: 1.15rem; }

    /* ---- 6. Long values (emails, tokens, paths) must not force a
              horizontal page scroll ------------------------------------ */
    .font-monospace, code, .text-break { word-break: break-word; }

    /* ---- 7. Modals use the full screen width -------------------------- */
    .modal-dialog { margin: .5rem; }
    .modal-body { padding: 1rem; }
}

/* Very small phones (<= 400px): drop to the essentials */
@media (max-width: 400px) {
    .trade-container { padding-left: .5rem; padding-right: .5rem; }
    .card-body { padding: .7rem; }
    .badge { font-size: .68rem; }
    h4 { font-size: 1.05rem; }
}

/* =====================================================================
   10. 📲 APP SHELL — mobile only   (added 2026-08-09)
   ---------------------------------------------------------------------
   Turns the site into something that reads as an APP on a phone:
   a bottom tab bar in thumb reach, a compact sticky header, notch-safe
   padding, and native-feeling touch behaviour.

   Everything is inside max-width media queries — desktop is untouched.
   ===================================================================== */

/* The bar itself is hidden on desktop, shown only on phones/tablets */
.app-bottom-nav { display: none; }

@media (max-width: 767.98px) {

    /* ---- Bottom tab bar ------------------------------------------- */
    .app-bottom-nav {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1040;                       /* above content, below modals */
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 12px rgba(0,0,0,.07);
        /* keep clear of the iPhone home indicator */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .abn-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: .45rem .25rem .5rem;
        min-height: 56px;                    /* comfortable thumb target */
        color: #6b7280;
        text-decoration: none;
        font-size: .68rem;
        font-weight: 600;
        line-height: 1;
        -webkit-tap-highlight-color: transparent;
        transition: color .15s ease, background .15s ease;
    }
    .abn-item i { font-size: 1.25rem; }
    .abn-item.active { color: #0d6efd; }
    .abn-item.active i { transform: translateY(-1px); }
    .abn-item:active { background: rgba(13,110,253,.08); }

    /* Content must not hide behind the bar */
    #mainContent, .trade-container {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* ---- Compact sticky app header --------------------------------- */
    .header {
        position: sticky; top: 0; z-index: 1030;
        padding-top: env(safe-area-inset-top, 0px);
        box-shadow: 0 1px 6px rgba(0,0,0,.06);
    }
    .header .logo { font-size: 1rem; }
    .header .right-section .bi-arrows-fullscreen { display: none; }  /* pointless in standalone mode */

    /* ---- Sidebar behaves like an app drawer ------------------------- */
    .sidebar {
        width: 82vw; max-width: 320px;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        box-shadow: 4px 0 24px rgba(0,0,0,.25);
    }

    /* ---- Native-feeling touch --------------------------------------- */
    a, button, .nav-link, .btn { -webkit-tap-highlight-color: transparent; }
    .sidebar .nav-link, .abn-item, .btn { user-select: none; -webkit-user-select: none; }
    .trade-container, #mainContent { -webkit-overflow-scrolling: touch; }

    /* Cards read as app surfaces: softer, rounder, less border */
    .card { border-radius: .85rem; }
    .trade-container > .card { box-shadow: 0 1px 8px rgba(0,0,0,.06); }
}

/* When launched from the home screen (standalone), reclaim browser chrome */
@media (display-mode: standalone) {
    .header { padding-top: max(env(safe-area-inset-top, 0px), 8px); }
}