/* ============================================================
   Riso Kanban — tokens e componentes do Design System Consolidado
   Fonte: design_system/design-system.html (Select Club, v1.1)
   Extraído conforme docs/PRD.md §15 — apenas os tokens e
   componentes efetivamente usados pelas telas do produto (§15.4).
   Prefixo: .ds-*
   ============================================================ */

:root{
  /* ── Cores — Manual de Marca Select Club (fonte única) ───── */
  --ds-royal:        #1E3A8A;
  --ds-navy:         #0A1F4D;
  --ds-silver:       #8B9AAE;
  --ds-platinum:     #E2E8F0;
  --ds-ivory:        #f8f9fc;
  --ds-offwhite:     #eef1f7;
  --ds-white:        #ffffff;
  --ds-ink:          #141B2E;
  --ds-muted:        #7E8AA0;
  --ds-border:       #c5cee0;
  --ds-slate:        #3D4858;
  --ds-error:        #ba1a1a;
  --ds-error-bg:     #ffdad6;
  /* extensões funcionais — fora do Manual de Marca oficial, ver PRD §15.1 */
  --ds-success:      #1B6B4A;
  --ds-success-bg:   #DCEEE5;
  --ds-warn:         #8A5A00;
  --ds-warn-bg:      #FBEEDA;

  /* ── Tipografia ───────────────────────────────────────────── */
  --ds-font-display: 'Newsreader', Georgia, serif;
  --ds-font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --ds-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --ds-type-display-lg:  700 48px/56px var(--ds-font-display);
  --ds-type-headline-md: 700 32px/40px var(--ds-font-display);
  --ds-type-headline-sm: 600 24px/32px var(--ds-font-display);
  --ds-type-title:       600 18px/26px var(--ds-font-display);
  --ds-type-body-lg:     400 18px/28px var(--ds-font-body);
  --ds-type-body-md:     400 16px/24px var(--ds-font-body);
  --ds-type-body-sm:     400 14px/22px var(--ds-font-body);
  --ds-type-label:       700 12px/16px var(--ds-font-body);
  --ds-type-mono-md:     500 14px/20px var(--ds-font-mono);
  --ds-type-mono-sm:     500 12px/16px var(--ds-font-mono);

  /* ── Espaço / forma / elevação ────────────────────────────── */
  --ds-space-xs: 4px; --ds-space-sm: 12px; --ds-space-md: 24px;
  --ds-space-lg: 48px; --ds-space-xl: 80px;

  --ds-radius-sm: 8px; --ds-radius-md: 12px; --ds-radius-lg: 16px;
  --ds-radius-xl: 20px; --ds-radius-2xl: 24px; --ds-radius-full: 9999px;

  --ds-shadow-sm: 0 1px 2px rgba(20,27,46,.05);
  --ds-shadow-md: 0 4px 20px -5px rgba(30,58,138,.10);
  --ds-shadow-lg: 0 12px 40px -10px rgba(10,31,77,.14);
  --ds-shadow-xl: 0 24px 60px -12px rgba(10,31,77,.20);
  --ds-shadow-cta: 0 6px 18px rgba(30,58,138,.24);

  --ds-ease: cubic-bezier(.2,0,0,1);
  --ds-fast: 150ms; --ds-med: 220ms;
}

*{box-sizing:border-box;}
html,body{margin:0;background:var(--ds-ivory);color:var(--ds-ink);font-family:var(--ds-font-body);-webkit-font-smoothing:antialiased;}
h1,h2,h3{margin:0;font-family:var(--ds-font-display);}
::selection{background:var(--ds-platinum);color:var(--ds-navy);}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;line-height:1;vertical-align:middle;}

/* ── ds-card ──────────────────────────────────────────────── */
.ds-card{background:var(--ds-white);border-radius:var(--ds-radius-2xl);box-shadow:var(--ds-shadow-md);padding:24px;}
.grid{display:grid;gap:16px;}
.g2{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(3,1fr);} .g4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.g2,.g3,.g4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr;}}

