@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Nunito:wght@600;700;800;900&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Legacy tokens (kept during the redesign migration - many older screens still
     reference these; remove once every view has been reskinned). */
  --ink:#22303F; --paper:#FAF8F4; --card:#FFFFFF; --line:#E4DFD3;
  --teal:#3F7477; --plum:#6B4257; --mustard:#C9962B; --slate:#5A6B78;
  --warn:#B5482E; --warnbg:#FBEDE8;
  --you:#3F7477; --maria:#6B4257; --oliver:#C9962B; --kajsa:#4C6A9C;
  --shadow: 0 1px 2px rgba(34,48,63,0.06), 0 4px 12px rgba(34,48,63,0.05);

  /* Familjehubben-redesign: pastelltema (flamingo), fran designhandoffen */
  --color-bg:#fdf5f7;
  --color-surface:#f6e6ec;
  --color-text:#3d2f38;
  --color-accent:#f76f9b;
  --color-accent-600:#e85585;
  --color-accent-700:#c93f6d;
  --color-accent-100:#ffe6ef;
  --color-accent-2:#3bbfb2;
  --color-neutral-100:#fffafc;
  --color-neutral-300:#ecdfe6;
  --color-neutral-400:#cdbcc6;
  --color-neutral-500:#a596a0;
  --color-neutral-600:#7d6f78;
  --color-neutral-700:#5f545c;
  --color-divider:rgba(61,47,56,.13);
  --color-overdue:#ef6b6b;
  --color-urgency-amber:#efb44a;
  --color-car-bg:#fbeeca;
  --color-car-fg:#a8842e;
  --color-car-accent:#e0a83c;

  /* Familjemedlemsfarger (fran handoffen) */
  --person-niklas:#3bbfb2;
  --person-maria:#a06ba8;
  --person-kajsa:#5b8fd6;
  --person-oliver:#e0a83c;

  --font-heading:'Caprasimo', 'Space Grotesk', sans-serif;
  --font-body:'Nunito', 'IBM Plex Sans', sans-serif;

  --radius-tile:24px;
  --radius-sheet:30px;
  --radius-pill:999px;
  --shadow-sheet:0 -12px 38px rgba(23,33,29,.28);
  --shadow-hero:0 12px 30px -14px rgba(61,47,56,.6);
  --scrim-color:rgba(23,33,29,.42);
  --sheet-timing:.32s cubic-bezier(.2,.85,.25,1);
  --fade-timing:.2s ease;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-weight:600;-webkit-font-smoothing:antialiased;}
.hidden{display:none !important;}

/* App-skal: bottentabbar, FAB, bottom-sheet (redesign) */
.wrap{padding-bottom:96px;}
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; justify-content:space-around; align-items:center;
  background:var(--color-neutral-100); border-top:1px solid var(--color-divider);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));
}
.bnav-item{display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; cursor:pointer; color:var(--color-neutral-400); padding:2px 0;}
.bnav-item .bnav-icon{width:25px; height:25px; display:flex;}
.bnav-item .bnav-label{font-family:var(--font-body); font-size:10.5px; font-weight:800; color:var(--color-neutral-500);}
.bnav-item.active{color:var(--color-accent);}
.bnav-item.active .bnav-label{color:var(--color-accent-700);}

.fab{
  position:fixed; right:20px; bottom:78px; z-index:41;
  width:58px; height:58px; border-radius:50%; border:none;
  background:var(--color-accent); color:#fff; font-size:28px; line-height:1;
  box-shadow:var(--shadow-hero); cursor:pointer;
}
.fab:active{transform:scale(.94);}

.sheet-scrim{position:fixed; inset:0; z-index:50; background:var(--scrim-color); opacity:0; transition:opacity var(--fade-timing);}
.sheet-scrim.sheet-open{opacity:1;}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:51; max-height:86vh; overflow-y:auto;
  background:var(--color-neutral-100); border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow:var(--shadow-sheet); padding:10px 20px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(101%); transition:transform var(--sheet-timing);
}
.sheet.sheet-open{transform:translateY(0);}
.sheet-handle{width:44px; height:5px; border-radius:3px; background:var(--color-neutral-300); margin:0 auto 12px; cursor:pointer;}

/* Sheet-innehåll: generiska formulärklasser (redesign) */
.sheet-title{font-family:var(--font-heading); font-size:20px; color:var(--color-text); margin:4px 0 14px;}
.input{display:block; width:100%; font-family:var(--font-body); font-weight:700; font-size:14px;
  border:1px solid var(--color-neutral-300); border-radius:14px; padding:12px 14px; margin-bottom:10px;
  background:var(--color-neutral-100); color:var(--color-text);}
