/* ============================================================
   All-in-One Task Tracker — Excel/Sheets pastel theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ===== Pastel palette (from the spreadsheet screenshots) ===== */
  --p-peach:        #F4D5B7;
  --p-peach-soft:   #FCE5D5;
  --p-pink:         #F4D5DD;
  --p-pink-soft:    #FBE5E9;
  --p-blue:         #C5DDEB;
  --p-blue-soft:    #DCE9F3;
  --p-green:        #D5E8D4;
  --p-green-soft:   #E6F1E0;
  --p-yellow:       #FFF2CC;
  --p-yellow-soft:  #FFF8E0;
  --p-lavender:     #E0D4F0;
  --p-gray:         #ECECEC;
  --p-gray-soft:    #F5F5F5;

  /* ===== App chrome ===== */
  --app-bg:         #F7F7F8;
  --sidebar-bg:     #FFFFFF;
  --sidebar-border: #DDDDDD;
  --content-bg:     #FFFFFF;
  --toolbar-bg:     #FAFAFA;
  --toolbar-border: #DDDDDD;
  --grid-line:      #D4D4D4;
  --grid-line-soft: #E8E8E8;

  /* ===== Text ===== */
  --ink-1: #1F2328;       /* primary */
  --ink-2: #57606A;       /* secondary */
  --ink-3: #8C959F;       /* muted */
  --ink-4: #BDC1C5;       /* placeholder */
  --link:  #0969DA;

  /* ===== Status colors (used in pills, kanban dots) ===== */
  --st-todo:        #ED7B0B;
  --st-inprogress:  #1A73E8;
  --st-hold:        #57606A;
  --st-review:      #8B5CF6;
  --st-started:     #19A463;
  --st-overdue:     #DC2626;
  --st-canceled:    #475569;
  --st-completed:   #16A34A;

  /* ===== Priority colors ===== */
  --pri-veryhigh: #DC2626;
  --pri-high:     #EA580C;
  --pri-medium:   #F59E0B;
  --pri-low:      #2563EB;
  --pri-verylow:  #6B7280;
  --pri-hold:     #94A3B8;

  /* ===== Type ===== */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: Calibri, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ===== Sizing ===== */
  --sidebar-w: 175px;
  --header-h:  44px;
  --tabbar-h:  32px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body, #root {
  margin: 0; padding: 0;
  height: 100vh; width: 100vw;
  overflow: hidden;
  background: var(--app-bg);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-1);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }
input { font-family: inherit; }

/* ===== Section headers (the pastel banner blocks) ===== */
.section-banner {
  display: flex; align-items: center; justify-content: center;
  height: 60px;
  background: var(--p-gray);
  border: 1px solid var(--ink-1);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-1);
  margin: 16px 0 18px;
}

.section-card-header {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--ink-1);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-1);
  text-align: center;
}
.section-card-header.peach  { background: var(--p-peach); }
.section-card-header.pink   { background: var(--p-pink); }
.section-card-header.blue   { background: var(--p-blue); }
.section-card-header.green  { background: var(--p-green); }
.section-card-header.yellow { background: var(--p-yellow); }
.section-card-header.gray   { background: var(--p-gray); }
.section-card-header.lavender { background: var(--p-lavender); }

/* ===== Sheet-style box (white panel with thin black border) ===== */
.sheet-box {
  background: white;
  border: 1px solid var(--ink-1);
}
.sheet-box-soft {
  background: white;
  border: 1px solid var(--grid-line);
}

/* ===== Excel-style cell grid ===== */
.cell-grid {
  border-collapse: collapse;
  width: 100%;
}
.cell-grid th,
.cell-grid td {
  border: 1px solid var(--grid-line);
  padding: 4px 8px;
  font-size: 12px;
  text-align: left;
}
.cell-grid th {
  background: var(--p-gray-soft);
  font-weight: 600;
  color: var(--ink-1);
}

/* ===== Status pill (rounded pill with dot) ===== */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }

/* ===== Filter chip (used in Tasks Schedule) ===== */
.filter-chip {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-1);
  min-width: 180px;
  user-select: none;
}
.filter-chip .ic { font-size: 14px; opacity: 0.85; }
.filter-chip .val { font-weight: 400; color: var(--ink-2); margin-left: auto; padding-left: 8px; }

/* ===== Misc helpers ===== */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.caps { text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.center { text-align: center; }
.right  { text-align: right; }

/* ===== Scrollbar styling ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,.3); background-clip: content-box; }