/* RNF-007 — o quadro Kanban empilha em 1 coluna abaixo de 768px, breakpoint
   próprio (diferente do g2/g3/g4 genérico usado nas demais telas). */
@media (max-width:768px){#kanban-board.g3{grid-template-columns:1fr;}}

/* ── botões ───────────────────────────────────────────────── */
.ds-btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;border-radius:var(--ds-radius-md);padding:11px 22px;font:700 14px var(--ds-font-body);transition:all var(--ds-fast) var(--ds-ease);}
.ds-btn .material-symbols-outlined{font-size:18px;}
.ds-btn-primary{background:linear-gradient(90deg,var(--ds-royal),var(--ds-navy));color:#fff;box-shadow:var(--ds-shadow-cta);}
.ds-btn-primary:hover{opacity:.92;transform:translateY(-1px);}
.ds-btn-primary:active{transform:scale(.97);}
.ds-btn-secondary{background:var(--ds-offwhite);color:var(--ds-navy);}
.ds-btn-secondary:hover{background:var(--ds-platinum);}
.ds-btn-accent{background:var(--ds-platinum);color:var(--ds-slate);}
.ds-btn-accent:hover{background:var(--ds-silver);color:#fff;}
.ds-btn-ghost{background:transparent;color:var(--ds-royal);padding:11px 14px;}
.ds-btn-ghost:hover{color:var(--ds-navy);background:rgba(30,58,138,.06);}
.ds-btn-danger{background:transparent;color:var(--ds-muted);}
.ds-btn-danger:hover{color:var(--ds-error);}
.ds-btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none;}
.ds-btn-block{width:100%;justify-content:center;}

/* ── formulários ──────────────────────────────────────────── */
.ds-field-label{display:block;font:600 13px var(--ds-font-body);color:var(--ds-slate);margin-bottom:6px;}
.ds-field{width:100%;padding:11px 14px;font:var(--ds-type-body-md);font-size:14px;color:var(--ds-ink);background:var(--ds-white);border:0;border-radius:var(--ds-radius-md);box-shadow:inset 0 0 0 1px var(--ds-border);transition:box-shadow var(--ds-fast) var(--ds-ease);}
.ds-field::placeholder{color:var(--ds-muted);}
.ds-field:hover{box-shadow:inset 0 0 0 1px var(--ds-silver);}
.ds-field:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ds-royal),0 0 0 3px rgba(30,58,138,.12);}
.ds-field.is-error{box-shadow:inset 0 0 0 1.5px var(--ds-error);}
textarea.ds-field{resize:vertical;min-height:96px;}
.ds-help{font:var(--ds-type-body-sm);color:var(--ds-muted);margin-top:6px;}
.ds-help.is-error{color:var(--ds-error);}
.ds-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:600px){.ds-form-row{grid-template-columns:1fr;}}