.btn-primary{font-family:var(--font-body); font-weight:800; font-size:15px; background:var(--color-accent);
  color:#fff; border:none; border-radius:var(--radius-pill); padding:13px 16px; cursor:pointer;}
.btn-block{width:100%; display:block;}
.btn-primary:active{background:var(--color-accent-600);}

/* Rumskakel (Att göra) - redesign */
.room-tile-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;}
.room-tile{
  position:relative; text-align:left; border:none; border-radius:var(--radius-tile); min-height:132px;
  padding:16px; cursor:pointer; font-family:var(--font-body); display:flex; flex-direction:column; gap:6px;
}
.room-tile:active{transform:scale(.96);}
.room-tile-icon{display:block;}
.room-tile-name{font-family:var(--font-heading); font-size:16px;}
.room-tile-status{font-size:12.5px; font-weight:700; opacity:.72;}
.room-tile-badge{
  position:absolute; top:12px; right:12px; min-width:22px; height:22px; padding:0 6px; border-radius:var(--radius-pill);
  background:#fff; color:inherit; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.room-tile-badge-overdue{background:var(--color-overdue); color:#fff;}
.room-more-wrap{margin-bottom:12px;}
.room-more-btn{
  font-family:var(--font-body); font-weight:800; font-size:13px; color:var(--color-accent-700);
  background:transparent; border:none; padding:8px 2px; cursor:pointer;
}

.room-sheet-header{display:flex; align-items:center; gap:12px; border-radius:18px; padding:14px 16px; margin-bottom:10px;}
.room-sheet-title{font-family:var(--font-heading); font-size:18px;}
.room-sheet-sub{font-size:12.5px; font-weight:700; opacity:.75;}
.room-sheet-list{margin-bottom:10px;}
.room-sheet-add{
  width:100%; text-align:left; font-family:var(--font-body); font-weight:700; font-size:13px;
  color:var(--color-neutral-600); background:transparent; border:1px dashed var(--color-neutral-400);
  border-radius:12px; padding:10px 12px; cursor:pointer; margin-bottom:6px;
}

/* Login */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:32px 28px;width:320px;box-shadow:var(--shadow);}
.login-card h1{font-family:var(--font-heading);margin:0 0 4px;font-size:24px;}
.login-card .sub{color:var(--slate);font-size:13px;margin:0 0 18px;}
.login-card input{width:100%;padding:9px 10px;margin-bottom:10px;border:1px solid var(--line);border-radius:8px;font-size:14px;}
.login-card button{width:100%;padding:10px;background:var(--ink);color:#fff;border:none;border-radius:8px;font-family:var(--font-heading);font-weight:600;cursor:pointer;}
.login-error{color:var(--warn);font-size:12.5px;margin-top:8px;min-height:16px;}

.wrap{max-width:920px;margin:0 auto;padding:20px 18px 60px;}

/* App-header: flamingo-logotyp (Miami Vice-gradient), eyebrow/rubrik, avatar+meny (redesign) */
.app-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;}
.app-header-logo{width:44px;height:44px;border-radius:16px;background:linear-gradient(135deg,#ffd9e2,#e8c7f5);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--color-accent-700);}
.app-header-titles{flex:1;min-width:0;}
.app-header-eyebrow{font-family:var(--font-body);font-weight:700;font-size:13px;color:var(--color-neutral-600);}
.app-header-titles h1{font-family:var(--font-heading);font-weight:400;font-size:32px;margin:0;color:var(--color-text);}
.app-header-side{display:flex;align-items:center;gap:10px;padding-top:2px;}
.avatar-menu-wrap{position:relative;}
.avatar-chip{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-body);font-weight:800;font-size:14px;flex-shrink:0;}
.avatar-chip-btn{border:none;cursor:pointer;}
.avatar-chip.avatar-you{background:var(--you);} .avatar-chip.avatar-maria{background:var(--maria);}
.avatar-chip.avatar-oliver{background:var(--oliver);} .avatar-chip.avatar-kajsa{background:var(--kajsa);}
.avatar-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:45; min-width:170px;
  background:var(--color-neutral-100); border-radius:14px; box-shadow:var(--shadow-hero); padding:10px;
}
.avatar-menu-name{font-family:var(--font-body);font-weight:800;font-size:13px;color:var(--color-text);padding:4px 6px 8px;border-bottom:1px solid var(--color-divider);margin-bottom:6px;}
.avatar-menu-logout{
  width:100%; text-align:left; border:none; background:transparent; cursor:pointer;
  font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--color-overdue); padding:6px;border-radius:8px;
}
.avatar-menu-logout:hover{background:var(--color-accent-100);}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.dot.you{background:var(--you);} .dot.maria{background:var(--maria);}
.dot.oliver{background:var(--oliver);} .dot.kajsa{background:var(--kajsa);}
.text-btn{border:none;background:transparent;color:var(--slate);text-decoration:underline;cursor:pointer;font-size:12.5px;}
.icon-btn{position:relative;border:1px solid var(--line);background:var(--card);border-radius:8px;padding:6px 9px;cursor:pointer;font-size:14px;}
.badge{position:absolute;top:-6px;right:-6px;background:var(--warn);color:#fff;border-radius:10px;font-size:10px;padding:1px 5px;font-family:'IBM Plex Mono',monospace;}

.notif-panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:14px;box-shadow:var(--shadow);max-height:260px;overflow-y:auto;}
.notif-item{padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;}
.notif-item:last-child{border-bottom:none;}
.notif-item.unread{font-weight:600;}
.notif-item .meta{color:var(--slate);font-size:11px;font-weight:400;}

.banner{background:var(--card);border:1px solid var(--mustard);border-left:5px solid var(--mustard);border-radius:10px;padding:12px 14px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:var(--shadow);}
.banner.hidden{display:none;}
.banner-text{font-size:13.5px;line-height:1.5;} .banner-text b{font-family:var(--font-heading);}
.banner button{border:none;background:transparent;color:var(--slate);cursor:pointer;font-size:12.5px;text-decoration:underline;white-space:nowrap;}

