/* =======================================================
   BorsaAgro — Brand UI (Refactored, Clean)
   - Single source of truth for colors & tokens
   - De-duplicated rules, fixed selectors
   - Faster ticker + hover pause
   ======================================================= */

/* ------------------------
   1) DESIGN TOKENS
   ------------------------ */
:root{
    /* Brand */
    --brand-50:#f2fff6;
    --brand-100:#d7f2de;
    --brand-200:#bbf7d0;
    --brand-300:#86efac;
    --brand-400:#4ade80;
    --brand-500:#198754; /* primary green */
    --brand-600:#16a34a;
    --brand-700:#0a7a42;
    --brand-800:#166534;
    --brand-900:#14532d;

    /* Neutrals */
    --ink:#0f172a;
    --ink-2:#212529;
    --muted:#64748b;
    --soft:#f6f8fb;
    --border:#e6eaef;
    --shadow:0 6px 18px rgba(2,6,12,0.08);

    /* Feedback */
    --red:#dc2626;
    --amber:#d97706;

    /* Misc */
    --chip:#e7f7eb;

    /* Type scale */
    --fs-0:.8125rem;
    --fs-1:.875rem;
    --fs-2:.95rem;
    --fs-3:1rem;
    --fs-4:1.125rem;
    --fs-5:1.35rem;
    --fs-6:1.5rem;
}

/* ------------------------
   2) BASE & ACCESSIBILITY
   ------------------------ */
html{ scroll-behavior:smooth }
body{ color:var(--ink); background:#fff }
a{ color:var(--brand-700) }
a:hover{ color:var(--brand-600) }
small,.small{ color:var(--muted) }
.img-cover{ object-fit:cover }
:focus-visible{ outline:2px solid var(--brand-400); outline-offset:2px }
@media (prefers-reduced-motion:reduce){
    *{ transition:none!important; animation:none!important }
}

/* ------------------------
   3) HEADER & TOPBAR
   ------------------------ */
header.sticky-top{
    position:sticky; top:0; z-index:1020;
    backdrop-filter:saturate(1.05);
    box-shadow:0 2px 0 rgba(0,0,0,.03);
}
header .bg-body-tertiary{ background:#fbfcfd!important; padding-block:.45rem!important }
header .border-bottom{ border-color:var(--border)!important }
header.sticky-top::after{
    content:""; display:block; height:3px;
    background:linear-gradient(90deg,var(--brand-700),var(--brand-500));
}

/* Brand mark + wordmark */
.logo-mark{
    width:46px; height:46px; border-radius:50%;
    background:radial-gradient(ellipse at 30% 30%,var(--brand-500),var(--brand-700));
    color:#fff; font-size:1.2rem; display:inline-grid; place-items:center;
    box-shadow:0 0 0 3px var(--brand-50) inset, 0 4px 10px rgba(10,122,66,.15);
}
.logo-mark i{ transform:translateY(1px) }
.brand-wordmark{
    font-size:var(--fs-6);
    letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-2); line-height:1;
}
header a.text-decoration-none:hover .brand-wordmark{ color:var(--brand-700) }

/* ------------------------
   4) NAVBAR
   ------------------------ */
.navbar-borsa{
    background:#fff;
    border-top:1px solid #f1f3f5;
    border-bottom:1px solid var(--brand-100);
    box-shadow:0 4px 14px rgba(16,185,129,.05);
    padding-block:.6rem;
}
.navbar-toggler{ border-color:var(--border) }
.navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(34,197,94,.15) }
.navbar-borsa .navbar-nav .nav-link{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.55rem .75rem;
    border:1px solid var(--brand-200);
    border-radius:.65rem;
    color:#0f172a; background:#fff;
    font-weight:600; letter-spacing:.01em;
    transition:.15s ease;
}
.navbar-borsa .navbar-nav .nav-link:hover{
    background:var(--brand-50); border-color:var(--brand-300);
    color:var(--brand-800); box-shadow:0 2px 10px rgba(22,163,74,.08);
}
.navbar-borsa .navbar-nav .nav-link.active{
    background:#fff; border-color:var(--brand-500); color:var(--brand-800);
    box-shadow:0 0 0 2px rgba(34,197,94,.12) inset; position:relative;
}
.navbar-borsa .navbar-nav .nav-link.active::after{
    content:""; position:absolute; left:.5rem; right:.5rem; bottom:.35rem;
    height:3px; border-radius:2px;
    background:linear-gradient(90deg,var(--brand-500),var(--brand-700));
}
/* Right CTA */
.navbar-borsa .btn-success.btn-sm{
    background:#fff; color:var(--brand-700);
    border:1.5px solid var(--brand-500);
    padding:.5rem .9rem; border-radius:.65rem; font-weight:700; transition:.15s ease;
}
.navbar-borsa .btn-success.btn-sm:hover{
    background:var(--brand-50); border-color:var(--brand-600); color:var(--brand-800);
    box-shadow:0 3px 12px rgba(22,163,74,.14);
}
@media (min-width:992px){ .navbar-borsa .navbar-nav{ gap:.35rem } .navbar-borsa .navbar-sep{ width:1px; height:28px; background:var(--brand-100); margin:0 .5rem } }
@media (max-width:991.98px){
    .navbar-borsa{ padding-block:.7rem }
    .navbar-borsa .navbar-collapse{ border-top:1px solid var(--brand-100); margin-top:.5rem; padding-top:.5rem }
}

