:root {
  --navy-950: #052f3f;
  --navy-900: #073b4c;
  --navy-850: #08475a;
  --ink-950: #0d1741;
  --ink-800: #23315f;
  --ink-600: #66739b;
  --ink-500: #8390ad;
  --line: #dbe5f1;
  --line-strong: #c8d7e7;
  --surface: #ffffff;
  --canvas: #f5f9fb;
  --teal: #0eaa9a;
  --teal-dark: #068b80;
  --teal-soft: #e3f7f3;
  --blue: #3c63ff;
  --blue-soft: #edf1ff;
  --purple: #8b5cf6;
  --purple-soft: #f2ecff;
  --orange: #f59e0b;
  --orange-soft: #fff5df;
  --red: #ef5c62;
  --red-soft: #fff0f1;
  --green: #0b9f76;
  --green-soft: #e8f8f2;
  --sidebar-w: 258px;
  --sidebar-collapsed: 76px;
  --topbar-h: 58px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 2px 8px rgba(24, 43, 77, 0.05);
  --shadow-md: 0 20px 52px rgba(7, 38, 59, 0.18);
  --transition: 180ms ease;
}

/* Public EstePlan landing page */
body.landing-mode {
  color: #10263a;
  background: #f7fbfb;
  overflow-x: hidden;
}

body.landing-mode .skip-link { display: none; }

.marketing-site {
  --m-navy: #092c3a;
  --m-deep: #061e2a;
  --m-teal: #0cab9e;
  --m-teal-dark: #07897f;
  --m-mint: #dff7f2;
  --m-ink: #10263a;
  --m-muted: #647887;
  min-height: 100vh;
  color: var(--m-ink);
  background: #f8fbfb;
  font-size: 15px;
}

.marketing-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  height: 78px;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 42px;
}

.marketing-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--m-navy);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.5px;
  text-decoration: none;
}

.marketing-brand-mark {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(12,171,158,.2);
}

.marketing-brand-mark img { width: 100%; height: 100%; object-fit: contain; }