nav.tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.tab{font-family:var(--font-heading);font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:8px 8px 0 0;cursor:pointer;color:var(--slate);position:relative;top:1px;}
.tab.active{background:var(--card);color:var(--ink);border:1px solid var(--line);border-bottom:1px solid var(--card);}
.tab.disabled{color:#B9B2A2;cursor:default;}

details.settings{background:var(--color-neutral-100);border:none;border-radius:16px;padding:12px 16px;margin-bottom:12px;box-shadow:none;}
details.settings summary{cursor:pointer;font-family:var(--font-heading);font-weight:700;font-size:15px;color:var(--color-text);}
.settings-row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap;font-size:13px;}
.settings-row input[type=time]{border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;}
.settings-row label{color:var(--slate);}

.section-title{font-family:var(--font-heading);font-weight:700;font-size:14px;margin-bottom:8px;color:var(--slate);}
.section-title-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.section-title-row .section-title{margin-bottom:0;}
.week-nav{display:flex;align-items:center;gap:8px;}
.week-nav .icon-btn{padding:3px 10px;font-size:14px;line-height:1;}
.week-nav .week-range{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--slate);min-width:92px;text-align:center;}

.weekly-default-person{margin-top:14px;}
.weekly-default-person:first-child{margin-top:10px;}
.weekly-default-person-name{display:flex;align-items:center;gap:7px;font-family:var(--font-heading);font-weight:600;font-size:13px;margin-bottom:6px;}
.weekly-default-row{display:grid;grid-template-columns:40px 78px 78px 1fr 112px 72px 100px auto;gap:6px;align-items:center;margin-bottom:5px;}
.weekly-default-row .weekly-default-day{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--slate);}
.weekly-default-row select, .weekly-default-row input{font-family:var(--font-body);font-size:12.5px;border:1px solid var(--line);border-radius:7px;padding:5px 6px;background:#FDFCFA;color:var(--ink);width:100%;}
.weekly-default-row input[type=time]{font-family:'IBM Plex Mono',monospace;}
@media (max-width:760px){ .weekly-default-row{grid-template-columns:32px 1fr 1fr; row-gap:4px;} .weekly-default-row select, .weekly-default-row button, .weekly-default-row label{grid-column:1/-1;} }

.day-grid{display:flex;flex-direction:column;gap:10px;}
.day-card{background:var(--color-neutral-100);border:2px solid transparent;border-radius:18px;padding:14px 16px;box-shadow:none;}
.day-card-conflict{border-color:var(--color-overdue);}
.day-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;justify-content:space-between;}
.day-name-wrap{display:flex;align-items:baseline;gap:8px;cursor:pointer;border-radius:6px;padding:2px 6px;margin:-2px -6px;}
.day-name-wrap:hover{background:rgba(34,48,63,0.05);}
.day-name-wrap.day-selected{background:rgba(63,116,119,0.14);}
.day-name{font-family:var(--font-heading);font-weight:700;font-size:15px;}
.day-date{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--slate);}
.day-today{color:var(--teal);}