/* ------------------------
   5) DROPDOWNS
   ------------------------ */
.dropdown-menu{ border:1px solid var(--border); border-radius:.65rem; box-shadow:var(--shadow); padding:.4rem }
.dropdown-item{
    display:flex; align-items:center; gap:.5rem;
    border:1px solid transparent; border-radius:.5rem; padding:.45rem .6rem; color:#0f172a
}
.dropdown-item:hover{ background:var(--brand-50); border-color:var(--brand-200); color:var(--brand-800) }

/* ------------------------
   6) BUTTONS
   ------------------------ */
.btn-success{ background:var(--brand-600); border-color:var(--brand-600) }
.btn-success:hover{ background:var(--brand-700); border-color:var(--brand-700) }
.btn-outline-success{ color:var(--brand-700); border-color:var(--brand-300) }
.btn-outline-success:hover{ background:var(--brand-50); border-color:var(--brand-400); color:var(--brand-800) }
.btn-link{ color:var(--brand-700) }
.btn-link:hover{ color:var(--brand-800) }
.btn-soft-success{ background:var(--brand-50); color:var(--brand-700); border:1px solid var(--brand-100) }
.btn-soft-success:hover{ background:var(--brand-100) }
.btn-reset{ background:none; border:none; padding:0 }

/* ------------------------
   7) BADGES / CHIPS
   ------------------------ */
