/* DAYO partneru portāls — components.css: pogas, lauki, kartītes, birkas, saraksti,
   toast/modālis, skeleti. Skatu specifiskais — views.css. */

/* --- pogas --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 20px; border-radius:14px; border:1px solid transparent;
  font-weight:700; font-size:15px; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .08s ease, background .15s ease, box-shadow .15s ease, opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.98)}
.btn svg{width:18px; height:18px; flex:none}
.btn-primary{background:var(--brand); color:var(--on-brand); box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 30%,transparent)}
.btn-primary:hover{background:color-mix(in srgb,var(--brand) 88%,#000)}
.btn-secondary{background:var(--surface); color:var(--text); border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--surface-2)}
.btn-ghost{background:transparent; color:var(--brand)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:transparent; color:var(--danger); border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.btn-danger:hover{background:var(--danger-bg)}
.btn-sm{min-height:36px; padding:0 14px; font-size:13.5px; border-radius:11px}
.btn-sm svg{width:16px; height:16px}
.btn-block{width:100%}
.btn-icon{min-height:38px; width:38px; padding:0; border-radius:11px}
.btn[disabled],.btn[aria-busy="true"]{opacity:.55; cursor:not-allowed; transform:none}
.btn[aria-busy="true"]{cursor:progress}
.btn .spinner{width:16px; height:16px; border-width:2px; border-color:currentColor; border-right-color:transparent}
.link-btn{background:none; border:0; padding:0; color:var(--brand); font-weight:700; cursor:pointer}
.link-btn:hover{text-decoration:underline; text-underline-offset:3px}

/* --- lauki --- */
.field{display:flex; flex-direction:column; gap:6px}
.field > label, .label{font-weight:700; font-size:13.5px}
.field .hint{font-size:12.5px; color:var(--muted)}
.field .err{font-size:12.5px; color:var(--danger); font-weight:500}
.input,.select,.textarea{
  width:100%; min-height:48px; padding:11px 14px; border-radius:14px;
  border:1.5px solid var(--border-strong); background:var(--surface); color:var(--text);
  font-size:16px; transition:border-color .15s, box-shadow .15s;
}
.textarea{min-height:110px; resize:vertical; line-height:1.5}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--brand); box-shadow:var(--focus)}
.field.has-err .input,.field.has-err .textarea{border-color:var(--danger)}
.input-sm{min-height:40px; padding:7px 10px; border-radius:11px; font-size:15px}
.input-group{position:relative}
.input-group .input{padding-left:44px}
.input-group > svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--muted); pointer-events:none}
.check{display:flex; gap:10px; align-items:flex-start; cursor:pointer; font-size:14px}
.check input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--brand); flex:none}
.switch{display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-weight:500}
.switch input{appearance:none; -webkit-appearance:none; width:42px; height:24px; border-radius:999px; background:var(--border-strong); position:relative; cursor:pointer; transition:background .15s; margin:0; flex:none}
.switch input::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked{background:var(--brand)}
.switch input:checked::after{transform:translateX(18px)}

/* --- kartītes --- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:20px}
.card-lg{padding:28px}
@media (max-width:520px){ .card-lg{padding:22px 18px} }
.card-soft{background:var(--surface-2); border-color:transparent; box-shadow:none}
.card-head{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.card-head h3{flex:1}
.card-link{display:flex; align-items:center; gap:14px; color:var(--text); transition:transform .12s, box-shadow .15s, border-color .15s}
.card-link:hover{text-decoration:none; border-color:var(--border-strong); box-shadow:var(--shadow-md)}
.card-link:active{transform:scale(.995)}
.chev{width:18px; height:18px; color:var(--faint); flex:none}
.ico-tile{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--surface-2); color:var(--brand); flex:none}
.ico-tile svg{width:22px; height:22px}
.ico-tile.ok{background:var(--ok-bg); color:var(--ok)}
.ico-tile.warn{background:var(--warn-bg); color:var(--warn)}
.ico-tile.danger{background:var(--danger-bg); color:var(--danger)}

/* --- saraksti --- */
.list{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden}
.list-row{display:flex; align-items:center; gap:14px; padding:14px 18px; color:var(--text); border-top:1px solid var(--border); background:none; border-left:0; border-right:0; border-bottom:0; width:100%; text-align:left; cursor:pointer}
.list-row:first-child{border-top:0}
.list-row:hover{background:var(--surface-2); text-decoration:none}
.list-row.done{opacity:.6}
.list-row .t{font-weight:700}
.list-row .s{font-size:13px; color:var(--muted)}
.list-row > svg:first-child{width:22px; height:22px; color:var(--brand); flex:none}
.list-row.done > svg:first-child{color:var(--ok)}
.section-title{font-family:var(--font-head); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}

/* --- birkas --- */
.tag{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12.5px; font-weight:700; background:var(--surface-2); color:var(--muted); white-space:nowrap}
.tag::before{content:none}
.tag.dot::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.tag.ok{background:var(--ok-bg); color:var(--ok)}
.tag.warn{background:var(--warn-bg); color:var(--warn)}
.tag.danger{background:var(--danger-bg); color:var(--danger)}
.tag.brand{background:var(--brand-soft); color:var(--brand)}

