/* SkinFlow — Apple-like light theme */
:root{
  --bg:#FBFBFD;
  --card:#FFFFFF;
  --text:#111114;
  --muted:#6B7280;
  --line:#E5E7EB;
  --shadow:0 8px 24px rgba(0,0,0,.06);
  --radius:16px;

  --blue:#0A84FF;    /* iOS Blue */
  --red:#FF3B30;     /* iOS Red */
  --purple:#AF52DE;  /* User-preferred */
  --green:#34C759;   /* iOS Green */
  --orange:#FF9F0A;

  --focus: 0 0 0 3px rgba(10,132,255,.3);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", sans-serif;
}

.app-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(10px);
  background:rgba(251,251,253,.8);
  border-bottom:1px solid var(--line);
}

.brand{display:flex; align-items:center; gap:.6rem; padding: .8rem 1rem;}
.brand .logo{width:28px; height:28px}
.brand-name{font-weight:700; letter-spacing:.2px; font-size:1.1rem}

.tabs{display:flex; gap:.25rem; padding: .2rem 1rem 1rem 1rem; flex-wrap:wrap;}
.tab{
  border:1px solid var(--line);
  background:var(--card);
  padding:.5rem .8rem;
  border-radius:999px;
  cursor:pointer;
  box-shadow: var(--shadow);
}
.tab.active{border-color:transparent; background:linear-gradient(#fff,#f7f7fb);}
.tab:focus{outline:none; box-shadow: var(--focus);}

main{padding: 1rem; max-width:1100px; margin:0 auto;}
.view{display:none; animation: fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:.6; transform: translateY(4px)} to{opacity:1; transform: none}}

.grid.two{display:grid; grid-template-columns: 1fr 1fr; gap:1rem}
@media (max-width: 980px){ .grid.two{ grid-template-columns: 1fr }}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:1rem;
  box-shadow: var(--shadow);
}
h2{margin:.2rem 0 1rem 0; font-size:1.2rem}
h3{margin:1rem 0 .75rem 0; font-size:1.05rem}

.row{display:flex; gap:.6rem}
.row.wrap{flex-wrap:wrap}
.row.space-between{justify-content:space-between}
.row.align-center{align-items:center}
.row.align-end{align-items:flex-end}
.gap{gap:.6rem}

.field{display:flex; flex-direction:column; gap:.2rem; min-width:220px}
.field.compact{min-width:180px}
.field span{font-size:.85rem; color:var(--muted)}
input[type="text"],input[type="url"],input[type="date"],input[type="time"],select, textarea{
  padding:.6rem .7rem;
  border:1px solid var(--line);
  border-radius:12px; background:#fff;
  font: inherit;
}
textarea{min-height:96px; resize:vertical}
input:focus, select:focus, textarea:focus{outline:none; box-shadow: var(--focus)}

.btn{
  border:1px solid var(--line);
  background:var(--card);
  padding:.55rem .9rem;
  border-radius:12px;
  cursor:pointer;
}
.btn.primary{background:var(--text); color:#fff; border-color: var(--text)}
.btn.subtle{background:#fff}
.btn.chip{border-radius:999px; padding:.4rem .75rem}
.btn.danger{border-color:#ffd9d6; color:#b00020}
.btn:focus{outline:none; box-shadow: var(--focus)}

.switch{display:flex; align-items:center; gap:.5rem}
.switch input{accent-color: var(--blue)}

.hint{font-size:.85rem; color:var(--muted)}

.list{display:flex; flex-direction:column; gap:.6rem; margin-top:.8rem}
.item{
  border:1px solid var(--line); background:#fff; border-radius:12px; padding:.6rem .7rem;
}
.item .title{font-weight:600}
.meta{font-size:.85rem; color:var(--muted)}

.product-actions, .task-actions, .shop-actions{display:flex; gap:.4rem; align-items:center; flex-wrap:wrap}

.week-grid{display:grid; grid-template-columns: repeat(7, 1fr); gap:.6rem; margin-top:.8rem}
.day{border:1px solid var(--line); border-radius:12px; padding:.5rem; background:#fff}
.day h4{margin:.2rem 0 .4rem; font-size:.95rem}
.slot{border-top:1px dashed var(--line); padding-top:.4rem; margin-top:.4rem}
.slot:first-of-type{border-top:none; padding-top:0; margin-top:0}
.slot label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:.25rem}

.pill{display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--line); padding:.2rem .5rem; border-radius:999px; font-size:.85rem; margin:.2rem .2rem 0 0}
.pill .x{cursor:pointer; font-weight:700}

.divider{height:1px; background:var(--line); margin:1rem 0}

.notes{
  border:1px solid var(--line); border-radius:12px; padding:.8rem;
  min-height:220px; background:#fff;
}

.app-footer{padding:1rem; text-align:center; color:var(--muted)}

.sr-only{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Category colors for calendar */
.fc-event.studia{background: var(--red)!important; border-color: var(--red)!important}
.fc-event.praca{background: var(--blue)!important; border-color: var(--blue)!important}
.fc-event.prywatne{background: var(--purple)!important; border-color: var(--purple)!important}