.conflict{background:var(--color-accent-100);border:none;border-radius:14px;padding:11px 13px;margin-bottom:9px;font-size:12.5px;line-height:1.5;}
.conflict b{color:var(--color-overdue);}
.conflict .actions{margin-top:7px;display:flex;gap:8px;flex-wrap:wrap;}
.conflict button{font-family:var(--font-body);font-size:12px;font-weight:800;border-radius:var(--radius-pill);padding:6px 12px;cursor:pointer;border:1px solid var(--color-overdue);background:transparent;color:var(--color-overdue);}
.conflict button.primary{background:var(--color-overdue);color:#fff;border-color:var(--color-overdue);}

.booking-list{display:flex;flex-direction:column;gap:6px;margin-bottom:9px;}
.booking{display:flex;align-items:center;gap:8px;padding:8px 10px;border:none;border-radius:12px;font-size:12.5px;background:var(--color-neutral-100);}
.booking.resolved{opacity:0.55; text-decoration:line-through;}
.booking .time{font-family:var(--font-body);font-weight:700;color:var(--color-neutral-500);white-space:nowrap;font-size:11.5px;}
.booking .purpose{flex:1;}
.booking .flex-tag{font-size:10.5px;color:var(--color-neutral-500);border:1px solid var(--color-neutral-300);border-radius:5px;padding:1px 5px;}
.booking .car-tag{font-size:10.5px;font-weight:700;color:var(--color-car-fg);background:var(--color-car-bg);border:none;border-radius:5px;padding:1px 5px;white-space:nowrap;}
.booking .del{border:none;background:transparent;color:var(--color-neutral-500);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;}
.booking.default-row{background:var(--color-surface);}

.cal-events{display:flex;flex-direction:column;gap:6px;margin-bottom:9px;}
.cal-event{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px dashed var(--color-accent-2);border-radius:12px;font-size:12px;background:var(--color-neutral-100);flex-wrap:wrap;}
.cal-event.resolved{opacity:0.55;text-decoration:line-through;border-style:solid;border-color:var(--color-neutral-300);background:var(--color-surface);}
.cal-event select, .cal-event button{font-size:11.5px;padding:3px 6px;border-radius:6px;border:1px solid var(--color-neutral-300);}
.cal-event button{background:var(--color-accent-2);color:#fff;border:none;cursor:pointer;}

.add-form{display:grid;grid-template-columns: 90px 78px 78px 1fr 100px 120px auto;gap:6px;align-items:center;}
.add-form select, .add-form input{font-family:var(--font-body);font-size:12.5px;border:1px solid var(--color-neutral-300);border-radius:10px;padding:7px 8px;background:var(--color-neutral-100);color:var(--color-text);width:100%;}
.add-form input[type=time]{font-family:'IBM Plex Mono',monospace;}
.add-form button{font-family:var(--font-body);font-weight:800;font-size:12.5px;background:var(--color-accent);color:#fff;border:none;border-radius:10px;padding:8px 11px;cursor:pointer;}
@media (max-width:620px){ .add-form{grid-template-columns: 1fr 1fr; } .add-form button{grid-column:1/-1;} }

.cal-source-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;background:#F5F7F3;border-radius:8px;padding:7px 9px;}
.cal-source-row .src-name{font-weight:600;min-width:80px;}
.cal-source-row .src-status{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--slate);}
.cal-source-row .src-status.err{color:var(--warn);}
.cal-source-row button{border:none;background:transparent;color:var(--slate);cursor:pointer;font-size:12px;text-decoration:underline;}
.cal-source-row select{font-size:11.5px;border:1px solid var(--line);border-radius:6px;padding:3px 6px;margin-left:auto;}
.cal-source-add{display:grid;grid-template-columns: 110px 1fr 150px 150px auto;gap:6px;margin-top:10px;}
.cal-source-add input, .cal-source-add select{font-size:12.5px;border:1px solid var(--line);border-radius:7px;padding:6px 8px;}
@media (max-width:700px){ .cal-source-add{grid-template-columns: 1fr 1fr;} .cal-source-add button{grid-column:1/-1;} }

.occasion-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;background:#F5F7F3;border-radius:8px;padding:7px 9px;}
.occasion-row .occ-label{font-weight:600;min-width:120px;}
.occasion-row .occ-meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--slate);}
.occasion-row button{border:none;background:transparent;color:var(--slate);cursor:pointer;font-size:12px;text-decoration:underline;margin-left:auto;}
.occasion-add{display:grid;grid-template-columns: 1fr 130px 170px 140px auto;gap:6px;margin-top:10px;}
.occasion-add input, .occasion-add select{font-size:12.5px;border:1px solid var(--line);border-radius:7px;padding:6px 8px;}
.occasion-add button{font-family:var(--font-heading);font-weight:600;font-size:12.5px;background:var(--ink);color:#fff;border:none;border-radius:7px;padding:7px 10px;cursor:pointer;}
@media (max-width:700px){ .occasion-add{grid-template-columns: 1fr 1fr;} .occasion-add button{grid-column:1/-1;} }
.cal-source-add button{font-family:var(--font-heading);font-weight:600;font-size:12.5px;background:var(--ink);color:#fff;border:none;border-radius:7px;padding:7px 10px;cursor:pointer;}

.save-state{text-align:right;font-size:11.5px;color:var(--slate);margin-top:12px;font-family:'IBM Plex Mono',monospace;}

.hero{background:var(--color-text);color:var(--color-neutral-100);border-radius:26px;padding:20px 22px;margin-bottom:20px;box-shadow:var(--shadow-hero);}
.hero-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.hero-top h2{font-family:var(--font-heading);font-size:22px;margin:0;font-weight:400;}
.hero-top .hero-date{font-family:var(--font-body);font-weight:700;font-size:12.5px;color:var(--color-neutral-400);}
.hero-day-nav{display:flex;align-items:baseline;gap:8px;}
.hero-day-nav .hero-day-btn{background:rgba(255,255,255,0.1);border:none;color:var(--color-neutral-100);padding:3px 11px;font-size:14px;line-height:1;border-radius:var(--radius-pill);cursor:pointer;}
.hero-day-nav .hero-day-btn:hover{background:rgba(255,255,255,0.18);}
.hero-rows{display:flex;flex-direction:column;gap:8px;}
.hero-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.06);border-radius:12px;padding:9px 12px;flex-wrap:wrap;}
.hero-row .hero-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.hero-row .hero-name{font-family:var(--font-body);font-weight:800;font-size:13.5px;min-width:56px;}
.hero-row .hero-detail{font-size:13px;color:var(--color-neutral-300);}
.hero-conflict{background:rgba(239,107,107,0.2);border:none;border-radius:12px;padding:10px 12px;margin-top:10px;font-size:13px;line-height:1.5;}
.hero-conflict b{color:var(--color-overdue);}

