/* Verpa eTendering — UI componenten (pills, kaarten, tickets, deadlines) */
/* PILLS */
.pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600}
.pill-blue{background:var(--blue-lt);color:#1D4ED8}
.pill-amber{background:var(--amber-lt);color:#92400E}
.pill-green{background:var(--green-lt);color:#15803D}
.pill-red{background:var(--red-lt);color:#B91C1C}
.pill-gray{background:var(--gray-lt);color:var(--gray)}
/* SHORTCUT BUTTONS */
.sc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px}
.sc-btn{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:12px;text-decoration:none;position:relative;overflow:hidden}
.sc-btn::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r) var(--r) 0 0}
.sc-btn.c-blue::before{background:var(--blue)}.sc-btn.c-green::before{background:var(--green)}
.sc-btn.c-amber::before{background:var(--amber)}.sc-btn.c-purple::before{background:var(--purple)}
.sc-btn:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.sc-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.sc-label{font-size:12.5px;font-weight:700;color:var(--text-h);line-height:1.3}
.sc-sub{font-size:11px;color:var(--text-lt);margin-top:2px}
/* CARD */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.card-header{padding:13px 17px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-title{font-size:13px;font-weight:700;color:var(--text-h)}
.card-action{font-size:12.5px;color:var(--blue);cursor:pointer;font-weight:500}
/* TICKET */
.ticket-row{padding:13px 17px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
.ticket-row:hover{background:var(--bg)}.ticket-row:last-child{border-bottom:none}
.tick-top{display:flex;align-items:center;gap:10px}
.tick-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tick-name{font-size:13px;font-weight:600;color:var(--text-h);flex:1}
.tick-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tick-meta{display:flex;align-items:center;gap:14px;margin-top:5px;padding-left:18px;flex-wrap:wrap}
.tick-meta-item{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-md)}
.tick-meta-item.red{color:var(--red);font-weight:600}.tick-meta-item.amber{color:var(--amber);font-weight:600}
.tick-todos{margin-top:6px;padding-left:18px}
.tick-todo-row{display:flex;align-items:center;gap:7px;padding:2px 0;font-size:12px;color:var(--text-md)}
.tick-todo-cb{width:13px;height:13px;border:1.5px solid var(--border-md);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px}
.tick-todo-cb.done{background:var(--green);border-color:var(--green);color:#fff}
.mini-av{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0}
/* DEADLINE CARDS */
.dl-card{margin:8px 12px;border-radius:var(--r);padding:11px 13px;display:flex;align-items:flex-start;gap:13px;cursor:pointer;transition:box-shadow .15s;border:1px solid var(--border)}
.dl-card:hover{box-shadow:var(--sh-md)}
.dl-card.urgent{background:#FEF2F2;border-color:var(--red-bd)}
.dl-card.soon{background:var(--amber-lt);border-color:var(--amber-bd)}
.dl-card.normal{background:var(--bg)}
.dl-date{text-align:center;min-width:40px;flex-shrink:0;padding-top:2px}
.dl-day{font-size:20px;font-weight:800;line-height:1}
.dl-mon{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.dl-card.urgent .dl-day,.dl-card.urgent .dl-mon{color:var(--red)}
.dl-card.soon .dl-day,.dl-card.soon .dl-mon{color:var(--amber)}
.dl-card.normal .dl-day{color:var(--text-h)}.dl-card.normal .dl-mon{color:var(--text-lt)}
.dl-sep{width:1px;height:32px;background:var(--border);flex-shrink:0;margin-top:4px}
.dl-info{flex:1;min-width:0}
.dl-title{font-size:12.5px;font-weight:600;color:var(--text-h)}
.dl-sub{font-size:11px;color:var(--text-lt);margin-top:1px}
.dl-time-tag{font-size:10.5px;margin-top:3px;display:block}
.dl-time-tag.urgent{color:var(--red);font-weight:600}.dl-time-tag.soon{color:var(--amber);font-weight:600}.dl-time-tag.ok{color:var(--text-lt)}
.dl-owner-row{display:flex;align-items:center;gap:4px;margin-top:4px;flex-wrap:wrap}
.dl-owner-av{width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0}
.dl-owner-name{font-size:10.5px;color:var(--text-lt)}
.dl-right{flex-shrink:0;padding-top:2px}
.dl-legend{display:flex;gap:12px;padding:6px 12px 10px;font-size:11px;color:var(--text-lt)}
.dl-leg-dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:3px}
/* SUM BAR */
.sum-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 22px;display:flex;align-items:center;gap:28px;box-shadow:var(--sh)}
.sum-item{display:flex;flex-direction:column}
.sum-val{font-size:22px;font-weight:800;line-height:1;color:var(--text-h);font-variant-numeric:tabular-nums}
.sum-val.red{color:var(--red)}.sum-val.green{color:var(--green)}.sum-val.blue{color:var(--blue)}.sum-val.amber{color:var(--amber)}
.sum-lbl{font-size:11.5px;color:var(--text-lt);margin-top:3px}
.sum-div{width:1px;height:32px;background:var(--border)}