/* Portfolio Tracker theme: formal finance dashboard on top of Pico CSS.
   Palette: navy for structure, green for actions and positive values, gold for "Special". */

/* :root[data-theme=light] beats Pico's own light-theme selector */
:root, :root[data-theme=light] {
  --navy-900: #0b1b33;
  --navy-800: #12284a;
  --navy-700: #1c3a66;
  --slate-600: #5b6b82;
  --slate-300: #c9d3e0;
  --slate-100: #eef2f7;
  --page-bg: #f4f6fa;
  --card-bg: #ffffff;
  --green-600: #0f9d3a;
  --green-700: #0b7f2f;
  --green-100: #e3f6e8;
  --gold-600: #b8860b;
  --gold-100: #fbf1d9;
  --red-600: #c62828;
  --red-100: #fdecec;
  --amber-600: #d97706;
  --amber-100: #fef3e2;
  --blue-600: #1565c0;
  --blue-100: #e7f0fb;

  --pico-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pico-font-size: 95%;
  --pico-background-color: var(--page-bg);
  --pico-color: #1d2b3f;
  --pico-muted-color: var(--slate-600);
  --pico-h1-color: var(--navy-900);
  --pico-h2-color: var(--navy-800);
  --pico-primary: var(--green-700);
  --pico-primary-background: var(--green-600);
  --pico-primary-border: var(--green-600);
  --pico-primary-hover: var(--green-700);
  --pico-primary-hover-background: var(--green-700);
  --pico-primary-hover-border: var(--green-700);
  --pico-primary-focus: rgba(15, 157, 58, .25);
  --pico-primary-inverse: #fff;
  --pico-secondary: var(--slate-600);
  --pico-secondary-background: var(--slate-600);
  --pico-secondary-border: var(--slate-300);
  --pico-card-background-color: var(--card-bg);
  --pico-card-box-shadow: 0 1px 2px rgba(11, 27, 51, .06), 0 2px 8px rgba(11, 27, 51, .05);
  --pico-border-radius: .5rem;
  --pico-table-border-color: var(--slate-100);
  --pico-spacing: .9rem;
}

html, body { background: var(--page-bg); min-height: 100%; }
h1 { font-weight: 700; letter-spacing: -.01em; margin-bottom: .25rem; }
.lead { color: var(--slate-600); margin-bottom: 1.25rem; }

/* --- Top bar ------------------------------------------------------------------------- */
.topbar { background: linear-gradient(90deg, var(--navy-900), var(--navy-800)); margin-bottom: 1.75rem;
          box-shadow: 0 2px 8px rgba(11, 27, 51, .25); position: sticky; top: 0; z-index: 40; }
.topbar-inner { display: flex; align-items: center; gap: 1.5rem; height: 3.75rem; }
.topbar a { text-decoration: none; }
.topbar .brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 700;
                 font-size: 1.05rem; letter-spacing: .01em; white-space: nowrap; }