.finance-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow);}
.finance-card h3{font-family:var(--font-heading);margin:0 0 4px;font-size:16px;}
.finance-balance{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:600;margin:6px 0 12px;}
.finance-tx{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px solid var(--line);}
.finance-tx:last-child{border-bottom:none;}
.finance-add{display:grid;grid-template-columns:110px 1fr auto;gap:6px;margin-top:10px;}
.finance-add input{font-size:12.5px;border:1px solid var(--line);border-radius:7px;padding:6px 8px;}
.finance-add button{font-family:var(--font-heading);font-weight:600;font-size:12.5px;background:var(--ink);color:#fff;border:none;border-radius:7px;padding:7px 10px;cursor:pointer;}

/* Skötsel */
nav.subtabs{display:flex;gap:4px;margin-bottom:16px;background:var(--color-surface);border-radius:var(--radius-pill);padding:4px;}
.subtab{flex:1;text-align:center;font-family:var(--font-body);font-size:14px;font-weight:800;padding:11px 10px;border-radius:var(--radius-pill);cursor:pointer;color:var(--color-neutral-600);background:transparent;border:none;white-space:nowrap;}
.subtab.active{background:var(--color-accent);color:#fff;box-shadow:0 4px 10px -4px rgba(233,85,133,.6);}

.chore-room-card{margin-bottom:12px;}
.chore-room-title{font-family:var(--font-heading);font-weight:700;font-size:14.5px;margin-bottom:9px;}
.chore-list{display:flex;flex-direction:column;gap:0;}

/* Sysslorad: kryssring + namn/meta + förfallo/avatar, tryck-för-att-expandera (redesign) */
.chore-item{border-bottom:1px solid var(--color-divider);}
.chore-item:last-child{border-bottom:none;}
.chore-item-main{display:flex;align-items:center;gap:12px;padding:14px 4px;cursor:pointer;}
.chore-checkbox{
  width:28px;height:28px;border-radius:50%;border:2px solid var(--color-neutral-300);background:none;
  flex-shrink:0;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;
}
.chore-checkbox-done{background:var(--color-accent-2);border-color:var(--color-accent-2);}
.chore-item-body{flex:1;min-width:0;}
.chore-item-name{font-family:var(--font-body);font-weight:800;font-size:15px;color:var(--color-text);}
.chore-item-name-done{text-decoration:line-through;color:var(--color-neutral-500);}
.chore-item-meta{font-size:12.5px;color:var(--color-neutral-500);margin-top:2px;}
.chore-item-side{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.chore-due{font-family:var(--font-body);font-weight:800;font-size:13px;white-space:nowrap;}
.chore-item-avatar{width:32px;height:32px;font-size:13px;}
.chore-expand{padding:0 4px 16px;}
.chore-expand-label{font-family:var(--font-body);font-weight:800;font-size:11px;letter-spacing:.03em;color:var(--color-neutral-500);margin-bottom:8px;}
.chore-assign-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px;}
.chore-assign-chip{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:14px;
  border:2px solid var(--color-neutral-300);background:none;cursor:pointer;font-family:var(--font-body);font-weight:700;font-size:12px;color:var(--color-text);
}
.chore-assign-chip .avatar-chip{width:36px;height:36px;font-size:14px;}
.chore-assign-chip-active{border-color:var(--color-accent-2);}
.chore-snooze-btn{
  width:100%;padding:12px;border-radius:var(--radius-pill);border:1px solid var(--color-neutral-300);
  background:none;cursor:pointer;font-family:var(--font-body);font-weight:800;font-size:13px;color:var(--color-text);
}
.my-chores{margin-bottom:20px;}
.my-chores .section-title{margin-bottom:10px;}
.my-chores-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.my-chore-card{background:var(--card);border:1px solid #E3DDCF;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);}
.my-chore-card.chore-overdue{border-color:var(--warn);background:var(--warnbg);}
.my-chore-name{font-family:var(--font-heading);font-weight:700;font-size:15px;}
.my-chore-meta{font-size:12px;color:var(--slate);font-family:'IBM Plex Mono',monospace;}
.my-chore-done{margin-top:auto;padding:12px;font-size:15px;border-radius:9px;width:100%;}
.chore-steps{font-size:11px;color:var(--slate);margin-top:3px;}
.chore-robo{font-size:11px;color:var(--slate);font-style:italic;margin-top:3px;}
.chore-item.chore-row-tier0{border-left:3px solid var(--color-car-accent);padding-left:6px;}
.chore-tier0-badge{font-weight:700;color:var(--color-car-accent);text-transform:uppercase;letter-spacing:0.02em;font-size:10.5px;display:block;margin-bottom:2px;}
.chores-pinned-card{margin-bottom:14px;}
.chores-pinned-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-family:var(--font-body);font-weight:800;font-size:11.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--color-accent-700);}
.chores-pinned-head .chores-pinned-count{color:var(--color-neutral-500);text-transform:none;font-weight:700;}

.chore-bar{display:flex;height:20px;border-radius:var(--radius-pill);overflow:hidden;background:var(--color-neutral-300);margin-bottom:14px;}
.chore-bar-seg{min-width:2px;}
.chore-bar-legend{margin-top:6px;font-size:12px;color:var(--slate);}

/* Statistik (story #116) */
.stat-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.stat-hero-total{font-family:var(--font-heading);font-size:26px;color:var(--color-neutral-100);}
.stat-hero-sub{font-size:12.5px;font-weight:700;color:var(--color-neutral-400);margin-top:2px;}
.stat-hero-busiest{text-align:right;}
.stat-hero-busiest-label{font-size:11.5px;font-weight:700;color:var(--color-neutral-400);}
.stat-hero-busiest-name{font-family:var(--font-heading);font-size:16px;color:var(--color-accent);margin-top:2px;}
.stat-person-list{display:flex;flex-direction:column;gap:10px;}
.stat-person-row{display:flex;align-items:center;gap:10px;}
.stat-person-name{font-weight:800;min-width:56px;}
.stat-person-track{flex:1;height:8px;border-radius:var(--radius-pill);background:var(--color-neutral-300);overflow:hidden;}
.stat-person-fill{display:block;height:100%;border-radius:var(--radius-pill);}
.stat-person-count{font-size:12.5px;font-weight:700;color:var(--color-neutral-600);white-space:nowrap;}
.stat-who-list{display:flex;flex-direction:column;gap:2px;}
.stat-who-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--color-divider);font-size:13px;}
.stat-who-row:last-child{border-bottom:none;}
.stat-who-name{font-weight:800;min-width:56px;}
.stat-who-task{flex:1;color:var(--color-neutral-600);}
.stat-who-time{font-size:11.5px;color:var(--color-neutral-500);}
.chore-area-table{border-collapse:collapse;font-size:12.5px;margin-top:8px;}
.chore-area-table th, .chore-area-table td{padding:6px 12px;text-align:left;border-bottom:1px solid var(--line);}
.chore-area-table th{color:var(--slate);font-weight:600;font-size:11.5px;}
.chore-area-table td:first-child{display:flex;align-items:center;gap:7px;font-weight:600;}