/* ── select customizado (usado com <select> nativo estilizado) ── */
.ds-select{position:relative;}
.ds-select-trigger{display:flex;align-items:center;gap:10px;background:var(--ds-white);border-radius:var(--ds-radius-md);padding:11px 14px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--ds-border);font:var(--ds-type-body-sm);}
.ds-select-trigger:hover{box-shadow:inset 0 0 0 1px var(--ds-silver);}
.ds-select.is-open .ds-select-trigger{box-shadow:inset 0 0 0 1.5px var(--ds-royal);}
.ds-select-value{flex:1;}
.ds-select-value.placeholder{color:var(--ds-muted);}
.ds-select-trigger .material-symbols-outlined{color:var(--ds-muted);font-size:20px;transition:transform var(--ds-fast) var(--ds-ease);}
.ds-select.is-open .ds-select-trigger .material-symbols-outlined{transform:rotate(180deg);}
.ds-select-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--ds-white);border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-xl);z-index:30;display:none;padding:8px;min-width:200px;}
.ds-select.is-open .ds-select-panel{display:block;}
.ds-select-opt{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;cursor:pointer;font:var(--ds-type-body-sm);}
.ds-select-opt:hover{background:var(--ds-offwhite);}
.ds-select-opt.is-selected{background:rgba(30,58,138,.06);color:var(--ds-royal);font-weight:600;}
.ds-select-opt.is-selected .material-symbols-outlined{margin-left:auto;font-size:18px;color:var(--ds-royal);}
.ds-select-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* ── date picker (calendário) ─────────────────────────────── */
.ds-datepicker{position:relative;display:inline-block;width:100%;}
.ds-dp-panel{position:absolute;top:calc(100% + 8px);left:0;background:var(--ds-white);border-radius:var(--ds-radius-xl);box-shadow:var(--ds-shadow-xl);z-index:30;padding:16px;width:288px;display:none;}
.ds-datepicker.is-open .ds-dp-panel{display:block;}
.ds-dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.ds-dp-head button{border:0;background:var(--ds-offwhite);width:28px;height:28px;border-radius:8px;cursor:pointer;color:var(--ds-royal);}
.ds-dp-head span{font:600 13px var(--ds-font-body);color:var(--ds-navy);}
.ds-dp-weekdays,.ds-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;}
.ds-dp-weekdays span{font:var(--ds-type-label);color:var(--ds-muted);padding-bottom:6px;}
.ds-dp-day{aspect-ratio:1;display:grid;place-items:center;border-radius:8px;font:var(--ds-type-body-sm);cursor:pointer;color:var(--ds-ink);}
.ds-dp-day:hover{background:var(--ds-offwhite);}
.ds-dp-day.is-muted{color:var(--ds-border);}
.ds-dp-day.is-today{box-shadow:inset 0 0 0 1.5px var(--ds-royal);}
.ds-dp-day.is-selected{background:var(--ds-royal);color:#fff;}
.ds-dp-footer{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--ds-offwhite);}
.ds-dp-footer button{border:0;background:transparent;color:var(--ds-royal);font:600 12px var(--ds-font-body);cursor:pointer;}

/* ── badges / chips ───────────────────────────────────────── */
.ds-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font:700 10px var(--ds-font-body);text-transform:uppercase;letter-spacing:.1em;}
.ds-badge--success{background:var(--ds-success-bg);color:var(--ds-success);}
.ds-badge--warn{background:var(--ds-warn-bg);color:var(--ds-warn);}
.ds-badge--error{background:var(--ds-error-bg);color:var(--ds-error);}
.ds-badge--neutral{background:var(--ds-offwhite);color:var(--ds-muted);}
.ds-badge--accent{background:var(--ds-platinum);color:var(--ds-slate);}
.ds-chip-dot{display:inline-flex;align-items:center;gap:7px;font:600 12px var(--ds-font-body);color:var(--ds-ink);}
.ds-chip-dot .dot{width:8px;height:8px;border-radius:50%;}
.dot--royal{background:var(--ds-royal);} .dot--success{background:var(--ds-success);}
.dot--warn{background:var(--ds-warn);} .dot--error{background:var(--ds-error);} .dot--silver{background:var(--ds-silver);}

/* ── tabela ───────────────────────────────────────────────── */
table.ds-table{width:100%;border-collapse:collapse;background:var(--ds-white);border-radius:var(--ds-radius-lg);overflow:hidden;box-shadow:var(--ds-shadow-sm);}
.ds-table thead th{font:700 10px var(--ds-font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--ds-muted);background:var(--ds-offwhite);padding:12px 16px;text-align:left;}
.ds-table tbody tr:nth-child(even) td{background:var(--ds-offwhite);}
.ds-table tbody tr:hover td{background:var(--ds-platinum);}
.ds-table td{padding:12px 16px;font:var(--ds-type-body-sm);border-bottom:1px solid var(--ds-offwhite);}
.ds-table-wrap{overflow-x:auto;}
.ds-empty-state{padding:40px;text-align:center;color:var(--ds-muted);font:var(--ds-type-body-sm);}