.topbar .brand .logo { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem;
                       background: linear-gradient(135deg, var(--green-600), #34c759); color: #fff; font-size: .85rem;
                       box-shadow: 0 2px 6px rgba(15, 157, 58, .45); }
.nav-links { display: flex; align-items: center; gap: .25rem; flex: 1; min-width: 0; overflow-x: auto;
              scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { color: #b9c6d8; padding: .45rem .85rem; border-radius: .5rem; font-size: .92rem; font-weight: 500;
               white-space: nowrap; transition: background .15s, color .15s; }
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-links a.active { color: #fff; background: rgba(255, 255, 255, .12);
                      box-shadow: inset 0 -2px 0 var(--green-600); }
.nav-user { display: flex; align-items: center; gap: .6rem; white-space: nowrap; flex-shrink: 0; }
.nav-user .avatar { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
                    background: var(--navy-700); color: #fff; font-size: .8rem; font-weight: 700;
                    border: 1px solid rgba(255, 255, 255, .2); }
.nav-user .username { color: #dbe4f0; font-size: .88rem; }
.nav-user .admin-link { color: #b9c6d8; font-size: 1.05rem; padding: .2rem .35rem; border-radius: .4rem; }
.nav-user .admin-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-user button.logout { margin: 0; width: auto; padding: .35rem .8rem; font-size: .82rem; border-radius: .5rem;
                          background: transparent; color: #dbe4f0; border: 1px solid rgba(219, 228, 240, .35); }
.nav-user button.logout:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .06); }
@media (max-width: 768px) {
  .topbar-inner { gap: .75rem; }
  .topbar .brand span:not(.logo), .nav-user .username, .nav-user .avatar { display: none; }
  .nav-links a { padding: .4rem .6rem; font-size: .88rem; }
  .nav-user button.logout { padding: .3rem .55rem; }
  .toast { left: 1rem; right: 1rem; max-width: none; }
}

/* --- Cards & panels ------------------------------------------------------------------ */
.panel { background: var(--card-bg); border-radius: var(--pico-border-radius); box-shadow: var(--pico-card-box-shadow);
         padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.card { background: var(--card-bg); border-radius: var(--pico-border-radius); box-shadow: var(--pico-card-box-shadow);
        padding: 1rem 1.25rem; border-top: 4px solid var(--navy-700); }
.card.green { border-top-color: var(--green-600); }
.card.gold { border-top-color: var(--gold-600); }
.card.amber { border-top-color: var(--amber-600); }
.card .label { text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; color: var(--slate-600); font-weight: 600; }
.card .big { display: block; font-size: 2.1rem; font-weight: 700; color: var(--navy-900); line-height: 1.2; margin: .2rem 0; }
a.card, a.card:hover { text-decoration: none; color: inherit; display: block; }
a.card:hover { box-shadow: 0 4px 14px rgba(11, 27, 51, .12); transform: translateY(-1px); transition: all .15s; }

/* --- Tables -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; background: var(--card-bg); border-radius: var(--pico-border-radius);
              box-shadow: var(--pico-card-box-shadow); margin-bottom: 1rem; }
.table-wrap table { margin: 0; }
table thead th { background: var(--slate-100); color: var(--navy-800); font-size: .72rem; text-transform: uppercase;
                 letter-spacing: .06em; font-weight: 700; border-bottom: 2px solid var(--slate-300); white-space: nowrap; }
table tbody tr:nth-child(even) td { background: #fafbfd; }
table tbody tr:hover td { background: var(--blue-100); }
table tfoot th, table tfoot td { background: var(--slate-100); font-weight: 700; color: var(--navy-900);
                                 border-top: 2px solid var(--slate-300); }
td, th { padding: .55rem .75rem; vertical-align: middle; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--slate-600); }
.ticker { font-weight: 700; color: var(--navy-900); letter-spacing: .02em; }
.rank { color: var(--slate-600); font-weight: 600; }
td.part { font-size: .85rem; color: var(--slate-600); }

/* Weight bar next to the percentage */
.weight { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; min-width: 9rem; }
.weight .bar { flex: 1; max-width: 5rem; height: .45rem; background: var(--slate-100); border-radius: 1rem; overflow: hidden; }
.weight .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--green-600), #34c759); border-radius: 1rem; }
.weight.special .bar span { background: linear-gradient(90deg, var(--gold-600), #e0b23f); }
.weight strong { color: var(--navy-900); min-width: 3.6rem; text-align: right; }

/* --- Badges -------------------------------------------------------------------------- */
.badge { display: inline-block; padding: .12rem .55rem; border-radius: 1rem; font-size: .75rem; font-weight: 600;
         background: var(--slate-100); color: var(--slate-600); white-space: nowrap; }
.badge.yes { background: var(--green-100); color: var(--green-700); }
.badge.no { background: var(--slate-100); color: var(--slate-600); }
.badge.special { background: var(--gold-100); color: #8a6508; }
.badge.unclassified { background: var(--amber-100); color: #a85a04; }
.chip { display: inline-block; padding: .05rem .45rem; margin: .1rem .15rem .1rem 0; border-radius: .3rem;
        font-size: .75rem; background: var(--blue-100); color: var(--navy-700); }

/* --- Messages / notices -------------------------------------------------------------- */
.notice { border-radius: var(--pico-border-radius); padding: .7rem 1rem; margin-bottom: .75rem; border-left: 4px solid;
          background: var(--card-bg); box-shadow: var(--pico-card-box-shadow); }
.notice-error { border-color: var(--red-600); background: var(--red-100); }
.notice-warning { border-color: var(--amber-600); background: var(--amber-100); }
.notice-success { border-color: var(--green-600); background: var(--green-100); }
.notice-info { border-color: var(--blue-600); background: var(--blue-100); }

/* --- Controls ------------------------------------------------------------------------ */
form.inline { display: inline; margin: 0; }
form.inline button, .btn-sm { margin: 0; padding: .3rem .8rem; font-size: .82rem; }
.actions button { width: auto; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.seg { display: inline-flex; gap: .25rem; margin: 0; }
.seg button { margin: 0; padding: .22rem .65rem; font-size: .78rem; border-radius: 1rem; white-space: nowrap; }
.seg button.pick-yes { --c: var(--green-600); }
.seg button.pick-special { --c: var(--gold-600); }
.seg button.pick-no { --c: var(--slate-600); }
.seg button { background: transparent; color: var(--c); border: 1px solid var(--c); }
.seg button:hover { background: var(--c); color: #fff; }
.seg button[disabled] { background: var(--c); color: #fff; opacity: 1; }
input.amount { width: 8rem; margin: 0; padding: .25rem .5rem; height: auto; text-align: right;
               font-variant-numeric: tabular-nums; }
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs a { padding: .3rem .85rem; border-radius: 1rem; background: var(--card-bg); color: var(--navy-800);
          text-decoration: none; font-size: .88rem; box-shadow: var(--pico-card-box-shadow); }
.tabs a.active { background: var(--navy-800); color: #fff; }
.search-row { display: flex; gap: .5rem; }
.search-row input { margin: 0; }
.search-row button { margin: 0; white-space: nowrap; }

/* --- Login --------------------------------------------------------------------------- */
body.login-page { background: radial-gradient(circle at 20% 20%, var(--navy-700), var(--navy-900) 70%); min-height: 100vh; }
.login-card { max-width: 26rem; margin: 12vh auto 0; background: var(--card-bg); border-radius: .75rem;
              padding: 2rem; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.login-card .brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--navy-900);
                     font-size: 1.15rem; margin-bottom: 1.25rem; }
.login-card .logo { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .5rem;
                    background: var(--green-600); color: #fff; }

/* --- Unclassified toast (every page) -------------------------------------------------- */
.toast { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; max-width: 22rem;
         background: var(--navy-900); color: #fff; border-radius: .6rem; padding: .85rem 2.5rem .85rem 1rem;
         box-shadow: 0 10px 30px rgba(0, 0, 0, .3); border-left: 4px solid var(--amber-600);
         animation: toast-in .35s ease-out; }
.toast a { color: #ffd28a; font-weight: 600; }
.toast .close { position: absolute; top: .35rem; right: .5rem; background: none; border: 0; color: #c9d3e0;
                font-size: 1.2rem; line-height: 1; padding: .2rem .4rem; margin: 0; cursor: pointer; width: auto; }
.toast .close:hover { color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

/* --- Halal status, Special star, screening panel -------------------------------------- */
.badge.doubtful { background: var(--amber-100); color: #a85a04; }
.badge.unclassified { background: #fde8d7; color: #b4530a; }
.seg button.pick-doubtful { --c: var(--amber-600); }
button.star { margin: 0; padding: .1rem .5rem; width: auto; font-size: 1.15rem; line-height: 1.2;
              background: transparent; border: 1px solid var(--slate-300); color: var(--slate-300); border-radius: .4rem; }
button.star:hover { color: var(--gold-600); border-color: var(--gold-600); background: transparent; }
button.star.on { color: #fff; background: var(--gold-600); border-color: var(--gold-600); }
.panel.screening { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
                   border-left: 4px solid var(--green-600); }
.panel .label { text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; color: var(--slate-600);
                font-weight: 600; margin-right: .5rem; }
table thead th a.sort { color: inherit; text-decoration: none; }
table thead th a.sort:hover { color: var(--green-700); }
table thead th a.sort.active { color: var(--green-700); }
.panel.top-n { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem 1rem; }
.panel.top-n label { margin: 0; font-weight: 600; color: var(--navy-800); }
.panel.top-n input[type=number] { width: 5.5rem; margin: 0; padding: .25rem .5rem; height: auto; }

/* --- Analyst columns ------------------------------------------------------------------ */
.panel.top-n .spacer { flex: 1; }
.up { color: var(--green-700); font-weight: 600; }
.down { color: var(--red-600); font-weight: 600; }
.rating { display: inline-block; padding: .1rem .5rem; border-radius: .3rem; font-size: .75rem; font-weight: 700;
          white-space: nowrap; background: var(--slate-100); color: var(--slate-600); }
.rating.strong_buy { background: var(--green-600); color: #fff; }
.rating.buy { background: var(--green-100); color: var(--green-700); }
.rating.hold { background: var(--amber-100); color: #a85a04; }
.rating.underperform, .rating.sell, .rating.strong_sell { background: var(--red-100); color: var(--red-600); }
.panel.add-manual input:not([type=hidden]) { width: auto; flex: 0 1 12rem; margin: 0; padding: .3rem .6rem; height: auto; }
button.link-btn { background: none; border: 0; color: var(--slate-600); padding: 0 .3rem; margin: 0; width: auto;
                  font-size: .85rem; cursor: pointer; }
button.link-btn:hover { color: var(--red-600); background: none; }
.panel.top-n button { width: auto; margin: 0; }

/* --- Rule panel, sections, price changes ---------------------------------------------- */
.rule-panel summary { cursor: pointer; }
.rule-panel summary::after { display: none; }
.rule-form { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; margin: .75rem 0 .25rem; }
.rule-form label { margin: 0; font-size: .82rem; color: var(--slate-600); display: flex; flex-direction: column; gap: .2rem; }
.rule-form label.check { flex-direction: row; align-items: center; gap: .4rem; flex-basis: 100%; color: var(--navy-800); }
.rule-form input[type=number], .rule-form select { margin: 0; padding: .25rem .5rem; height: auto; width: 7.5rem; font-size: .88rem; }
.rule-form button { width: auto; margin: 0; }
.list-table td.change { font-size: .85rem; }
.list-table tr.section-head td { background: var(--slate-100) !important; font-weight: 700; color: var(--navy-800);
                                 font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.list-table tbody.attention tr.section-head td { background: var(--red-100) !important; color: var(--red-600); }
.list-table tr.held_off td, .list-table tr.attention td { opacity: .85; }
.dip { font-size: .8rem; cursor: help; }
.list-table td, .list-table th { padding: .5rem .55rem; }
.list-table td.name { max-width: 11rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                      font-size: .88rem; color: var(--slate-600); }
.list-table .weight { min-width: 7.5rem; }
.list-table .weight .bar { max-width: 3.5rem; }
.list-table input.amount { width: 6.5rem; }
@media (min-width: 1280px) { body:has(.list-table) .container { max-width: 1400px; } }

/* --- Where to invest ------------------------------------------------------------------ */
.planner-form input:not([type=hidden]), .planner-form select { width: 8rem; margin: 0; padding: .3rem .6rem; height: auto; }
.planner-form input.small { width: 5rem; }
.planner-form select { width: 10rem; }
strong.buy { color: var(--green-700); }
h2 { margin-top: .5rem; font-size: 1.3rem; }
strong.weight-pct { color: var(--navy-900); }
.rule-panel .edit-hint { font-size: .78rem; color: var(--green-700); font-weight: 600; margin: 0 .35rem; }
.rule-panel[open] .edit-hint { display: none; }

/* === Design refresh ===================================================================== */
.topbar .brand .logo-img { width: 2rem; height: 2rem; border-radius: .5rem; box-shadow: 0 2px 6px rgba(15, 157, 58, .45); }
.nav-links a { display: inline-flex; align-items: center; gap: .4rem; }
.nav-ico { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2;
           stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

/* Page header with a status pill on the right */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.page-head .lead { margin-bottom: 1.25rem; }
.status-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 2rem;
               font-size: .82rem; font-weight: 600; background: var(--card-bg); box-shadow: var(--pico-card-box-shadow);
               white-space: nowrap; margin-top: .5rem; }
.status-pill .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--green-600);
                    box-shadow: 0 0 0 3px var(--green-100); }
.status-pill.ok { color: var(--green-700); }
.status-pill.bad { color: var(--red-600); }
.status-pill.bad .dot { background: var(--red-600); box-shadow: 0 0 0 3px var(--red-100); }

/* KPI cards with icons */
.card.kpi { position: relative; padding-top: 1.1rem; }
.kpi-ico { position: absolute; top: 1rem; right: 1rem; width: 2.4rem; height: 2.4rem; border-radius: .7rem;
           display: grid; place-items: center; }
.kpi-ico svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2;
               stroke-linecap: round; stroke-linejoin: round; }
.kpi-ico.navy { background: var(--blue-100); color: var(--navy-700); }
.kpi-ico.amber { background: var(--amber-100); color: var(--amber-600); }
.kpi-ico.green { background: var(--green-100); color: var(--green-700); }
.kpi-ico.gold { background: var(--gold-100); color: var(--gold-600); }
.mini-split { display: flex; flex-wrap: wrap; gap: .25rem; }
.mini-split .badge { font-size: .68rem; padding: .05rem .4rem; }

/* Section titles */
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 1.75rem 0 .6rem; }
.section-title h2 { margin: 0; font-size: 1.15rem; color: var(--navy-900); }
.see-all { font-size: .88rem; font-weight: 600; color: var(--green-700); text-decoration: none; }

/* Tables: sticky header while scrolling the page */
.table-wrap { overflow: auto; max-height: calc(100vh - 7rem); }
table thead th { position: sticky; top: 0; z-index: 2; }
td .up::before { content: '▲ '; font-size: .65em; }
td .down::before { content: '▼ '; font-size: .65em; }

/* Footer */
.site-footer { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 2rem 0 2.5rem;
               margin-top: 2rem; border-top: 1px solid var(--slate-300); font-size: .8rem; color: var(--navy-800); }
.site-footer > span:first-child { font-weight: 700; }

/* Login */
.login-card .brand img { border-radius: .6rem; }
.login-sub { margin-top: -.75rem; margin-bottom: 1.25rem; font-size: .9rem; }