/* Mat (redesign: pastellkort + flamingo-CTA) */
.meal-day-card{margin-bottom:10px;background:var(--color-neutral-100);border:none;border-radius:18px;box-shadow:none;padding:14px 16px;}
.meal-day-card .day-name{font-family:var(--font-heading);color:var(--color-text);}
.meal-day-card .day-date{font-family:var(--font-body);font-weight:700;color:var(--color-neutral-500);}
.meal-list{display:flex;flex-direction:column;gap:6px;}
.meal-row{display:flex;align-items:center;gap:8px;padding:8px 4px;border:none;border-bottom:1px solid var(--color-divider);border-radius:0;font-size:13px;background:transparent;flex-wrap:wrap;}
.meal-row:last-child{border-bottom:none;}
.meal-row-clickable{cursor:pointer;}
.meal-row-clickable:active{background:var(--color-accent-100);border-radius:10px;}
.meal-row-edit{background:var(--color-accent-100);border-radius:12px;cursor:default;}
.meal-type{font-family:var(--font-body);font-weight:800;font-size:11.5px;color:var(--color-neutral-500);min-width:58px;}
.meal-content{flex:1;min-width:140px;}
.meal-name{font-weight:800;color:var(--color-text);}
.meal-empty{color:var(--color-neutral-400);font-style:italic;}
.meal-cook{font-size:11px;color:var(--color-neutral-600);margin-left:6px;}
.meal-recipe-tag{font-size:10.5px;color:var(--color-accent-2);border:1px solid var(--color-accent-2);border-radius:5px;padding:1px 5px;margin-left:6px;white-space:nowrap;text-decoration:none;}
.meal-row .del{border:none;background:transparent;color:var(--color-neutral-500);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;}
.meal-row-edit input[type=text], .meal-row-edit select{font-family:var(--font-body);font-size:12.5px;border:1px solid var(--color-neutral-300);border-radius:10px;padding:6px 8px;background:#fff;color:var(--color-text);}
.meal-row-edit input[type=text]{flex:1;min-width:130px;}
.meal-row-edit button.primary{font-family:var(--font-body);font-weight:800;font-size:12px;background:var(--color-accent-2);color:#fff;border:none;border-radius:var(--radius-pill);padding:7px 13px;cursor:pointer;white-space:nowrap;}

.grocery-add{display:grid;grid-template-columns:1fr 160px 170px auto;gap:8px;margin-bottom:12px;background:var(--color-neutral-100);border-radius:16px;padding:12px;}
.grocery-add input, .grocery-add select{font-size:13px;border:1px solid var(--color-neutral-300);border-radius:12px;padding:10px 11px;width:100%;font-family:var(--font-body);background:#fff;color:var(--color-text);}
.grocery-add button{font-family:var(--font-body);font-weight:800;font-size:12.5px;background:var(--color-accent);color:#fff;border:none;border-radius:12px;padding:8px 12px;cursor:pointer;}
@media (max-width:700px){ .grocery-add{grid-template-columns:1fr 1fr;} .grocery-add .grocery-suggest-wrap{grid-column:1/-1;} .grocery-add button{grid-column:1/-1;} }
.grocery-suggest-wrap{position:relative;}
.grocery-suggest{position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:14px;box-shadow:var(--shadow-hero);z-index:30;overflow:hidden;}
.grocery-suggest-row{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:13px;cursor:pointer;}
.grocery-suggest-row:hover{background:var(--color-accent-100);}
.grocery-suggest-row + .grocery-suggest-row{border-top:1px solid var(--color-divider);}
.grocery-suggest-name{font-weight:800;}
.grocery-suggest-dept{margin-left:auto;font-size:11px;color:var(--color-neutral-500);}
.grocery-shop-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.grocery-shop-btn{flex:1;font-family:var(--font-body);font-weight:900;font-size:15px;background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-pill);padding:15px 16px;cursor:pointer;box-shadow:var(--shadow-hero);}
.grocery-shop-btn:active{background:var(--color-accent-600);}
.grocery-store-select{font-size:13px;border:1px solid var(--color-neutral-300);border-radius:var(--radius-pill);padding:9px 12px;background:var(--color-neutral-100);}
.grocery-chips-title{font-family:var(--font-body);font-weight:800;font-size:11px;color:var(--color-neutral-500);margin-bottom:6px;}
.grocery-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.grocery-chip{font-size:12.5px;font-weight:800;background:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--radius-pill);padding:7px 13px;cursor:pointer;}
.grocery-chip:hover{border-color:var(--color-accent);}
.grocery-dept-head{font-family:var(--font-heading);font-weight:700;font-size:14px;margin:14px 0 6px;padding-bottom:0;border-bottom:none;color:var(--color-text);}
.grocery-dept-head:first-child{margin-top:0;}
.grocery-dept-done{color:var(--color-neutral-500);}
.grocery-list{display:flex;flex-direction:column;gap:4px;background:var(--color-neutral-100);border-radius:16px;padding:4px 12px;}
.grocery-row{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--color-divider);font-size:13px;flex-wrap:wrap;}
.grocery-row:last-child{border-bottom:none;}
.grocery-row .grocery-name{flex:1;font-weight:700;}
.grocery-note{font-size:11.5px;color:var(--color-neutral-500);font-style:italic;}
.grocery-checked .grocery-name{text-decoration:line-through;color:var(--color-neutral-500);opacity:0.7;}
.grocery-src-tag{font-size:10.5px;color:var(--color-accent-2);border:1px solid var(--color-accent-2);border-radius:5px;padding:1px 5px;white-space:nowrap;}
.grocery-dept-pick{font-size:11px;border:1px solid var(--color-car-accent);border-radius:6px;padding:2px 4px;color:var(--color-car-fg);background:transparent;max-width:120px;}
.grocery-row .del{border:none;background:transparent;color:var(--color-neutral-500);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;}
.grocery-clear{margin-top:10px;font-family:var(--font-body);font-weight:800;font-size:12.5px;background:transparent;color:var(--color-overdue);border:1px solid var(--color-overdue);border-radius:var(--radius-pill);padding:7px 12px;cursor:pointer;}

/* Handlingsläge (redesign) */
.shop-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;background:var(--color-text);color:#fff;padding:12px 14px;border-radius:16px;margin-bottom:14px;}
.shop-exit{font-family:var(--font-body);font-weight:800;font-size:12.5px;background:rgba(255,255,255,.18);color:#fff;border:none;border-radius:var(--radius-pill);padding:8px 13px;cursor:pointer;}
.shop-store-select{font-size:13px;font-weight:700;border:none;border-radius:var(--radius-pill);padding:8px 10px;background:rgba(255,255,255,.14);color:#fff;flex:1;min-width:0;}
.shop-counter{margin-left:auto;font-family:var(--font-body);font-weight:900;font-size:14px;color:var(--color-accent);white-space:nowrap;}
.shop-dept-head{font-family:var(--font-heading);font-weight:700;font-size:15px;margin:16px 0 8px;color:var(--color-text);}
.shop-dept-done{color:var(--color-neutral-500);font-size:13px;}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.shop-card{background:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:16px;padding:14px 8px;text-align:center;cursor:pointer;font-family:var(--font-body);display:flex;flex-direction:column;align-items:center;gap:4px;}
.shop-card:active{background:var(--color-accent-100);border-color:var(--color-accent);}
.shop-card-emoji{font-size:30px;line-height:36px;height:36px;}
.shop-card-name{font-family:var(--font-body);font-weight:800;font-size:13px;color:var(--color-text);}
.shop-card-note{display:block;min-height:14px;font-size:11px;color:var(--color-neutral-500);}
.shop-picked-list{display:flex;flex-direction:column;gap:4px;}
.shop-picked{text-align:left;background:transparent;border:none;border-bottom:1px solid var(--color-divider);padding:8px 4px;font-size:13px;color:var(--color-neutral-500);text-decoration:line-through;cursor:pointer;font-family:var(--font-body);}
.shop-empty{color:var(--color-neutral-500);font-size:13px;padding:20px 0;}
.shop-all-done{font-family:var(--font-heading);font-weight:700;font-size:18px;text-align:center;padding:24px 0;color:var(--color-accent-2);}

/* Admin: butiker, avdelningar, varuhistorik */
.grocery-admin,.grocery-history{margin-top:16px;}
.grocery-admin-title{font-family:var(--font-heading);font-weight:600;font-size:12.5px;color:var(--slate);margin-top:12px;}
.grocery-admin-add{display:flex;gap:6px;margin-top:8px;}
.grocery-admin-add input{flex:1;font-size:12.5px;border:1px solid var(--line);border-radius:7px;padding:6px 8px;min-width:0;}
.grocery-admin-add button{font-family:var(--font-heading);font-weight:600;font-size:12px;background:var(--ink);color:#fff;border:none;border-radius:7px;padding:7px 10px;cursor:pointer;white-space:nowrap;}
.grocery-icon-input{width:52px !important;flex:0 0 52px !important;text-align:center;}
.grocery-order-btn{border:1px solid var(--line);background:var(--card);border-radius:6px;padding:3px 8px;cursor:pointer;font-size:12px;}
.grocery-order-btn:disabled{opacity:0.35;cursor:default;}
.grocery-admin .room-admin-row input[type=text]{flex:1;min-width:0;}
.grocery-default-tag{font-size:10.5px;color:var(--teal);border:1px solid var(--teal);border-radius:5px;padding:1px 6px;}
.grocery-history-filter{width:100%;font-size:12.5px;border:1px solid var(--line);border-radius:7px;padding:6px 8px;margin-top:10px;}
.grocery-history-name{flex:1;font-weight:600;}
.grocery-history-more{font-size:11.5px;color:var(--slate);margin-top:8px;}
.grocery-history .room-admin-row select{font-size:12px;border:1px solid var(--line);border-radius:6px;padding:4px 6px;max-width:170px;}

.recipe-top-row{margin-bottom:12px;}
.recipe-new-btn{font-family:var(--font-body);font-weight:800;font-size:12.5px;background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-pill);padding:9px 14px;cursor:pointer;}
.recipe-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.recipe-card{background:var(--color-neutral-100);border:none;border-radius:16px;padding:14px 15px;box-shadow:none;cursor:pointer;}
.recipe-card:active{background:var(--color-accent-100);}
.recipe-name{font-family:var(--font-heading);font-weight:700;font-size:14px;color:var(--color-text);}
.recipe-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;}
.recipe-tag{font-size:10.5px;font-weight:700;color:var(--color-accent-2);border:1px solid var(--color-accent-2);border-radius:5px;padding:1px 6px;}
.recipe-meta{margin-top:7px;font-family:var(--font-body);font-weight:700;font-size:11px;color:var(--color-neutral-500);}
.recipe-detail{margin-top:10px;}
.recipe-detail-name{font-family:var(--font-heading);font-weight:700;font-size:20px;color:var(--color-text);}
.recipe-ingredients{margin:8px 0 0;padding-left:20px;font-size:13px;line-height:1.7;color:var(--color-text);}
.recipe-instructions{font-size:13px;line-height:1.6;color:var(--color-text);}
.recipe-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;}
.recipe-actions button.primary{font-family:var(--font-body);font-weight:800;font-size:13px;background:var(--color-accent-2);color:#fff;border:none;border-radius:var(--radius-pill);padding:9px 14px;cursor:pointer;}
.recipe-confirm{font-size:12.5px;color:var(--color-accent-2);}
.recipe-delete{font-family:var(--font-body);font-weight:800;font-size:12.5px;background:transparent;color:var(--color-overdue);border:1px solid var(--color-overdue);border-radius:var(--radius-pill);padding:7px 13px;cursor:pointer;margin-left:auto;}
.recipe-form{margin-bottom:14px;}
.recipe-form input[type=text], .recipe-form input[type=url], .recipe-form textarea{width:100%;font-family:var(--font-body);font-size:12.5px;border:1px solid var(--line);border-radius:7px;padding:7px 8px;margin-bottom:8px;background:#FDFCFA;color:var(--ink);resize:vertical;}
.recipe-type-nav{margin-bottom:4px;}
.recipe-type-field{margin-bottom:8px;}
.recipe-file-name{display:block;margin-top:4px;font-size:12px;color:var(--slate);}
.recipe-save{font-family:var(--font-heading);font-weight:600;font-size:12.5px;background:var(--teal);color:#fff;border:none;border-radius:7px;padding:8px 14px;cursor:pointer;display:block;margin-top:4px;}
.recipe-save:disabled{opacity:0.6;cursor:default;}

/* Fristående receptvy (recipe.html) */
.recipe-source-link{margin:10px 0;}
.recipe-source-link a{display:inline-block;font-family:var(--font-heading);font-weight:600;font-size:12.5px;background:var(--teal);color:#fff;border-radius:7px;padding:8px 14px;text-decoration:none;}
.recipe-file-view{margin-top:10px;}
.recipe-file-image{max-width:100%;border-radius:10px;box-shadow:var(--shadow);}
.recipe-file-pdf{width:100%;height:70vh;border:1px solid var(--line);border-radius:8px;}
.recipe-file-open-link{display:block;margin-top:8px;font-size:12.5px;color:var(--teal);}

.chore-room-filter{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.chore-room-filter select{font-size:12.5px;border:1px solid var(--line);border-radius:7px;padding:6px 8px;}
.chore-room-filter button{font-family:var(--font-heading);font-weight:600;font-size:12.5px;background:var(--ink);color:#fff;border:none;border-radius:7px;padding:7px 10px;cursor:pointer;}
.chore-filter-result{margin-top:10px;font-size:13px;}
.chore-filter-row{padding:5px 0;}

.room-admin-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;background:#F5F7F3;border-radius:8px;padding:7px 9px;}
.room-admin-row .room-area{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--slate);min-width:70px;}
.room-admin-row input{font-size:12.5px;border:1px solid var(--line);border-radius:6px;padding:5px 7px;}
.room-admin-row input[type=number]{width:70px;}
.room-admin-row button{border:none;background:transparent;color:var(--slate);cursor:pointer;font-size:12px;text-decoration:underline;margin-left:auto;}
.room-admin-add{display:grid;grid-template-columns: 1fr 130px 100px auto;gap:6px;margin-top:10px;}
.room-admin-add input, .room-admin-add select{font-size:12.5px;border:1px solid var(--line);border-radius:7px;padding:6px 8px;}
.room-admin-add button{font-family:var(--font-heading);font-weight:600;font-size:12.5px;background:var(--ink);color:#fff;border:none;border-radius:7px;padding:7px 10px;cursor:pointer;}
@media (max-width:700px){ .room-admin-add{grid-template-columns: 1fr 1fr;} .room-admin-add button{grid-column:1/-1;} }

.task-admin-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;margin-top:8px;font-size:12.5px;background:#F5F7F3;border-radius:8px;padding:8px 9px;}
.task-admin-row input, .task-admin-row select{font-size:12px;border:1px solid var(--line);border-radius:6px;padding:5px 7px;min-width:0;}
.task-admin-row .task-admin-field{display:flex;flex-direction:column;gap:2px;}
.task-admin-row .task-admin-field span{font-size:10.5px;color:var(--slate);}
.task-admin-row button{border:none;background:transparent;color:var(--slate);cursor:pointer;font-size:12px;text-decoration:underline;justify-self:end;align-self:end;}
.task-admin-add{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px;margin-top:10px;}
.task-admin-add input, .task-admin-add select{font-size:12.5px;border:1px solid var(--line);border-radius:7px;padding:6px 8px;min-width:0;}
.task-admin-add button{font-family:var(--font-heading);font-weight:600;font-size:12.5px;background:var(--ink);color:#fff;border:none;border-radius:7px;padding:7px 10px;cursor:pointer;grid-column:1/-1;}