/* ── modais ───────────────────────────────────────────────── */
.ds-modal-overlay{position:fixed;inset:0;background:rgba(10,31,77,.5);backdrop-filter:blur(3px);z-index:100;display:none;align-items:center;justify-content:center;padding:24px;}
.ds-modal-overlay.is-open{display:flex;}
.ds-modal{background:var(--ds-white);border-radius:var(--ds-radius-2xl);box-shadow:var(--ds-shadow-xl);max-width:520px;width:100%;padding:28px;}
.ds-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.ds-modal-close{border:0;background:var(--ds-offwhite);width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--ds-muted);}
.ds-confirm-icon{width:52px;height:52px;border-radius:16px;background:var(--ds-error-bg);color:var(--ds-error);display:grid;place-items:center;margin-bottom:16px;}
.ds-confirm-title{font:var(--ds-type-headline-sm);color:var(--ds-navy);}
.ds-confirm-text{font:var(--ds-type-body-sm);color:var(--ds-muted);margin-top:8px;line-height:1.6;}
.ds-confirm-meta{background:var(--ds-offwhite);border-radius:var(--ds-radius-md);padding:12px 14px;margin-top:14px;font:var(--ds-type-mono-sm);color:var(--ds-slate);}
.ds-confirm-actions{display:flex;gap:10px;margin-top:22px;justify-content:flex-end;}

/* ── alerts / toast ───────────────────────────────────────── */
.ds-alert{padding:13px 16px;border-radius:var(--ds-radius-md);font:var(--ds-type-body-sm);margin-bottom:10px;display:flex;align-items:center;gap:10px;}
.ds-alert--success{background:var(--ds-success-bg);color:var(--ds-success);}
.ds-alert--warn{background:var(--ds-warn-bg);color:var(--ds-warn);}
.ds-alert--error{background:var(--ds-error-bg);color:var(--ds-error);}
#ds-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ds-navy);color:#fff;padding:11px 22px;border-radius:999px;font:600 13px var(--ds-font-body);opacity:0;pointer-events:none;transition:opacity .2s;z-index:200;}
#ds-toast.is-visible{opacity:1;}

/* ── auth ─────────────────────────────────────────────────── */
.ds-auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ds-ivory);padding:24px;}
.ds-auth-card{max-width:360px;width:100%;text-align:center;}
.ds-auth-logo{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--ds-royal),var(--ds-navy));display:grid;place-items:center;color:#fff;font:700 22px var(--ds-font-display);margin:0 auto 14px;}
.ds-auth-card h2{font:var(--ds-type-headline-sm);color:var(--ds-navy);}
.ds-auth-card .sub{color:var(--ds-muted);font:var(--ds-type-body-sm);margin-top:4px;margin-bottom:24px;}
.ds-auth-card .ds-field-label{text-align:left;}
.ds-auth-card form{text-align:left;display:flex;flex-direction:column;gap:16px;}
.ds-auth-card .foot{margin-top:20px;font:var(--ds-type-body-sm);color:var(--ds-muted);}
.ds-auth-card .foot a{color:var(--ds-royal);font-weight:600;text-decoration:none;}
.ds-auth-card .foot a:hover{text-decoration:underline;}

/* ── shell autenticado (topbar simples) ──────────────────── */
.app-topbar{display:flex;align-items:center;gap:16px;padding:14px 24px;background:linear-gradient(90deg,var(--ds-royal),var(--ds-navy));color:#fff;}
.app-topbar .brand{font:700 16px var(--ds-font-display);}
.app-topbar nav{margin-left:auto;display:flex;gap:8px;align-items:center;}
.app-topbar a{color:rgba(255,255,255,.85);text-decoration:none;font:600 13px var(--ds-font-body);padding:8px 12px;border-radius:999px;}
.app-topbar a:hover{background:rgba(255,255,255,.12);color:#fff;}
.app-main{max-width:1200px;margin:0 auto;padding:32px 24px 80px;}