/**
 * KITE AGRO — Coconut Price Dashboard styles
 * ──────────────────────────────────────────────────────────────────────
 * Loaded alongside the main assets/css/style.css (for the site's fonts,
 * CSS variables and base reset) — this file only adds the dashboard's
 * own components, prefixed .ccd- (Coconut Cost Dashboard) throughout so
 * nothing here can collide with the main site's classes.
 *
 * Deliberately its OWN green accent, distinct from the arecanut site's
 * rust/gold — a different crop, a visually distinct tool.
 * ──────────────────────────────────────────────────────────────────────
 */
:root{
  --ccd-green: #1B6B3A;
  --ccd-green-deep: #124D29;
  --ccd-green-pale: #E6F3EA;
  --ccd-amber: #B5790A;
  --ccd-amber-pale: #FBF0DC;
  --ccd-red: #A13A2E;
  --ccd-red-pale: #FBEAEA;
  --ccd-border: #DDE6DF;

  /* Product-category colors — grounded in the real product, not
     arbitrary: Green (Pachai) keeps the site's own green; the rest are
     picked to read as that product (brown coconut, blue for water,
     gold/bronze shades for copra grades) while staying visually
     distinct from --ccd-amber/--ccd-red above, which are reserved for
     status (placeholder/stale), not category. Each has a saturated
     "ink" tone (badge text/border) and a vivid-but-legible "pale" tone
     (table header + block background) — set together per block via
     inline --cat/--cat-pale, not separate classes, so one rule drives
     the badge, the border AND the table header consistently.
     See familyColorVars() in coconut-dashboard.js. */
  --ccd-cat-green: #1B6B3A;        --ccd-cat-green-pale: #D3EEDC;
  --ccd-cat-fresh: #4C7A2E;        --ccd-cat-fresh-pale: #DEEBCF;
  --ccd-cat-brown: #7A4A28;        --ccd-cat-brown-pale: #EDDCC8;
  --ccd-cat-water: #1F6E93;        --ccd-cat-water-pale: #D2E9F2;
  --ccd-cat-thotti: #5F5648;       --ccd-cat-thotti-pale: #E6E1D6;
  --ccd-cat-copra: #8C6423;        --ccd-cat-copra-pale: #EEDFC0;
  --ccd-cat-gradeA: #A8710A;       --ccd-cat-gradeA-pale: #F3DFAE;
  --ccd-cat-gradeA-unsulphured: #9C7A2E; --ccd-cat-gradeA-unsulphured-pale: #EDE0BC;
  --ccd-cat-gradeA-sulphured: #C0900A;   --ccd-cat-gradeA-sulphured-pale: #F6E4A8;
  --ccd-cat-gradeB: #6B4A23;       --ccd-cat-gradeB-pale: #E4D3BC;
  --ccd-cat-gradeB-unsulphured: #5F5228; --ccd-cat-gradeB-unsulphured-pale: #DCD2B8;
  --ccd-cat-gradeB-sulphured: #7A5610;   --ccd-cat-gradeB-sulphured-pale: #E8D3A0;
  --ccd-cat-other: #5A6258;        --ccd-cat-other-pale: #E4E7E2;
}