/* --- paziņojumi --- */
.notice{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--border)}
.notice > svg{width:20px; height:20px; flex:none; margin-top:2px; color:var(--brand)}
.notice.ok{background:var(--ok-bg); border-color:transparent} .notice.ok > svg{color:var(--ok)}
.notice.warn{background:var(--warn-bg); border-color:transparent} .notice.warn > svg{color:var(--warn)}
.notice.danger{background:var(--danger-bg); border-color:transparent} .notice.danger > svg{color:var(--danger)}
.notice b{display:block; margin-bottom:2px}

/* --- tabi / čipi --- */
.chips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px; margin:0 -2px}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-weight:500; font-size:14px; white-space:nowrap; cursor:pointer}
.chip svg{width:16px; height:16px; color:var(--muted)}
.chip:hover{border-color:var(--border-strong); text-decoration:none}
.chip.on,.chip[aria-pressed="true"]{background:var(--text); color:var(--bg); border-color:var(--text)}
.chip.on svg,.chip[aria-pressed="true"] svg{color:inherit}
.seg{display:inline-flex; background:var(--surface-2); border-radius:14px; padding:4px; gap:2px}
.seg button{border:0; background:none; padding:7px 14px; border-radius:10px; font-weight:700; font-size:13.5px; color:var(--muted); cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm)}

/* --- spinneris, skeleti --- */
.spinner{width:28px; height:28px; border-radius:50%; border:3px solid var(--brand); border-right-color:transparent; animation:spin .8s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.sk{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2)); background-size:200% 100%; animation:sk 1.3s ease infinite; border-radius:var(--r)}
@keyframes sk{from{background-position:200% 0} to{background-position:-200% 0}}
.sk-card{height:92px}
.sk-line{height:14px; border-radius:7px}
@media (prefers-reduced-motion: reduce){ .sk,.spinner{animation-duration:3s} *{scroll-behavior:auto} }

/* --- tukšs / kļūda --- */
.empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:36px 20px; background:var(--surface); border:1px dashed var(--border-strong); border-radius:var(--r-lg)}
.empty .ico-tile{width:56px; height:56px; border-radius:18px}
.empty .ico-tile svg{width:26px; height:26px}
.empty p{max-width:44ch; color:var(--muted)}

/* --- avatārs --- */
.avatar{width:52px; height:52px; border-radius:16px; flex:none; overflow:hidden; display:grid; place-items:center; color:#fff; font-family:var(--font-head); font-weight:800; font-size:21px; background:linear-gradient(145deg,var(--brand-400),var(--brand-strong))}
.avatar img{width:100%; height:100%; object-fit:cover; background:#fff}
.avatar-sm{width:36px; height:36px; border-radius:11px; font-size:15px}

/* --- konta izvēlne --- */
.acct-btn{display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--surface); border-radius:14px; padding:4px 10px 4px 4px; cursor:pointer; max-width:220px}
.acct-btn .nm{font-weight:700; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acct-btn svg{width:16px; height:16px; color:var(--muted); flex:none}
@media (max-width:520px){ .acct-btn .nm{display:none} .acct-btn{padding:4px} .acct-btn > svg{display:none} }
.menu{position:absolute; right:0; top:calc(100% + 8px); min-width:230px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-lg); padding:6px; z-index:50}
.menu[hidden]{display:none}
.menu a,.menu button{display:flex; gap:10px; align-items:center; width:100%; padding:10px 12px; border-radius:11px; color:var(--text); background:none; border:0; text-align:left; cursor:pointer; font-size:14.5px}
.menu a:hover,.menu button:hover{background:var(--surface-2); text-decoration:none}
.menu svg{width:18px; height:18px; color:var(--muted)}
.menu hr{border:0; border-top:1px solid var(--border); margin:6px 4px}
.menu .who{padding:8px 12px 10px; font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis}
.menu .who b{display:block; color:var(--text); font-size:14px}

/* --- toast --- */
.toasts{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:8px; width:min(92vw,420px); pointer-events:none}
.toast{pointer-events:auto; display:flex; gap:10px; align-items:center; background:var(--text); color:var(--bg); padding:12px 16px; border-radius:14px; box-shadow:var(--shadow-lg); font-weight:500; animation:tin .2s ease}
.toast svg{width:18px; height:18px; flex:none}
.toast.err{background:var(--danger); color:#fff}
@keyframes tin{from{opacity:0; transform:translateY(8px)}}

/* --- modālis --- */
.modal-back{position:fixed; inset:0; background:rgba(27,7,16,.5); z-index:80; display:flex; align-items:flex-end; justify-content:center; padding:0; animation:fade .15s ease}
@media (min-width:640px){ .modal-back{align-items:center; padding:24px} }
@keyframes fade{from{opacity:0}}
.modal{background:var(--surface); width:100%; max-width:560px; max-height:92dvh; overflow:auto; border-radius:var(--r-xl) var(--r-xl) 0 0; padding:24px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow:var(--shadow-lg)}
@media (min-width:640px){ .modal{border-radius:var(--r-xl); padding:28px} }
.modal h3{font-size:20px; margin-bottom:18px}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:22px; flex-wrap:wrap-reverse}
@media (max-width:520px){ .modal-actions .btn{flex:1} }