.badge-pill-soft{ background:#eef8f1; color:#106a3b; border:1px solid #d7f0dc; padding:.28rem .6rem; border-radius:999px; font-weight:600 }
.badge-outline{ background:#fff; color:var(--brand-700); border:1px solid var(--brand-200); border-radius:999px }
.badge-soft{ background:var(--bs-success-bg-subtle); color:#0a7a42; border:1px solid #cdebd4 }
.badge-soft-alt{ background:#eef8f1; color:#0a7a42; border:1px solid #d7f0dc }
.badge-soft-green{
    display:inline-flex; align-items:center; gap:.4rem;
    background:var(--brand-50); color:var(--brand-800);
    border:1px solid var(--brand-200);
    padding:.25rem .6rem; border-radius:999px; font-weight:600; font-size:.85rem;
}

/* Category chips */
.category-chip{
    --chip-bg:#fff; --chip-border:var(--border);
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.35rem .75rem; border:1px solid var(--chip-border);
    border-radius:999px; background:var(--chip-bg);
    text-decoration:none; color:inherit; white-space:nowrap;
    transition:.15s ease-in-out; font-size:.95rem;
}
.category-chip i{ font-size:.95rem; opacity:.8 }
.category-chip:hover{ border-color:var(--brand-200); box-shadow:0 6px 14px rgba(22,163,74,.08) }
.chip-accent{ background:var(--brand-50); border-color:var(--brand-200) }

/* Checkbox-as-pill */
.check-chip{
    --chip-b:#cdebd4; --chip-b-hover:#86efac; --chip-b-active:#16a34a;
    --chip-bg:#fff; --chip-bg-hover:#f0fdf4;
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.42rem .7rem; border:1px solid var(--chip-b);
    border-radius:999px; background:var(--chip-bg);
    cursor:pointer; user-select:none; transition:.15s ease;
    font-weight:500; color:#0b1220;
}
.check-chip:hover{ background:var(--chip-bg-hover); border-color:var(--chip-b-hover) }
.check-chip input{
    appearance:none; width:1rem; height:1rem; border:2px solid var(--chip-b);
    border-radius:.3rem; display:inline-block; position:relative;
}
.check-chip input:checked{
    border-color:var(--chip-b-active);
    background:linear-gradient(180deg,#22c55e,#16a34a);
    box-shadow:0 0 0 2px rgba(34,197,94,.18);
}
.check-chip input:checked::after{ content:""; position:absolute; inset:.14rem; background:#fff; border-radius:.18rem }

/* ------------------------
   8) CARDS
   ------------------------ */
.card{ border-color:var(--border); border-radius:.75rem; overflow:hidden }
.card.shadow-sm{ box-shadow:var(--shadow) }
.card-header{ background:#fff!important; border-color:var(--border); font-size:.95rem }
.card-header.brand{ background:var(--bs-success-bg-subtle); border-bottom-color:#bfe3c8 }
.card-title{ color:#0b1220 }
.card + .card{ margin-top:1rem }

/* ------------------------
   9) FORMS
   ------------------------ */
.form-label{ font-weight:600; color:#0b1220 }
.form-control,.form-select{ border-color:var(--border) }
.form-control:focus,.form-select:focus{ border-color:var(--brand-300); box-shadow:0 0 0 .2rem rgba(34,197,94,.15) }
.input-group-text{ background:#f9fafb; border-color:var(--border) }
.invalid-feedback{ font-size:.85rem }

/* Compact form mode */
.form-compact .card{ margin-bottom:.75rem }
.form-compact .card-header{ padding:.5rem .75rem }
.form-compact .card-body{ padding:.75rem }
.form-compact .form-label{ margin-bottom:.25rem; font-size:.875rem }
.form-compact .form-control,
.form-compact .form-select,
.form-compact .input-group-text{
    padding:.25rem .5rem; font-size:.875rem; height:calc(1.5em + .5rem + 2px)
}
.form-compact .row.g-3{ --bs-gutter-x:.75rem; --bs-gutter-y:.5rem }
.form-compact .btn{ padding:.25rem .6rem; font-size:.875rem }
.form-compact .text-muted{ font-size:.8125rem }
.req{ color:var(--bs-danger) }

/* Field grouping */
.split-2{ display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:992px){ .split-2{ grid-template-columns:1fr 1fr } }

/* Read-only chips wrap */
.chips-wrap{ display:flex; flex-wrap:wrap; gap:.4rem .5rem }
@media (min-width:992px){
    .chips-wrap{ max-height:180px; overflow:auto; padding-right:.25rem }
    .chips-wrap::-webkit-scrollbar{ width:8px; height:8px }
    .chips-wrap::-webkit-scrollbar-thumb{ background:#d1fadf; border-radius:8px }
}

/* ------------------------
   10) TABLES
   ------------------------ */
.table{ --bs-table-border-color:var(--border) }
.table-hover>tbody>tr:hover>*{ background-color:#f9fdfb }
.table-hover > tbody > tr.deal-row:hover{
    background-color:#f8fff9!important; cursor:pointer; transition:background-color .2s ease;
}
th{ font-weight:600; letter-spacing:.03em; font-size:.75rem }

.goods-table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff }
.goods-table thead th{
    position:sticky; top:0; z-index:1; background:var(--brand-50);
    font-weight:600; border-bottom:1px solid var(--border);
    padding:.6rem .55rem; font-size:.92rem
}
.goods-table tbody td{ border-bottom:1px solid #eef2f7; padding:.55rem .55rem; font-size:.95rem }
.goods-table tr:hover td{ background:#fafdfb }
.goods-header-name{ font-weight:700; color:#0f172a }
.goods-all-price{ color:var(--brand-700); font-weight:700 }
.clr_green{ color:var(--brand-600) }
.clr_red{ color:var(--red) }

/* Dates column helpers */
.dates-col{ width:160px }
.dates-stack{ display:flex; flex-direction:column; gap:.2rem }
.date-badge{
    display:block; width:100%; padding:.2rem .45rem; font-size:.75rem; line-height:1.1;
    border:1px solid var(--bs-border-color); border-radius:.35rem; background:#fff; color:#212529; white-space:nowrap;
}
.date-badge i{ font-size:.75rem }

/* ------------------------
   11) CONTENT PATTERNS
   ------------------------ */
/* Hero */
.hero-section{ background:linear-gradient(135deg,#f8fdf9 0%, #e7f6ec 100%) }

/* Flags, lists */
.fi{ border-radius:2px; vertical-align:text-bottom }
.list-group-item:hover{ background-color:#f8fff9!important }

/* Brand helpers */
.brand-soft{ background:var(--bs-success-bg-subtle); border-color:#bfe3c8!important }
.text-brand{ color:var(--brand-700)!important }
.btn-outline-brand{
    --bs-btn-color:#198754; --bs-btn-border-color:#198754;
    --bs-btn-hover-bg:#198754; --bs-btn-hover-border-color:#198754;
    --bs-btn-active-bg:#198754; --bs-btn-active-border-color:#198754;
}

/* Link look for Good name */
.link-brand{ text-decoration:none; color:var(--brand-700); font-weight:600 }
.link-brand:hover{ text-decoration:underline; text-underline-offset:2px }

/* Info / subscribe mini cards */
.shadow-xs{ box-shadow:0 .125rem .35rem rgba(0,0,0,.06)!important }
.info-card,.subscribe-card{
    background:linear-gradient(135deg,#f8fdf9 0%, #eef9f1 100%);
    border:1px solid #bfe3c8; border-radius:.75rem;
}
.info-card .icon-wrap,.subscribe-card .icon-wrap{
    width:36px; height:36px; background:#e8f6ee; color:#198754; border:1px solid #cfe9d8; font-size:.9rem;
}
.info-card .card-body,.subscribe-card .card-body{ padding-inline:1rem }

/* ------------------------
   12) UNIFIED TICKER (Buy + Sell)
   ------------------------ */
.ticker-wrap{
    background:#fff; padding:.35rem .5rem; overflow:hidden;
    display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:.75rem;
    border:1px solid var(--brand-100); border-radius:.75rem;
}
.ticker-title{
    font-weight:600; font-size:.9rem; white-space:nowrap; color:#212529;
    display:flex; align-items:center; gap:.4rem; padding:.2rem .4rem;
    border-radius:.35rem; background:#f8f9fa; border:1px solid var(--bs-border-color);
}
.dot{ width:.5rem; height:.5rem; border-radius:50%; display:inline-block }
.dot-buy{ background:#16a34a }  /* green */
.dot-sell{ background:#dc2626 } /* red */

.ticker-viewport{ overflow:hidden }
.ticker-track{
    display:inline-flex; align-items:center; gap:1.2rem;
    white-space:nowrap; will-change:transform;
    animation:ticker-scroll 18s linear infinite; /* faster loop */
}
.ticker-wrap:hover .ticker-track{ animation-play-state:paused }

.ticker-item{
    display:inline-flex; align-items:center; gap:.5rem;
    color:#212529; padding:.15rem .45rem; border-radius:.35rem;
}
.ticker-item .good-name{ font-weight:600 }
.ticker-item .sep{ color:#adb5bd; margin:0 .05rem }
.ticker-item:hover{ background:#f8f9fa }

@keyframes ticker-scroll{
    0%{ transform:translateX(0) }
    100%{ transform:translateX(-50%) } /* print items twice to loop seamlessly */
}

@media (max-width:576px){
    .ticker-item{ padding:.25rem .5rem }
    .ticker-title{ font-size:.85rem }
}

/* ------------------------
   13) FOOTER & MISC
   ------------------------ */
.footer-light{ background:#f8fafc }
.footer-light .nav-link{ color:var(--muted) }
.footer-light .nav-link:hover{ color:var(--brand-700) }

/* Pagination */
.pagination .page-link{ color:#334155; border-color:var(--border) }
.pagination .page-link:hover{ color:var(--brand-700) }
.pagination .page-item.active .page-link{ background:var(--brand-600); border-color:var(--brand-600) }

/* Alerts */
.alert-success{ background:var(--brand-50); border-color:var(--brand-200); color:var(--brand-800) }

/* ------------------------
   14) UTILITIES
   ------------------------ */
.shadow-soft{ box-shadow:var(--shadow)!important }
.bg-soft{ background:var(--soft)!important }
.text-muted-2{ color:var(--muted)!important }
.border-soft{ border-color:var(--border)!important }
.nowrap{ white-space:nowrap }