.ccd-page{max-width:1180px; margin:0 auto; padding:24px 20px 80px}
.ccd-header{margin-bottom:18px}
.ccd-header h1{font-size:26px; margin-bottom:4px}
.ccd-header p{color:var(--ink-soft); font-size:14px; margin:0}
.ccd-header .ccd-private-tag{display:inline-block; margin-top:8px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--ccd-amber); background:var(--ccd-amber-pale); border:1px solid #EAD3A0; border-radius:20px; padding:4px 10px}
.ccd-import-row{margin-top:12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.ccd-import-btn{display:inline-flex; align-items:center; cursor:pointer; font-size:13px}

.ccd-banner{background:var(--ccd-amber-pale); color:#7A4E05; border:1px solid #EAD3A0; border-radius:10px; padding:10px 14px; font-size:13px; font-weight:600; margin-bottom:14px}

.ccd-state{background:var(--paper); border:1.5px solid var(--ccd-border); border-radius:12px; padding:32px; text-align:center; color:var(--ink-soft); font-size:14px}
.ccd-state-error{color:var(--ccd-red); background:var(--ccd-red-pale); border-color:#EFC9C4}
.ccd-spinner{width:22px; height:22px; border:3px solid var(--ccd-green-pale); border-top-color:var(--ccd-green); border-radius:50%; margin:0 auto 10px; animation:ccd-spin .8s linear infinite}
@keyframes ccd-spin{to{transform:rotate(360deg)}}
.ccd-btn{font-family:var(--font-body); font-weight:600; font-size:13px; background:var(--ccd-green); color:#fff; border:none; border-radius:8px; padding:8px 16px; cursor:pointer}
.ccd-btn:hover{background:var(--ccd-green-deep)}
.ccd-btn.active{background:var(--ccd-green-deep); box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}

.ccd-filterbar{display:flex; flex-wrap:wrap; gap:14px; background:var(--paper); border:1.5px solid var(--ccd-border); border-radius:12px; padding:14px 16px; margin-bottom:14px}
.ccd-filterbar label{display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.3px}
.ccd-filterbar select, .ccd-filterbar input[type="date"]{font-family:var(--font-body); font-size:13px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--ink); padding:7px 9px; border:1.5px solid var(--ccd-border); border-radius:7px; background:var(--cream); min-width:120px}
.ccd-checkbox{flex-direction:row !important; align-items:center; gap:6px !important}
.ccd-checkbox input{width:16px; height:16px}

.ccd-tabs{display:flex; gap:6px; margin-bottom:16px; border-bottom:2px solid var(--ccd-border)}
.ccd-tab{font-family:var(--font-body); font-weight:600; font-size:13.5px; background:none; border:none; padding:10px 16px; cursor:pointer; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-2px}
.ccd-tab.active{color:var(--ccd-green-deep); border-bottom-color:var(--ccd-green)}

.ccd-stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:18px}
.ccd-stat-card{background:var(--paper); border:1.5px solid var(--ccd-border); border-radius:12px; padding:14px 16px}
.ccd-stat-card.ccd-stat-warn{background:var(--ccd-amber-pale); border-color:#EAD3A0}
.ccd-stat-label{font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px}
.ccd-stat-value{font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--ink)}
.ccd-stat-sub{font-size:11.5px; font-weight:500; color:var(--ink-soft); font-family:var(--font-body)}

.ccd-note{background:var(--ccd-green-pale); color:var(--ccd-green-deep); border-radius:9px; padding:9px 14px; font-size:12.5px; line-height:1.5; margin-bottom:16px}

.ccd-table-wrap{overflow-x:auto; border:1.5px solid var(--ccd-border); border-radius:10px}
.ccd-table{width:100%; border-collapse:collapse; font-size:13px; background:var(--paper)}
.ccd-table th,.ccd-table td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--ccd-border); white-space:nowrap}
.ccd-table th{font-family:var(--font-mono); font-size:10px; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-soft); background:var(--ccd-green-pale)}
.ccd-th-sortable{cursor:pointer; user-select:none}
.ccd-th-sortable:hover{color:var(--ink)}
.ccd-sort-arrow{margin-left:3px; opacity:.7}
.ccd-table tr:last-child td{border-bottom:none}
.ccd-num{font-family:var(--font-mono); text-align:right; font-variant-numeric:tabular-nums}
.ccd-strong{font-weight:700; color:var(--ccd-green-deep)}
.ccd-muted{color:var(--ink-soft); font-size:11.5px}
.ccd-row-clickable{cursor:pointer}
.ccd-row-clickable:hover{background:var(--ccd-green-pale)}
.ccd-hint{font-size:11.5px; color:var(--ink-soft); font-style:italic}

.ccd-tag-placeholder{font-family:var(--font-mono); font-size:9.5px; font-weight:700; text-transform:uppercase; color:var(--ccd-amber); background:var(--ccd-amber-pale); border-radius:10px; padding:1px 6px; white-space:nowrap}
.ccd-tag-stale{font-family:var(--font-mono); font-size:9.5px; font-weight:700; text-transform:uppercase; color:var(--ccd-red); background:var(--ccd-red-pale); border-radius:10px; padding:2px 7px; white-space:nowrap}
.ccd-tag-fresh{font-family:var(--font-mono); font-size:9.5px; font-weight:700; text-transform:uppercase; color:var(--ccd-green); background:var(--ccd-green-pale); border-radius:10px; padding:2px 7px; white-space:nowrap}
.ccd-tag-source{font-family:var(--font-mono); font-size:9.5px; font-weight:700; text-transform:uppercase; color:var(--ink-soft); background:var(--ccd-border); border-radius:10px; padding:2px 7px; white-space:nowrap; margin-left:4px}

.ccd-empty-inline{padding:20px; text-align:center; color:var(--ink-soft); font-size:13px; background:var(--paper); border:1.5px dashed var(--ccd-border); border-radius:10px}