.marketing-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.marketing-header-actions { display: flex; align-items: center; gap: 10px; }
.marketing-header-login { height: 42px; padding: 0 16px; min-height: 0; font-size: 13px; }
.marketing-nav a { color: #426071; font-size: 13px; font-weight: 600; text-decoration: none; transition: color var(--transition); }
.marketing-nav a:hover { color: var(--m-teal-dark); }

.marketing-login {
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 17px;
  color: white;
  background: var(--m-navy);
  border: 1px solid var(--m-navy);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(6,30,42,.14);
}

.marketing-login:hover { transform: translateY(-2px); background: #0d4052; box-shadow: 0 12px 28px rgba(6,30,42,.2); }

.marketing-hero {
  position: relative;
  min-height: 760px;
  padding: 150px max(24px, calc((100% - 1180px) / 2)) 96px;
  display: grid;
  grid-template-columns: minmax(0, .87fr) minmax(560px, 1.13fr);
  align-items: center;
  gap: 54px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(249,253,252,.72) 52%, rgba(229,247,244,.5) 100%),
    radial-gradient(circle at 84% 15%, #c7f2ea 0, transparent 34%);
}

.marketing-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 110px;
  background: linear-gradient(to bottom, transparent, #f8fbfb);
  pointer-events: none;
}

.hero-glow { position: absolute; border-radius: 999px; filter: blur(4px); pointer-events: none; }
.hero-glow-one { width: 290px; height: 290px; top: 130px; right: 12%; background: rgba(88,218,196,.15); }
.hero-glow-two { width: 180px; height: 180px; left: -70px; bottom: 100px; background: rgba(103,144,255,.08); }
.hero-copy, .hero-product { position: relative; z-index: 2; }
.hero-copy { max-width: 590px; }

.hero-eyebrow, .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--m-teal-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hero-eyebrow i { width: 7px; height: 7px; background: var(--m-teal); border-radius: 50%; box-shadow: 0 0 0 5px rgba(12,171,158,.1); }
.hero-copy h1 { margin: 22px 0 22px; color: var(--m-navy); font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(43px, 4.6vw, 67px); line-height: 1.04; letter-spacing: -3.4px; }
.hero-copy h1 em { color: var(--m-teal); font-style: normal; }
.hero-copy > p { max-width: 560px; margin: 0; color: #58707f; font-size: 17px; line-height: 1.75; }
.hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.marketing-primary, .marketing-secondary, .marketing-ghost {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 21px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.marketing-primary { color: white; background: linear-gradient(135deg, #0cb5a7, #07897f); border: 0; box-shadow: 0 13px 26px rgba(12,171,158,.22); }
.marketing-primary:hover { transform: translateY(-2px); box-shadow: 0 17px 32px rgba(12,171,158,.3); }
.marketing-secondary { color: var(--m-navy); background: rgba(255,255,255,.8); border: 1px solid #d8e6e8; }
.marketing-secondary:hover { border-color: #91cfc8; background: white; }
.hero-proof { margin-top: 21px; display: flex; flex-wrap: wrap; gap: 18px; color: #718591; font-size: 11px; font-weight: 600; }
.hero-proof span { display: inline-flex; align-items: center; gap: 5px; }
.hero-proof svg { color: var(--m-teal); }

.hero-product { perspective: 1200px; }
.product-window { overflow: hidden; background: rgba(255,255,255,.96); border: 1px solid rgba(150,190,195,.48); border-radius: 17px; box-shadow: 0 35px 80px rgba(15,65,72,.18), 0 2px 8px rgba(15,65,72,.08); transform: rotateY(-2.5deg) rotateX(1deg); }
.product-top { height: 47px; padding: 0 14px; display: flex; align-items: center; gap: 12px; background: white; border-bottom: 1px solid #e8eff1; }
.mini-brand { display: inline-flex; align-items: center; gap: 6px; color: #0c3948; font-size: 10px; font-weight: 800; }
.mini-brand i { width: 18px; height: 18px; background: linear-gradient(145deg, #12bbae, #0b877f); border-radius: 6px; }
.product-search { width: 175px; margin: 0 auto; padding: 6px 9px; display: flex; align-items: center; gap: 6px; color: #9aaab2; background: #f6f9fa; border: 1px solid #ebf0f2; border-radius: 6px; font-size: 7px; }
.product-body { height: 365px; display: grid; grid-template-columns: 105px 1fr; }
.product-side { padding: 17px 9px; display: flex; flex-direction: column; gap: 5px; color: #80929c; background: #0a3543; }
.product-side span { padding: 8px 7px; display: flex; align-items: center; gap: 7px; border-radius: 6px; font-size: 7px; font-weight: 600; }
.product-side .active { color: white; background: rgba(22,187,173,.18); }
.product-main { padding: 20px 18px; background: #f7fafb; }
.product-heading { display: flex; align-items: center; justify-content: space-between; }
.product-heading div { display: grid; gap: 3px; }
.product-heading small { color: #98a8b0; font-size: 6px; letter-spacing: .08em; }
.product-heading strong { color: #163a49; font-size: 13px; }
.product-heading button, .product-demo-action { padding: 7px 10px; color: white; background: #10a99d; border: 0; border-radius: 6px; font-size: 7px; font-weight: 700; }
.product-stats { margin: 16px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.product-stats > div { padding: 10px; display: flex; align-items: center; gap: 8px; background: white; border: 1px solid #e5edef; border-radius: 8px; }
.product-stats i { width: 23px; height: 23px; border-radius: 7px; }
.product-stats i.blue { background: #e6edff; }
.product-stats i.teal { background: #def6f2; }
.product-stats i.orange { background: #fff0d7; }
.product-stats span { display: grid; }
.product-stats b { color: #153b48; font-size: 12px; line-height: 1; }
.product-stats small { margin-top: 3px; color: #8a9ba4; font-size: 6px; }
.product-grid { display: grid; grid-template-columns: 1.35fr .8fr; gap: 10px; }
.preview-list, .preview-patient { padding: 12px; background: white; border: 1px solid #e5edef; border-radius: 9px; }
.preview-title { margin-bottom: 7px; display: flex; justify-content: space-between; font-size: 7px; }
.preview-title strong { font-size: 9px; }
.preview-title span { color: #0aa697; font-weight: 700; }
.preview-task { min-height: 47px; display: flex; align-items: center; gap: 7px; border-top: 1px solid #edf2f3; }
.preview-task .ring { width: 13px; height: 13px; flex: 0 0 auto; display: grid; place-items: center; color: white; border: 1px solid #c3d0d4; border-radius: 50%; }
.preview-task .ring.done { background: #10aa9d; border-color: #10aa9d; }
.preview-task span:nth-child(2) { min-width: 0; flex: 1; display: grid; }
.preview-task b { overflow: hidden; color: #274553; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.preview-task small { margin-top: 3px; color: #96a5ad; font-size: 6px; }
.priority-dot { width: 5px; height: 5px; border-radius: 50%; }
.priority-dot.red { background: #f26469; }.priority-dot.amber { background: #f1a628; }
.mini-avatar { width: 17px; height: 17px; display: grid !important; place-items: center; flex: 0 0 auto !important; color: white; background: #7588a7; border-radius: 50%; font-size: 5px; }
.patient-preview-head { display: flex; align-items: center; gap: 7px; }
.patient-avatar { width: 28px; height: 28px; display: grid; place-items: center; color: #078d83; background: #ddf4f1; border-radius: 8px; font-size: 8px; font-weight: 800; }
.patient-preview-head > span:last-child { display: grid; }
.patient-preview-head b { color: #294754; font-size: 8px; }.patient-preview-head small { color: #9aabb2; font-size: 6px; }
.progress-copy { margin: 16px 0 5px; display: flex; justify-content: space-between; color: #8798a1; font-size: 6px; }.progress-copy b { color: #0a9b90; }
.progress-track { height: 4px; overflow: hidden; background: #e8eff0; border-radius: 4px; }.progress-track i { display: block; width: 75%; height: 100%; background: #0cab9e; border-radius: inherit; }
.stage-row { margin-top: 9px; display: flex; align-items: center; gap: 6px; color: #5f737c; font-size: 6px; }
.stage-row span { width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid #d4e0e2; border-radius: 50%; font-size: 6px; }.stage-row span.complete { color: white; background: #0cab9e; border-color: #0cab9e; }
.floating-card { position: absolute; display: flex; align-items: center; gap: 9px; padding: 11px 13px; color: #314e5a; background: rgba(255,255,255,.96); border: 1px solid #dce9ea; border-radius: 10px; box-shadow: 0 18px 38px rgba(15,65,72,.16); font-size: 8px; }
.floating-card span:nth-child(2) { display: grid; }.floating-card b { font-size: 8px; }.floating-card small { margin-top: 2px; color: #8b9ca4; font-size: 6px; }.floating-card > svg { margin-left: 5px; color: #0baa9d; }
.floating-icon { width: 29px; height: 29px; display: grid !important; place-items: center; color: #0a9f93; background: #dff6f2; border-radius: 8px; }
.floating-card-one { right: -18px; bottom: 40px; animation: floatCard 5s ease-in-out infinite; }
.floating-card-two { left: -34px; top: 67px; animation: floatCard 6s ease-in-out -2s infinite; }
@keyframes floatCard { 0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)} }

.sector-strip { min-height: 88px; padding: 20px 24px; display: flex; align-items: center; justify-content: center; gap: 32px; color: #6b7e87; background: white; border-block: 1px solid #e5eeee; font-size: 12px; font-weight: 700; }
.sector-strip i { width: 4px; height: 4px; background: #b8d1d0; border-radius: 50%; }
.marketing-section { padding: 105px max(24px, calc((100% - 1120px) / 2)); }
.section-intro { max-width: 700px; }
.section-intro.centered { margin: 0 auto; text-align: center; }
.section-intro h2, .workflow-copy h2, .contact-copy h2 { margin: 14px 0 15px; color: var(--m-navy); font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(32px, 4vw, 48px); line-height: 1.13; letter-spacing: -2px; }
.section-intro > p { margin: 0; color: var(--m-muted); font-size: 16px; line-height: 1.7; }
.feature-section { background: #f8fbfb; }
.feature-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-card { min-height: 280px; padding: 27px; overflow: hidden; position: relative; background: white; border: 1px solid #e1ebec; border-radius: 16px; box-shadow: 0 5px 18px rgba(11,54,65,.035); }
.feature-card.feature-large { grid-row: span 2; min-height: 576px; background: linear-gradient(155deg,#ffffff 46%,#effaf8); }
.feature-card.feature-wide { grid-column: span 2; }
.feature-card h3 { margin: 19px 0 9px; color: #173847; font-family: "Plus Jakarta Sans",sans-serif; font-size: 18px; }
.feature-card > p { max-width: 390px; margin: 0; color: #71838c; font-size: 13px; line-height: 1.65; }
.feature-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; }.feature-icon.teal{color:#078d83;background:#ddf6f2}.feature-icon.blue{color:#4168dc;background:#e8edff}.feature-icon.purple{color:#7553c8;background:#f0ebff}.feature-icon.orange{color:#c27d17;background:#fff1d9}.feature-icon.navy{color:#fff;background:#0b3a4a}
.patient-stack { margin-top: 32px; display: grid; gap: 9px; }
.patient-stack > div { padding: 13px; display: grid; grid-template-columns: 36px 1fr; align-items: center; column-gap: 10px; background: rgba(255,255,255,.86); border: 1px solid #dce9e9; border-radius: 10px; box-shadow: 0 5px 14px rgba(11,54,65,.04); }
.patient-stack span { grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center; color: #078f84; background: #dff5f2; border-radius: 9px; font-size: 10px; font-weight: 800; }
.patient-stack b { color: #24434f; font-size: 11px; }.patient-stack small { color: #91a1a8; font-size: 8px; }
.micro-board { position: absolute; inset: auto 27px 25px; height: 55px; display: flex; align-items: flex-end; gap: 6px; }.micro-board i { flex: 1; background: #eaf0ff; border: 1px solid #dbe4ff; border-radius: 6px; }.micro-board i:nth-child(1){height:32px}.micro-board i:nth-child(2){height:50px;background:#dfe8ff}.micro-board i:nth-child(3){height:41px}
.photo-mosaic { position: absolute; right: 22px; bottom: 23px; left: 27px; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 31px 31px; gap: 5px; }.photo-mosaic i { background: linear-gradient(145deg,#e8e5fb,#d8f1ef); border-radius: 6px; }.photo-mosaic i:first-child { grid-row: span 2; }.photo-mosaic i:last-child { background: linear-gradient(145deg,#f7e7e1,#f4f0d9); }
.permission-line { position: absolute; inset: auto 27px 25px; padding: 11px; display: flex; align-items: center; justify-content: space-between; color: #647984; background: #fbfcfc; border: 1px solid #e1e9ea; border-radius: 8px; font-size: 9px; }.permission-line span { display:flex;align-items:center;gap:6px}.permission-line b{padding:4px 6px;color:#078b80;background:#e1f7f3;border-radius:5px;font-size:7px}
.stage-chips { margin-top: 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #9babb0; }.stage-chips span { padding: 9px 12px; color: #31505b; background: #f6f9f9; border: 1px solid #dfe9ea; border-radius: 8px; font-size: 10px; font-weight: 700; }

.workflow-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; color: white; background: radial-gradient(circle at 15% 20%,#13586a 0,transparent 36%),linear-gradient(145deg,#0a3544,#061f2b 72%); }
.section-kicker.light { color: #6ee1d5; }.workflow-copy h2,.contact-copy h2{color:white}.workflow-copy p,.contact-copy p{color:#aec4cc;line-height:1.8}.marketing-ghost{margin-top:22px;color:white;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15)}.marketing-ghost:hover{background:rgba(255,255,255,.12)}
.workflow-steps { display: grid; gap: 11px; }.workflow-steps article { padding: 22px; display: grid; grid-template-columns: 50px 1fr; gap: 16px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.11); border-radius: 13px; }.workflow-steps article > span { width: 42px; height: 42px; display: grid; place-items: center; color: #6de2d6; background: rgba(66,211,196,.11); border: 1px solid rgba(84,225,210,.16); border-radius: 11px; font-size: 10px; font-weight: 800; }.workflow-steps h3{margin:1px 0 6px;color:white;font-family:"Plus Jakarta Sans",sans-serif;font-size:16px}.workflow-steps p{margin:0;color:#a9c0c8;font-size:12px;line-height:1.6}

.pricing-section { background: white; }.pricing-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3,1fr); align-items: stretch; gap: 14px; }.price-card { position: relative; padding: 30px; display: flex; flex-direction: column; background:#fff;border:1px solid #dfe9ea;border-radius:16px }.price-card.featured{border:2px solid #0aaa9d;box-shadow:0 22px 50px rgba(9,115,110,.12);transform:translateY(-9px)}.popular{position:absolute;top:0;right:20px;transform:translateY(-50%);padding:6px 10px;color:white;background:#0aaa9d;border-radius:999px;font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.plan-name{color:#49616c;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.price{margin:16px 0 8px;display:flex;align-items:baseline;gap:7px}.price b{color:#0b3342;font-family:"Plus Jakarta Sans",sans-serif;font-size:34px;letter-spacing:-1.5px}.price span{color:#8a9da5;font-size:11px}.price-card>p{min-height:43px;margin:0;color:#778a93;font-size:12px;line-height:1.6}.price-card ul{margin:25px 0 28px;padding:20px 0 0;display:grid;gap:12px;border-top:1px solid #edf1f2;list-style:none}.price-card li{display:flex;align-items:center;gap:8px;color:#405b66;font-size:11px}.price-card li svg{color:#0aa89b}.price-card button,.price-card>a{margin-top:auto;min-height:43px;display:flex;align-items:center;justify-content:center;color:#0a8f85;background:#eef9f7;border:1px solid #cceae6;border-radius:9px;font-size:11px;font-weight:800;text-decoration:none;cursor:pointer}.price-card.featured button{color:white;background:#0aaa9d;border-color:#0aaa9d}.pricing-note{margin:24px 0 0;text-align:center;color:#98a8ae;font-size:10px}

.contact-section { display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:center;background:linear-gradient(140deg,#0b3949,#072633) }.contact-copy{max-width:450px}.contact-points{margin-top:28px;display:grid;gap:10px;color:#d7e7e9;font-size:11px}.contact-points span{display:flex;align-items:center;gap:8px}.contact-points svg{color:#5dd7ca}.contact-form{padding:27px;display:grid;gap:14px;background:white;border-radius:16px;box-shadow:0 25px 60px rgba(0,0,0,.16)}.contact-form label{display:grid;gap:6px}.contact-form label>span{color:#506974;font-size:10px;font-weight:700}.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:11px 12px;color:#203f4c;background:#f9fbfb;border:1px solid #dbe6e8;border-radius:8px;font-size:12px}.contact-form textarea{min-height:80px;resize:vertical}.contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}.contact-form .marketing-primary{width:100%;margin-top:2px}.contact-form>small{text-align:center;color:#97a6ac;font-size:8px}
.marketing-footer { padding:55px max(24px, calc((100% - 1120px) / 2)) 25px; display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:50px;color:#647983;background:#f2f7f7;border-top:1px solid #e1ebeb }.marketing-footer>div{display:grid;align-content:start;gap:8px}.marketing-footer p{margin:4px 0 0;max-width:250px;font-size:11px}.marketing-footer strong{margin-bottom:5px;color:#183b49;font-size:11px}.marketing-footer a:not(.marketing-brand){font-size:10px;text-decoration:none}.marketing-footer a:hover{color:#07998e}.footer-bottom{grid-column:1/-1!important;padding-top:22px!important;display:flex!important;flex-direction:row!important;justify-content:space-between;border-top:1px solid #dbe6e7;font-size:9px}

.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-modal { width:min(820px,calc(100vw - 30px)); max-width:820px; display:grid;grid-template-columns:.92fr 1.08fr;overflow:hidden;background:white;border:0;border-radius:18px; box-shadow: var(--shadow-md); }.login-visual{min-height:570px;padding:34px;display:flex;flex-direction:column;justify-content:space-between;color:white;background:radial-gradient(circle at 30% 12%,rgba(81,218,202,.25),transparent 32%),linear-gradient(150deg,#0b4555,#062733)}.login-visual>.marketing-brand-mark{background:rgba(255,255,255,.12);box-shadow:none}.login-kicker{color:#68dfd3;font-size:9px;font-weight:800;letter-spacing:.12em}.login-visual h3{margin:14px 0 11px;font-family:"Plus Jakarta Sans",sans-serif;font-size:29px;line-height:1.2;letter-spacing:-1px}.login-visual p{margin:0;color:#afc6cd;font-size:12px;line-height:1.75}.login-proof{padding:13px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:10px}.login-proof>svg{color:#69dacf}.login-proof span{display:grid}.login-proof b{font-size:10px}.login-proof small{margin-top:2px;color:#a9c0c8;font-size:8px}.login-panel{position:relative;padding:57px 48px 40px}.login-panel>.modal-close{position:absolute;top:17px;right:17px}.login-brand-mobile{display:none}.login-panel h2{margin:8px 0 7px;color:#143847;font-family:"Plus Jakarta Sans",sans-serif;font-size:26px;letter-spacing:-.7px}.login-panel>p{margin:0 0 27px;color:#7c8e96;font-size:12px}.login-panel .form-field{margin-bottom:14px}.login-panel .form-field input{height:45px}.login-options{margin:-1px 0 19px;display:flex;align-items:center;justify-content:space-between;color:#71858e;font-size:9px}.login-options label{display:flex;align-items:center;gap:5px}.login-options input{accent-color:#0aa99c}.login-options button{padding:0;color:#078f85;background:none;border:0;font-size:9px;font-weight:700;cursor:pointer}.login-submit{width:100%}.login-divider{margin:20px 0;display:flex;align-items:center;gap:10px;color:#a6b3b8;font-size:8px}.login-divider::before,.login-divider::after{content:"";height:1px;flex:1;background:#e7edef}.demo-login-button{width:100%;height:43px;color:#28505e;background:#f7fafb;border:1px solid #dce7e9;border-radius:9px;font-size:11px;font-weight:750;cursor:pointer}.demo-login-button:hover{background:#eef8f6;border-color:#bfe3de}.login-note{display:block;margin-top:15px;text-align:center;color:#9aa9af;font-size:8px}

/* Sales-led public page refinement */
body.landing-mode { background:#f6faf9; font-family:"Inter",system-ui,sans-serif; }
.marketing-site { background:#f6faf9; font-family:"Inter",system-ui,sans-serif; }
.marketing-header { inset:14px 0 auto; height:64px; padding:0 10px 0 16px; background:rgba(255,255,255,.8); border:1px solid rgba(213,230,229,.8); border-radius:17px; box-shadow:0 12px 40px rgba(9,44,58,.06); backdrop-filter:blur(18px); }
.marketing-brand,.hero-copy h1,.section-intro h2,.workflow-copy h2,.contact-copy h2,.feature-card h3,.workflow-steps h3,.price b { font-family:"Plus Jakarta Sans",sans-serif; }
.marketing-hero { padding-bottom:104px; background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(249,253,252,.78) 50%,rgba(229,247,244,.55) 100%),radial-gradient(circle at 84% 15%,#bcefe7 0,transparent 35%),radial-gradient(circle at 8% 78%,rgba(206,220,255,.32) 0,transparent 24%); }
.hero-copy h1 { line-height:1.08; letter-spacing:-1.15px; word-spacing:.06em; text-wrap:balance; }
.section-intro h2,.workflow-copy h2,.contact-copy h2 { letter-spacing:-.75px; word-spacing:.035em; text-wrap:balance; }
.sector-strip { gap:27px; }
.sector-strip b { color:var(--m-navy); font-size:11px; letter-spacing:.07em; text-transform:uppercase; }
.problem-section { background:white; }
.problem-grid { max-width:1120px; margin:52px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.problem-grid > article { position:relative; min-height:238px; padding:27px; overflow:hidden; background:linear-gradient(155deg,#fbfdfd,#f4f8f8); border:1px solid #e0e9ea; border-radius:18px; }
.problem-grid > article::after { content:""; position:absolute; width:120px; height:120px; right:-48px; bottom:-52px; background:radial-gradient(circle,rgba(13,170,158,.09),transparent 68%); }
.problem-icon { width:43px; height:43px; display:grid; place-items:center; margin-bottom:28px; color:#526b75; background:white; border:1px solid #dde8e9; border-radius:12px; box-shadow:0 8px 22px rgba(12,54,66,.06); }
.problem-grid article small { color:#91a1a8; font-size:9px; font-weight:800; letter-spacing:.1em; }
.problem-grid article h3 { margin:8px 0 9px; color:#183b49; font:700 17px/1.35 "Plus Jakarta Sans",sans-serif; letter-spacing:-.35px; }
.problem-grid article p { margin:0; color:#73858d; font-size:12px; line-height:1.65; }
.problem-answer { grid-column:1/-1; min-height:92px; padding:19px 23px; display:flex; align-items:center; gap:15px; color:white; background:linear-gradient(120deg,#0b3543,#0a4b56 58%,#087d76); border-radius:18px; box-shadow:0 20px 45px rgba(8,66,72,.14); }
.answer-mark { width:50px; height:50px; flex:0 0 auto; display:grid; place-items:center; color:white; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:14px; font:800 18px "Plus Jakarta Sans",sans-serif; }
.problem-answer > div { display:grid; gap:4px; }
.problem-answer small { color:#72ded3; font-size:8px; font-weight:800; letter-spacing:.11em; }
.problem-answer strong { font:700 16px/1.35 "Plus Jakarta Sans",sans-serif; }
.problem-answer a { margin-left:auto; min-height:40px; padding:0 15px; display:flex; align-items:center; gap:8px; color:#0a4b51; background:white; border-radius:9px; font-size:10px; font-weight:800; text-decoration:none; }
.feature-section { background:#f6faf9; }
.feature-card { border-radius:18px; box-shadow:0 8px 24px rgba(11,54,65,.04); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.feature-card:hover { transform:translateY(-4px); border-color:#c9e1df; box-shadow:0 20px 45px rgba(11,54,65,.085); }
.results-band { padding:34px max(24px,calc((100% - 1120px) / 2)); display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#0cab9e; }
.results-band article { min-height:94px; padding:16px 26px; display:flex; align-items:center; gap:14px; color:white; border-right:1px solid rgba(255,255,255,.2); }
.results-band article:last-child { border-right:0; }
.results-band article > span { width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; background:rgba(255,255,255,.13); border-radius:11px; }
.results-band article div { display:grid; gap:4px; }
.results-band strong { font:700 13px "Plus Jakarta Sans",sans-serif; }
.results-band p { margin:0; color:rgba(255,255,255,.78); font-size:10px; line-height:1.5; }
.price-card { border-radius:18px; transition:transform .25s ease,box-shadow .25s ease; }
.price-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(9,71,76,.08); }
.price-card.featured:hover { transform:translateY(-13px); }

@media (max-width: 1040px) {
  .marketing-nav { display:none; }
  .marketing-header-actions { margin-left: auto; }
  .marketing-header { width:min(100% - 32px,900px); }
  .marketing-hero { min-height:auto;padding-top:125px;grid-template-columns:1fr;gap:55px; }
  .hero-copy { max-width:720px; }
  .hero-product { width:min(720px,100%);margin:0 auto; }
  .floating-card-two{left:-12px}.floating-card-one{right:-8px}
  .feature-grid{grid-template-columns:1fr 1fr}.feature-card.feature-large{grid-row:span 1;min-height:330px}.feature-card.feature-wide{grid-column:span 2}.patient-stack{grid-template-columns:repeat(3,1fr)}.patient-stack>div{grid-template-columns:32px 1fr;padding:10px}.patient-stack span{width:32px;height:32px}
  .problem-grid{grid-template-columns:1fr 1fr}.problem-grid>article:last-of-type{grid-column:1/-1}.results-band{grid-template-columns:1fr}.results-band article{border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}.results-band article:last-child{border-bottom:0}
  .workflow-section,.contact-section{grid-template-columns:1fr;gap:45px}.workflow-copy,.contact-copy{max-width:680px}
}

@media (max-width: 720px) {
  .marketing-header{height:68px;width:calc(100% - 28px)}.marketing-brand{font-size:19px}.marketing-header-actions{gap:6px}.marketing-login{height:39px;padding:0 11px;font-size:12px}.marketing-login svg{display:none}.marketing-header-login{height:39px;padding:0 10px;font-size:11px}
  .marketing-hero{padding:110px 18px 70px}.hero-copy h1{font-size:42px;letter-spacing:-2.4px}.hero-copy>p{font-size:15px}.hero-actions>*{width:100%}.hero-proof{gap:10px 16px}
  .product-window{transform:none}.product-body{height:310px;grid-template-columns:75px 1fr}.product-side{padding:12px 6px}.product-side span{padding:7px 5px;font-size:0}.product-side svg{margin:auto}.product-main{padding:14px 10px}.product-grid{grid-template-columns:1fr}.preview-patient{display:none}.product-stats{gap:4px}.product-stats>div{padding:7px;gap:5px}.product-stats i{width:18px;height:18px}.floating-card{display:none}
  .sector-strip{justify-content:flex-start;overflow-x:auto;gap:18px;white-space:nowrap}
  .marketing-section{padding:78px 18px}.section-intro h2,.workflow-copy h2,.contact-copy h2{font-size:34px;letter-spacing:-1.5px}
  .feature-grid,.pricing-grid{grid-template-columns:1fr}.feature-card.feature-wide{grid-column:auto}.feature-card.feature-large{min-height:420px}.patient-stack{grid-template-columns:1fr}.pricing-grid{gap:18px}.price-card.featured{transform:none}
  .problem-grid{grid-template-columns:1fr}.problem-grid>article:last-of-type{grid-column:auto}.problem-answer{padding:18px;align-items:flex-start;flex-wrap:wrap}.problem-answer a{width:100%;margin-left:0}.results-band{padding:22px 18px}
  .workflow-section,.contact-section{gap:35px}.workflow-steps article{padding:18px;grid-template-columns:42px 1fr}.contact-form{padding:21px}.contact-form-row{grid-template-columns:1fr}
  .marketing-footer{grid-template-columns:1fr 1fr;gap:30px}.marketing-footer>div:first-child{grid-column:1/-1}.footer-bottom{grid-column:1/-1!important}
  .login-modal{display:block}.login-visual{display:none}.login-panel{padding:52px 24px 27px}.login-brand-mobile{display:flex;align-items:center;gap:9px;margin-bottom:25px;color:#113947}.login-brand-mobile .marketing-brand-mark{width:29px;height:29px}.login-panel h2{font-size:23px}
}

@media (prefers-reduced-motion: reduce) {
  .floating-card { animation: none; }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink-950);
  background: var(--canvas);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }

button, [role="button"], .patient-item, .photo-tile, .task-row, .todoist-task-row, .board-task-card {
  -webkit-tap-highlight-color: transparent;
  transition: transform 130ms ease, box-shadow var(--transition), border-color var(--transition), background-color var(--transition), color var(--transition);
}
button:active, [role="button"]:active { transform: translateY(1px) scale(.985); }

button, [role="button"], input, select, textarea { outline: none; }
button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid rgba(14, 170, 154, 0.23);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 8px 12px;
  color: white;
  background: var(--ink-950);
  border-radius: 8px;
  transform: translateY(-150%);
  transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100vh; }
.mobile-backdrop[hidden] { display: none !important; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #eaf7fa;
  background:
    radial-gradient(circle at 24% 20%, rgba(13, 165, 159, 0.15), transparent 28%),
    linear-gradient(180deg, var(--navy-950), #043243 75%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: width var(--transition), transform var(--transition);
}

/* Menü içeriği (açılınca proje listesi) ekrandan uzun olursa flex öğeleri sıkışıp ikonları yukarı kaydırıyordu:
   yalnızca .accounts-block esner/kayar, diğer bölümlerin boyu sabit kalır. */
.sidebar > :not(.accounts-block) { flex: none; }

.brand-row {
  height: 65px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 7px;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.brand-mark { width: 31px; height: 30px; display: flex; align-items: center; justify-content: center; flex: none; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-name { white-space: nowrap; font: 800 18px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: -.5px; }

.icon-button, .mini-icon-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.icon-button { width: 36px; height: 36px; border-radius: 9px; }
.mini-icon-button { width: 28px; height: 28px; border-radius: 7px; }
.icon-button:hover, .mini-icon-button:hover { background: rgba(255, 255, 255, .08); }
.sidebar-collapse { color: #d7f2f5; }
.mobile-close { display: none; color: white; }

.workspace-switcher {
  width: calc(100% - 24px);
  min-height: 49px;
  margin: 0 12px 8px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #f5fbfc;
  border: 1px solid rgba(210, 239, 244, .17);
  border-radius: 10px;
  background: rgba(2, 39, 52, .38);
  cursor: pointer;
  text-align: left;
}
.workspace-switcher:hover { border-color: rgba(98, 229, 217, .35); background: rgba(9, 82, 98, .33); }
.workspace-icon { width: 20px; height: 20px; flex: none; }
.workspace-copy { min-width: 0; flex: 1; display: grid; }
.workspace-copy strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-copy small { display: none; color: #a5c5cd; font-size: 11px; }
.workspace-chevron { width: 18px; height: 18px; flex: none; }

.primary-nav { display: grid; gap: 2px; padding: 2px 12px 10px; }
.nav-item {
  position: relative;
  height: 41px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #dcecf0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.nav-item:hover { color: white; background: rgba(255,255,255,.065); }
.nav-item.active { color: white; background: linear-gradient(90deg, rgba(6, 174, 160, .95), rgba(9, 143, 137, .92)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.nav-item { color: #e6f4f7; }
.nav-item svg { width: 22px; height: 22px; flex: none; stroke-width: 2.1; }
.nav-label { white-space: nowrap; font-weight: 500; }
.nav-count { margin-left: auto; min-width: 22px; height: 20px; display: grid; place-items: center; padding: 0 6px; border-radius: 10px; color: #d9ffff; background: rgba(255,255,255,.13); font-size: 11px; font-weight: 700; }

.accounts-block { flex: 1 1 auto; min-height: 0; padding: 3px 12px 0; border-top: 1px solid rgba(221, 242, 246, .12); overflow-y: auto; }
.sidebar-label-row { height: 37px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-label { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #8eb5be; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.sidebar-label-row button { flex: 0 0 auto; color: #bfe5e8; }
.account-group { margin-bottom: 2px; }
.account-button, .project-button {
  width: 100%;
  display: flex;
  align-items: center;
  color: #dcecf0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.account-button { height: 34px; gap: 7px; padding: 0 7px; border-radius: 7px; }
.account-button:hover, .project-button:hover { color: white; background: rgba(255,255,255,.06); }
.account-button .account-logo { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 6px; background: rgba(255,255,255,.09); font-size: 12px; font-weight: 800; }
.account-button .chev { width: 13px; transition: transform var(--transition); }
.account-group.open .account-button .chev { transform: rotate(90deg); }
.account-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-list { display: none; padding-left: 30px; }
.account-group.open .project-list { display: grid; }
/* Klasörsüz (doğrudan çalışma alanı altındaki) projeler — her zaman açık. */
.root-project-list { display: grid; padding-left: 8px; }
.favorite-project-list { display: grid; padding-left: 8px; margin-bottom: 4px; }
.project-row-menu { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 6px; color: #9fc2c9; background: transparent; cursor: pointer; opacity: 0; }
.project-row:hover .project-row-menu, .project-row:focus-within .project-row-menu { opacity: 1; }
.project-row-menu:hover { color: white; background: rgba(255,255,255,.1); }
.project-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.project-button.active { color: white; background: rgba(255,255,255,.1); }
.project-button { height: 30px; gap: 8px; padding: 0 8px; border-radius: 6px; color: #b9d3da; font-size: 12px; }
.project-row { display: flex; align-items: center; min-width: 0; gap: 2px; }
.project-row .project-button, .project-row .account-button { flex: 1; min-width: 0; }
.project-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-row-menu { width: 22px; height: 22px; flex: none; display: grid; place-items: center; color: #8eb5be; border: 0; border-radius: 6px; background: transparent; cursor: pointer; opacity: 0; transition: opacity var(--transition); }
.project-row:hover .project-row-menu, .project-row-menu:focus-visible { opacity: 1; }
.project-row-menu:hover { color: white; background: rgba(255,255,255,.1); }
.project-add { color: #8eb5be; }
.project-add:hover { color: #dcecf0; }
.project-dot { width: 6px; height: 6px; border: 1.5px solid #65d8d2; border-radius: 50%; }

.sidebar-bottom-nav { display: grid; gap: 2px; padding: 6px 12px; border-top: 1px solid rgba(221, 242, 246, .12); }
.sidebar-footer { margin-top: auto; padding: 10px 12px 13px; border-top: 1px solid rgba(221, 242, 246, .12); }
.profile-button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 5px; color: white; border: 0; border-radius: 9px; background: transparent; cursor: pointer; text-align: left; }
.profile-button:hover { background: rgba(255,255,255,.06); }
.profile-copy { min-width: 0; flex: 1; display: grid; }
.profile-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.profile-copy small { color: #a9c7ce; font-size: 11px; }
.profile-dots { color: #97bbc3; letter-spacing: 1px; }
.avatar { display: inline-grid; place-items: center; flex: none; border: 0; border-radius: 50%; color: white; background: linear-gradient(145deg, #68779d, #4e567c); font-weight: 700; }
.avatar-sm { width: 34px; height: 34px; font-size: 11px; cursor: pointer; }
.avatar-lg { width: 36px; height: 36px; font-size: 11px; }
.avatar-xs { width: 24px; height: 24px; font-size: 9px; }

.app-area { min-height: 100vh; margin-left: var(--sidebar-w); transition: margin-left var(--transition); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px);
}
.mobile-menu { display: none; }
.breadcrumbs { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; color: var(--ink-600); font-size: 12px; }
.breadcrumb-home { color: var(--blue); }
.breadcrumb-current { color: var(--ink-800); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-sep { color: #aeb8cd; }
.top-actions { display: flex; align-items: center; gap: 4px; }
.top-actions .icon-button { color: var(--ink-600); }
.top-actions .icon-button:hover { color: var(--ink-950); background: #f0f5f8; }
.has-notification { position: relative; }
.has-notification::after { content: ""; position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border: 2px solid white; border-radius: 50%; background: var(--teal); }

#main-content { min-height: calc(100vh - var(--topbar-h)); padding: 22px 24px 40px; background: radial-gradient(circle at 35% 0%, rgba(41, 191, 190, .055), transparent 33%), var(--canvas); }
.page { width: min(1540px, 100%); margin: 0 auto; animation: pageIn 230ms ease; }
@keyframes pageIn { from { opacity: .25; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.page-header { min-height: 50px; margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.page-heading h1 { margin: 0; font: 800 24px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: -.65px; }
.page-heading p { margin: 5px 0 0; color: var(--ink-600); font-size: 13px; }
.header-actions { display: flex; align-items: center; gap: 8px; }

/* Proje başlığı/açıklaması gibi yerinde düzenlenebilir alanlar (bkz. SPEC.md §3) */
.inline-edit-trigger { border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit; padding: 2px 4px; margin: -2px -4px; border-radius: 6px; }
.inline-edit-trigger:hover { background: #f0f5f5; }
.page-heading .inline-edit-trigger:first-child { display: block; font: 800 24px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: -.65px; }
.page-heading p .inline-edit-trigger, .page-heading > .inline-edit-trigger:nth-child(2) { color: var(--ink-600); font-size: 13px; }
.inline-edit-input { font: inherit; padding: 2px 6px; border: 1px solid var(--teal); border-radius: 6px; }

.label-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 10px; font-weight: 700; }
.label-chip button { display: inline-flex; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; opacity: .7; }
.label-chip button:hover { opacity: 1; }
.label-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.label-chip-add { color: var(--ink-500); background: #f0f4f4; cursor: pointer; border: 1px dashed var(--line); }
.label-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.label-chip-filter { cursor: pointer; border: 1.5px solid transparent; }
.label-chip-filter.active { border-color: currentColor; }
.label-chip-filter span[data-action="delete-label"] { display: inline-flex; margin-left: 2px; opacity: .6; }
.label-chip-filter span[data-action="delete-label"]:hover { opacity: 1; }

/* Filtreler & Etiketler (bkz. docs/SPEC.md §5) */
.quick-filter-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-filter-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-700); background: var(--surface); cursor: pointer; font-size: 12px; font-weight: 600; }
.quick-filter-chip:hover { border-color: var(--teal); }
.quick-filter-chip.active { color: white; background: var(--teal-dark); border-color: var(--teal-dark); }
.quick-filter-chip.active .count-pill { color: white; background: rgba(255,255,255,.2); }
.quick-filter-chip .item-menu { margin-left: 2px; width: 20px; height: 20px; }

.checkbox-field { flex-direction: row !important; align-items: center; gap: 8px; }
.checkbox-field input { width: 15px; height: 15px; }

.board-add-section { flex: 0 0 220px; min-height: 44px; align-self: flex-start; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; border: 1.5px dashed var(--line); border-radius: 10px; color: var(--ink-500); background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; }
.board-add-section:hover { color: var(--teal-dark); border-color: var(--teal); }

.nav-item-cta { color: white !important; background: var(--teal-dark); border-radius: 8px; margin-bottom: 4px; }
.nav-item-cta:hover { background: var(--teal); }

.button { min-height: 37px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 12px; transition: all var(--transition); white-space: nowrap; }
.button svg { width: 16px; height: 16px; }
.button-primary { color: white; background: var(--teal); border-color: var(--teal); box-shadow: 0 5px 14px rgba(14,170,154,.18); }
.button-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); transform: translateY(-1px); }
.button-secondary { color: var(--ink-800); background: white; border-color: var(--line-strong); }
.button-secondary:hover { border-color: #9eb8d1; background: #fbfdff; }
.button-ghost { color: var(--ink-600); background: transparent; border-color: transparent; }
.button-ghost:hover { color: var(--ink-950); background: #eff4f7; }
.button-danger { color: #c13f49; background: var(--red-soft); border-color: #f6ced2; }
.button-sm { min-height: 31px; padding: 0 10px; }
.icon-only { width: 37px; padding: 0; }

.surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.surface-header { min-height: 48px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.surface-title { margin: 0; font: 700 15px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: -.15px; }
.surface-subtitle { color: var(--ink-600); font-size: 11px; }
.surface-link { color: var(--teal-dark); border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; }

.grid { display: grid; gap: 15px; }
.grid-2 { grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack { display: grid; gap: 15px; }

.status-strip { margin-bottom: 15px; padding: 11px 14px; display: flex; align-items: center; gap: 10px; color: #47666b; background: #eff9f7; border: 1px solid #d9efeb; border-radius: 9px; font-size: 12px; }
.status-strip svg { width: 16px; color: var(--teal); }
.status-strip strong { color: var(--ink-800); }
.status-strip .spacer { flex: 1; }

.overview-list { padding: 0 16px; }
.overview-row { min-height: 80px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid var(--line); cursor: pointer; }
.overview-row:last-child { border-bottom: 0; }
.overview-row:hover .overview-main strong { color: var(--teal-dark); }
.overview-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: none; border-radius: 50%; }
.overview-icon svg { width: 21px; height: 21px; }
.tone-blue { color: var(--blue); background: var(--blue-soft); }
.tone-purple { color: var(--purple); background: var(--purple-soft); }
.tone-teal { color: var(--teal-dark); background: var(--teal-soft); }
.tone-orange { color: #d67a00; background: var(--orange-soft); }
.tone-red { color: var(--red); background: var(--red-soft); }
.overview-main { min-width: 0; flex: 1; display: grid; gap: 2px; }
.overview-main strong { font: 700 14px "Plus Jakarta Sans", sans-serif; transition: color var(--transition); }
.overview-main span { color: var(--ink-600); font-size: 12px; }
.overview-value { font: 800 24px "Plus Jakarta Sans", sans-serif; }
.row-chevron { color: #9cabc4; }

.focus-list { padding: 5px 16px; }
.focus-row { min-height: 77px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); cursor: pointer; }
.focus-row:last-child { border-bottom: 0; }
.focus-row:hover strong { color: var(--teal-dark); }
.focus-row .overview-icon { width: 42px; height: 42px; }
.focus-row strong { min-width: 0; flex: 1; font-size: 13px; font-weight: 600; transition: color var(--transition); }

.activity-list { padding: 3px 17px; }
.activity-row { min-height: 42px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid #edf2f7; color: var(--ink-800); font-size: 12px; }
.activity-row:last-child { border: 0; }
.activity-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--teal); }
.activity-row time { margin-left: auto; color: var(--ink-500); white-space: nowrap; }

.task-list { padding: 3px 12px; }
.task-row { min-height: 54px; display: grid; grid-template-columns: 18px 30px minmax(180px, 1fr) 125px 115px 95px 32px; align-items: center; gap: 8px; padding: 5px 7px; border-bottom: 1px solid #edf2f7; border-radius: 7px; cursor: pointer; }

/* Bugün ekranı (bkz. docs/SPEC.md §5) */
.today-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; align-items: start; gap: 18px; }
.today-group { margin-bottom: 18px; }
.today-group-head { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.today-group-head h2 { display: flex; align-items: center; gap: 8px; font: 700 15px "Plus Jakarta Sans", sans-serif; }
.today-group-dot { width: 9px; height: 9px; border-radius: 50%; }
.today-group-dot.overdue { background: var(--red); }
.today-group-dot.today { background: var(--teal); }
.task-row-select { display: flex; align-items: center; gap: 2px; }
.task-row-select input { margin-left: 6px; }
.task-row-select .task-row { flex: 1; }
@media (max-width: 980px) { .today-layout { grid-template-columns: 1fr; } }

/* Yaklaşan ekranı (bkz. docs/SPEC.md §5) */
.week-strip { display: flex; align-items: stretch; gap: 6px; margin-bottom: 20px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.week-strip-day { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 2px; padding: 8px 2px; border-radius: 8px; color: var(--ink-600); text-decoration: none; font-size: 10px; text-align: center; }
.week-strip-day:hover { background: #f0f5f5; }
.week-strip-day strong { font: 800 15px "Plus Jakarta Sans", sans-serif; color: var(--ink-950); }
.week-strip-day small { color: var(--teal-dark); font-weight: 700; }
.week-strip-day.is-today { background: var(--teal-soft); }
.week-strip-day.is-today strong { color: var(--teal-dark); }
.upcoming-day-group { margin-bottom: 20px; scroll-margin-top: 80px; }
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: #f8fbfc; }
.drag-handle { display: inline-grid; place-items: center; color: #aab5c5; cursor: grab; opacity: 0; transition: opacity var(--transition); }
.task-row:hover .drag-handle, .editable-stage:hover .drag-handle { opacity: 1; }
.drag-handle:active { cursor: grabbing; }
.task-title { min-width: 0; }
.task-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.task-title small { color: var(--ink-500); font-size: 11px; }
.check-button { width: 20px; height: 20px; display: grid; place-items: center; color: transparent; background: white; border: 1.5px solid #adb9cb; border-radius: 50%; cursor: pointer; }
.check-button:hover { border-color: var(--teal); }
.check-button.checked { color: white; background: var(--teal); border-color: var(--teal); }
.check-button svg { width: 12px; height: 12px; }
.meta-cell { color: var(--ink-600); font-size: 11px; }
.meta-cell.user { display: flex; align-items: center; gap: 7px; color: var(--ink-800); }
.priority { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-600); font-size: 11px; }
.priority::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.priority-urgent::before { background: #a3222b; }
.priority-high::before { background: var(--red); }
.priority-medium::before { background: var(--orange); }
.priority-low::before { background: #4d83fa; }
.due.overdue { color: #cc4751; font-weight: 600; }
.due.today { color: var(--teal-dark); font-weight: 600; }

.toolbar { margin-bottom: 14px; padding: 8px; display: flex; align-items: center; gap: 8px; background: white; border: 1px solid var(--line); border-radius: 10px; }
.segmented { display: inline-flex; align-items: center; padding: 3px; background: #f2f6f8; border-radius: 8px; }
.segment { height: 30px; min-width: 72px; padding: 0 11px; color: var(--ink-600); border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; }
.segment:hover { color: var(--ink-950); }
.segment.active { color: var(--teal-dark); background: white; box-shadow: 0 1px 5px rgba(24,43,77,.09); }
.toolbar-spacer { flex: 1; }
.search-field { position: relative; min-width: 220px; }
.search-field svg { position: absolute; top: 50%; left: 10px; width: 16px; color: #8b98b1; transform: translateY(-50%); }
.search-field input { width: 100%; height: 34px; padding: 0 11px 0 34px; color: var(--ink-950); background: white; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 12px; }
.search-field input::placeholder { color: #a2aec2; }
.search-field input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,170,154,.11); }
.select-field { height: 34px; padding: 0 30px 0 10px; color: var(--ink-800); background: white; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 12px; cursor: pointer; }
.completed-filter { height: 34px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; color: var(--ink-600); background: transparent; border: 1px solid var(--line-strong); border-radius: 7px; cursor: pointer; white-space: nowrap; font-size: 10px; font-weight: 650; }
.completed-filter:hover { color: var(--ink-950); border-color: #9fb5c8; background: rgba(127,145,160,.06); }
.completed-filter.active { color: var(--teal-dark); background: var(--teal-soft); border-color: #9edbd4; }
.completed-filter-box { width: 15px; height: 15px; display: grid; place-items: center; color: white; border: 1px solid currentColor; border-radius: 4px; }
.completed-filter.active .completed-filter-box { background: var(--teal); border-color: var(--teal); }

.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 11px; align-items: start; overflow-x: auto; padding-bottom: 5px; }
.kanban-column { min-width: 220px; background: #eef4f6; border: 1px solid #dbe6ea; border-radius: 10px; }
.kanban-head { height: 45px; padding: 0 11px; display: flex; align-items: center; gap: 8px; }
.kanban-dot { width: 8px; height: 8px; border-radius: 50%; }
.kanban-head strong { flex: 1; font: 700 12px "Plus Jakarta Sans", sans-serif; }
.count-pill { min-width: 22px; height: 20px; display: grid; place-items: center; padding: 0 6px; color: var(--ink-600); background: #dfe9ec; border-radius: 10px; font-size: 10px; font-weight: 700; }
.kanban-body { min-height: 410px; padding: 0 7px 8px; display: grid; align-content: start; gap: 7px; }
.task-card { padding: 11px; background: white; border: 1px solid #dde5ec; border-radius: 8px; box-shadow: 0 1px 2px rgba(18,35,62,.035); cursor: pointer; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.task-card { position: relative; }
.card-drag-handle { position: absolute; top: 8px; right: 7px; display: grid; place-items: center; color: #a8b3c3; opacity: 0; cursor: grab; }
.task-card:hover .card-drag-handle { opacity: 1; }
.task-card.dragging, .task-row.dragging { opacity: .38; transform: scale(.98); }
.drag-over { box-shadow: inset 0 0 0 2px var(--teal) !important; background: rgba(14,170,154,.07) !important; }
.kanban-empty { min-height: 72px; display: grid; place-items: center; color: var(--ink-500); border: 1px dashed #c8d5de; border-radius: 8px; font-size: 10px; }
.kanban-add-task { width: 100%; min-height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 9px; color: var(--ink-600); border: 0; border-radius: 7px; background: transparent; cursor: pointer; font-size: 11px; }
.kanban-add-task:hover { color: var(--teal-dark); background: rgba(14,170,154,.08); }
.task-card:hover { transform: translateY(-1px); border-color: #a9c4ce; box-shadow: 0 5px 14px rgba(31,59,80,.07); }
.task-card-title { margin: 0 0 9px; color: var(--ink-950); font-size: 12px; font-weight: 600; line-height: 1.4; }
.task-card-meta { display: flex; align-items: center; gap: 8px; color: var(--ink-500); font-size: 10px; }
.task-card-meta .due { margin-left: auto; }
.account-chip { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-600); }
.platform-mark { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; color: white; background: #ec4899; font-size: 9px; font-weight: 800; }
.platform-mark.tiktok { background: #111827; }
.platform-mark.youtube { background: #ef4444; }
.task-card-foot { margin-top: 10px; display: flex; align-items: center; }
.type-chip, .status-chip, .permission-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 10px; font-weight: 600; }
.type-chip { color: #50617c; background: #eef2f7; }
.status-chip.ready { color: #53627b; background: #edf1f5; }
.status-chip.doing { color: #2362ad; background: #e8f1ff; }
.status-chip.review { color: #a56600; background: #fff2d4; }
.status-chip.done { color: #08785a; background: #e5f7f0; }

.week-board { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: white; }
.day-column { min-width: 150px; min-height: 480px; padding: 10px 8px; border-right: 1px solid var(--line); }
.day-column:last-child { border-right: 0; }
.day-head { height: 55px; padding: 0 2px 8px; display: grid; grid-template-columns: 1fr auto; align-content: start; border-bottom: 1px dashed #cedae6; }
.day-head strong { font: 700 12px "Plus Jakarta Sans", sans-serif; }
.day-head small { color: var(--ink-600); font-size: 11px; }
.day-count { grid-row: 1 / span 2; grid-column: 2; min-width: 21px; height: 21px; display: grid; place-items: center; color: #344168; background: #edf2f7; border-radius: 50%; font-size: 10px; font-weight: 700; }
.day-column.today-col { background: linear-gradient(180deg, #f1fbf9, #fff 25%); }
.day-column.today-col .day-head strong { color: var(--teal-dark); }
.day-tasks { padding-top: 8px; display: grid; gap: 7px; }
.week-card { padding: 9px; border: 1px solid #dfe6ed; border-radius: 7px; background: white; cursor: pointer; }
.week-card:hover { border-color: #99c8c3; }
.week-card strong { min-height: 34px; display: block; margin-bottom: 8px; font-size: 11px; line-height: 1.45; }
.week-card-foot { display: flex; align-items: center; gap: 5px; }
.week-card-foot .priority { margin-left: auto; }
.collapsed-section { min-height: 46px; margin-top: 13px; padding: 0 14px; display: flex; align-items: center; gap: 8px; background: white; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-800); cursor: pointer; }
.collapsed-section strong { font-size: 12px; }

.month-grid { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); overflow-x: auto; background: white; border: 1px solid var(--line); border-radius: 10px; }
.month-label { min-width: 110px; height: 34px; display: grid; place-items: center; color: var(--ink-600); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.month-cell { min-width: 110px; min-height: 112px; padding: 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.month-cell:nth-child(7n) { border-right: 0; }
.month-cell.muted { background: #f8fafb; color: #9aa7ba; }
.month-cell.today-cell { box-shadow: inset 0 0 0 2px rgba(14,170,154,.55); }
.month-date { font-size: 10px; font-weight: 700; }
.month-task { margin-top: 5px; padding: 4px 6px; overflow: hidden; color: #34566b; background: #e9f5f4; border-radius: 5px; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.more-tasks { margin-top: 4px; color: var(--teal-dark); font-size: 9px; font-weight: 700; cursor: pointer; }

.patient-layout { display: grid; grid-template-columns: 285px minmax(0, 1fr); gap: 14px; }
.patient-list-panel { overflow: hidden; }
.patient-search { padding: 10px; border-bottom: 1px solid var(--line); }
.patient-result-count { display: block; margin: 7px 2px 0; color: var(--ink-500); font-size: 10px; font-weight: 650; }
.patient-list { max-height: calc(100vh - 240px); overflow-x: hidden; overflow-y: auto; }
.patient-item { width: 100%; min-height: 66px; padding: 9px 11px; display: flex; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid #edf2f6; background: white; cursor: pointer; text-align: left; }
.patient-item:hover { position: relative; z-index: 1; background: #f8fbfb; box-shadow: 0 7px 18px rgba(24,43,77,.08); transform: translateX(2px); }
.patient-item:active { transform: translateX(2px) scale(.99); }
.patient-item.active { background: var(--teal-soft); box-shadow: inset 3px 0 var(--teal); }
.patient-avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: none; color: var(--teal-dark); background: #e5f4f2; border-radius: 10px; font-weight: 700; }
.patient-item-copy { min-width: 0; flex: 1; display: grid; }
.patient-item-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.patient-item-copy small { color: var(--ink-500); font-size: 10px; }
.patient-item-copy em { margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; color: var(--teal-dark); font-size: 9px; font-style: normal; font-weight: 700; }
.patient-alert { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }

.patient-detail { min-width: 0; }
.patient-summary { padding: 15px 17px; display: flex; align-items: center; gap: 14px; }
.patient-summary .patient-avatar { width: 48px; height: 48px; border-radius: 13px; font-size: 16px; }
.patient-summary-main { min-width: 0; flex: 1; }
.patient-summary-main h2 { margin: 0; font: 700 17px "Plus Jakarta Sans", sans-serif; }
.patient-summary-main p { margin: 3px 0 0; color: var(--ink-600); font-size: 11px; }
.case-select { min-width: 180px; }
.case-select label { display: block; margin-bottom: 3px; color: var(--ink-500); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.case-select select { width: 100%; }
.tabs { min-height: 43px; padding: 0 14px; display: flex; align-items: end; gap: 18px; overflow-x: auto; border-top: 1px solid var(--line); }
.tab { height: 43px; padding: 0 2px; color: var(--ink-600); border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tab:hover { color: var(--ink-950); }
.tab.active { color: var(--teal-dark); border-bottom-color: var(--teal); }
.tab-panel { padding: 15px; }

.photo-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.stage-tabs { display: flex; flex: 1; gap: 5px; overflow-x: auto; }
.stage-tab { height: 31px; padding: 0 10px; color: var(--ink-600); background: white; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 11px; font-weight: 600; white-space: nowrap; }
.stage-tab.active { color: var(--teal-dark); background: var(--teal-soft); border-color: #9edbd4; }
.stage-tab span { margin-left: 4px; color: var(--ink-500); }
.stage-tab-add { display: inline-flex; align-items: center; gap: 5px; color: var(--teal-dark); border-style: dashed; }
.photo-gallery-head { margin-bottom: 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.photo-gallery-head h3 { margin: 0; font: 750 13px "Plus Jakarta Sans",sans-serif; }
.photo-gallery-head p { margin: 3px 0 0; color: var(--ink-500); font-size: 9px; }
.photo-gallery-actions { display: flex; align-items: center; gap: 7px; }
.photo-stage-tabs { margin-bottom: 13px; padding-bottom: 3px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(175px,1fr)); gap: 11px; }
.photo-tile { min-width: 0; overflow: hidden; padding: 0; color: var(--ink-950); background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); cursor: pointer; text-align: left; transition: transform var(--transition),border-color var(--transition),box-shadow var(--transition); }
.photo-tile:hover { transform: translateY(-2px); border-color: #a9cbd0; box-shadow: 0 8px 22px rgba(20,50,72,.11); }
.photo-preview { position: relative; aspect-ratio: 4/3; display: block; overflow: hidden; background: linear-gradient(145deg,#e8f3f2,#d4e6e7); }
.photo-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.photo-placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 7px; color: #6f929a; background: radial-gradient(circle at 50% 42%,rgba(255,255,255,.85),transparent 38%),linear-gradient(145deg,#e6f1f0,#c9dfe0); }
.photo-placeholder b { font-size: 9px; font-weight: 700; }
.photo-stage-badge { position: absolute; top: 8px; left: 8px; padding: 3px 7px; color: #275861; background: rgba(255,255,255,.9); border-radius: 10px; box-shadow: 0 2px 8px rgba(16,46,63,.08); font-size: 8px; font-weight: 750; }
.photo-caption { min-height: 51px; padding: 9px 10px; display: grid; gap: 2px; }
.photo-caption strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.photo-caption small { overflow: hidden; color: var(--ink-500); text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.compare-card { margin-top: 14px; overflow: hidden; }
.compare-wrap { position: relative; height: 230px; overflow: hidden; background: #dce7e8; }
.compare-before, .compare-after { position: absolute; inset: 0; display: grid; place-items: center; color: #244651; font: 800 18px "Plus Jakarta Sans", sans-serif; }
.compare-before { background: radial-gradient(circle, #fafcfc 0 17%, #bcd1d4 18% 37%, #8eaaae 38% 100%); }
.compare-after { clip-path: inset(0 0 0 50%); background: radial-gradient(circle, #fff 0 18%, #d6eeeb 19% 38%, #88c8c2 39% 100%); color: #086e66; }
.compare-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: white; box-shadow: 0 0 0 1px rgba(0,0,0,.08); pointer-events: none; }
.compare-knob { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; display: grid; place-items: center; color: var(--teal-dark); background: white; border-radius: 50%; box-shadow: 0 3px 14px rgba(0,0,0,.19); transform: translate(-50%,-50%); pointer-events: none; }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }

.shot-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.progress-ring { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--teal) var(--progress), #e2eeee 0); position: relative; }
.progress-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: white; }
.progress-ring strong { position: relative; z-index: 1; font-size: 10px; }
.shot-summary-copy { flex: 1; }
.shot-summary-copy strong { display: block; font: 700 14px "Plus Jakarta Sans", sans-serif; }
.shot-summary-copy span { color: var(--ink-600); font-size: 11px; }
.shot-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.shot-group { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.shot-group h3 { margin: 0; padding: 10px 12px; background: #f7fafb; border-bottom: 1px solid var(--line); font-size: 11px; }
.shot-item { min-height: 41px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #edf2f6; }
.shot-item:last-child { border-bottom: 0; }
.shot-item label { flex: 1; cursor: pointer; font-size: 11px; }
.native-check { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }
.item-menu { width: 28px; height: 28px; color: var(--ink-500); border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.item-menu:hover { color: var(--ink-950); background: #edf3f5; }

.permission-status { padding: 14px; display: flex; align-items: center; gap: 13px; border: 1px solid #bde3d9; border-radius: 9px; background: #f1fbf8; }
.permission-status-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--green); background: white; border-radius: 10px; box-shadow: var(--shadow-sm); }
.permission-status-copy { flex: 1; }
.permission-status-copy strong { display: block; color: #087558; }
.permission-status-copy span { color: #607a76; font-size: 11px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.detail-block { padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.detail-block label { display: block; margin-bottom: 4px; color: var(--ink-500); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.detail-block strong { font-size: 11px; font-weight: 600; }

.template-grid { display: grid; grid-template-columns: repeat(3, minmax(220px,1fr)); gap: 12px; }
.template-card { padding: 14px; background: white; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: all var(--transition); }
.template-card:hover { border-color: #9dc7c3; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(40,76,88,.07); }
.template-card-head { display: flex; align-items: flex-start; gap: 10px; }
.template-card-icon { width: 35px; height: 35px; display: grid; place-items: center; color: var(--teal-dark); background: var(--teal-soft); border-radius: 9px; }
.template-card-title { min-width: 0; flex: 1; }
.template-card-title h3 { margin: 0; font-size: 12px; }
.template-card-title p { margin: 3px 0 0; color: var(--ink-500); font-size: 10px; }
.template-card-stats { margin-top: 15px; display: flex; gap: 16px; }
.template-card-stat { display: grid; }
.template-card-stat strong { font: 700 15px "Plus Jakarta Sans", sans-serif; }
.template-card-stat span { color: var(--ink-500); font-size: 9px; }
.template-card-foot { margin-top: 12px; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #edf2f6; color: var(--ink-500); font-size: 10px; }
.template-stage-preview { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 5px; }
.template-stage-preview span { height: 23px; display: inline-flex; align-items: center; padding: 0 8px; color: #476277; background: #eef4f7; border-radius: 12px; font-size: 9px; }
.template-add-stage { margin-top: 9px; display: inline-flex; align-items: center; gap: 5px; padding: 0; color: var(--teal-dark); background: transparent; border: 0; cursor: pointer; font-size: 10px; font-weight: 700; }

.report-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.metric-card { padding: 14px; background: white; border: 1px solid var(--line); border-radius: 10px; }
.metric-card label { display: block; color: var(--ink-600); font-size: 10px; }
.metric-card strong { display: block; margin: 5px 0 2px; font: 800 23px "Plus Jakarta Sans", sans-serif; }
.metric-card small { color: var(--ink-500); font-size: 9px; }
.report-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr); gap: 14px; }
.bar-chart { height: 210px; padding: 19px 17px 12px; display: flex; align-items: flex-end; gap: 14px; }
.bar-group { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; }
.bar-value { color: var(--ink-600); font-size: 9px; font-weight: 700; }
.bar { width: min(34px,70%); min-height: 5px; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #23bbaa, #0b8f85); }
.bar-label { color: var(--ink-600); font-size: 9px; }
.bar-chart.is-dense { gap: 4px; padding-inline: 12px; }
.bar-chart.is-dense .bar { width: 100%; }
.bar-chart.is-dense .bar-label { white-space: nowrap; }
.bar.is-zero { background: var(--line-strong); }
.type-bars { padding: 13px; display: grid; gap: 9px; }
.type-bar-row { display: grid; grid-template-columns: minmax(80px,auto) minmax(0,1fr) 24px; align-items: center; gap: 9px; font-size: 11px; color: var(--ink-700, var(--ink-600)); }
.type-bar-track { height: 8px; background: #edf2f6; border-radius: 4px; overflow: hidden; }
.type-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #23bbaa, #0b8f85); border-radius: 4px; }
.type-bar-row strong { text-align: right; }
.report-rules { padding: 0 13px 13px; display: grid; gap: 9px; border-top: 1px solid #edf2f6; padding-top: 13px; margin: 0; }
.toolbar { flex-wrap: wrap; }
.report-table { width: 100%; border-collapse: collapse; }
.report-table th, .report-table td { padding: 10px 13px; border-bottom: 1px solid #edf2f6; text-align: left; }
.report-table th { color: var(--ink-500); background: #f9fbfc; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.report-table td { font-size: 11px; }
.report-table tr:last-child td { border-bottom: 0; }
.report-table tbody tr { cursor: pointer; }
.report-table tbody tr:hover { background: #f8fbfc; }

.settings-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 14px; }
.settings-nav { padding: 7px; height: max-content; }
.settings-nav button { width: 100%; height: 37px; padding: 0 10px; display: flex; align-items: center; gap: 8px; color: var(--ink-600); border: 0; border-radius: 7px; background: transparent; cursor: pointer; text-align: left; font-size: 11px; }
.settings-nav button.active { color: var(--teal-dark); background: var(--teal-soft); font-weight: 700; }
.settings-panel { padding: 16px; }
.settings-section-head { margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-section-head h2 { margin: 0; font: 700 16px "Plus Jakarta Sans", sans-serif; }
.settings-section-head p { margin: 3px 0 0; color: var(--ink-600); font-size: 11px; }
.billing-choice { display: grid; grid-template-columns: repeat(2,1fr); gap: 4px; margin-bottom: 14px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #f5f9f9; }
.billing-choice button { min-height: 36px; border: 0; border-radius: 7px; color: var(--ink-600); background: transparent; cursor: pointer; font-size: 10px; font-weight: 700; }
.billing-choice button.active { color: white; background: var(--teal-dark); }
.billing-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; border-radius: 13px; color: white; background: linear-gradient(135deg,#0b5360,#07333f); }
.billing-plan-head > div { display: grid; gap: 4px; }
.billing-plan-head > div:last-child { text-align: right; }
.billing-plan-head span, .billing-plan-head small { color: #a9c9cd; font-size: 9px; }
.billing-plan-head strong { font: 800 22px "Plus Jakarta Sans",sans-serif; }
.billing-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 14px; }
.billing-metrics article { padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: #fbfdfd; }
.billing-metrics span { color: var(--ink-600); font-size: 9px; }
.billing-metrics strong { display: block; margin: 6px 0 3px; font: 800 19px "Plus Jakarta Sans",sans-serif; }
.billing-metrics small { color: var(--ink-500); font-size: 9px; }
.billing-addon-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 14px; }
.billing-addon-grid article { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; }
.billing-addon-grid span { color: var(--teal-dark); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.billing-addon-grid strong { display: block; margin-top: 5px; font-size: 13px; }
.billing-addon-grid p { max-width: 250px; margin: 5px 0 0; color: var(--ink-600); font-size: 9px; line-height: 1.5; }
.billing-addon-grid .button { flex: 0 0 auto; }
.billing-disclaimer { margin: 14px 0 0; padding: 11px 13px; border-radius: 9px; color: var(--ink-600); background: var(--teal-soft); font-size: 9px; line-height: 1.6; }
.member-row { min-height: 57px; display: grid; grid-template-columns: minmax(170px,1fr) 150px 115px 32px; align-items: center; gap: 10px; border-bottom: 1px solid #edf2f6; }
.member-info { display: flex; align-items: center; gap: 9px; }
.member-info span { display: grid; }
.member-info strong { font-size: 11px; }
.member-info small { color: var(--ink-500); font-size: 9px; }

.empty-state { min-height: 260px; padding: 30px; display: grid; place-items: center; text-align: center; }
.empty-state-inner { max-width: 340px; }
.empty-icon { width: 54px; height: 54px; margin: 0 auto 12px; display: grid; place-items: center; color: var(--teal-dark); background: var(--teal-soft); border-radius: 15px; }
.empty-state h3 { margin: 0; font: 700 15px "Plus Jakarta Sans", sans-serif; }
.empty-state p { margin: 6px 0 14px; color: var(--ink-600); font-size: 11px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(6, 25, 42, .48); backdrop-filter: blur(3px); animation: fadeIn 150ms ease; }
@keyframes fadeIn { from { opacity: 0; } }
.modal { width: min(720px,100%); max-height: min(820px, calc(100vh - 40px)); display: flex; flex-direction: column; overflow: hidden; background: white; border-radius: 14px; box-shadow: var(--shadow-md); animation: modalIn 190ms ease; }
@keyframes modalIn { from { opacity: .3; transform: scale(.98) translateY(6px); } }
.modal.modal-sm { width: min(470px,100%); }
.modal.modal-lg { width: min(900px,100%); }
.modal-header { min-height: 55px; padding: 0 17px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.modal-header h2 { min-width: 0; flex: 1; margin: 0; font: 700 15px "Plus Jakarta Sans", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-close { color: var(--ink-500); }
.modal-close:hover { color: var(--ink-950); background: #f0f4f6; }
.modal-body { min-height: 0; overflow-y: auto; padding: 17px; }
.modal-footer { min-height: 56px; padding: 9px 17px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); background: #fbfcfd; }
.task-group-modal { width: min(640px,100%); }
.task-group-modal .modal-header { min-height: 64px; }
.task-group-modal .modal-header > div { min-width: 0; flex: 1; }
.task-group-modal .modal-header h2 { margin: 0; }
.task-group-modal .modal-header p { margin: 3px 0 0; color: var(--ink-500); font-size: 10px; }
.task-group-list { min-height: 120px; max-height: min(520px,calc(100vh - 190px)); padding: 10px; overflow-y: auto; background: #f7fafc; }
.task-group-card { width: 100%; min-height: 78px; margin-bottom: 8px; padding: 11px 12px; display: grid; grid-template-columns: 22px minmax(0,1fr) auto 22px; align-items: center; gap: 10px; color: var(--ink-950); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 2px 7px rgba(24,43,77,.045); cursor: pointer; text-align: left; }
.task-group-card:last-child { margin-bottom: 0; }
.task-group-card:hover { border-color: #a9cbd0; box-shadow: 0 8px 20px rgba(20,50,72,.09); transform: translateY(-1px); }
.task-group-check { width: 20px; height: 20px; display: grid; place-items: center; color: transparent; border: 1px solid #aabbd0; border-radius: 50%; }
.task-group-check.checked { color: white; background: var(--green); border-color: var(--green); }
.task-group-copy { min-width: 0; display: grid; gap: 3px; }
.task-group-copy > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.task-group-copy > small { overflow: hidden; color: var(--ink-600); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.task-group-meta { display: flex; flex-wrap: wrap; gap: 9px; color: var(--ink-500); font-size: 9px; }
.task-group-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.task-group-meta .overdue { color: var(--red); }
.task-group-open { color: var(--ink-500); }
.task-group-hint { margin-right: auto; color: var(--ink-500); font-size: 9px; }
.task-attachment { min-height: 40px; padding: 7px 0; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #edf2f6; }
.task-attachment > span { color: var(--teal-dark); }
.task-attachment > div { min-width: 0; flex: 1; display: grid; }
.task-attachment strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.task-attachment small { color: var(--ink-500); font-size: 8px; }
.task-attachment button { width: 27px; height: 27px; display: grid; place-items: center; color: var(--ink-500); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.task-attachment button:hover { color: var(--red); background: var(--red-soft); }
.shot-item label small { margin-top: 2px; display: block; color: var(--ink-500); font-size: 8px; }
.shot-item.is-muted { opacity: .55; }
.task-modal-grid { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: 18px; }
.task-modal-main { min-width: 0; }
.modal-task-title { display: flex; align-items: flex-start; gap: 10px; }
.modal-task-title h3 { margin: 0; font-size: 16px; line-height: 1.4; }
.modal-task-title .check-button { margin-top: 2px; flex: none; }
.task-description { margin: 15px 0; padding: 11px; min-height: 66px; color: var(--ink-600); background: #f7f9fb; border: 1px solid #edf1f5; border-radius: 8px; font-size: 11px; }
.section-mini-title { margin: 16px 0 8px; color: var(--ink-800); font-size: 11px; font-weight: 700; }
.subtask-row { min-height: 35px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #edf2f6; font-size: 11px; }
.comment { padding: 10px 0; display: flex; align-items: flex-start; gap: 9px; border-bottom: 1px solid #edf2f6; }
.comment-body { min-width: 0; flex: 1; }
.comment-head { display: flex; justify-content: space-between; gap: 10px; }
.comment-head strong { font-size: 10px; }
.comment-head time { color: var(--ink-500); font-size: 9px; }
.comment-body p { margin: 3px 0 0; color: var(--ink-600); font-size: 11px; overflow-wrap: anywhere; }
.comment-body a { color: var(--blue); }
.comment-box { margin-top: 9px; }
.comment-box textarea { width: 100%; min-height: 65px; resize: vertical; padding: 9px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 11px; }
.comment-actions { margin-top: 6px; display: flex; justify-content: flex-end; }
.task-properties { display: grid; align-content: start; gap: 8px; }
.property { padding: 9px; background: #f8fafb; border: 1px solid #edf1f4; border-radius: 8px; }
.property label { display: block; margin-bottom: 4px; color: var(--ink-500); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.property select, .property input { width: 100%; height: 30px; padding: 0 6px; color: var(--ink-800); background: white; border: 1px solid var(--line); border-radius: 6px; font-size: 10px; }
.history-toggle { width: 100%; height: 34px; display: flex; align-items: center; justify-content: space-between; color: var(--ink-600); border: 0; background: transparent; cursor: pointer; font-size: 10px; }
.history-list { display: none; padding: 7px 0; }
.history-list.open { display: grid; gap: 7px; }
.history-item { padding-left: 11px; color: var(--ink-500); border-left: 2px solid #dce5ec; font-size: 9px; }

.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.form-field { display: grid; gap: 5px; }
.form-field.full { grid-column: 1/-1; }
.form-field label { color: var(--ink-800); font-size: 10px; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 0 9px; color: var(--ink-950); background: white; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 11px; }
.form-field input, .form-field select { height: 36px; }
.form-field textarea { min-height: 82px; padding-top: 9px; resize: vertical; }
.form-hint { color: var(--ink-500); font-size: 9px; }

.lightbox { width: min(840px,100%); background: #0b1c27; }
.lightbox .modal-header { color: white; border-color: rgba(255,255,255,.1); }
.lightbox .modal-body { min-height: 480px; display: grid; place-items: center; background: radial-gradient(circle, #dfeceb 0 16%, #aac7c8 17% 38%, #6f9298 39% 100%); }
.lightbox .modal-close { color: white; }

.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: grid; gap: 8px; pointer-events: none; }
.toast { min-width: 280px; max-width: 380px; padding: 11px 13px; display: flex; align-items: center; gap: 9px; color: white; background: #122f3b; border-radius: 9px; box-shadow: 0 12px 28px rgba(4, 32, 44, .24); animation: toastIn 240ms ease; pointer-events: auto; font-size: 11px; }
.toast.success .toast-icon { color: #69e5cf; }
.toast.error .toast-icon { color: #ff969c; }
@keyframes toastIn { from { opacity: 0; transform: translateY(9px); } }
.toast-message { flex: 1; }

.popover { position: fixed; z-index: 120; min-width: 210px; padding: 6px; background: white; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 14px 32px rgba(20,42,65,.15); animation: fadeIn 120ms ease; }
.popover-title { padding: 6px 8px; color: var(--ink-500); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.popover-item { width: 100%; min-height: 35px; padding: 0 9px; display: flex; align-items: center; gap: 8px; color: var(--ink-800); border: 0; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; font-size: 11px; }
.popover-item:hover { background: #f1f6f7; }
.popover-item.danger { color: #c7464f; }

@media (min-width: 901px) {
  .app-shell.sidebar-mini:not(.sidebar-peek) .sidebar { width: var(--sidebar-collapsed); }
  .app-shell.sidebar-mini:not(.sidebar-peek) .brand { flex: none; }
  .app-shell.sidebar-mini:not(.sidebar-peek) .brand-name,
  .app-shell.sidebar-mini:not(.sidebar-peek) .workspace-copy,
  .app-shell.sidebar-mini:not(.sidebar-peek) .workspace-chevron,
  .app-shell.sidebar-mini:not(.sidebar-peek) .nav-label,
  .app-shell.sidebar-mini:not(.sidebar-peek) .nav-count,
  .app-shell.sidebar-mini:not(.sidebar-peek) .sidebar-label,
  .app-shell.sidebar-mini:not(.sidebar-peek) .account-title,
  .app-shell.sidebar-mini:not(.sidebar-peek) .account-button .chev,
  .app-shell.sidebar-mini:not(.sidebar-peek) .project-list,
  .app-shell.sidebar-mini:not(.sidebar-peek) .root-project-list,
  .app-shell.sidebar-mini:not(.sidebar-peek) .favorite-project-list,
  .app-shell.sidebar-mini:not(.sidebar-peek) .profile-copy,
  .app-shell.sidebar-mini:not(.sidebar-peek) .profile-dots { display: none; }
  .app-shell.sidebar-mini:not(.sidebar-peek) .brand-row { justify-content: center; flex-wrap: wrap; height: 104px; padding-top: 12px; }
  .app-shell.sidebar-mini:not(.sidebar-peek) .brand { justify-content: center; padding: 4px; }
  .app-shell.sidebar-mini:not(.sidebar-peek) .sidebar-collapse { transform: rotate(180deg); }
  .app-shell.sidebar-mini:not(.sidebar-peek) .workspace-switcher { width: 48px; margin: 0 auto 8px; justify-content: center; }
  .app-shell.sidebar-mini:not(.sidebar-peek) .primary-nav { padding-inline: 9px; }
  .app-shell.sidebar-mini:not(.sidebar-peek) .nav-item { padding: 0; justify-content: center; }
  .app-shell.sidebar-mini:not(.sidebar-peek) .accounts-block { padding-inline: 9px; }
  /* Dar şeritte etiket/proje bölümü (+ düğmeleri, nokta, sayı) dağınık görünüyordu: gizle, yalnızca ayırıcı kalsın. */
  .app-shell.sidebar-mini:not(.sidebar-peek) #account-tree { display: none; }
  .app-shell.sidebar-mini:not(.sidebar-peek) .sidebar-bottom-nav { padding-inline: 9px; }
  .app-shell.sidebar-mini:not(.sidebar-peek) .sidebar-label-row { justify-content: center; }
  .app-shell.sidebar-mini:not(.sidebar-peek) .account-button { justify-content: center; padding: 0; }
  .app-shell.sidebar-mini:not(.sidebar-peek) .sidebar-footer { padding-inline: 10px; }
  .app-shell.sidebar-mini:not(.sidebar-peek) .profile-button { justify-content: center; padding: 5px 0; }
  .app-shell.sidebar-mini .app-area { margin-left: var(--sidebar-collapsed); }
}

/* Menü varsayılan olarak dar şerit; fare üzerine gelince içeriği kaydırmadan (app-area marjı sabit) üstüne açılır. */
@media (min-width: 901px) {
  .app-shell.sidebar-mini.sidebar-peek .sidebar { width: var(--sidebar-w); box-shadow: 18px 0 45px rgba(2, 33, 45, .28); }
  .app-shell.sidebar-mini.sidebar-peek .sidebar-collapse { transform: none; }
  /* Açılırken ikonlar yukarı kaymasın: logo satırı dar şeritteki yüksekliğini korur. */
  .app-shell.sidebar-mini.sidebar-peek .brand-row { height: 104px; padding-top: 12px; align-content: flex-start; }
}

.todoist-list { display: grid; gap: 13px; }
.todoist-section { overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
.todoist-section-head { min-height: 46px; padding: 0 13px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.todoist-section-head h2 { margin: 0; flex: 1; font: 700 13px "Plus Jakarta Sans",sans-serif; text-transform: capitalize; }
.todoist-section-head > span { min-width: 22px; height: 20px; display: grid; place-items: center; padding: 0 6px; color: var(--ink-600); background: #eef3f6; border-radius: 10px; font-size: 10px; font-weight: 700; }
.section-collapse { width: 25px; height: 25px; display: grid; place-items: center; padding: 0; color: var(--ink-500); border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.section-collapse:hover { background: #eef3f5; }
.section-edit { opacity: 0; transition: opacity var(--transition); }
.todoist-section-head:hover .section-edit { opacity: 1; }
.todoist-section-body { padding: 3px 10px 7px; }
.todoist-section.collapsed .todoist-section-body { display: none; }
.task-insert-line { position: relative; width: 100%; height: 7px; display: block; padding: 0; border: 0; background: transparent; cursor: pointer; }
.task-insert-line::before { content: ""; position: absolute; top: 3px; left: 0; right: 0; height: 1px; background: transparent; transition: background var(--transition); }
.task-insert-line span { position: absolute; z-index: 1; top: -7px; left: 18px; width: 18px; height: 18px; display: grid; place-items: center; color: white; background: var(--teal); border-radius: 50%; opacity: 0; transform: scale(.75); transition: all var(--transition); }
.task-insert-line:hover::before { background: var(--teal); }
.task-insert-line:hover span { opacity: 1; transform: scale(1); }
.todoist-add-task, .add-section-button { min-height: 36px; display: flex; align-items: center; gap: 7px; color: var(--ink-600); border: 0; border-radius: 7px; background: transparent; cursor: pointer; font-size: 11px; }
.todoist-add-task { width: 100%; padding: 0 44px; }
.todoist-add-task:hover, .add-section-button:hover { color: var(--teal-dark); background: rgba(14,170,154,.07); }
.add-section-button { width: max-content; padding: 0 11px; color: var(--teal-dark); font-weight: 700; }

.modal.modal-task { width: min(690px,100%); max-height: min(880px,calc(100vh - 32px)); }
.modal-title-input { min-width: 0; flex: 1; padding: 0 4px 5px; color: var(--ink-950); background: transparent; border: 0; border-bottom: 1px solid transparent; font: 700 17px/1.4 "Plus Jakarta Sans",sans-serif; }
.modal-title-input:hover { border-bottom-color: var(--line-strong); }
.modal-title-input:focus { border-bottom-color: var(--teal); }
.task-description-edit { width: 100%; min-height: 70px; margin: 12px 0; padding: 10px 12px; resize: vertical; color: var(--ink-600); background: #f7f9fb; border: 1px solid #edf1f5; border-radius: 8px; font-size: 11px; }
.task-properties-horizontal { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 3px 0 13px; }
.task-properties-horizontal .date-property { grid-column: 1/-1; }
.priority-options { display: flex; gap: 5px; }
.priority-option { flex: 1; height: 29px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; background: white; cursor: pointer; font-size: 9px; font-weight: 700; opacity: .62; }
.priority-option::before { content: ""; width: 6px; height: 6px; display: inline-block; margin-right: 5px; border-radius: 50%; }
.priority-option.priority-low { color: #2f67b8; background: #eaf2ff; }
.priority-option.priority-low::before { background: #4d83fa; }
.priority-option.priority-medium { color: #9b6500; background: #fff3d9; }
.priority-option.priority-medium::before { background: var(--orange); }
.priority-option.priority-urgent { color: #7a1319; background: #f9d9da; }
.priority-option.priority-urgent::before { background: #a3222b; }
.priority-option.priority-high { color: #b53d46; background: #ffeaec; }
.priority-option.priority-high::before { background: var(--red); }
.priority-option.selected { opacity: 1; box-shadow: inset 0 0 0 1px currentColor; }
.date-quick-row { display: flex; gap: 5px; margin-bottom: 6px; }
.date-quick-row button { height: 27px; padding: 0 9px; color: var(--teal-dark); background: var(--teal-soft); border: 0; border-radius: 6px; cursor: pointer; font-size: 9px; font-weight: 700; }
.date-quick-row button:hover { background: #cceee9; }
.linked-patient { margin-bottom: 2px; }
.modal-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.modal-section-head { min-height: 30px; display: flex; align-items: center; }
.modal-section-head h4 { margin: 0; font-size: 11px; }
.modal-section-head h4 span { margin-left: 4px; color: var(--ink-500); font-weight: 500; }
.subtask-list .surface-subtitle { display: block; padding: 7px 0; }
.subtask-row > span { min-width: 0; flex: 1; }
.subtask-delete { width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink-500); background: transparent; border: 0; border-radius: 6px; cursor: pointer; opacity: 0; }
.subtask-row:hover .subtask-delete { opacity: 1; }
.subtask-delete:hover { color: var(--red); background: var(--red-soft); }
.add-subtask-form, .add-stage-form { margin-top: 8px; min-height: 37px; display: flex; align-items: center; gap: 8px; padding: 3px 5px 3px 9px; color: var(--teal-dark); border: 1px dashed #b9d8d5; border-radius: 8px; }
.add-subtask-form input, .add-stage-form input { min-width: 0; flex: 1; height: 29px; color: var(--ink-950); background: transparent; border: 0; font-size: 11px; }
.selected-section-chip { min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 10px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 7px; font-size: 11px; font-weight: 600; }

.locked-input { height: 36px; display: flex; align-items: center; gap: 7px; padding-left: 9px; color: var(--ink-500); background: #f2f5f7; border: 1px solid var(--line); border-radius: 7px; }
.locked-input input { height: 34px; padding-left: 0; background: transparent; border: 0; font-weight: 700; }

.document-panel { margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; }
.document-panel-head { min-height: 58px; padding: 9px 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); background: #f8fafb; }
.document-panel-head > div { min-width: 0; flex: 1; }
.document-panel-head h3 { margin: 0; font-size: 11px; }
.document-panel-head p { margin: 2px 0 0; color: var(--ink-500); font-size: 9px; }
.document-list { padding: 4px 10px; }
.document-row { min-height: 48px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #edf2f6; }
.document-row:last-child { border: 0; }
.document-icon { width: 31px; height: 31px; display: grid; place-items: center; color: var(--purple); background: var(--purple-soft); border-radius: 8px; }
.document-row > button:not(.item-menu) { min-width: 0; flex: 1; display: grid; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.document-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.document-row small { color: var(--ink-500); font-size: 9px; }
.document-empty { padding: 18px; color: var(--ink-500); text-align: center; font-size: 10px; }

.editable-stage-list { display: grid; gap: 5px; }
.editable-stage { min-height: 39px; display: flex; align-items: center; gap: 8px; padding: 0 7px; border: 1px solid var(--line); border-radius: 7px; }
.editable-stage strong { min-width: 0; flex: 1; font-size: 11px; }

body.dark {
  --ink-950: #eef7f8;
  --ink-800: #d7e7ea;
  --ink-600: #9fb7bd;
  --ink-500: #779198;
  --line: #294550;
  --line-strong: #3b5964;
  --surface: #102c37;
  --canvas: #071b24;
  --teal-soft: #123e3f;
  --blue-soft: #172f4a;
  --purple-soft: #302849;
  --orange-soft: #46371c;
  --red-soft: #45272c;
  --green-soft: #163f34;
  color: var(--ink-950);
  background: var(--canvas);
}
body.dark .topbar { background: rgba(9,31,40,.93); }
body.dark #main-content { background: radial-gradient(circle at 35% 0%,rgba(27,157,151,.08),transparent 33%),var(--canvas); }
body.dark .surface, body.dark .toolbar, body.dark .task-card, body.dark .week-board, body.dark .month-grid, body.dark .modal, body.dark .popover, body.dark .patient-item, body.dark .stage-tab, body.dark .button-secondary, body.dark .priority-option { background-color: var(--surface); color: var(--ink-950); }
body.dark .task-row:hover, body.dark .patient-item:hover, body.dark .report-table tbody tr:hover { background: #153640; }
body.dark .patient-item.active, body.dark .segment.active { background: #17413f; }
body.dark .segment, body.dark .kanban-column { background: #0b232d; }
body.dark .kanban-column, body.dark .task-card, body.dark .week-card, body.dark .month-grid, body.dark .week-board { border-color: var(--line); }
body.dark .task-card, body.dark .week-card, body.dark .month-cell, body.dark .day-column { background: #102c37; }
body.dark .property, body.dark .task-description-edit, body.dark .task-description, body.dark .document-panel-head, body.dark .metric-card, body.dark .settings-nav { background: #0c2530; border-color: var(--line); }
body.dark input, body.dark select, body.dark textarea, body.dark .search-field input, body.dark .property select, body.dark .property input { color: var(--ink-950); background-color: #0a222c; border-color: var(--line-strong); }
body.dark .locked-input { background: #0a222c; }
body.dark .surface-header, body.dark .tabs, body.dark .todoist-section-head, body.dark .modal-header, body.dark .modal-footer, body.dark .modal-section, body.dark .document-panel-head { border-color: var(--line); }
body.dark .modal-footer, body.dark .report-table th, body.dark .shot-group h3 { background: #0b232d; }
body.dark .task-group-list { background: #0a2029; }
body.dark .task-group-card, body.dark .completed-filter { color: var(--ink-950); background: var(--surface); border-color: var(--line); }
body.dark .completed-filter.active { color: #8fe1d8; background: #17413f; border-color: #2a6864; }
body.dark .overview-row, body.dark .focus-row, body.dark .activity-row, body.dark .task-row, body.dark .shot-item, body.dark .member-row, body.dark .comment, body.dark .subtask-row, body.dark .document-row { border-color: #203d47; }
body.dark .template-stage-preview span, body.dark .type-chip, body.dark .count-pill, body.dark .todoist-section-head > span { color: #aac1c6; background: #1b3944; }
body.dark .theme-toggle { color: #ffd56d; background: #173440; }
body.dark .permission-status { background: #102f31 !important; }
body.dark .status-strip { color: #a7c2c2; background: #102f31; border-color: #28504d; }
body.dark .month-cell.muted { background: #091f29; }
body.dark .photo-tile { border-color: var(--line); }
body.dark .settings-nav button.active { background: #17413f; }
body.dark .popover-item:hover, body.dark .icon-button:hover, body.dark .mini-icon-button:hover { background: #1a3944; }
body.dark .task-insert-line:hover span { color: white; }

.skeleton { position: relative; overflow: hidden; background: #eaf0f3; border-radius: 6px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

@media (max-width: 1180px) {
  .grid-2, .report-layout { grid-template-columns: 1fr; }
  .focus-list { display: grid; grid-template-columns: repeat(3,1fr); }
  .focus-row { padding: 0 8px; border-bottom: 0; border-right: 1px solid var(--line); }
  .focus-row:last-child { border-right: 0; }
  .task-row { grid-template-columns: 18px 30px minmax(180px,1fr) 100px 90px 32px; }
  .task-row .priority { display: none; }
  .template-grid { grid-template-columns: repeat(2,minmax(220px,1fr)); }
  .report-summary { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
  .sidebar { width: min(286px, 86vw); transform: translateX(-103%); box-shadow: 18px 0 45px rgba(2, 33, 45, .25); }
  .app-area, .app-shell.sidebar-mini .app-area { margin-left: 0; }
  .app-shell.sidebar-mini .sidebar { width: min(286px,86vw); }
  .app-shell.sidebar-mini .brand-row { height: 65px; justify-content: initial; flex-wrap: nowrap; }
  .app-shell.sidebar-mini .brand { flex: 1; justify-content: initial; }
  .app-shell.sidebar-mini .brand-name, .app-shell.sidebar-mini .workspace-copy, .app-shell.sidebar-mini .workspace-chevron, .app-shell.sidebar-mini .nav-label, .app-shell.sidebar-mini .nav-count, .app-shell.sidebar-mini .sidebar-label, .app-shell.sidebar-mini .account-title, .app-shell.sidebar-mini .account-button .chev, .app-shell.sidebar-mini .profile-copy, .app-shell.sidebar-mini .profile-dots { display: initial; }
  .app-shell.sidebar-mini .project-list { display: none; }
  .app-shell.sidebar-mini .account-group.open .project-list { display: grid; }
  .app-shell.sidebar-mini .workspace-switcher { width: calc(100% - 24px); margin: 0 12px 8px; justify-content: initial; }
  .app-shell.sidebar-mini .primary-nav, .app-shell.sidebar-mini .accounts-block { padding-inline: 12px; }
  .app-shell.sidebar-mini .nav-item, .app-shell.sidebar-mini .account-button { padding: 0 11px; justify-content: initial; }
  .app-shell.sidebar-mini .account-button { padding: 0 7px; }
  .app-shell.sidebar-mini .sidebar-label-row { justify-content: space-between; }
  .app-shell.sidebar-mini .profile-button { justify-content: initial; padding: 5px; }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }
  .mobile-backdrop { position: fixed; inset: 0; z-index: 45; display: block; background: rgba(5,27,40,.42); }
  .mobile-menu, .mobile-close { display: inline-grid; }
  .sidebar-collapse { display: none; }
  #main-content { padding-inline: 16px; }
  .topbar { padding-inline: 14px; }
  .patient-layout, .settings-layout { grid-template-columns: 1fr; }
  .patient-list { max-height: 310px; }
  .settings-nav { display: flex; overflow-x: auto; }
  .settings-nav button { width: auto; flex: none; }
  .photo-grid { grid-template-columns: repeat(3,1fr); }
  .task-modal-grid { grid-template-columns: 1fr; }
  .task-properties { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 640px) {
  body { font-size: 13px; }
  #main-content { padding: 16px 12px 30px; }
  .topbar { height: 54px; }
  .top-actions #global-search { display: none; }
  .breadcrumbs { font-size: 11px; }
  .page-header { margin-bottom: 13px; align-items: center; }
  .page-heading h1 { font-size: 20px; }
  .page-heading p { font-size: 11px; }
  .header-actions .button span { display: none; }
  .header-actions .button { width: 37px; padding: 0; }
  .grid-3, .focus-list, .template-grid, .report-summary { grid-template-columns: 1fr; }
  .billing-plan-head, .billing-addon-grid article { align-items: flex-start; flex-direction: column; }
  .billing-plan-head > div:last-child { text-align: left; }
  .billing-metrics, .billing-addon-grid { grid-template-columns: 1fr; }
  .focus-list { padding-block: 4px; }
  .focus-row { min-height: 62px; border-right: 0; border-bottom: 1px solid var(--line); }
  .focus-row:last-child { border-bottom: 0; }
  .overview-row { min-height: 68px; }
  .overview-icon { width: 39px; height: 39px; }
  .overview-value { font-size: 20px; }
  .toolbar { align-items: stretch; flex-wrap: wrap; }
  .toolbar .segmented { flex: 1; }
  .toolbar .segment { flex: 1; min-width: 0; }
  .completed-filter { order: 2; }
  .toolbar-spacer { display: none; }
  .search-field { min-width: 0; width: 100%; order: 3; }
  .select-field { flex: 1; }
  .task-row { min-height: 62px; grid-template-columns: 15px 28px 1fr auto; }
  .task-row .meta-cell, .task-row .priority { display: none; }
  .task-row .due { display: block; }
  .task-row > svg { display: none; }
  .photo-grid { grid-template-columns: repeat(2,1fr); }
  .photo-tile { min-height: 125px; }
  .shot-groups, .detail-grid, .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .patient-summary { align-items: flex-start; flex-wrap: wrap; }
  .case-select { width: 100%; }
  .tabs { gap: 14px; }
  .photo-toolbar { align-items: stretch; flex-direction: column; }
  .photo-toolbar .button { align-self: flex-start; }
  .member-row { grid-template-columns: 1fr auto; padding: 9px 0; }
  .member-row > :nth-child(2), .member-row > :nth-child(3) { display: none; }
  .task-properties { grid-template-columns: 1fr; }
  .task-properties-horizontal { grid-template-columns: 1fr; }
  .task-properties-horizontal .date-property { grid-column: auto; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal { width: 100%; max-height: 92vh; border-radius: 15px 15px 0 0; }
  .modal.modal-sm, .modal.modal-lg { width: 100%; }
  .toast-region { right: 10px; left: 10px; bottom: 10px; }
  .toast { min-width: 0; max-width: none; width: 100%; }
  .status-strip { align-items: flex-start; }
  .status-strip .spacer, .status-strip .surface-link { display: none; }
}

/* Todoist-inspired task workspace */
.task-workspace { width: min(1720px,100%); }
.task-workspace .page-header { margin-bottom: 12px; }
.task-workspace .toolbar { position: relative; z-index: 2; margin-bottom: 18px; }
.task-workspace .segment { min-width: 76px; }

.task-board-scroll { min-height: calc(100vh - 226px); overflow-x: auto; overflow-y: hidden; padding: 0 0 12px; }
.task-board { width: max-content; min-width: 100%; min-height: 610px; display: flex; align-items: stretch; }
.board-section { width: 286px; min-width: 286px; padding: 0 5px; }
.board-section-head { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 7px; }
.board-section-head strong { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 750 12px "Plus Jakarta Sans",sans-serif; }
.board-section-head > span { color: var(--ink-500); font-size: 10px; }
.board-section-head > button, .section-more { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; color: var(--ink-500); border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.board-section-head > button:hover, .section-more:hover { color: var(--ink-950); background: rgba(128,144,160,.12); }
.board-section-head > .section-title-edit { width: auto; height: auto; display: block; padding: 6px 5px; }
.board-section-body { min-height: 540px; display: grid; align-content: start; gap: 8px; padding: 3px 7px 16px; border-radius: 9px; transition: background var(--transition), box-shadow var(--transition); }
.board-section.drag-over .board-section-body { background: rgba(232,101,94,.05); box-shadow: inset 0 0 0 1px rgba(232,101,94,.38); }
.board-task-card { position: relative; padding: 11px 11px 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 4px rgba(24,36,54,.07); cursor: pointer; transition: transform var(--transition),border-color var(--transition),box-shadow var(--transition); }
.board-task-card:hover { transform: translateY(-1px); border-color: var(--line-strong); box-shadow: 0 7px 18px rgba(24,36,54,.1); }
.board-task-card.dragging, .todoist-task-row.dragging { opacity: .38; transform: scale(.985); }
.board-card-title { display: flex; align-items: flex-start; gap: 8px; }
.board-card-title strong { min-width: 0; flex: 1; font-size: 11px; font-weight: 650; line-height: 1.42; }
.board-card-title .check-button { width: 18px; height: 18px; margin-top: 0; flex: none; }
.board-card-title .card-drag-handle { position: static; width: 16px; color: var(--ink-500); opacity: 0; }
.board-task-card:hover .card-drag-handle { opacity: 1; }
.board-task-card > p { margin: 6px 26px 0; display: -webkit-box; overflow: hidden; color: var(--ink-600); font-size: 9px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.board-card-meta { min-height: 20px; margin: 8px 0 0 26px; display: flex; align-items: center; gap: 9px; color: var(--ink-500); font-size: 9px; }
.board-card-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.board-card-meta .avatar { margin-left: auto; }
.board-card-meta .overdue { color: var(--red); }
.project-tag { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0 26px; color: var(--ink-500); font-size: 9px; font-weight: 600; }
.priority-dot { width: 8px; height: 8px; display: inline-block; flex: none; border-radius: 50%; }
.priority-dot.priority-urgent { background: #a3222b; }
.priority-dot.priority-high { background: var(--red); }
.priority-dot.priority-medium { background: var(--orange); }
.priority-dot.priority-low { background: #4d83fa; }
.board-empty { min-height: 56px; display: grid; place-items: center; color: var(--ink-500); border: 1px dashed var(--line-strong); border-radius: 8px; font-size: 9px; }
.board-add-task { width: 100%; min-height: 35px; display: flex; align-items: center; gap: 7px; padding: 0 9px; color: var(--ink-500); border: 0; border-radius: 7px; background: transparent; cursor: pointer; text-align: left; font-size: 10px; }
.board-add-task:hover { color: #d94f49; background: rgba(232,101,94,.07); }
.board-section-insert { position: relative; width: 30px; min-width: 30px; align-self: stretch; padding: 0; color: #e15a53; border: 0; background: transparent; cursor: pointer; }
.board-section-insert::before { content: ""; position: absolute; inset: 40px auto 10px 50%; width: 1px; background: transparent; transition: background var(--transition); }
.board-section-insert span { position: sticky; z-index: 1; top: 50%; display: inline-flex; width: max-content; padding: 4px 6px; color: #e15a53; background: var(--canvas); border-radius: 5px; font-size: 9px; font-weight: 750; opacity: 0; transform: translateX(-42%) rotate(-90deg); transition: opacity var(--transition); }
.board-section-insert:hover::before { background: #e15a53; }
.board-section-insert:hover span { opacity: 1; }

.todoist-list { max-width: 1050px; margin: 0 auto; display: block; }
.task-list-section { margin-bottom: 34px; }
.task-list-section-head { min-height: 37px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--line-strong); }
.task-list-section-head h2 { min-width: 0; flex: 1; margin: 0; font: 750 12px "Plus Jakarta Sans",sans-serif; }
.section-title-edit { min-width: 0; flex: 1; overflow: hidden; padding: 6px 5px; color: var(--ink-950); border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: text; text-align: left; text-overflow: ellipsis; white-space: nowrap; font: 750 12px "Plus Jakarta Sans",sans-serif; }
.section-title-edit:hover { color: var(--teal-dark); background: rgba(14,170,154,.065); border-color: rgba(14,170,154,.16); }
.section-title-input { min-width: 0; flex: 1; height: 30px; padding: 0 7px; color: var(--ink-950); background: var(--surface); border: 1px solid var(--teal); border-radius: 6px; box-shadow: 0 0 0 3px rgba(14,170,154,.12); font: 750 12px "Plus Jakarta Sans",sans-serif; }
.task-list-section-head > span { color: var(--ink-500); font-size: 10px; }
.task-list-section-head .section-more { opacity: 0; }
.task-list-section-head:hover .section-more { opacity: 1; }
.task-list-section-body { padding-left: 30px; }
.task-list-section.collapsed .task-list-section-body { display: none; }
.task-list-section.drag-over { border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(232,101,94,.45); }
.todoist-task-row { position: relative; min-height: 45px; display: grid; grid-template-columns: 16px 20px minmax(200px,1fr) 105px 95px 10px 25px; align-items: center; gap: 8px; padding: 3px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.todoist-task-row:hover { background: rgba(127,145,160,.055); }
.todoist-task-row.is-completed, .board-task-card.is-completed { opacity: .62; }
.todoist-task-row.is-completed .todoist-row-copy strong, .board-task-card.is-completed .board-card-title strong, .task-group-card.is-completed .task-group-copy > strong { text-decoration: line-through; }
.list-drag-handle { display: grid; place-items: center; color: var(--ink-500); opacity: 0; cursor: grab; touch-action: none; user-select: none; }
.todoist-task-row:hover .list-drag-handle { opacity: 1; }
.todoist-row-copy { min-width: 0; display: grid; }
.todoist-row-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; }
.todoist-row-copy small { overflow: hidden; color: var(--ink-500); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.todoist-row-label { overflow: hidden; color: var(--ink-500); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.todoist-row-date { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-500); font-size: 9px; }
.todoist-row-date.overdue { color: var(--red); }
.todoist-row-date.today { color: var(--teal-dark); }
.list-section-insert { position: relative; width: 100%; height: 18px; margin: -25px 0 8px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.list-section-insert::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: transparent; }
.list-section-insert span { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; color: #df5a54; background: var(--canvas); font-size: 9px; font-weight: 700; opacity: 0; }
.list-section-insert:hover::before { background: #df5a54; }
.list-section-insert:hover span { opacity: 1; }
.todoist-list .task-insert-line { margin-left: 0; }
.todoist-list .task-insert-line span { background: #e15a53; }
.todoist-list .task-insert-line:hover::before { background: #e15a53; }
.todoist-list .todoist-add-task { padding: 0 24px; color: var(--ink-500); }
.todoist-list .todoist-add-task:hover, .todoist-list .add-section-button:hover { color: #d94f49; background: rgba(232,101,94,.06); }
.todoist-list .add-section-button { color: #d94f49; }

.assigned-task-group { margin-top: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); }
.assigned-task-group-head { min-height: 54px; padding: 9px 13px; display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, rgba(117,133,159,.07), transparent); border-bottom: 1px solid var(--line); }
.assigned-task-group-head h2 { margin: 0; font: 750 12px "Plus Jakarta Sans",sans-serif; }
.assigned-task-group-head p { margin: 2px 0 0; color: var(--ink-500); font-size: 9px; }
.assigned-group-icon { width: 29px; height: 29px; display: grid; place-items: center; color: var(--ink-600); background: rgba(117,133,159,.1); border-radius: 8px; }
.assigned-task-group.overdue { border-color: rgba(239,92,98,.35); }
.assigned-task-group.overdue .assigned-task-group-head { background: linear-gradient(90deg, var(--red-soft), transparent); border-color: rgba(239,92,98,.2); }
.assigned-task-group.overdue .assigned-group-icon, .assigned-task-group.overdue h2 { color: var(--red); }
.assigned-task-rows { padding: 3px 12px 8px; }
.assigned-task-group.overdue .task-row { border-left: 3px solid rgba(239,92,98,.5); }

@media (prefers-reduced-motion: reduce) {
  button, [role="button"], .patient-item, .photo-tile, .task-row, .todoist-task-row, .board-task-card { transition: none !important; }
}

.task-calendar { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.task-calendar-toolbar { min-height: 46px; padding: 0 10px 0 14px; display: flex; align-items: center; gap: 5px; border-bottom: 1px solid var(--line); }
.task-calendar-toolbar > strong { font: 750 12px "Plus Jakarta Sans",sans-serif; text-transform: capitalize; }
.calendar-toolbar-spacer { flex: 1; }
.task-calendar-toolbar button { min-width: 31px; height: 30px; display: grid; place-items: center; padding: 0 9px; color: var(--ink-800); border: 1px solid var(--line); border-radius: 6px; background: transparent; cursor: pointer; font-size: 10px; font-weight: 650; }
.task-calendar-toolbar button:hover { background: rgba(127,145,160,.08); }
.task-calendar-toolbar .undated-button { margin-left: 4px; }
.undated-count { margin-left: 4px; padding: 6px 9px; color: var(--ink-500); background: rgba(127,145,160,.08); border-radius: 6px; font-size: 9px; font-weight: 700; }
.task-calendar-grid { min-width: 1040px; max-height: calc(100vh - 252px); display: grid; grid-template-columns: 60px repeat(7,minmax(140px,1fr)); overflow: auto; }
.calendar-corner, .calendar-day-head { position: sticky; top: 0; z-index: 3; min-height: 48px; background: var(--surface); border-bottom: 1px solid var(--line); }
.calendar-day-head { display: flex; align-items: center; justify-content: center; gap: 6px; border-left: 1px solid var(--line); }
.calendar-day-head span { font-size: 9px; font-weight: 650; }
.calendar-day-head strong { min-width: 23px; height: 23px; display: grid; place-items: center; border-radius: 6px; font-size: 11px; }
.calendar-day-head.today strong { color: white; background: #e15a53; }
.calendar-time-label { min-height: 74px; padding: 8px 8px 0 0; color: var(--ink-500); border-top: 1px solid var(--line); text-align: right; font-size: 9px; }
.calendar-time-label.all-day-label { min-height: 40px; padding-top: 9px; }
.calendar-all-day { min-height: 40px; padding: 3px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); cursor: cell; }
.calendar-hour-cell { min-height: 74px; padding: 3px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); cursor: cell; }
.calendar-hour-cell:hover, .calendar-all-day:hover { background: rgba(127,145,160,.045); }
.calendar-task-pill { position: relative; width: 100%; min-height: 24px; margin-bottom: 3px; padding: 3px 6px; overflow: hidden; color: var(--ink-800); background: rgba(79,143,247,.1); border: 0; border-left: 3px solid #4f8ff7; border-radius: 4px; cursor: grab; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 650; }
.calendar-task-pill.priority-border-urgent { background: rgba(163,34,43,.12); border-left-color: #a3222b; }
.calendar-task-pill.priority-border-high { background: rgba(239,92,98,.1); border-left-color: var(--red); }
.calendar-task-pill.priority-border-medium { background: rgba(245,158,11,.11); border-left-color: var(--orange); }

.modal.modal-task.todoist-task-modal { width: min(980px,calc(100% - 28px)); height: min(770px,calc(100vh - 32px)); max-height: none; border: 1px solid var(--line); border-radius: 10px; }
.task-modal-topbar { min-height: 43px; padding: 0 11px 0 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.task-breadcrumb { min-width: 0; flex: 1; display: flex; align-items: center; gap: 7px; color: var(--ink-600); font-size: 10px; }
.task-breadcrumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-breadcrumb b { color: var(--ink-500); font-weight: 400; }
.task-modal-actions { display: flex; gap: 2px; }
.task-modal-actions button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; color: var(--ink-500); border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.task-modal-actions button:hover { color: var(--ink-950); background: rgba(127,145,160,.1); }
.todoist-task-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0,1fr) 300px; overflow: hidden; }
.todoist-task-main { min-width: 0; overflow-y: auto; padding: 22px 25px 28px; }
.todoist-task-sidebar { overflow-y: auto; padding: 10px 18px 24px; background: rgba(127,145,160,.055); border-left: 1px solid var(--line); }
.todoist-task-main .modal-task-title { gap: 12px; }
.todoist-task-main .modal-title-input { padding: 0 0 5px; font-size: 18px; }
.description-editor { margin: 7px 0 8px 32px; display: flex; align-items: flex-start; gap: 8px; color: var(--ink-500); }
.description-editor > svg { margin-top: 8px; flex: none; }
.description-editor textarea { min-height: 62px; flex: 1; padding: 7px 8px; resize: vertical; color: var(--ink-600); background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 10px; }
.description-editor textarea:hover, .description-editor textarea:focus { border-color: var(--line); background: rgba(127,145,160,.04); }
.task-link-row { margin: 1px 0 5px 32px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; color: var(--teal-dark); border: 0; border-radius: 6px; background: var(--teal-soft); cursor: pointer; font-size: 10px; font-weight: 650; }
.task-detail-section { margin: 15px 0 0 32px; padding-top: 13px; border-top: 1px solid var(--line); }
.task-detail-heading { min-height: 27px; display: flex; align-items: center; gap: 7px; }
.task-detail-heading h3 { margin: 0; font-size: 11px; }
.task-detail-heading span { color: var(--ink-500); font-size: 9px; }
.todoist-task-main .subtask-row { min-height: 37px; }
.todoist-task-main .add-subtask-form { min-height: 35px; margin-top: 4px; padding: 0; color: var(--ink-600); border: 0; }
.todoist-task-main .add-subtask-form input { padding: 0 7px; }
.todoist-task-main .add-subtask-form button { height: 27px; padding: 0 9px; color: var(--ink-600); border: 1px solid var(--line); border-radius: 5px; background: transparent; cursor: pointer; font-size: 9px; }
.todoist-comment-box { margin-top: 9px; display: grid; grid-template-columns: 29px 1fr; gap: 8px; }
.todoist-comment-box > .avatar { width: 29px; height: 29px; align-self: start; font-size: 9px; }
.todoist-comment-box > div { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 16px; }
.todoist-comment-box textarea { width: 100%; min-height: 54px; padding: 9px 11px 4px; resize: vertical; color: var(--ink-950); background: transparent; border: 0; font-size: 10px; }
.todoist-comment-actions { min-height: 34px; padding: 3px 5px; display: flex; align-items: center; justify-content: space-between; }
.todoist-comment-actions > button:first-child { width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink-500); border: 0; background: transparent; cursor: pointer; }
.todoist-task-main .history-toggle { margin: 14px 0 0 32px; width: calc(100% - 32px); }
.todoist-task-main .history-list { margin-left: 32px; }
.todoist-property { padding: 10px 0 11px; border-bottom: 1px solid var(--line); }
.todoist-property > label { margin-bottom: 6px; display: flex; align-items: center; gap: 7px; color: var(--ink-600); font-size: 9px; font-weight: 700; }
.todoist-property select, .todoist-property input { width: 100%; height: 30px; padding: 0 6px; color: var(--ink-950); background: transparent; border: 1px solid transparent; border-radius: 5px; font-size: 10px; }
.todoist-property select:hover, .todoist-property select:focus, .todoist-property input:hover, .todoist-property input:focus { border-color: var(--line-strong); background: var(--surface); }
.todoist-property .property-trigger { width: 100%; height: 30px; padding: 0 6px; display: flex; align-items: center; gap: 6px; color: var(--ink-950); background: transparent; border: 1px solid transparent; border-radius: 5px; font-size: 10px; text-align: left; cursor: pointer; }
.todoist-property .property-trigger:hover, .todoist-property .property-trigger:focus { border-color: var(--line-strong); background: var(--surface); }
.todoist-property .property-trigger .avatar { flex: none; }
.popover-search { padding: 2px 4px 6px; }
.popover-search input { width: 100%; height: 30px; padding: 0 8px; color: var(--ink-950); background: var(--canvas); border: 1px solid var(--line); border-radius: 6px; font-size: 11px; }
.todoist-property .priority-options { display: grid; grid-template-columns: repeat(3,1fr); }
.todoist-property .priority-option { min-width: 0; }
.todoist-property .date-quick-row { display: grid; grid-template-columns: repeat(3,1fr); }
.todoist-property .date-quick-row button { padding: 0 4px; }
.property-input-pair { display: grid; grid-template-columns: minmax(0,1fr) 80px; gap: 4px; }

.board-task-card.drop-before::before, .todoist-task-row.drop-before::before, .calendar-task-pill.drop-before::before,
.board-task-card.drop-after::after, .todoist-task-row.drop-after::after, .calendar-task-pill.drop-after::after {
  content: ""; position: absolute; z-index: 6; right: 0; left: 0; height: 2px; background: #10a99b; border-radius: 2px; box-shadow: 0 0 0 2px rgba(16,169,155,.12);
}
.board-task-card.drop-before::before, .todoist-task-row.drop-before::before, .calendar-task-pill.drop-before::before { top: -5px; }
.board-task-card.drop-after::after, .todoist-task-row.drop-after::after, .calendar-task-pill.drop-after::after { bottom: -5px; }
.calendar-task-pill.drop-before::before { top: 0; }
.calendar-task-pill.drop-after::after { bottom: 0; }
.board-task-card.drop-before::before, .board-task-card.drop-after::after { right: -3px; left: -3px; }
.todoist-task-row.drop-before::before, .todoist-task-row.drop-after::after { right: 3px; left: 3px; }
.calendar-all-day.drag-over, .calendar-hour-cell.drag-over { background: rgba(16,169,155,.09) !important; box-shadow: inset 0 0 0 2px rgba(16,169,155,.65) !important; }
.calendar-task-pill.dragging { opacity: .38; }

body.dark .task-workspace { --task-bg: #1e1e1e; }
body.dark #main-content:has(.task-workspace) { background: #1f1f1f; }
body.dark .task-workspace .toolbar { background: #242424; }
body.dark .task-calendar, body.dark .calendar-corner, body.dark .calendar-day-head { background: #1f1f1f; }
body.dark .task-workspace .toolbar { border-color: #343434; }
body.dark .board-task-card { background: #292929; border-color: #404040; box-shadow: 0 3px 8px rgba(0,0,0,.2); }
body.dark .board-task-card:hover { border-color: #555; box-shadow: 0 7px 18px rgba(0,0,0,.28); }
body.dark .board-empty { border-color: #383838; }
body.dark .board-section-insert span, body.dark .list-section-insert span { background: #1f1f1f; }
body.dark .task-list-section-head, body.dark .todoist-task-row, body.dark .task-calendar, body.dark .task-calendar-toolbar, body.dark .calendar-day-head, body.dark .calendar-time-label, body.dark .calendar-all-day, body.dark .calendar-hour-cell { border-color: #343434; }
body.dark .todoist-task-row:hover, body.dark .calendar-hour-cell:hover, body.dark .calendar-all-day:hover { background: rgba(255,255,255,.035); }
body.dark .calendar-corner, body.dark .calendar-day-head { background: #1f1f1f; }
body.dark .calendar-task-pill { color: #d8e5e8; }
body.dark .todoist-task-modal { background: #1f1f1f; border-color: #404040; }
body.dark .task-modal-topbar, body.dark .todoist-task-layout, body.dark .task-detail-section, body.dark .todoist-property { border-color: #3a3a3a; }
body.dark .todoist-task-sidebar { background: #252525; border-color: #3a3a3a; }
body.dark .description-editor textarea, body.dark .todoist-comment-box textarea, body.dark .todoist-property input, body.dark .todoist-property select, body.dark .todoist-property .property-trigger { background: transparent; }
body.dark .description-editor textarea:hover, body.dark .description-editor textarea:focus, body.dark .todoist-property input:hover, body.dark .todoist-property input:focus, body.dark .todoist-property select:hover, body.dark .todoist-property select:focus, body.dark .todoist-property .property-trigger:hover { background: #2c2c2c; border-color: #4b4b4b; }
body.dark .popover-search input { background: #1e1e1e; border-color: #3a3a3a; color: #e6e6e6; }
body.dark .todoist-comment-box > div { border-color: #4b4b4b; }
body.dark .todoist-task-main .add-subtask-form button { border-color: #444; }
body.dark .photo-tile { color: var(--ink-950); background: #18313b; border-color: var(--line); }
body.dark .assigned-task-group { background: var(--surface); border-color: var(--line); }
body.dark .assigned-task-group-head { background: rgba(255,255,255,.025); border-color: var(--line); }
body.dark .assigned-task-group.overdue .assigned-task-group-head { background: rgba(239,92,98,.09); }
body.dark .photo-preview { background: #102832; }
body.dark .photo-placeholder { color: #8fb0b7; background: radial-gradient(circle at 50% 42%,rgba(45,91,96,.55),transparent 38%),linear-gradient(145deg,#18343d,#102730); }
body.dark .photo-stage-badge { color: #c9e4e5; background: rgba(13,43,53,.9); }

@media (max-width: 900px) {
  .modal.modal-task.todoist-task-modal { width: calc(100% - 20px); height: calc(100vh - 20px); }
  .todoist-task-layout { grid-template-columns: 1fr; overflow-y: auto; }
  .todoist-task-main, .todoist-task-sidebar { overflow: visible; }
  .todoist-task-sidebar { border-top: 1px solid var(--line); border-left: 0; }
  .todoist-task-row { grid-template-columns: 14px 20px minmax(150px,1fr) 90px 75px 9px 24px; }
}

@media (max-width: 640px) {
  .task-workspace .toolbar { position: static; }
  .task-board-scroll { min-height: 520px; }
  .board-section { width: 260px; min-width: 260px; }
  .task-list-section-body { padding-left: 0; }
  .todoist-task-row { grid-template-columns: 14px 20px minmax(0,1fr) 9px 24px; }
  .todoist-row-label, .todoist-row-date { display: none; }
  .modal.modal-task.todoist-task-modal { width: 100%; height: 96vh; border-radius: 14px 14px 0 0; }
  .todoist-task-main { padding: 18px 14px 24px; }
  .description-editor, .task-detail-section, .task-link-row, .todoist-task-main .history-toggle, .todoist-task-main .history-list { margin-left: 0; }
  .todoist-task-main .history-toggle { width: 100%; }
  .task-breadcrumb span:first-of-type, .task-breadcrumb b { display: none; }
  .task-calendar-toolbar { flex-wrap: wrap; padding-block: 7px; }
  .task-calendar-toolbar > strong { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Keep the split login layout above the shared modal defaults. */
.modal.login-modal {
  width: min(820px, calc(100vw - 30px));
  max-width: 820px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  flex-direction: initial;
  border-radius: 18px;
}

@media (max-width: 720px) {
  .modal.login-modal { display: block; width: min(440px, calc(100vw - 24px)); }
}

/* ── Görev popup'ı: Todoist tarzı sağ panel (yalnızca .todoist-task-modal) ── */
.todoist-task-modal .todoist-task-sidebar { padding: 6px 20px 24px; }
.todoist-task-modal .todoist-property { padding: 14px 0 12px; }
.todoist-task-modal .todoist-property > label { margin-bottom: 6px; color: var(--ink-950); font-size: 11px; font-weight: 700; }
.todoist-task-modal .todoist-property > label small { color: var(--ink-500); font-weight: 500; }
.todoist-task-modal .todoist-property select, .todoist-task-modal .todoist-property .property-trigger { height: 32px; padding: 0 8px; font-size: 12px; }
.todoist-task-modal .todoist-property select { padding-left: 4px; }
.todoist-task-modal .modal-title-input { font-size: 20px; }
.todoist-task-modal .modal-title-input::placeholder { color: var(--ink-500); font-weight: 600; }
.todoist-task-modal .description-editor textarea { resize: none; min-height: 72px; font-size: 12px; }
.todoist-task-modal .form-hint { font-size: 10px; color: var(--ink-500); }

.date-pick { position: relative; height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; border-radius: 5px; font-size: 12px; color: var(--ink-950); cursor: pointer; }
.date-pick:hover { background: rgba(127,145,160,.1); }
.date-pick-text { pointer-events: none; display: inline-flex; align-items: center; }
.date-pick-plus { display: inline-flex; margin-left: auto; color: var(--ink-500); }
.date-pick:not(.has-value) { justify-content: flex-end; }
.todoist-property .date-pick input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; border: 0; }
.date-pick input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.date-pick-clear { position: relative; z-index: 1; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; color: var(--ink-500); background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.date-pick-clear:hover { color: var(--ink-950); background: rgba(127,145,160,.18); }
.date-time-row { display: flex; align-items: center; gap: 8px; padding: 0 8px; margin-top: 2px; font-size: 11px; color: var(--ink-600); }
.date-time-row input { width: 100px; height: 28px; }
.todoist-task-modal .date-quick-row { margin: 6px 0 0; }
.todoist-task-modal .date-quick-row button { color: var(--ink-600); background: transparent; border: 1px solid var(--line); font-weight: 600; }
.todoist-task-modal .date-quick-row button:hover { color: var(--teal-dark); background: var(--teal-soft); }

.priority-trigger .priority-flag, .popover-item .priority-flag { display: inline-flex; }
.priority-trigger.priority-urgent .priority-flag, .popover-item.priority-urgent .priority-flag { color: #a3222b; }
.priority-trigger.priority-high .priority-flag, .popover-item.priority-high .priority-flag { color: var(--red); }
.priority-trigger.priority-medium .priority-flag, .popover-item.priority-medium .priority-flag { color: var(--orange); }
.priority-trigger.priority-low .priority-flag, .popover-item.priority-low .priority-flag { color: #4d83fa; }
body.dark .date-pick:hover { background: #2c2c2c; }
/* Yeni görev (taslak): tamamlama dairesi yok, girinti de olmasın */
.todoist-task-main.is-draft .description-editor, .todoist-task-main.is-draft .task-link-row { margin-left: 0; }
.todoist-task-main.is-draft .modal-title-input { padding-left: 0; }
.todoist-task-main.is-draft .description-editor > span { display: none; }
.todoist-task-main.is-draft .description-editor textarea { padding-left: 0; }
.todoist-task-modal .modal-title-input:focus, .todoist-task-modal .modal-title-input:focus-visible { outline: none; box-shadow: none; }
body.dark .todoist-task-modal .modal-title-input { background: transparent; border-color: transparent; border-bottom-color: #3a3a3a; }
body.dark .todoist-task-modal .modal-title-input:hover { border-bottom-color: #555; }
body.dark .todoist-task-modal .modal-title-input:focus { border-bottom-color: var(--teal); }
body.dark .todoist-task-modal .form-hint { color: #8a8f94; }
body.dark .todoist-task-modal .todoist-property select, body.dark .todoist-task-modal .todoist-property input, body.dark .todoist-task-modal .todoist-property .property-trigger, body.dark .todoist-task-modal .description-editor textarea { background-color: transparent; border-color: transparent; }
body.dark .todoist-task-modal .todoist-property select:hover, body.dark .todoist-task-modal .todoist-property select:focus, body.dark .todoist-task-modal .todoist-property .property-trigger:hover, body.dark .todoist-task-modal .description-editor textarea:hover, body.dark .todoist-task-modal .description-editor textarea:focus { background-color: #2c2c2c; border-color: #4b4b4b; }
body.dark .todoist-task-modal .todoist-property select option { background: #2c2c2c; color: #e6e6e6; }
body.dark .todoist-task-modal .date-quick-row button { background: transparent; border-color: #3a3a3a; color: #b5babe; }
body.dark .todoist-task-modal .date-quick-row button:hover { background: #2c2c2c; }

/* ── Liste / Pano / Takvim görünüm seçici: açık + koyu tema ── */
.segmented { gap: 2px; padding: 3px; background: #eef3f6; border: 1px solid var(--line); border-radius: 9px; }
.segment { border-radius: 7px; transition: background .15s, color .15s; }
.segment:hover:not(.active) { background: rgba(14,170,154,.08); }
.segment.active { color: var(--teal-dark); background: white; box-shadow: 0 1px 4px rgba(24,43,77,.12); }
.segment:focus-visible { outline: 2px solid rgba(14,170,154,.45); outline-offset: -2px; }
body.dark .segmented { background: #0b232d; border-color: #1f3d48; }
body.dark .segment { background: transparent; color: #9fb4ba; }
body.dark .segment:hover:not(.active) { background: rgba(255,255,255,.05); color: #e6eef0; }
body.dark .segment.active { color: #5fe0d0; background: #17413f; box-shadow: inset 0 0 0 1px rgba(95,224,208,.28); }

/* "Tamamlananları göster" kutusu: açık temada beyaz-üstü-beyaz görünmüyordu */
.completed-filter-box { color: var(--ink-500); background: white; border-color: var(--line-strong); }
.completed-filter.active .completed-filter-box { color: white; }
body.dark .completed-filter-box { background: transparent; border-color: #6b7f85; color: transparent; }
body.dark .completed-filter.active .completed-filter-box { color: #06201f; }
/* Koyu tema, görev çalışma alanı çubuğu: iç kontroller çubuğun grisine uysun */
body.dark .task-workspace .segmented { background: #1b1b1b; border-color: #333; }
body.dark .task-workspace .segment.active { color: #5fe0d0; background: #2b3a39; box-shadow: inset 0 0 0 1px rgba(95,224,208,.3); }
body.dark .task-workspace .toolbar .select-field, body.dark .task-workspace .toolbar .search-field input, body.dark .task-workspace .toolbar .completed-filter { background-color: #1b1b1b; border-color: #3a3a3a; }
body.dark .task-workspace .toolbar .completed-filter.active { background: #1f3a38; border-color: #2a6864; }

/* Yorum kutusu: "Gönder" ataç-simgesi kuralına (ilk düğme) takılıp kayıyordu */
.todoist-comment-actions { justify-content: flex-end; gap: 6px; }
.todoist-comment-actions > button.button { width: auto; height: 30px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--teal); border-radius: 8px; font-size: 11px; }
.todoist-comment-actions > button.button:hover { background: var(--teal-dark); }
.todoist-comment-box textarea { resize: none; }
.todoist-comment-box > div:focus-within { border-color: var(--teal); }
body.dark .todoist-comment-box > div:focus-within { border-color: #2a8f87; }
.modal-backdrop.no-anim, .modal-backdrop.no-anim .modal { animation: none; }

/* ── Yorum ekleri: yükleme tepsisi, sürükle-bırak, yorumlarda önizleme ── */
.comment-drop { position: relative; }
.todoist-comment-actions { gap: 8px; }
.todoist-comment-actions > button:first-child { flex: none; width: 30px; height: 30px; border-radius: 8px; }
.todoist-comment-actions > button:first-child:hover { color: var(--ink-950); background: rgba(127,145,160,.14); }
.drop-hint { flex: 1; min-width: 0; overflow: hidden; color: var(--ink-500); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.drop-overlay { position: absolute; inset: 0; z-index: 2; display: none; align-items: center; justify-content: center; gap: 8px; color: var(--teal-dark); background: rgba(14,170,154,.1); border: 2px dashed var(--teal); border-radius: 16px; font-size: 12px; font-weight: 700; pointer-events: none; }
.comment-drop.drag-over .drop-overlay { display: flex; }
.attach-tray { padding: 0 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.attach-tray:not(:empty) { padding-block: 6px; }
.attach-chip { position: relative; overflow: hidden; width: 210px; max-width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 28px 6px 6px; border: 1px solid var(--line); border-radius: 9px; background: rgba(127,145,160,.07); }
.attach-chip.error { border-color: var(--red); background: rgba(239,92,98,.08); }
.attach-chip-thumb { width: 38px; height: 38px; flex: none; display: grid; place-items: center; overflow: hidden; color: var(--ink-600); border-radius: 6px; background: rgba(127,145,160,.16); }
.attach-chip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.attach-chip-meta { min-width: 0; display: grid; font-size: 11px; }
.attach-chip-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.attach-chip-meta small { color: var(--ink-500); font-size: 9px; }
.attach-chip-meta small.err { color: var(--red); }
.attach-chip > button { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; color: var(--ink-500); border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.attach-chip > button:hover { color: var(--ink-950); background: rgba(127,145,160,.2); }
.attach-progress { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--teal); transition: width .15s linear; }

.comment-attachments { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; }
.att-media { max-width: 100%; display: grid; gap: 4px; padding: 0; color: var(--ink-600); border: 0; background: transparent; text-align: left; font-size: 10px; }
.att-image { cursor: zoom-in; }
.att-image img { max-width: min(360px,100%); max-height: 260px; display: block; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: rgba(127,145,160,.08); }
.att-image:hover img { border-color: var(--teal); }
.att-video video { width: min(360px,100%); max-height: 260px; display: block; border-radius: 8px; background: #000; }
.att-media > span { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-file { max-width: 100%; display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; color: var(--ink-950); border: 1px solid var(--line); border-radius: 9px; background: rgba(127,145,160,.07); text-decoration: none; }
.att-file:hover { border-color: var(--teal); }
.att-file > svg { flex: none; color: var(--ink-600); }
.att-file span { min-width: 0; display: grid; font-size: 11px; }
.att-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.att-file small { color: var(--ink-500); font-size: 9px; }

.lightbox { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; align-content: center; gap: 10px; padding: 24px; background: rgba(0,0,0,.86); }
.lightbox img { max-width: min(1100px,100%); max-height: calc(100vh - 110px); object-fit: contain; border-radius: 6px; }
.lightbox-name { color: #e6eef0; font-size: 12px; text-decoration: none; }
.lightbox-name:hover { text-decoration: underline; }
.lightbox-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; display: grid; place-items: center; color: #fff; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); cursor: pointer; }
.lightbox-close:hover { background: rgba(255,255,255,.26); }

body.dark .attach-chip, body.dark .att-file { background: #262626; border-color: #3a3a3a; }
body.dark .attach-chip-thumb { background: #333; }
body.dark .att-image img { border-color: #3a3a3a; background: #262626; }
body.dark .drop-overlay { color: #5fe0d0; background: rgba(95,224,208,.09); border-color: #2a8f87; }
.att-file b { color: var(--ink-950); } .att-file:hover b { color: var(--teal-dark); }
.comment-attachments { align-items: flex-start; }

/* Etiket çipleri: çok etiket olunca sıkışma/taşma olmasın */
.label-chip { max-width: 100%; min-width: 0; }
.label-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-chip-more { flex: none; color: var(--ink-600); background: rgba(127,145,160,.16); }
.board-card-labels { margin: 7px 0 0 26px; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.board-card-labels .label-chip { max-width: 130px; height: 19px; padding: 0 8px; font-size: 9px; }
.board-card-meta { flex-wrap: wrap; row-gap: 4px; }
.todoist-row-copy .row-labels { margin-top: 3px; display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; }
.todoist-row-copy .row-labels .label-chip { max-width: 110px; height: 17px; padding: 0 7px; font-size: 9px; flex: 0 1 auto; }
.todoist-task-row { min-height: 45px; height: auto; padding-block: 5px; }

/* Sol menü: projeyi klasöre sürükle-bırak */
[data-drag-project] { cursor: grab; }
[data-drag-project].dragging { opacity: .4; }
.account-group[data-drop-folder], .root-project-list[data-drop-folder] { border-radius: 8px; transition: background .12s, box-shadow .12s; }
.sidebar-drop-over { background: rgba(14,170,154,.16); box-shadow: inset 0 0 0 1.5px rgba(14,170,154,.75); }
/* Sürüklerken klasörsüz alan, boşken bile bırakılabilecek kadar yüksek ve görünür olsun */
body.project-dragging .root-project-list[data-drop-folder] { min-height: 34px; box-shadow: inset 0 0 0 1px dashed; outline: 1px dashed rgba(14,170,154,.55); outline-offset: -1px; }
body.project-dragging .root-project-list[data-drop-folder]:empty::after { content: "Klasörden çıkarmak için buraya bırakın"; display: block; padding: 9px 10px; color: rgba(255,255,255,.55); font-size: 10px; }
body.project-dragging .project-row > button { pointer-events: none; }

/* Formlar: renk seçici ve onay kutusu tam genişlik/36px'e gerilmesin */
.form-field input[type="checkbox"], .form-field input[type="radio"] { width: 16px; height: 16px; padding: 0; flex: none; accent-color: var(--teal); }
.form-field input[type="color"] { width: 44px; height: 30px; padding: 2px; cursor: pointer; }
.checkbox-field { padding: 4px 0; font-size: 12px; cursor: pointer; }
.checkbox-field span { display: inline-flex; align-items: center; gap: 6px; }
.color-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.form-field .color-swatch { position: relative; width: 26px; height: 26px; display: block; cursor: pointer; }
.form-field .color-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.color-swatch i { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: transform .12s, box-shadow .12s; }
.color-swatch:hover i { transform: scale(1.1); }
.color-swatch input:checked + i { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px currentColor; color: inherit; outline: 2px solid var(--ink-950); outline-offset: 2px; }
.color-swatch input:focus-visible + i { outline: 2px solid var(--teal); outline-offset: 3px; }

/* Sürüklerken "klasörsüz" bırakma kutusu: boş da olsa dolu da olsa belirgin */
body.project-dragging .root-project-list[data-drop-folder] { min-height: 0; outline: none; }
body.project-dragging .root-project-list[data-drop-folder]::after { content: "Klasörden çıkarmak için buraya bırakın"; display: block; margin: 4px 0 6px; padding: 10px; text-align: center; color: rgba(255,255,255,.78); border: 1.5px dashed rgba(14,170,154,.8); border-radius: 8px; background: rgba(14,170,154,.08); font-size: 10px; font-weight: 600; }
body.project-dragging .root-project-list[data-drop-folder].sidebar-drop-over::after { background: rgba(14,170,154,.28); color: #fff; }
body.project-dragging .sidebar-label-row[data-drop-folder] { border-radius: 6px; }
body.project-dragging .root-project-list[data-drop-folder]:empty::after { padding: 10px; }

/* ── Sade, ince kaydırma çubukları (tarayıcının kalın beyaz varsayılanı yerine) ── */
* { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(100,116,139,.32); border: 2px solid transparent; border-radius: 8px; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.55); background-clip: padding-box; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* Koyu zemin: sol menü her temada koyu; koyu tema her yerde */
.sidebar, .sidebar * { scrollbar-color: rgba(255,255,255,.2) transparent; }
.sidebar *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); background-clip: padding-box; }
.sidebar *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.36); background-clip: padding-box; }
body.dark, body.dark * { scrollbar-color: rgba(255,255,255,.2) transparent; }
body.dark *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); background-clip: padding-box; }
body.dark *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.36); background-clip: padding-box; }
/* Bırakma kutusu: daha sade */
body.project-dragging .root-project-list[data-drop-folder]::after { margin: 4px 0 6px; padding: 8px; border: 1px dashed rgba(255,255,255,.28); border-radius: 7px; background: transparent; color: rgba(255,255,255,.6); font-weight: 500; }
body.project-dragging .root-project-list[data-drop-folder].sidebar-drop-over::after { border-color: rgba(14,170,154,.9); background: rgba(14,170,154,.16); color: #fff; }
.form-field.checkbox-field { display: flex; flex-direction: row; align-items: center; gap: 8px; }

/* Açıklama kutusu: her zaman hafif bir zemin tonu, sabit iç boşluk, yazı başlıkla hizalı */
.todoist-task-modal .description-editor textarea { padding: 9px 10px; background-color: rgba(127,145,160,.08); border: 1px solid transparent; border-radius: 8px; line-height: 1.45; transition: background-color .12s, border-color .12s; }
.todoist-task-modal .description-editor textarea:hover { background-color: rgba(127,145,160,.12); border-color: var(--line); }
.todoist-task-modal .description-editor textarea:focus { background-color: var(--surface); border-color: var(--teal); outline: none; }
.todoist-task-modal .description-editor textarea::placeholder { color: var(--ink-500); }
.todoist-task-main.is-draft .description-editor { margin-left: -10px; }
.todoist-task-main.is-draft .description-editor textarea { padding-left: 10px; }
body.dark .todoist-task-modal .description-editor textarea { background-color: rgba(255,255,255,.05); border-color: transparent; }
body.dark .todoist-task-modal .description-editor textarea:hover { background-color: rgba(255,255,255,.08); border-color: #3a3a3a; }
body.dark .todoist-task-modal .description-editor textarea:focus { background-color: #232323; border-color: #2a8f87; }

/* Aktif filtre uyarısı: unutulan arama/öncelik filtresi görünür olsun */
.search-field.has-value input { border-color: var(--teal); background: var(--teal-soft); }
.filter-active-chip { max-width: 280px; height: 34px; padding: 0 8px 0 10px; display: inline-flex; align-items: center; gap: 7px; color: var(--teal-dark); border: 1px solid var(--teal); border-radius: 7px; background: var(--teal-soft); cursor: pointer; font-size: 11px; font-weight: 650; }
.filter-active-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-active-chip b { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(14,170,154,.18); }
.filter-active-chip:hover b { background: rgba(14,170,154,.34); }
body.dark .search-field.has-value input { background: #17413f; border-color: #2a8f87; }
body.dark .filter-active-chip { color: #8fe1d8; background: #17413f; border-color: #2a6864; }

/* Avatar: baş harfler daire içinde tam ortada dursun (satır yüksekliği/boşluk kaymasın), görsel taşmasın */
.avatar { box-sizing: border-box; padding: 0; overflow: hidden; line-height: 1; letter-spacing: 0; text-align: center; text-indent: 0; }
.avatar > img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Menü: Etiketler bölümü */
.label-nav-list { display: grid; margin-bottom: 4px; padding-left: 8px; }
.label-nav-list .project-button { gap: 9px; }
.label-nav-name { min-width: 0; flex: 1; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.label-count { flex: none; min-width: 18px; padding: 0 6px; color: #8eb5be; font-size: 10px; font-weight: 600; text-align: right; }
.label-nav-empty { padding: 6px 10px; color: rgba(255,255,255,.45); font-size: 10px; }
.avatar-empty { color: var(--ink-500); background: rgba(127,145,160,.16); border: 1px dashed var(--line-strong); }
body.dark .avatar-empty { color: #8a9a9f; background: rgba(255,255,255,.06); border-color: #4a5a5f; }

/* Avatar baş harfleri: başka bir kural display'i flex'e çevirse bile (ör. .board-card-meta > span) daire içinde ortalı kalsın */
.avatar { justify-content: center; align-items: center; }
.board-card-meta > .avatar { display: inline-grid; place-items: center; gap: 0; }

/* @ ile kişi etiketleme + bildirimler */
.mention { padding: 1px 6px; color: var(--teal-dark); border-radius: 5px; background: var(--teal-soft); font-weight: 650; white-space: nowrap; }
.mention-me { color: #8a5a00; background: #fff1cf; box-shadow: inset 0 0 0 1px #f2cf7d; }
.popover .mention-item.active, .popover .mention-item:hover { background: rgba(14,170,154,.14); }
.popover .mention-item .avatar { flex: none; }
.notif-mention { align-items: flex-start; height: auto; padding-block: 8px; line-height: 1.35; font-size: 11px; }
.notif-mention > svg { margin-top: 2px; flex: none; }
.notif-mention small { display: block; overflow: hidden; color: var(--ink-500); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.notif-mention.unread { background: rgba(14,170,154,.08); }
.notif-dot { width: 8px; height: 8px; margin-top: 5px; flex: none; border-radius: 50%; background: var(--teal); }
.notif-readall { justify-content: center; color: var(--teal-dark); font-weight: 650; border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; }
body.dark .mention { color: #8fe1d8; background: #17413f; }
body.dark .mention-me { color: #f6d98f; background: #4a3a14; box-shadow: inset 0 0 0 1px #7a6020; }
body.dark .notif-mention.unread { background: rgba(95,224,208,.09); }

/* Görev penceresi: tüm bloklar aynı sol kenardan başlasın (eski 32px girinti kalktı) */
.todoist-task-modal .description-editor { margin-left: 0; }
.todoist-task-modal .description-editor > span { display: none; }
.todoist-task-modal .task-detail-section { margin-left: 0; }
.todoist-task-modal .todoist-task-main .history-toggle { margin-left: 0; width: 100%; }
.todoist-task-modal .todoist-task-main .history-list { margin-left: 0; }
.todoist-task-modal .label-chip-row { margin-left: 0; }
.todoist-task-modal .todoist-task-main.is-draft .description-editor { margin-left: 0; }
.todoist-task-modal .todoist-task-main.is-draft .modal-title-input { padding-left: 0; }

/* "Hasta kaydını aç": üst çubukta, araç düğmelerinin solunda */
.task-modal-actions { align-items: center; }
.task-modal-actions .topbar-patient { width: auto; max-width: 260px; height: 28px; margin-right: 8px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--teal-dark); border-radius: 7px; background: var(--teal-soft); font-size: 11px; font-weight: 650; white-space: nowrap; }
.task-modal-actions .topbar-patient:hover { color: var(--teal-dark); background: #cceee9; }
.task-modal-actions .topbar-patient > svg { flex: none; }
.task-modal-actions .topbar-patient > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.dark .task-modal-actions .topbar-patient { color: #8fe1d8; background: #17413f; }
body.dark .task-modal-actions .topbar-patient:hover { background: #1d524f; }
@media (max-width: 560px) { .task-modal-actions .topbar-patient { max-width: 150px; padding: 0 8px; } }

.top-actions .error-report { width: auto; padding: 0 11px 0 9px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; }
.error-report-label { white-space: nowrap; }
@media (max-width: 860px) { .error-report-label { display: none; } .top-actions .error-report { width: 36px; padding: 0; justify-content: center; } }
.feedback-modal .modal-header { min-height: 64px; }
.feedback-header-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; color: #078f85; background: #eef8f6; border-radius: 9px; }
.feedback-header-text { min-width: 0; flex: 1; }
.feedback-header-text h2 { margin: 0; }
.feedback-header-text p { margin: 2px 0 0; color: var(--ink-500); font-size: 10px; }
.feedback-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.feedback-kind { position: relative; cursor: pointer; }
.feedback-kind input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.feedback-kind-card { padding: 11px 6px 9px; display: grid; justify-items: center; gap: 3px; text-align: center; color: var(--ink-600); background: white; border: 1px solid var(--line-strong); border-radius: 10px; transition: border-color 120ms, background 120ms, color 120ms; }
.feedback-kind-card b { font-size: 12px; color: var(--ink-950); }
.feedback-kind-card small { font-size: 9px; color: var(--ink-500); line-height: 1.3; }
.feedback-kind:hover .feedback-kind-card { border-color: #9fd8d1; }
.feedback-kind input:checked + .feedback-kind-card { color: #078f85; border-color: #0aa99c; background: #eef8f6; box-shadow: 0 0 0 2px rgba(10, 169, 156, .14); }
.feedback-kind input:focus-visible + .feedback-kind-card { outline: 2px solid #0aa99c; outline-offset: 1px; }
.feedback-counter { margin-top: 3px; text-align: right; color: var(--ink-500); font-size: 9px; }
.feedback-context { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-500); font-size: 10px; }
.feedback-context span { display: inline-flex; align-items: center; gap: 5px; }
.feedback-context b { color: var(--ink-600); font-weight: 600; }
.feedback-modal button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }

/* ── Çekim listesi sayfası ── */
.shot-group h3 { display: flex; align-items: center; justify-content: space-between; }
.shot-group-count { color: var(--ink-500); font-size: 10px; font-weight: 700; }
.shot-chip { margin-left: 6px; padding: 1px 6px; border-radius: 8px; font-style: normal; font-size: 9px; font-weight: 700; }
.shot-chip.retake { color: #a96800; background: var(--orange-soft); }
.shot-chip.na { color: var(--ink-600); background: #eef3f6; }

.shot-board { padding: 0; overflow: hidden; }
.board-toolbar, .board-subbar { padding: 12px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.board-toolbar { border-bottom: 1px solid var(--line); }
.board-search { flex: 1 1 260px; max-width: 380px; }
.board-filter { flex: 0 0 auto; }
.board-week { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.board-week strong { min-width: 128px; text-align: center; font-size: 12px; }
.board-subbar { justify-content: space-between; padding-block: 10px; }
.board-summary { color: var(--ink-600); font-size: 11px; }
.board-summary b { font-weight: 800; }
.board-summary .ok { color: var(--green); }
.board-summary .bad { color: var(--red); }
.board-hint { margin: 0; padding: 7px 14px; display: flex; align-items: center; gap: 6px; color: var(--teal-dark); background: var(--teal-soft); font-size: 11px; font-weight: 600; }
.board-scroll { overflow: auto; max-height: calc(100vh - 330px); border-top: 1px solid var(--line); }
.board-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; }
.board-table th, .board-table td { padding: 0 8px; border-bottom: 1px solid #edf2f6; background: var(--surface); }
.board-table thead th { position: sticky; top: 0; z-index: 3; height: 58px; padding-block: 8px; color: var(--ink-800); background: #f7fafb; font-size: 11px; font-weight: 700; vertical-align: middle; }
.board-shot-head { min-width: 92px; max-width: 110px; text-align: center; line-height: 1.25; }
.board-shot-name { display: block; overflow-wrap: anywhere; }
.board-shot-count { margin-top: 4px; display: inline-block; padding: 1px 7px; color: var(--ink-600); background: #e9f0f4; border-radius: 9px; font-size: 9px; font-weight: 700; }
.board-shot-head.is-match { color: var(--teal-dark); background: var(--teal-soft) !important; }
.board-shot-head.is-match .board-shot-count { color: var(--teal-dark); background: rgba(14,170,154,.18); }
.board-patient-head, .board-patient { position: sticky; left: 0; z-index: 2; min-width: 250px; text-align: left; }
.board-patient-head { z-index: 4 !important; }
.board-patient-wrap { display: flex; align-items: center; gap: 4px; }
.board-patient-link { flex: 1; min-width: 0; padding: 8px 0; display: flex; align-items: center; gap: 9px; color: inherit; border: 0; background: transparent; cursor: pointer; text-align: left; }
.board-patient-link:hover strong { color: var(--teal-dark); }
.board-patient-copy { display: grid; min-width: 0; }
.board-patient-copy strong { font-size: 12px; }
.board-patient-copy small { overflow: hidden; color: var(--ink-500); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.board-row-menu { opacity: .45; }
.board-table tr:hover .board-row-menu { opacity: 1; }
.board-table tbody tr:hover th, .board-table tbody tr:hover td { background: #fafdfd; }
.board-video-head, .board-video { min-width: 168px; text-align: left; }
.board-video-head small { display: block; color: var(--ink-500); font-size: 9px; font-weight: 600; }
.video-cell { display: grid; gap: 5px; justify-items: start; padding: 6px 0; }
.video-pill { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; color: var(--ink-600); background: white; border: 1px dashed var(--line-strong); border-radius: 12px; cursor: pointer; font-size: 10px; font-weight: 700; }
.video-pill.gave { color: var(--green); background: var(--green-soft); border: 1px solid #a9e2cf; }
.video-pill.not_gave { color: #c13f49; background: var(--red-soft); border: 1px solid #f6ced2; }
.video-pill:hover { filter: brightness(.97); }
.week-dots { display: inline-flex; gap: 4px; align-items: center; }
.week-dot { width: 10px; height: 10px; padding: 0; background: #e3eaf0; border: 0; border-radius: 50%; cursor: pointer; }
.week-dot.gave { background: var(--green); }
.week-dot.not_gave { background: var(--red); }
.week-dot.is-current { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink-500); }
.video-note { padding: 6px 8px 4px; display: grid; gap: 4px; }
.video-note input { height: 32px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 11px; }
.video-note small { color: var(--ink-500); font-size: 9px; }
.popover-item.is-current { background: var(--teal-soft); color: var(--teal-dark); font-weight: 700; }
.board-cell { text-align: center; }
.board-cell.is-match { background: rgba(14,170,154,.07) !important; }
.board-check { position: relative; display: inline-grid; place-items: center; width: 36px; height: 40px; cursor: pointer; }
.board-check.state-na { opacity: .35; cursor: not-allowed; }
.board-flag { position: absolute; top: 6px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--surface); }
.board-na { color: var(--ink-500); }
.board-progress-head, .board-progress { min-width: 120px; text-align: left; }
.board-bar { height: 6px; margin-bottom: 3px; overflow: hidden; background: #e6eef2; border-radius: 3px; }
.board-bar i { display: block; height: 100%; background: var(--teal); }
.board-progress small { color: var(--ink-600); font-size: 10px; font-weight: 600; }

/* Ay sekmeleri (tablonun altında, e-tablo sayfa sekmeleri gibi) */
.month-tabs { display: flex; align-items: flex-end; gap: 3px; padding: 0 12px; overflow-x: auto; background: #eef3f6; border-top: 1px solid var(--line-strong); }
.month-tab { margin-top: -1px; height: 34px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-600); background: transparent; border: 1px solid transparent; border-top: 0; border-radius: 0 0 8px 8px; cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; text-transform: capitalize; }
.month-tab span { padding: 1px 6px; color: var(--ink-600); background: #dde7ee; border-radius: 9px; font-size: 9px; }
.month-tab:hover { background: rgba(255,255,255,.6); }
.month-tab.active { color: var(--teal-dark); background: var(--surface); border-color: var(--line-strong); box-shadow: 0 2px 0 var(--teal) inset; }
.month-tab.active span { color: var(--teal-dark); background: var(--teal-soft); }
.month-add { color: var(--teal-dark); text-transform: none; }
.month-note { margin-left: auto; align-self: center; padding: 0 6px; color: var(--ink-600); font-size: 10px; }

/* Aşama düzenleyici */
.stage-editor-list { margin: 10px 0; display: grid; gap: 6px; max-height: 340px; overflow-y: auto; }
.stage-editor-row { display: flex; align-items: center; gap: 4px; }
.stage-editor-row input { flex: 1; height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 12px; }
.stage-editor-index { width: 18px; color: var(--ink-500); font-size: 10px; text-align: right; }
.stage-editor-row .icon-button:disabled { opacity: .3; cursor: default; }
.stage-editor-row .icon-button.danger:hover { color: #c13f49; background: var(--red-soft); }
.form-hint.warn { color: #a96800; }
.danger-button { color: white; background: #d94550; border-color: #d94550; }
.danger-button:hover { background: #c13f49; }

body.dark .board-table th, body.dark .board-table td { background: var(--surface); border-color: rgba(255,255,255,.07); }
body.dark .board-table thead th { background: #0b232d; color: #dce9ee; }
body.dark .board-table tbody tr:hover th, body.dark .board-table tbody tr:hover td { background: #0e2b36; }
body.dark .video-pill { background: transparent; }
body.dark .board-bar, body.dark .week-dot { background: rgba(255,255,255,.12); }
body.dark .board-shot-count, body.dark .month-tab span { background: rgba(255,255,255,.1); color: #cfe0e6; }
body.dark .month-tabs { background: #0b232d; }
body.dark .month-tab.active { background: var(--surface); }

/* Fotoğraf önizleme */
.photo-lightbox { flex-direction: column; }
.lightbox-caption { max-width: min(1100px, 100%); display: grid; gap: 2px; text-align: center; color: #e6eef0; font-size: 12px; }
.lightbox-caption span { color: #a9c0ca; font-size: 11px; }
.lightbox-empty { display: grid; justify-items: center; gap: 8px; color: #a9c0ca; }
.lightbox-nav { position: absolute; top: 50%; width: 44px; height: 44px; display: grid; place-items: center; color: #fff; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); cursor: pointer; transform: translateY(-50%); }
.lightbox-nav:hover { background: rgba(255,255,255,.26); }
.lightbox-nav.prev { left: 16px; }
.lightbox-nav.next { right: 16px; }

/* ── Çekim listesi: özelleştirilebilir takip sütunları, kısayollar, editörler ── */
.opt-green { --opt: var(--green); --opt-soft: var(--green-soft); --opt-line: #a9e2cf; }
.opt-red { --opt: #d94550; --opt-soft: var(--red-soft); --opt-line: #f6ced2; }
.opt-orange { --opt: #d98200; --opt-soft: var(--orange-soft); --opt-line: #f6dca4; }
.opt-blue { --opt: var(--blue); --opt-soft: var(--blue-soft); --opt-line: #c5d1ff; }
.opt-purple { --opt: var(--purple); --opt-soft: var(--purple-soft); --opt-line: #d9c8fb; }
.opt-teal { --opt: var(--teal-dark); --opt-soft: var(--teal-soft); --opt-line: #9edbd4; }
.opt-gray { --opt: var(--ink-600); --opt-soft: #eef3f6; --opt-line: #d3dde6; }
.video-pill[class*="opt-"] { color: var(--opt); background: var(--opt-soft); border: 1px solid var(--opt-line); }
.video-pill.unset { color: var(--ink-500); background: transparent; border: 1px dashed var(--line-strong); }
.week-dot[class*="opt-"] { background: var(--opt); }
.opt-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--opt); }
.opt-dot.opt-empty { background: transparent; border: 1.5px dashed var(--ink-500); }
.sum-green { color: var(--green); } .sum-red { color: #d94550; } .sum-orange { color: #d98200; } .sum-blue { color: var(--blue); } .sum-purple { color: var(--purple); } .sum-teal { color: var(--teal-dark); } .sum-gray { color: var(--ink-600); }
.sum-sep { margin: 0 8px; color: var(--line-strong); }
.board-subbar { gap: 8px 14px; }
.board-summary { margin-left: auto; line-height: 1.6; text-align: right; }
.board-fieldfilters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-select { display: inline-flex; align-items: center; gap: 6px; height: 31px; padding: 0 4px 0 10px; color: var(--ink-600); background: white; border: 1px solid var(--line); border-radius: 7px; font-size: 11px; font-weight: 600; }
.filter-select select { height: 27px; padding: 0 4px; color: var(--ink-950); border: 0; background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.board-shortcuts { padding: 8px 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: #fafcfd; border-top: 1px solid var(--line); }
.board-shortcuts-empty { color: var(--ink-500); font-size: 11px; }
.shortcut-chip { display: inline-flex; align-items: center; height: 28px; overflow: hidden; background: white; border: 1px solid var(--line-strong); border-radius: 14px; }
.shortcut-chip button { height: 100%; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; color: var(--ink-800); border: 0; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.shortcut-chip .shortcut-x { padding: 0 8px 0 2px; color: var(--ink-500); }
.shortcut-chip .shortcut-x:hover { color: #d94550; }
.shortcut-chip.active { color: var(--teal-dark); background: var(--teal-soft); border-color: #9edbd4; }
.shortcut-chip.active button:first-child { color: var(--teal-dark); }
.shortcut-add, .shortcut-clear { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; gap: 4px; border-radius: 14px; cursor: pointer; font-size: 11px; font-weight: 700; }
.shortcut-add { color: var(--teal-dark); background: transparent; border: 1px dashed #7fcfc6; }
.shortcut-clear { color: var(--ink-600); background: transparent; border: 0; }
.board-patient-head small { margin-left: 4px; color: var(--ink-500); font-weight: 600; }
.field-editor { width: min(560px, 100%); }
.fe-list { margin: 10px 0; display: grid; gap: 10px; max-height: 52vh; overflow-y: auto; padding-right: 2px; }
.fe-card { padding: 10px; display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfd; }
.fe-head { display: flex; align-items: center; gap: 4px; }
.fe-head input { flex: 1; height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 12px; font-weight: 700; }
.fe-weekly { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; font-weight: 600; cursor: pointer; }
.fe-weekly small { color: var(--ink-500); font-weight: 500; }
.fe-options { display: grid; gap: 5px; }
.fe-option { display: flex; align-items: center; gap: 5px; }
.fe-option input { flex: 1; height: 32px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 12px; }
.fe-color { width: 88px; height: 32px; padding: 0 4px; color: var(--opt); background: var(--opt-soft); border: 1px solid var(--opt-line); border-radius: 7px; font-size: 11px; font-weight: 700; cursor: pointer; }
.fe-head .icon-button:disabled, .fe-option .icon-button:disabled { opacity: .3; cursor: default; }
body.dark .filter-select, body.dark .shortcut-chip { background: transparent; }
body.dark .board-shortcuts, body.dark .fe-card { background: #0b232d; }

/* Çekim listesi: başlıktan düzenleme, not sütunu, filtre çipleri */
.board-shot-head, .board-video-head { position: sticky; }
.board-head-title { display: block; }
.board-head-menu { position: absolute; top: 3px; right: 2px; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; color: var(--ink-500); border: 0; border-radius: 5px; background: transparent; cursor: pointer; opacity: 0; transition: opacity var(--transition); }
.board-table thead th:hover .board-head-menu, .board-head-menu:focus-visible { opacity: 1; }
.board-head-menu:hover { color: var(--ink-950); background: rgba(14,60,80,.08); }
.board-shot-head, .board-video-head { padding-right: 20px !important; }
.board-note-head, .board-note { min-width: 260px; width: 26%; text-align: left; }
.board-note { padding-block: 6px !important; }
.board-note textarea { width: 100%; min-height: 34px; max-height: 240px; padding: 7px 9px; display: block; color: var(--ink-950); background: #fbfdfe; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 11px; line-height: 1.45; resize: none; overflow-wrap: anywhere; white-space: pre-wrap; field-sizing: content; }
.board-note textarea:focus { background: white; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,170,154,.11); outline: 0; }
.board-note textarea::placeholder { color: #a2aec2; }
.board-add-head, .board-add-cell { min-width: 44px; width: 44px; padding: 0 !important; text-align: center; }
.board-add-column { width: 30px; height: 30px; display: inline-grid; place-items: center; color: var(--teal-dark); background: transparent; border: 1px dashed #7fcfc6; border-radius: 8px; cursor: pointer; }
.board-add-column:hover { background: var(--teal-soft); }
.filter-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; color: var(--teal-dark); background: var(--teal-soft); border: 1px solid #9edbd4; border-radius: 14px; font-size: 11px; font-weight: 600; }
.filter-chip button { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; color: var(--teal-dark); border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.filter-chip button:hover { background: rgba(14,170,154,.2); }
.shortcut-add.solid { color: var(--ink-800); background: white; border: 1px solid var(--line-strong); }
.shortcut-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line-strong); }
.month-tab-menu { margin-left: -6px; height: 34px; width: 24px; display: grid; place-items: center; padding: 0; color: var(--ink-600); border: 0; background: transparent; cursor: pointer; }
.month-tab-menu:hover { color: var(--ink-950); }
.filter-popover { max-height: 60vh; overflow-y: auto; min-width: 230px; }
.filter-stage-picker { padding: 4px 8px 8px; display: grid; grid-template-columns: 1fr auto auto; gap: 5px; }
.filter-stage-picker select { height: 30px; min-width: 0; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 11px; }
body.dark .board-note textarea { background: rgba(255,255,255,.04); color: #e6eef0; }
body.dark .shortcut-add.solid, body.dark .filter-chip { background: transparent; }
.board-shot-head { min-width: 112px; max-width: 130px; }
.board-shot-name { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
.board-patient-head, .board-patient { min-width: 220px; }
.board-video-head, .board-video { min-width: 120px; }
.board-note-head, .board-note { min-width: 240px; }
.shortcut-add.is-idle { opacity: .55; }

/* Silme onayı (editörler) */
.stage-editor-row.is-confirm, .fe-option.is-confirm, .fe-card.is-confirm { padding: 8px 10px; gap: 8px; flex-wrap: wrap; background: var(--red-soft); border: 1px solid #f6ced2; border-radius: 8px; }
.fe-card.is-confirm { display: flex; align-items: center; justify-content: space-between; }
.confirm-text { flex: 1 1 180px; color: #a3323b; font-size: 11px; font-weight: 700; }
.fe-confirm-actions { display: flex; gap: 6px; }

/* Çekim listesi: dar tablo — yatay kaydırma geç başlasın */
.board-table th, .board-table td { padding-inline: 4px; }
.board-table thead th { font-size: 10.5px; }
.board-shot-head { min-width: 74px; max-width: 88px; padding-right: 4px !important; }
.board-shot-name { font-size: 10.5px; }
.board-head-menu { top: 1px; right: 0; width: 18px; height: 18px; background: var(--surface); }
.board-video-head, .board-video { min-width: 96px; }
.board-video-head { padding-right: 4px !important; text-align: left; }
.board-video-head .board-head-title { padding-right: 16px; }
.board-patient-head, .board-patient { min-width: 190px; max-width: 220px; padding-inline: 8px !important; }
.board-patient-copy small { max-width: 150px; }
.board-note-head, .board-note { min-width: 190px; width: 22%; }
.board-note-head { padding-left: 8px !important; }
.board-note { padding-inline: 6px !important; }
.board-check { width: 28px; }
.board-add-head, .board-add-cell { min-width: 38px; width: 38px; }
.video-pill { padding: 0 8px; }

/* Değeri olan takip hücresi seçeneğin rengiyle boyanır (Verdi yeşil, Vermedi kırmızı...) */
.board-table tbody td.board-video.has-opt, .board-table tbody tr:hover td.board-video.has-opt { background: color-mix(in srgb, var(--opt) 13%, var(--surface)); }

/* Satırın ilk dolu takip değeri tüm satırı hafifçe boyar; değerin kendi hücresi daha koyu kalır */
.board-table tbody tr.row-opt > th, .board-table tbody tr.row-opt > td, .board-table tbody tr.row-opt:hover > th, .board-table tbody tr.row-opt:hover > td { background: color-mix(in srgb, var(--opt) 7%, var(--surface)); }
.board-table tbody tr.row-opt > td.board-video.has-opt, .board-table tbody tr.row-opt:hover > td.board-video.has-opt { background: color-mix(in srgb, var(--opt) 16%, var(--surface)); }
.board-table tbody tr.row-opt > td.board-cell.is-match { background: color-mix(in srgb, var(--opt) 7%, var(--surface)) !important; }

/* Takip sütunu türleri (metin / tarih) */
.cell-text { width: 100%; min-width: 96px; min-height: 30px; padding: 6px 8px; display: block; color: var(--ink-950); background: transparent; border: 1px solid transparent; border-radius: 7px; font: inherit; font-size: 11px; line-height: 1.4; resize: none; overflow-wrap: anywhere; field-sizing: content; }
.cell-text:hover { border-color: var(--line); background: #fbfdfe; }
.cell-text:focus { background: white; border-color: var(--teal); outline: 0; box-shadow: 0 0 0 3px rgba(14,170,154,.11); }
.cell-date { width: 112px; height: 30px; padding: 0 6px; color: var(--ink-950); background: transparent; border: 1px solid transparent; border-radius: 7px; font: inherit; font-size: 11px; }
.cell-date:not(.has-value) { color: #a2aec2; }
.cell-date:hover, .cell-date:focus { border-color: var(--line-strong); background: white; outline: 0; }
.fe-kind { height: 34px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 7px; background: white; font-size: 11px; font-weight: 600; }
body.dark .cell-text:hover, body.dark .cell-date:hover, body.dark .cell-date:focus { background: rgba(255,255,255,.05); }

/* İçe aktarma */
.import-modal { width: min(720px, 100%); }
.import-drop { margin-top: 12px; padding: 34px 16px; display: grid; justify-items: center; gap: 6px; color: var(--teal-dark); background: var(--teal-soft); border: 2px dashed #7fcfc6; border-radius: 12px; cursor: pointer; text-align: center; }
.import-drop span { color: var(--ink-600); font-size: 11px; }
.import-table-wrap { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.import-table-wrap.tall { max-height: 46vh; margin-top: 8px; }
.import-map-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.import-map-table th { position: sticky; top: 0; padding: 7px 9px; text-align: left; background: #f7fafb; border-bottom: 1px solid var(--line); }
.import-map-table td { padding: 5px 9px; border-bottom: 1px solid #edf2f6; vertical-align: middle; }
.import-map-table select { width: 100%; height: 30px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 11px; }
.import-sample { max-width: 180px; overflow: hidden; color: var(--ink-500); text-overflow: ellipsis; white-space: nowrap; }
.import-fixed { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; flex-wrap: wrap; }
.import-fixed select { height: 30px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 11px; }
.import-summary { margin-top: 10px; padding: 9px 11px; color: var(--ink-800); background: var(--teal-soft); border-radius: 8px; font-size: 11px; line-height: 1.6; }
.import-summary .warn { color: #c13f49; font-weight: 700; }

/* Kısayol çipi: aktifken yeşil; kaldırma "Kısayol yap" menüsünden */
.shortcut-chip.active { color: var(--green); background: var(--green-soft); border-color: #a9e2cf; }
.shortcut-chip.active button:first-child { color: var(--green); }
.shortcut-row { min-height: 34px; padding: 0 6px 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 600; }
.shortcut-row span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.shortcut-remove { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; color: var(--ink-500); border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.shortcut-remove:hover { color: #c13f49; background: var(--red-soft); }
.import-bulk { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.import-bulk small { color: var(--ink-500); font-size: 10px; }
.import-use { width: 34px; text-align: center; }
.import-map-table tr.is-skipped td:not(.import-use) { opacity: .42; }
.import-map-table tr.is-skipped td:not(.import-use) select { opacity: 1; }

/* Tümü görünümünde sekme bölüm başlıkları */
.board-table tbody tr.board-group-row > th { position: sticky; left: 0; padding: 7px 10px !important; color: var(--teal-dark); background: var(--teal-soft) !important; border-bottom: 1px solid #bfe6e1; font-size: 11px; font-weight: 800; text-align: left; text-transform: capitalize; }
.board-group-row th span { margin-right: 8px; }
.board-group-row th b { padding: 1px 7px; color: var(--teal-dark); background: rgba(14,170,154,.16); border-radius: 9px; font-size: 9px; }

/* Tam ekran fotoğraf/ek önizlemesi: eski modal .lightbox genişlik kuralını ezer */
#attachment-lightbox.lightbox, .photo-lightbox.lightbox { width: 100vw; max-width: none; min-height: 100vh; height: 100vh; inset: 0; background: rgba(5, 14, 20, .9); }

.announcement-bar { display: grid; }
.announcement { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 16px; font-size: 13px; font-weight: 600; text-align: center; color: #fff; background: #087f78; }
.announcement-warning { background: #b7791f; }
.announcement-critical { background: #b03a2a; }
.announcement-close { margin-left: auto; background: transparent; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .85; }
.announcement-close:hover { opacity: 1; }

body.dark .type-bar-track, body.dark .bar.is-zero { background: #1b3944; }
body.dark .report-rules { border-top-color: var(--line); }

/* ── Mobil / PWA cilası ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Kapalı çekmece gölgesi ekran kenarına sızmasın; kapalıyken odaklanmasın. */
  .sidebar { box-shadow: none; visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  .app-shell.sidebar-open .sidebar { box-shadow: 18px 0 45px rgba(2, 33, 45, .25); visibility: visible; transition: transform .25s ease, visibility 0s; }
  /* Çentik/ana ekran çubuğu (iOS/Android standalone) */
  .topbar { padding-top: env(safe-area-inset-top, 0px); height: calc(54px + env(safe-area-inset-top, 0px)); }
  #main-content { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
  .toast-region { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  /* Dar ekranda yalnızca bulunulan sayfa adı: üst yol 3 satıra sarmasın. */
  .breadcrumbs > :not(:last-child) { display: none; }
  .breadcrumbs > :last-child { font-weight: 700; color: var(--ink-950); }
  /* iOS, 16px'ten küçük alanlara odaklanınca sayfayı yakınlaştırır. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }
  .icon-button, .item-menu { min-width: 40px; min-height: 40px; }
  .modal { max-height: calc(100dvh - 24px); }
}
@media (display-mode: standalone) {
  body { overscroll-behavior-y: none; }
}
@media (max-width: 640px) {
  .photo-gallery-head { flex-wrap: wrap; align-items: flex-start; }
  .photo-gallery-head > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
}

/* ── Yetkiye göre sadeleştirme (bkz. app.js applyRoleClasses; sunucu yine de 403 verir) ──
   Eksik her yetki için body'de "no-p-<yetki>" sınıfı bulunur (: ve _ yerine -). */
body.no-p-members-manage [data-action="invite-member"], body.no-p-members-manage [data-action="member-menu"],
body.no-p-settings-manage [data-action="buy-extra-user"], body.no-p-settings-manage [data-action="buy-extra-storage"],
body.no-p-settings-manage form[data-form="workspace-settings"] button[type="submit"] { display: none !important; }
body.no-p-patients-create [data-action="new-patient"], body.no-p-patients-create [data-action="board-new-patient"],
body.no-p-patients-create [data-action="patient-import"] { display: none !important; }
body.no-p-patients-edit [data-action="patient-menu"], body.no-p-patients-edit [data-action="patient-edit"],
body.no-p-patients-edit [data-action="new-case"], body.no-p-patients-edit [data-action="archive-patient"],
body.no-p-patients-edit [data-action="new-photo-stage"], body.no-p-patients-edit [data-action="manage-photo-stage"],
body.no-p-patients-edit [data-action="board-row-menu"] { display: none !important; }
body.no-p-shots-manage [data-action="board-tabs"], body.no-p-shots-manage [data-action="board-fields"],
body.no-p-shots-manage [data-action="board-stages"], body.no-p-shots-manage [data-action="board-add-column"],
body.no-p-shots-manage [data-action="tab-menu"], body.no-p-shots-manage [data-action="shot-detail"],
body.no-p-shots-manage [data-action="field-add"], body.no-p-shots-manage [data-action="stage-add"] { display: none !important; }
body.no-p-consents-manage [data-action="edit-permission"] { display: none !important; }
body.no-p-photos-upload [data-action="trigger-upload"] { display: none !important; }
body.no-p-export [data-action="export-csv"], body.no-p-export [data-action="export-csv-tasks"],
body.no-p-export [data-action="export-patients"] { display: none !important; }
body.no-p-tasks-manage [data-action="new-task"], body.no-p-tasks-manage [data-action="inline-new-task"],
body.no-p-tasks-manage [data-action="insert-task-section"], body.no-p-tasks-manage [data-action="add-project"],
body.no-p-tasks-manage [data-action="add-folder"], body.no-p-tasks-manage [data-action="workspace-add-menu"],
body.no-p-tasks-manage [data-action="project-menu"], body.no-p-tasks-manage [data-action="folder-menu"],
body.no-p-tasks-manage [data-action="section-menu"], body.no-p-tasks-manage [data-action="new-label"],
body.no-p-tasks-manage [data-action="delete-label"], body.no-p-tasks-manage [data-action="submit-draft-task"],
body.no-p-tasks-manage [data-action="duplicate-task"], body.no-p-tasks-manage [data-action="delete-task"] { display: none !important; }
body.no-owner [data-action="purge-patient"] { display: none !important; }

/* Yetki seçici (davet / üye düzenleme) */
.modal-lg { width: min(640px, calc(100vw - 24px)); }
.perm-list { display: grid; gap: 12px; margin-top: 14px; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.perm-group { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 0; min-width: 0; }
.perm-group legend { padding: 0 6px; font-weight: 700; font-size: 11px; color: var(--ink-600); }
.perm-item { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.perm-item input { margin-top: 3px; flex: none; }
.perm-item span { display: grid; gap: 1px; min-width: 0; }
.perm-item b { font-size: 12px; font-weight: 600; }
.perm-item small { color: var(--ink-500); font-size: 10.5px; line-height: 1.35; }
.perm-item.is-disabled { opacity: .5; cursor: not-allowed; }

/* Fotoğraf: paylaşılabilir rozeti + görüntüleyici işlemleri */
.photo-share-badge { position: absolute; bottom: 8px; left: 8px; padding: 2px 7px; color: #0b6b5f; background: rgba(214, 246, 239, .95); border-radius: 10px; font-size: 9px; font-weight: 700; }
.lightbox-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; justify-content: center; }
.lb-btn { padding: 7px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.lb-btn:hover { background: rgba(255,255,255,.22); }
.lb-btn.danger { border-color: rgba(255,120,120,.6); color: #ffd6d6; }

/* Giriş: SMS yedek kodu */
.sms-backup { display: grid; gap: 8px; margin-top: 4px; }
.link-button { justify-self: start; padding: 0; border: 0; background: none; color: var(--teal-dark, #0b6b5f); font: inherit; font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* Çoklu marka: çalışma alanı menüsündeki marka listesi */
.brand-item.active { background: var(--surface-2, rgba(12,171,158,.08)); }
.brand-item[disabled] { opacity: .6; cursor: default; }