.ccd-unmapped{background:var(--ccd-red-pale); border:1.5px solid #EFC9C4; border-radius:12px; padding:16px 18px; margin-top:20px}
.ccd-unmapped h3{font-size:14px; color:var(--ccd-red); margin-bottom:6px}
.ccd-unmapped p{font-size:12.5px; color:var(--ink); margin:0 0 8px}
.ccd-unmapped ul{margin:0; padding-left:18px; font-size:12.5px}
/* "(dehusked)" after green coconut — smaller and lighter, wraps as one piece when space is short */
.cp-qual{font-size:.82em; font-weight:500; color:var(--ink-soft); white-space:nowrap}
/* Coconut variety table (English page): Tamil name on its own small line on phones, beside the English on wider screens */
.cp-fam{display:inline}
.cp-fam-ta{display:block; margin-top:2px; font-size:12.5px; line-height:1.4; color:var(--ink-soft); white-space:normal}
@media (min-width:860px){ .cp-fam-ta{display:inline; margin:0 0 0 10px} .cp-fam-ta::before{content:"· "; color:var(--ccd-border)} }
.ccd-unmapped code{background:var(--paper); padding:1px 5px; border-radius:4px; font-family:var(--font-mono)}
/* Debug page only: full rows for each untagged market */
.ccd-unmapped-detail{margin-top:12px; background:#fff; border:1px solid #EFC9C4; border-radius:10px; padding:8px 12px}
.ccd-unmapped-detail summary{cursor:pointer; font-size:13px; padding:4px 0}
.ccd-unmapped-detail .ccd-table-wrap{margin-top:8px}
.ccd-unmapped-detail .ccd-table{font-size:12px}
.ccd-unmapped-msg td{background:var(--paper)}
.ccd-unmapped-msg .ccd-original-text{white-space:pre-wrap; text-align:left; font-size:12px}

.ccd-board-panel{background:var(--paper); border:1.5px solid var(--ccd-border); border-radius:12px; padding:16px 18px; margin-top:20px}
.ccd-board-heading{font-size:14px; font-weight:700; color:var(--ink); margin-bottom:4px}
.ccd-board-panel > p.ccd-hint{margin:0 0 12px}
.ccd-board-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
.ccd-board-commodity-heading{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px}
.ccd-board-commodity .ccd-table{width:100%}

.ccd-trend-controls{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px}
.ccd-mandi-picker{display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:13px}
.ccd-view-toggle{display:flex; gap:6px}
.ccd-view-toggle .ccd-btn{background:var(--paper); color:var(--ink); border:1.5px solid var(--ccd-border)}
.ccd-view-toggle .ccd-btn.active{background:var(--ccd-green); color:#fff; border-color:var(--ccd-green)}
.ccd-link-btn{background:none; border:none; padding:0; font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--ccd-green); cursor:pointer; text-decoration:underline}
.ccd-link-btn:hover{color:var(--ccd-green-deep)}

.ccd-trend-product-picker{background:var(--paper); border:1.5px solid var(--ccd-border); border-radius:10px; padding:10px 14px; margin-bottom:12px}
.ccd-trend-product-options{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:8px; font-size:12.5px}

.ccd-chart-wrap{background:var(--paper); border:1.5px solid var(--cat, var(--ccd-border)); border-radius:12px; padding:16px}
.ccd-chart-svg{width:100%; height:auto; display:block}
.ccd-legend{display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:12.5px}
.ccd-legend-item{display:flex; align-items:center; gap:6px}
.ccd-legend-swatch{width:13px; height:13px; display:inline-block; flex-shrink:0}

.ccd-modal-backdrop{position:fixed; inset:0; background:rgba(15,20,17,.55); display:flex; align-items:center; justify-content:center; z-index:500; padding:20px}
.ccd-modal{background:var(--paper); border-radius:14px; max-width:560px; width:100%; max-height:85vh; overflow-y:auto; padding:24px; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.3)}
.ccd-modal-close{position:absolute; top:14px; right:14px; background:none; border:none; font-size:18px; cursor:pointer; color:var(--ink-soft); width:32px; height:32px; border-radius:50%}
.ccd-modal-close:hover{background:var(--ccd-green-pale)}
.ccd-modal h3{font-size:17px; margin-bottom:14px; padding-right:30px}
.ccd-modal-meta{display:flex; flex-direction:column; gap:6px; font-size:13px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px dashed var(--ccd-border)}
.ccd-original-text{margin-top:14px; background:var(--cream); border-radius:8px; padding:12px 14px; font-size:13px; line-height:1.6}

/* Coconut Dashboard — price-unit / product-category grouping sections */
.ccd-unit-section{margin-bottom:18px; border:1.5px solid var(--ccd-border); border-radius:12px; overflow:hidden; background:var(--paper)}
.ccd-unit-header{width:100%; display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--ccd-green-pale); border:none; cursor:pointer; text-align:left; font-family:var(--font-body)}
.ccd-unit-caret{font-size:12px; color:var(--ccd-green-deep)}
.ccd-unit-name{font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--ccd-green-deep)}
.ccd-unit-count{margin-left:auto; font-size:12px; color:var(--ink-soft)}
.ccd-unit-body{padding:14px 16px}
.ccd-unit-badge{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.4px; padding:4px 10px; border-radius:20px; background:#7A4B00; color:#FFF3D1; white-space:nowrap}
.ccd-unit-note{margin:0 0 14px; padding:10px 14px; border-radius:8px; font-size:13px; line-height:1.5; font-weight:600; background:#FFF3D1; color:#6B4200; border:1.5px solid #E0A82E}

/* ₹/piece and ₹/bag sections: unmistakably NOT the ₹/kg tables — amber
   frame + header, and the price cells themselves marked so a figure like
   "₹28.05/piece" can't be read as a per-kg rate at a glance. */
.ccd-unit-piece, .ccd-unit-bag{border-color:#E0A82E; border-width:2.5px}
.ccd-unit-piece .ccd-unit-header, .ccd-unit-bag .ccd-unit-header{background:#FFE7A8}
.ccd-unit-piece .ccd-unit-name, .ccd-unit-bag .ccd-unit-name{color:#6B4200; font-size:18px}
.ccd-unit-piece .ccd-table td.ccd-num, .ccd-unit-bag .ccd-table td.ccd-num{background:#FFF8E1; color:#6B4200; font-weight:700}

/* Category photo slot — a placeholder tile until a real image is set in
   FAMILY_IMAGES (coconut-dashboard.js). */
.ccd-family-head{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.ccd-family-head .ccd-family-heading{margin-bottom:0}
.ccd-family-img{width:72px; height:72px; flex:0 0 72px; border-radius:10px; object-fit:cover}
.ccd-family-img-ph{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; border:2px dashed var(--cat, var(--ccd-border)); background:var(--cat-pale, var(--ccd-green-pale)); color:var(--cat, var(--ink-soft))}
.ccd-ph-emoji{font-size:24px; line-height:1}
.ccd-ph-text{font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; line-height:1.15}

/* Category coloring — driven by two inline custom properties set per
   block (--cat / --cat-pale, see familyColorVars() in
   coconut-dashboard.js), not one CSS class per category. This one rule
   set colors the block's left edge, its background wash, the heading
   badge AND the table's own header row together, so the color reads
   in the table itself, not just a small label above it. */
.ccd-family-block{
  margin-bottom:18px; padding:12px 14px 14px; border-radius:10px;
  border-left:5px solid var(--cat, var(--ccd-border));
  background:var(--paper)
}
.ccd-family-block:last-child{margin-bottom:0}
.ccd-family-heading{
  display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:.4px; text-transform:uppercase; color:var(--cat, var(--ccd-cat-other));
  background:var(--paper); padding:4px 12px; border-radius:20px; margin-bottom:10px;
  box-shadow:inset 0 0 0 1.5px var(--cat, var(--ccd-border))
}
.ccd-family-block .ccd-table-wrap{border:1.5px solid var(--cat, var(--ccd-border)); border-radius:9px}
.ccd-family-block .ccd-table th{background:var(--cat-pale, var(--ccd-green-pale)); color:var(--cat, var(--ink-soft))}
.ccd-family-block .ccd-table{background:var(--paper)}

/* Price Trends — "Highest price seen" leader cards */
.ccd-leaders-section{margin-bottom:20px}
.ccd-leaders-headrow{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px}
.ccd-leaders-heading{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:0}
.ccd-leaders-window{display:flex; flex-wrap:wrap; gap:14px}
.ccd-radio{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--ink); cursor:pointer}
.ccd-radio input{accent-color:var(--ccd-green); cursor:pointer}
.ccd-leader-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.ccd-leader-card{
  display:flex; gap:12px; align-items:flex-start; padding:13px 14px; border-radius:10px;
  border-left:5px solid var(--cat, var(--ccd-border)); background:var(--paper); cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease
}
.ccd-leader-card:hover{transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.08)}
.ccd-leader-emoji{font-size:26px; line-height:1.1}
.ccd-leader-family{font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--cat, var(--ink-soft))}
.ccd-leader-value{font-size:19px; font-weight:700; color:var(--ink); margin:3px 0 2px}
.ccd-leader-meta{font-size:12px; color:var(--ink-soft)}
.ccd-leader-date{font-size:11px; color:var(--ink-soft); margin-top:2px}

/* Mandi Price List — item-type grouping sections (mpl- prefix) */
.mpl-type-section{margin-bottom:16px; border:1.5px solid var(--ccd-border); border-radius:12px; overflow:hidden; background:var(--paper)}
.mpl-type-header{width:100%; display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--ccd-green-pale); border:none; cursor:pointer; text-align:left; font-family:var(--font-body)}
.mpl-type-caret{font-size:12px; color:var(--ccd-green-deep)}
.mpl-type-name{font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--ccd-green-deep)}
.mpl-type-count{margin-left:auto; font-size:12px; color:var(--ink-soft)}
.mpl-type-section .ccd-table-wrap{border:none; border-radius:0; border-top:1px solid var(--ccd-border)}

@media (max-width:640px){
  .ccd-page{padding:16px 14px 60px}
  .ccd-filterbar{flex-direction:column}
  .ccd-filterbar select, .ccd-filterbar input[type="date"]{width:100%}
  .ccd-table{font-size:12px}
  .ccd-table th,.ccd-table td{padding:7px 8px}
}

/* ── Public /coconut-price/ page: mandi tiles + per-mandi detail panel ── */
.cp-tile-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:12px}
.cp-tile{
  text-decoration:none; display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; width:100%;
  padding:14px 16px; border:2px solid #8FC3A2; border-radius:12px; background:var(--paper); box-shadow:0 2px 6px rgba(18,77,41,.10);
  font-family:var(--font-body); color:var(--ink); cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .15s
}
.cp-tile:hover{border-color:var(--ccd-green-deep); box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-1px)}
.cp-tile:focus-visible{outline:3px solid var(--ccd-green-deep); outline-offset:2px}
.cp-tile-name{font-family:var(--font-display); font-size:19px; font-weight:600; line-height:1.2}
.cp-tile-region{font-size:12px; color:var(--ink-soft); margin-bottom:6px}
.cp-tile-line{font-size:14px; line-height:1.4}
.cp-tile-item{color:var(--ink-soft)}
.cp-tile-none{color:var(--ink-soft); font-style:italic}
.cp-tile-foot{font-size:12px; color:var(--ink-soft); margin-top:6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.cp-tile-cta{margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:20px; background:var(--ccd-green); color:#fff; font-size:13px; font-weight:700; transition:background .15s, gap .15s}
.cp-tile:hover .cp-tile-cta{background:var(--ccd-green-deep); gap:10px}
.cp-tile-foot{margin-bottom:10px}
.cp-tile-old{border-style:dashed; border-color:#B9B9A8; box-shadow:none; background:#FBF8F0}
.cp-tile-old .cp-tile-cta{background:transparent; color:var(--ccd-green-deep); box-shadow:inset 0 0 0 1.5px var(--ccd-green-deep)}
.cp-tile-old:hover .cp-tile-cta{background:var(--ccd-green-pale)}
.cp-tile-empty{background:transparent; border:2px dashed var(--ccd-border); box-shadow:none; cursor:default; opacity:.75}
.cp-tile-empty:hover{transform:none; box-shadow:none; border-color:var(--ccd-border)}
@media (max-width:600px){
  .cp-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .cp-tile{padding:12px}
  .cp-tile-name{font-size:16px}
  .cp-tile-line{font-size:13px}
}

/* History tab (per-mandi list of every report) */
.ccd-history-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 6px}
.ccd-history-head h2{margin:0; font-family:var(--font-display); font-size:22px}
.ccd-back-link{font-size:13px; font-weight:700; color:var(--ccd-green-deep); text-decoration:none}
.ccd-back-link:hover{text-decoration:underline}
.ccd-history-newdate td{border-top:2px solid var(--ccd-border)}

/* ── /coconut-price/ page: filter chips, share, best-price badge, loading ── */
.cp-tile-wrap{position:relative; display:flex; min-width:0}
.cp-tile-wrap > .cp-tile{flex:1; min-width:0}
.cp-tile-name{padding-right:34px}
.cp-share{position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; border:1.5px solid #8FC3A2; background:#fff; font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s}
.cp-share:hover{background:var(--ccd-green-pale); border-color:var(--ccd-green-deep)}
.cp-share:focus-visible{outline:3px solid var(--ccd-green-deep); outline-offset:2px}
.cp-best{display:inline-block; margin-left:4px; padding:1px 8px; border-radius:20px; background:#FFE7A8; color:#6B4200; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; white-space:nowrap; vertical-align:1px}
.cp-controls{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:12px 0 4px}
.cp-filter{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.cp-filter-label{font-size:13px; font-weight:600; color:var(--ink-soft)}
.cp-chip{font-family:var(--font-body); font-size:13px; font-weight:700; padding:7px 16px; border-radius:20px; border:1.5px solid #8FC3A2; background:var(--paper); color:var(--ccd-green-deep); cursor:pointer; transition:background .15s, color .15s}
.cp-chip:hover{background:var(--ccd-green-pale)}
.cp-chip:focus-visible, .cp-share-all:focus-visible{outline:3px solid var(--ccd-green-deep); outline-offset:2px}
.cp-chip.active{background:var(--ccd-green); border-color:var(--ccd-green); color:#fff}
.cp-share-all{font-family:var(--font-body); font-size:13px; font-weight:700; padding:7px 16px; border-radius:20px; border:1.5px solid #25D366; background:#fff; color:#128C4A; cursor:pointer}
.cp-share-all:hover{background:#E9FBF0}
.cp-fresh{margin:0 0 4px; font-size:12px; color:var(--ink-soft); font-family:var(--font-mono); min-height:16px}
.cp-error{margin-top:12px; padding:22px; border:1.5px solid #EFC9C4; background:var(--ccd-red-pale); border-radius:12px; text-align:center; color:var(--ccd-red)}
.cp-error p{margin:0 0 12px; font-weight:600}
.cp-skeleton{pointer-events:none; border-color:var(--ccd-border) !important; box-shadow:none !important; gap:10px}
.cp-sk{display:block; border-radius:6px; background:linear-gradient(90deg,#E8E4D6 25%,#F4F1E8 50%,#E8E4D6 75%); background-size:200% 100%; animation:cp-shimmer 1.4s linear infinite}
.cp-sk-title{width:55%; height:20px}
.cp-sk-short{width:35%; height:12px}
.cp-sk-line{width:80%; height:14px}
.cp-sk-btn{width:110px; height:30px; border-radius:20px; margin-top:6px}
@keyframes cp-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.cp-sk{animation:none}.cp-tile,.cp-tile-cta{transition:none}}

/* ── Quick period chips, glossary, history extras ───────────────────── */
.ccd-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ccd-quick-label { font-size: 0.85rem; color: #5b6b60; }
.ccd-chip { border: 1px solid var(--ccd-border); background: #fff; color: var(--ccd-green-deep); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 0.88rem; cursor: pointer; min-height: 36px; }
.ccd-chip:hover { background: var(--ccd-green-pale); }
.ccd-chip.active { background: var(--ccd-green); border-color: var(--ccd-green); color: #fff; }
.ccd-chip:focus-visible, .ccd-btn:focus-visible { outline: 2px solid var(--ccd-green); outline-offset: 2px; }
.ccd-glossary { margin: 18px 0 8px; border: 1px solid var(--ccd-border); border-radius: 8px; background: #fff; padding: 10px 14px; }
.ccd-glossary summary { cursor: pointer; font-weight: 600; color: var(--ccd-green-deep); }
.ccd-glossary ul { margin: 10px 0 2px; padding-left: 18px; display: grid; gap: 6px; font-size: 0.92rem; }
.ccd-history-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.ccd-history-chart { margin: 0 0 16px; }
.ccd-history-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; margin-bottom: 8px; }
.ccd-history-pick select { font: inherit; padding: 6px 8px; border: 1px solid var(--ccd-border); border-radius: 6px; max-width: 100%; }
.ccd-delta { font-weight: 600; white-space: nowrap; }
.ccd-delta-up { color: var(--ccd-green); }
.ccd-delta-down { color: var(--ccd-red); }
.ccd-delta-flat { color: #6b6b6b; font-weight: 400; }
.ccd-date-dup { color: #9aa59d; font-size: 0.85em; }

/* Phone layout: each table row becomes a labelled card. */
@media (max-width: 640px) {
  .ccd-table.ccd-cards, .ccd-table.ccd-cards tbody, .ccd-table.ccd-cards tr, .ccd-table.ccd-cards td { display: block; width: 100%; }
  .ccd-table.ccd-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ccd-table.ccd-cards tr { border: 1px solid var(--ccd-border); border-radius: 8px; margin-bottom: 10px; padding: 6px 12px; background: #fff; }
  .ccd-table.ccd-cards td { display: flex; justify-content: space-between; gap: 12px; text-align: right; padding: 5px 0; border: 0; }
  .ccd-table.ccd-cards td::before { content: attr(data-label); flex: none; text-align: left; color: #5b6b60; font-size: 0.82rem; }
  .ccd-table.ccd-cards td:empty { display: none; }
  .ccd-table-wrap { overflow-x: visible; }
  .ccd-history-toolbar .ccd-btn { width: 100%; }
}

/* Public variety table on phones: wrap cells (long Tamil headings) and scroll inside the box if still too wide */
@media (max-width: 640px) {
  #cpVarietyTable .ccd-table-wrap { overflow-x: auto; }
  #cpVarietyTable .ccd-table th, #cpVarietyTable .ccd-table td { white-space: normal; padding: 9px 8px; }
}
@media (max-width: 400px) {   /* small Android phones (360px): a little less padding so the 4 columns fit without sideways scrolling */
  #cpVarietyTable .ccd-table th, #cpVarietyTable .ccd-table td { padding: 8px 5px; }
}

/* ── Coconut tiles: larger, aligned, easier to read (50+ friendly) ───── */
.cp-tile-name{font-size:24px}
.cp-tile-region{font-size:15px}
.cp-tile-line{display:grid; grid-template-columns:5.2rem 1fr; column-gap:8px; align-items:baseline; font-size:18px; line-height:1.35; padding:5px 0; border-top:1px solid #E7EDE3}
.cp-tile-line + .cp-tile-line{margin-top:0}
.cp-tile-line strong{font-size:21px; font-variant-numeric:tabular-nums; color:#14351f}
.cp-tile-item{font-size:16px; font-weight:600}
.cp-tile-line .cp-best{grid-column:2; justify-self:start; margin:4px 0 0; font-size:13px; padding:3px 10px}
.cp-tile-none{display:block; font-size:17px}
.cp-tile-foot{font-size:15px; margin-top:8px}
.cp-tile-foot .ccd-tag-fresh, .cp-tile-foot .ccd-tag-stale{font-size:13px; padding:3px 9px}
.cp-tile-cta{font-size:17px; padding:11px 20px; min-height:44px}
.cp-share{width:auto; height:40px; padding:0 12px; border-radius:20px; gap:6px; font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--ccd-green-deep)}
.cp-tile-name{padding-right:96px}
.cp-chip{font-size:16px; padding:10px 20px; min-height:44px}
.cp-share-all{font-size:16px; min-height:44px}
.cp-fresh{font-size:15px}
@media (max-width:600px){
  .cp-tile-name{font-size:22px}
  .cp-tile-line{font-size:17px}
  .cp-tile-line strong{font-size:20px}
}

/* ── Mandi tiles: clean, professional cards — prices always visible ───── */
.cp-tile-grid{gap:16px}
.cp-tile{position:relative; display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; min-height:0; border:1px solid #D5DED7; border-top:4px solid var(--ccd-green); border-radius:10px; background:#fff; box-shadow:0 1px 3px rgba(20,40,28,.08); transition:box-shadow .15s, border-color .15s, transform .15s}
.cp-tile:hover{box-shadow:0 6px 16px rgba(20,40,28,.14); border-color:#B7C7BC; border-top-color:var(--ccd-green-deep); transform:translateY(-1px)}
.cp-tile-banner{display:block; height:auto; padding:14px 18px 10px; background:none; color:inherit; filter:none}
.cp-tile-wrap .cp-tile-name{display:block; font-size:20px; line-height:1.2; font-weight:700; color:#14251b; padding:0 78px 0 0}
.cp-tile-sub{display:block; margin-top:3px; font-size:13px; font-weight:400; color:#5f6f64; letter-spacing:0; opacity:1}
.cp-tile-panel{position:static; display:flex; flex-direction:column; gap:0; padding:0 18px; opacity:1; visibility:visible; background:none; flex:1}
.cp-tile-panel .cp-tile-line{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:2px 10px; padding:9px 0; border-top:1px solid #E6ECE7; font-size:15px}
.cp-tile-panel .cp-tile-item{font-size:14px; font-weight:500; color:#5f6f64}
.cp-tile-panel .cp-tile-line strong{font-size:17px; font-weight:700; color:#14251b; font-variant-numeric:tabular-nums}
.cp-tile-panel .cp-best{margin:0; flex-basis:100%; justify-self:auto; align-self:flex-start; width:max-content; font-size:12px; padding:2px 9px}
.cp-tile-panel .cp-tile-none{display:block; padding:9px 0; border-top:1px solid #E6ECE7; font-size:14px; font-style:normal; color:#7a857d}
.cp-tile-foot{display:flex; align-items:center; gap:8px; margin:0; padding:10px 18px; border-top:1px solid #E6ECE7; font-size:13px; color:#5f6f64}
.cp-tile-cta{align-self:stretch; justify-content:space-between; margin:0; padding:12px 18px; min-height:0; border-radius:0; background:#F4F8F5; color:var(--ccd-green-deep); font-size:14px; font-weight:700; border-top:1px solid #E1EAE3; transition:background .15s}
.cp-tile:hover .cp-tile-cta{background:var(--ccd-green); color:#fff; gap:6px}
.cp-tile-old{border-top-color:#B9B9A8}
.cp-tile-old .cp-tile-cta{background:#F7F5EE; color:var(--ccd-green-deep); box-shadow:none}
.cp-tile-old:hover .cp-tile-cta{background:var(--ccd-green); color:#fff}
.cp-tile-empty{border-top-color:#C9CEC9; box-shadow:none; opacity:.85; min-height:0}
.cp-tile-empty:hover{transform:none; box-shadow:none; border-color:#D5DED7}
.cp-tile-hint{display:none !important}
.cp-share{top:12px; right:12px; z-index:2; height:32px; padding:0 11px; gap:5px; font-size:13px; font-weight:600; color:var(--ccd-green-deep); background:#fff; border:1px solid #C6D6CB; border-radius:16px; opacity:1; visibility:visible}
.cp-share:hover{background:var(--ccd-green-pale); border-color:var(--ccd-green)}
@media (max-width:600px){
  .cp-tile-wrap .cp-tile-name{font-size:17px; padding-right:70px}
  .cp-tile-sub{font-size:12px}
  .cp-tile-banner{padding:12px 14px 8px}
  .cp-tile-panel{padding:0 14px}
  .cp-tile-foot{padding:9px 14px}
  .cp-tile-cta{padding:11px 14px}
  .cp-tile-panel .cp-tile-line strong{font-size:16px}
}
@media (max-width:480px){
  .cp-tile-grid{grid-template-columns:1fr; gap:12px}
}

/* ── Tidy-up: green name banner (brand green), aligned rows, compact share ── */
.cp-tile{border:1px solid #CFDCD3; border-top:1px solid #CFDCD3; border-radius:10px}
.cp-tile:hover{border-color:var(--ccd-green); border-top-color:var(--ccd-green)}
.cp-tile-banner{background:var(--ccd-green); color:#fff; padding:13px 16px 12px}
.cp-tile-wrap .cp-tile-name{color:#fff; font-size:19px; padding-right:52px}
.cp-tile-sub{color:rgba(255,255,255,.88); font-size:13px}
.cp-tile-old .cp-tile-banner{background:#5E7F69}
.cp-tile-empty .cp-tile-banner{background:#8B978F}
.cp-tile-panel{min-height:116px; padding:6px 16px 4px; justify-content:flex-start}
.cp-tile-panel .cp-tile-line{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 12px; padding:9px 0}
.cp-tile-panel .cp-tile-line + .cp-tile-line{border-top:1px solid #E6ECE7}
.cp-tile-panel .cp-tile-line:first-child{border-top:0}
.cp-tile-panel .cp-tile-line strong{margin-left:auto; text-align:right; white-space:nowrap}
.cp-tile-panel .cp-tile-item{display:inline-flex; align-items:center; gap:8px; font-size:14px}
.cp-tile-panel .cp-best{display:inline-block; flex-basis:auto; width:auto; margin:0; padding:1px 7px; font-size:11px; border-radius:10px}
.cp-tile-foot{padding:9px 16px}
.cp-tile-cta{padding:11px 16px}
.cp-share{top:10px; right:10px; width:34px; height:34px; padding:0; justify-content:center; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.55); color:#fff}
.cp-share:hover{background:rgba(255,255,255,.32); border-color:#fff}
.cp-share .cp-share-txt{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
@media (max-width:480px){
  .cp-tile-panel .cp-tile-line strong{white-space:normal}
}
/* Header is just the mandi name now (no sub-line) */
.cp-tile-banner{display:flex; align-items:center; min-height:54px; padding:10px 16px}
.cp-tile-wrap .cp-tile-name{font-size:20px}
/* Long market names (Tamil has no break points inside a word) must stay inside the banner, clear of the share button */
.cp-tile-wrap .cp-tile-name{min-width:0; max-width:100%; overflow-wrap:anywhere}
html[lang="ta"] .cp-tile-wrap .cp-tile-name{font-size:17px; line-height:1.3}
@media (max-width:480px){
  html[lang="ta"] .cp-tile-wrap .cp-tile-name{font-size:15px}
}

/* Compact "where this comes from" strip (replaces the big trust cards) */
.cp-trust-strip{background:#2a2118; padding:14px 0}
.cp-trust-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center}
.cp-trust-list a{color:#E9DFC9; text-decoration:none; font-size:14px; font-weight:500; display:inline-flex; align-items:center; gap:8px}
.cp-trust-list a:hover{color:#fff; text-decoration:underline}
/* Link card to the separate Copra Auction Schedule page */
.cp-link-card{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 22px; background:#fff; border:1px solid #CFDCD3; border-left:4px solid var(--ccd-green); border-radius:10px; text-decoration:none; color:var(--ink); transition:box-shadow .15s, border-color .15s}
.cp-link-card:hover{box-shadow:0 6px 16px rgba(20,40,28,.12); border-color:var(--ccd-green)}
.cp-link-card-text{display:flex; flex-direction:column; gap:3px}
.cp-link-card-text strong{font-size:17px; font-family:var(--font-display)}
.cp-link-card-text span{font-size:14px; color:var(--ink-soft)}
.cp-link-card-go{font-weight:700; color:var(--ccd-green-deep); white-space:nowrap}

/* "Flying out to the mandis…" loading line (same kite as the Areca card) */
.cp-hero-loading{justify-content:flex-start; padding:4px 0 8px; margin:0; font-size:16px; color:#E9DFC9}
#cpMandiTable > .rates-loading-note{justify-content:flex-start; padding:0 2px 12px; margin:0; font-size:15px}

/* Friendly error / loading states on the dashboard */
.ccd-state-error{display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding:22px 24px; line-height:1.5}
.ccd-error-title{font-family:var(--font-display); font-size:20px; font-weight:700}
.ccd-error-detail{font-family:var(--font-mono); font-size:12px; color:#7a857d; word-break:break-word}
.ccd-error-actions{display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; margin-top:6px}
.ccd-state.rates-loading-note{justify-content:flex-start}

/* ── Tile rows: label above price (same layout for every row), grade markers ── */
.cp-tile-panel .cp-tile-line{display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2px; padding:9px 0}
.cp-tile-panel .cp-tile-line + .cp-tile-line{border-top:1px solid #E6ECE7}
.cp-tile-panel .cp-tile-line strong{margin:0; text-align:left; white-space:nowrap; font-size:19px}
.cp-tile-panel .cp-tile-item{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:#5f6f64}
.cp-tile-panel .cp-best{margin:0 0 0 4px; font-size:10.5px; padding:1px 7px}
.cp-dot{display:inline-block; width:11px; height:11px; border-radius:50%; flex:none; box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.18)}
.cp-dot-green{background:#3FA34D}
.cp-dot-brown{background:#7A4A28}
@media (max-width:480px){
  .cp-tile-panel .cp-tile-line strong{white-space:normal}
}
/* Market names on one line (coconut-price-page.js shrinks a long name to fit) — 2026-10-23 */
.cp-tile-wrap .cp-tile-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal}