@import url('https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,600;7..72,700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f2f7f2;
  --bg-soft:#edf5ff;
  --surface:#fffeff;
  --surface-2:#f8fbfb;
  --text:#14212b;
  --muted:#5f6d7a;
  --primary:#0b7a75;
  --primary-strong:#08635f;
  --primary-soft:#dff3f1;
  --accent:#ef7f2d;
  --accent-soft:#ffe7d5;
  --border:#d9e3e7;
  --danger:#bf3d2f;
  --ok:#2f855a;
  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:22px;
  --shadow-sm:0 6px 18px rgba(18, 31, 43, .08);
  --shadow-md:0 16px 40px rgba(18, 31, 43, .12);
}

*{ box-sizing:border-box; }

html, body{
  width:100%;
  margin:0;
  padding:0;
}

body{
  font-family:"Manrope", "Segoe UI", "Trebuchet MS", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 8% 10%, rgba(11,122,117,.12), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(239,127,45,.14), transparent 32%),
    linear-gradient(160deg, var(--bg), var(--bg-soft));
  min-height:100vh;
  line-height:1.55;
}

a{
  color:var(--primary);
  text-decoration:none;
  transition:color .18s ease;
}

a:hover{
  color:var(--primary-strong);
  text-decoration:underline;
  text-underline-offset:2px;
}

h1, h2, h3{
  margin:0 0 14px;
  font-family:"Literata", "Georgia", serif;
  letter-spacing:.1px;
  color:#0f1d27;
}

h1{
  font-size:clamp(1.55rem, 2vw, 2.2rem);
}

h2{
  font-size:clamp(1.2rem, 1.4vw, 1.55rem);
}

h3{
  font-size:clamp(1.05rem, 1.2vw, 1.24rem);
}

p{
  margin:0 0 12px;
}

hr{
  border:none;
  border-top:1px solid var(--border);
  margin:22px 0;
}

.container{
  max-width:1240px;
  margin:0 auto;
  padding:0 18px 28px;
}

.page-shell{
  margin-top:24px;
}

.topbar{
  position:sticky;
  top:0;
  z-index:30;
  border-bottom:1px solid rgba(217, 227, 231, .9);
  backdrop-filter: blur(14px);
  background:rgba(248, 252, 251, .84);
  box-shadow:0 8px 20px rgba(19, 30, 40, .06);
}

.nav{
  max-width:1240px;
  margin:0 auto;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.nav-left,
.nav-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.nav-right{
  justify-content:flex-end;
}

.nav-notify-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid #c7d9dd;
  background:linear-gradient(180deg, #ffffff, #f6fbfb);
}

.nav-notify-link.has-unread{
  border-color:#7fc4bb;
  background:linear-gradient(180deg, #f5fffd, #ecfbf8);
  box-shadow:0 0 0 2px rgba(11, 122, 117, .08);
}

.nav-notify-label{
  line-height:1;
}

.nav-notify-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 7px;
  border-radius:999px;
  background:linear-gradient(180deg, #ee7e2d, #df6411);
  color:#fff;
  font-size:11px;
  font-weight:800;
  box-shadow:0 6px 16px rgba(223, 100, 17, .28);
}

.nav-notify-badge.is-hidden{
  display:none;
}

.nav-menu-wrap{
  position:relative;
}

.nav-menu-toggle{
  min-height:42px;
  padding:10px 16px;
  border:1px solid #bfd6db;
  border-radius:12px;
  background:linear-gradient(180deg, #ffffff, #f3faf9);
  color:#17303b;
}

.nav-menu-panel{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:min(320px, calc(100vw - 30px));
  padding:10px;
  border:1px solid #cbdbe0;
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff, #f7fbfb);
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:60;
}

.nav-menu-panel[hidden]{
  display:none;
}

.nav-menu-link{
  display:flex;
  align-items:center;
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:12px;
}

.nav-menu-divider{
  height:1px;
  margin:6px 0;
  background:var(--border);
}

.nav-menu-link-exit{
  color:var(--danger);
  background:#fff4f1;
}

.nav-menu-link-exit:hover{
  color:#9f2f24;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px 8px 8px;
  border-radius:999px;
  border:1px solid #bfd8d4;
  background:linear-gradient(135deg, #f4fffd, #f4f9ff);
  color:#15343a;
  text-decoration:none;
}

.brand:hover{
  text-decoration:none;
}

.brand-mark{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:800;
  color:#fff;
  background:linear-gradient(145deg, var(--primary), #129187);
}

.brand-text{
  font-weight:700;
  letter-spacing:.2px;
}

.nav a.link{
  padding:9px 12px;
  border-radius:10px;
  color:#1b2a36;
  border:1px solid transparent;
  font-weight:600;
  text-decoration:none;
}

.nav a.link:hover{
  background:#fff;
  border-color:var(--border);
  box-shadow:var(--shadow-sm);
}

.nav a.link.active{
  background:#fff;
  border-color:#c4d8df;
  box-shadow:0 7px 20px rgba(19, 31, 42, .09);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
}

.muted{
  color:var(--muted);
}

.card{
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  padding:18px;
  margin:14px 0;
  animation:cardIn .24s ease both;
}

.card:hover{
  box-shadow:var(--shadow-md);
  border-color:#cbdbe0;
}

@keyframes cardIn{
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}

.grid{
  display:grid;
  gap:14px;
}

.grid.two{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.grid.three{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.inline{
  display:flex;
  align-items:center;
  gap:10px;
}

.inline > input{
  flex:1;
}

button,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  color:#1f2f3a;
  cursor:pointer;
  font-weight:700;
  font-family:"Manrope", "Segoe UI", sans-serif;
  transition:transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}

button:hover,
.btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
  text-decoration:none;
}

button:active,
.btn:active{
  transform:translateY(0);
}

.btn-primary{
  border-color:transparent;
  background:linear-gradient(145deg, var(--primary), #139188);
  color:#fff;
}

.btn-primary:hover{
  filter:brightness(.98);
}

.btn-danger{
  border-color:#f0c4be;
  background:#fff2f0;
  color:var(--danger);
}

.btn-sm{
  min-height:34px;
  padding:7px 10px;
  font-size:13px;
}

.btn-wide{
  width:100%;
}

input,
select,
textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  color:var(--text);
  font-family:"Manrope", "Segoe UI", sans-serif;
  font-size:14px;
  transition:border-color .18s ease, box-shadow .18s ease;
}

textarea{
  min-height:96px;
  resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:#7cbab4;
  box-shadow:0 0 0 4px rgba(11, 122, 117, .14);
}

form p{
  margin:0 0 12px;
}

label{
  display:block;
  margin:0 0 6px;
  font-weight:700;
  color:#253644;
}

img{
  max-width:100%;
}

ul{
  margin:0;
  padding-left:20px;
}

li{
  margin:7px 0;
}

table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  overflow:hidden;
  border-radius:12px;
}

th,
td{
  border:1px solid var(--border);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
}

th{
  background:linear-gradient(180deg, #f5fbfa, #eff7f6);
  color:#3d4f5f;
  font-size:13px;
  font-weight:800;
}

tbody tr:nth-child(odd){
  background:rgba(255, 255, 255, .78);
}

tbody tr:nth-child(even){
  background:rgba(243, 249, 249, .58);
}

small{
  color:var(--muted);
}

/* Auth */
.auth-shell{
  max-width:440px;
  margin:6vh auto;
}

.auth-brand{
  margin-bottom:14px;
  text-align:center;
}

.auth-brand h1{
  margin:0;
}

.auth-brand p{
  margin:6px 0 0;
  color:var(--muted);
}

.auth-card{
  padding:24px;
}

.auth-footer{
  margin-top:12px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

.errorbox{
  margin:0 0 16px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #f3c7c0;
  background:#fff1ef;
  color:#8a2720;
}

/* Boards */
.board-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin:8px 0 12px;
}

.board-title{
  display:flex;
  align-items:center;
  gap:10px;
}

.board-title h1{
  margin:0;
}

.board-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.board-task-create-form{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
  margin-top:10px;
}

.board-wrap{
  margin-top:10px;
}

.lanes{
  display:flex;
  gap:12px;
  align-items:flex-start;
  overflow-x:auto;
  padding:5px 2px 18px;
}

.lane{
  width:330px;
  min-width:330px;
  border:1px solid #cedde1;
  border-radius:16px;
  background:linear-gradient(180deg, #fcfffd, #f3f9f8);
  box-shadow:var(--shadow-sm);
  padding:12px;
}

.lane-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}

.lane-title{
  font-weight:800;
}

.lane-count{
  border-radius:999px;
  padding:4px 8px;
  font-size:12px;
  color:#425463;
  border:1px solid #d3dfe3;
  background:#fff;
}

.task-list{
  margin-top:10px;
  min-height:40px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.task-card{
  border:1px solid #d4e1e5;
  border-radius:13px;
  background:#fff;
  padding:10px 12px;
  box-shadow:0 5px 14px rgba(15, 31, 42, .08);
  cursor:grab;
}

.task-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.task-card-head a{
  min-width:0;
}

.task-delete-inline{
  margin:0;
  flex:0 0 auto;
}

.task-delete-button{
  min-width:32px;
  min-height:32px;
  padding:0;
  border-radius:10px;
  border:1px solid #efc0b7;
  background:#fff3f1;
  color:var(--danger);
  font-size:18px;
  line-height:1;
  box-shadow:none;
}

.task-delete-button:hover{
  box-shadow:var(--shadow-sm);
}

.task-card:hover{
  transform:translateY(-1px);
}

.task-card-overdue{
  border-color:#efb3aa;
  background:linear-gradient(180deg, #fff7f6, #ffffff);
}

.task-card-soon{
  border-color:#f2d39d;
  background:linear-gradient(180deg, #fffaf0, #ffffff);
}

.task-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}

.task-deadline-row{
  margin-top:10px;
}

.task-deadline-badge{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid #c7dce1;
  background:#f4fbfb;
  color:#365362;
  font-size:12px;
  font-weight:800;
}

.task-deadline-badge.soon{
  border-color:#f0d29f;
  background:#fff7e8;
  color:#8a5a16;
}

.task-deadline-badge.overdue{
  border-color:#efbbb3;
  background:#fff1ef;
  color:#a53227;
}

.task-detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 12px;
}

.task-description{
  white-space:pre-wrap;
  color:#1d313d;
}

.task-meta-form{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  align-items:end;
}

.drop-hint{
  border:2px dashed rgba(11, 122, 117, .45);
  background:rgba(11, 122, 117, .08);
}

.toast{
  position:fixed;
  right:18px;
  bottom:18px;
  min-width:260px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:var(--shadow-md);
  z-index:70;
  display:none;
}

.toast.show{
  display:block;
}

/* Calendar */
.cal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:14px;
}

.cal-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.cal-nav input,
.cal-nav select{
  width:auto;
  min-width:220px;
}

.cal-grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:8px;
}

.cal-head{
  text-align:center;
  font-weight:800;
  color:#415667;
  padding:6px 4px;
}

.cal-day{
  display:block;
  min-height:112px;
  padding:9px;
  border-radius:12px;
  border:1px solid #d4e1e5;
  background:#fff;
  color:inherit;
  text-decoration:none;
}

.cal-day:hover{
  border-color:#b6d3d0;
  text-decoration:none;
}

.cal-day.out{
  opacity:.48;
}

.cal-day.sel{
  border:2px solid var(--primary);
}

.cal-day.today{
  box-shadow:0 0 0 2px rgba(47, 133, 90, .35) inset;
}

.cal-num{
  font-weight:800;
  margin-bottom:6px;
}

.cal-meta{
  font-size:12px;
  color:#485b6a;
}

.tbl{
  width:100%;
  border-collapse:collapse;
}

.tbl th,
.tbl td{
  border:1px solid var(--border);
  padding:8px 10px;
}

.cards{
  margin-top:16px;
  display:grid;
  gap:16px;
  grid-template-columns:1.1fr .9fr;
}

/* KB articles */
.kb-manual-pdf img{
  width:100%;
  border-radius:10px;
}

.kb-pdf-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.kb-pdf-frame{
  width:100%;
  min-height:78vh;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
}

.kb-preview-card summary{
  cursor:pointer;
  font-weight:800;
  color:#18303d;
}

.kb-preview-card summary:hover{
  color:var(--primary-strong);
}

.kb-preview-body{
  margin-top:14px;
}

/* Home shortcuts */
.home-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) 340px;
  gap:18px;
  align-items:start;
}

.home-main{
  min-width:0;
}

.home-sidebar{
  min-width:0;
}

.home-intro-card p:last-child{
  margin-bottom:0;
}

.home-calendar-card{
  overflow:hidden;
}

.home-calendar-head,
.home-sidebar-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.home-kpi-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-bottom:16px;
}

.home-kpi{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:14px 16px;
}

.home-kpi span{
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-bottom:6px;
}

.home-kpi b{
  font-size:1.35rem;
  line-height:1.2;
}

.home-calendar-shell{
  margin:0 0 16px;
}

.home-calendar-nav{
  justify-content:space-between;
  margin-bottom:14px;
}

.home-calendar-details{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
}

.news-card{
  position:sticky;
  top:92px;
}

.news-feed{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.news-item{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background:#fff;
}

.news-item h3{
  margin:10px 0 8px;
}

.news-item p{
  margin-bottom:0;
}

.news-item-birthday{
  background:linear-gradient(180deg, #fff7f1, #fffdf9);
  border-color:#f0d5bf;
}

.news-item-holiday{
  background:linear-gradient(180deg, #effaf8, #fbfefd);
  border-color:#cbe4df;
}

.news-item-hint{
  background:linear-gradient(180deg, #f8fbff, #ffffff);
  border-color:#d9e3ef;
}

.news-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}

.news-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
  color:#415667;
  font-size:12px;
  font-weight:800;
}

.news-kind{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.quick-links{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.quick-link{
  display:block;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:700;
}

.quick-link:hover{
  text-decoration:none;
  border-color:#b8d3cf;
}

/* Responsive */
@media (max-width: 1024px){
  .home-layout{
    grid-template-columns:1fr;
  }

  .news-card{
    position:static;
  }

  .quick-links{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px){
  .cards{
    grid-template-columns:1fr;
  }

  .nav{
    padding:10px 14px;
  }

  .container{
    padding:0 14px 20px;
  }

  .home-calendar-details,
  .home-kpi-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 760px){
  .nav-right{
    width:100%;
    justify-content:flex-start;
  }

  .nav a.link{
    padding:8px 10px;
  }

  .quick-links{
    grid-template-columns:1fr;
  }

  .lane{
    width:290px;
    min-width:290px;
  }
}

/* --- Additional page polish --- */
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.page-head h1{
  margin-bottom:6px;
}

.page-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.search-form{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.search-form input{
  min-width:260px;
}

.table-wrap{
  overflow:auto;
  border-radius:12px;
}

.manual-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.manual-item{
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-decoration:none;
}

.manual-title{
  font-weight:700;
  color:#141414;
  font-size:1.02rem;
}

.manual-item:hover{
  border-color:#b7d2ce;
  box-shadow:var(--shadow-sm);
}

.manual-meta{
  color:var(--muted);
  font-size:13px;
}

.board-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.board-tile{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:14px;
  box-shadow:var(--shadow-sm);
}

.board-tile h3{
  margin-bottom:6px;
}

.board-stats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:#f3f8f8;
  border:1px solid #d7e5e7;
  color:#3a4f60;
  font-size:12px;
  font-weight:700;
}

.member-picker{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:8px;
}

.member-picker input{
  min-width:0;
}

.profile-grid{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:16px;
}

.photo-box{
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:16px;
  border:1px solid var(--border);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.photo-box img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.photo-empty{
  color:var(--muted);
  font-weight:700;
}

.info-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 12px;
}

.info-item{
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  padding:10px;
}

.info-label{
  color:var(--muted);
  font-size:12px;
  margin-bottom:4px;
}

.employees-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.employee-card{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:14px;
  box-shadow:var(--shadow-sm);
}

.employee-name{
  font-weight:800;
  margin-bottom:6px;
}

.role-list{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.role-chip{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  background:#f0f8ff;
  border:1px solid #d4e3ef;
  color:#31506a;
  font-size:12px;
  font-weight:700;
}

.owner-bind{
  display:grid;
  grid-template-columns:1fr 1fr 1fr auto;
  gap:8px;
  align-items:center;
}

.owner-bind input,
.owner-bind select{
  min-width:0;
}

.notif-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.notif-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  padding:12px;
}

.notif-item.unread{
  border-color:#b4d8d4;
  background:#f3fbfa;
}

.notif-item:hover{
  border-color:#a9cfd3;
  box-shadow:var(--shadow-sm);
}

.notif-mark{
  font-size:12px;
  font-weight:800;
  color:#0f736d;
}

.messenger-layout{
  display:grid;
  grid-template-columns:320px minmax(0, 1fr);
  gap:16px;
  align-items:start;
}

.messenger-sidebar{
  position:sticky;
  top:92px;
}

.messenger-sidebar-head,
.messenger-chat-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.messenger-chat-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}

.messenger-chat-card{
  display:block;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:12px 14px;
  text-decoration:none;
  color:inherit;
}

.messenger-chat-card:hover{
  text-decoration:none;
  border-color:#bad7d2;
  box-shadow:var(--shadow-sm);
}

.messenger-chat-card.active{
  border-color:#6bb8b0;
  box-shadow:0 0 0 2px rgba(11, 122, 117, .12);
  background:linear-gradient(180deg, #fbfffe, #f1fbfa);
}

.messenger-chat-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.messenger-chat-title{
  font-weight:800;
  color:#17303b;
}

.messenger-chat-meta,
.messenger-chat-members{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
}

.messenger-unread-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  background:var(--accent-soft);
  color:#9a4f19;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}

.messenger-chat-shell{
  margin-top:0;
}

.messenger-chat-head-main{
  min-width:0;
}

.messenger-chat-tools{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.messenger-chat-danger{
  display:flex;
  justify-content:flex-end;
}

.messenger-delete-form{
  margin:0;
}

.messenger-typing{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  color:var(--primary-strong);
  font-size:13px;
  font-weight:700;
}

.messenger-typing-label{
  line-height:1.2;
}

.messenger-typing-dots{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.messenger-typing-dots span{
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--primary);
  opacity:.35;
  animation:messengerTypingPulse 1.15s infinite ease-in-out;
}

.messenger-typing-dots span:nth-child(2){
  animation-delay:.18s;
}

.messenger-typing-dots span:nth-child(3){
  animation-delay:.36s;
}

@keyframes messengerTypingPulse{
  0%, 80%, 100% { transform:translateY(0); opacity:.28; }
  40% { transform:translateY(-2px); opacity:1; }
}

.messenger-thread{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px 0;
  max-height:72vh;
  overflow:auto;
}

.messenger-thread-empty,
.messenger-empty-note,
.messenger-placeholder{
  text-align:center;
}

.messenger-message{
  max-width:min(760px, 88%);
  border:1px solid var(--border);
  border-radius:18px;
  padding:12px 14px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.messenger-message.is-own{
  align-self:flex-end;
  background:linear-gradient(180deg, #eff9f8, #ffffff);
  border-color:#baddd8;
}

.messenger-message.is-other{
  align-self:flex-start;
}

.messenger-message-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:8px;
  color:var(--muted);
  font-size:12px;
}

.messenger-message-text{
  white-space:pre-wrap;
  word-break:break-word;
}

.messenger-mention{
  display:inline-flex;
  align-items:center;
  padding:1px 8px;
  border-radius:999px;
  background:#e8f4ff;
  color:#1d5f92;
  font-weight:800;
}

.messenger-attachments{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}

.messenger-attachment-block{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.messenger-attachment{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid #d5e2e6;
  background:#f8fbfb;
  font-size:13px;
  font-weight:700;
}

.messenger-attachment:hover{
  text-decoration:none;
}

.messenger-inline-image{
  display:block;
  width:min(320px, 100%);
  max-height:320px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid #d8e4e7;
  background:#f8fbfb;
}

.messenger-inline-pdf{
  width:min(420px, 100%);
  height:260px;
  border:1px solid #d8e4e7;
  border-radius:16px;
  background:#fff;
}

.messenger-table-preview{
  width:min(520px, 100%);
  border:1px solid #d8e4e7;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}

.messenger-table-preview-head{
  padding:10px 12px;
  border-bottom:1px solid #e4ecef;
  background:linear-gradient(180deg, #f8fbfb, #f3f8f8);
  color:#405867;
  font-size:12px;
  font-weight:800;
}

.messenger-table-preview-scroll{
  overflow:auto;
}

.messenger-mini-table{
  width:100%;
  border-collapse:collapse;
}

.messenger-mini-table td{
  min-width:86px;
  max-width:180px;
  border:1px solid #edf2f4;
  padding:8px 10px;
  font-size:12px;
  color:#20303c;
  background:#fff;
  vertical-align:top;
  word-break:break-word;
}

.messenger-text-preview{
  width:min(520px, 100%);
  margin:0;
  padding:12px 14px;
  border:1px solid #d8e4e7;
  border-radius:16px;
  background:#f8fbfb;
  color:#1e303b;
  font-size:12px;
  line-height:1.45;
  white-space:pre-wrap;
  overflow:auto;
}

.messenger-compose-card{
  margin-bottom:0;
}

.messenger-compose-form textarea{
  min-height:110px;
}

.messenger-compose-input{
  position:relative;
}

.messenger-mention-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  padding:8px;
  border:1px solid #cfe0e3;
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  gap:4px;
  max-height:260px;
  overflow:auto;
  z-index:40;
}

.messenger-mention-menu[hidden]{
  display:none;
}

.messenger-mention-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:12px;
  background:#fff;
  color:#17303b;
  font-weight:700;
}

.messenger-mention-option:hover,
.messenger-mention-option.is-active{
  border-color:#bdd7d3;
  background:linear-gradient(180deg, #f8fffe, #eef8f7);
  box-shadow:0 8px 18px rgba(18, 31, 43, .06);
}

.messenger-mention-name{
  min-width:0;
  text-align:left;
}

.messenger-mention-handle{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}

.messenger-local-preview{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
  margin-top:12px;
}

.messenger-local-preview-card{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.messenger-local-preview-name{
  color:#516472;
  font-size:12px;
  font-weight:700;
}

.messenger-file-fallback{
  padding:14px 16px;
  border:1px solid #d8e4e7;
  border-radius:16px;
  background:#f8fbfb;
}

.messenger-file-fallback-title{
  color:#17303b;
  font-size:13px;
  font-weight:800;
}

.messenger-file-fallback-note{
  margin-top:4px;
  color:#5f6d7a;
  font-size:12px;
}

.messenger-compose-form button:disabled{
  opacity:.7;
  cursor:wait;
}

.messenger-compose-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px;
  align-items:end;
  margin-top:12px;
}

.messenger-create-layout{
  max-width:860px;
}

.messenger-member-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:10px;
}

.messenger-member-option{
  position:relative;
  display:block;
  cursor:pointer;
}

.messenger-member-option input{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  padding:0;
  opacity:0;
  pointer-events:none;
}

.messenger-member-card{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:12px 16px;
  border:1px solid #dce5e8;
  border-radius:12px;
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease, transform .12s ease, background .18s ease;
}

.messenger-member-option:hover .messenger-member-card{
  border-color:#c3d4d8;
  box-shadow:0 8px 18px rgba(18, 31, 43, .06);
  transform:translateY(-1px);
}

.messenger-member-option input:focus + .messenger-member-card{
  border-color:#7cbab4;
  box-shadow:0 0 0 4px rgba(11, 122, 117, .14);
}

.messenger-member-option input:checked + .messenger-member-card{
  border-color:#6fb9b1;
  background:linear-gradient(180deg, #f8fffe, #edf8f6);
  box-shadow:0 0 0 2px rgba(11, 122, 117, .12), 0 10px 24px rgba(18, 31, 43, .08);
}

.messenger-member-body{
  min-width:0;
  flex:1;
}

.messenger-member-name{
  font-weight:800;
  color:#17303b;
  line-height:1.2;
  display:block;
}

.messenger-member-handle{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

.messenger-member-check{
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:999px;
  border:2px solid #c6d6db;
  background:#fff;
  position:relative;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}

.messenger-member-check::after{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:5px;
  height:10px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(40deg);
  opacity:0;
}

.messenger-member-option input:checked + .messenger-member-card .messenger-member-check{
  border-color:var(--primary);
  background:var(--primary);
  transform:scale(1.04);
}

.messenger-member-option input:checked + .messenger-member-card .messenger-member-check::after{
  opacity:1;
}

.direction-in{
  color:#197548;
  font-weight:800;
}

.direction-out{
  color:#b53a32;
  font-weight:800;
}

.direction-unk{
  color:#6b7280;
  font-weight:700;
}

.employee-select-btn{
  min-width:230px;
  width:100%;
  border:1px solid #c7d6db;
  border-radius:12px;
  background:linear-gradient(180deg, #ffffff, #f6fbfb);
  color:#16222a;
  font-weight:700;
  padding:10px 12px;
}

.library-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.library-tab{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  border:1px solid #c9dadd;
  border-radius:999px;
  background:#fff;
  color:#17303b;
  text-decoration:none;
  font-weight:800;
}

.library-tab.is-active{
  border-color:#6fb9b1;
  background:linear-gradient(180deg, #f8fffe, #edf8f6);
  box-shadow:0 8px 20px rgba(18, 31, 43, .08);
}

.library-owner-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.library-owner-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:0 14px;
  border:1px solid #d7e3e6;
  border-radius:999px;
  background:#fff;
  color:#17303b;
  text-decoration:none;
  font-weight:700;
}

.library-owner-chip b{
  min-width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#edf6f7;
}

.library-owner-chip.is-active{
  border-color:#6fb9b1;
  background:linear-gradient(180deg, #f8fffe, #edf8f6);
}

.library-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin-top:16px;
}

.library-item-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.library-item-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.library-item-title{
  color:#17303b;
  text-decoration:none;
}

.library-item-title:hover{
  text-decoration:underline;
}

.library-item-description{
  margin:0;
  color:#344754;
  line-height:1.55;
}

.library-item-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:auto;
}

.library-form-card{
  max-width:980px;
}

.library-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.library-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field > span{
  color:#17303b;
  font-weight:800;
}

.field input[type="text"],
.field input[type="url"],
.field input[type="file"],
.field select,
.field textarea{
  width:100%;
  border:1px solid #d4e1e4;
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
  color:#17303b;
  font:inherit;
}

.field textarea{
  min-height:120px;
  resize:vertical;
}

.field-error{
  color:#c0392b;
  font-size:13px;
  font-weight:700;
}

.form-errors{
  padding:14px 16px;
  border:1px solid #f2b7b2;
  border-radius:14px;
  background:#fff4f3;
  color:#9f2d21;
  font-weight:700;
  margin-bottom:16px;
}

.library-form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.btn-danger-soft{
  border-color:#efc8c4;
  color:#a8392c;
}

.library-allowed-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.library-allowed-option{
  position:relative;
  display:block;
  cursor:pointer;
}

.library-allowed-option input{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  padding:0;
  opacity:0;
  pointer-events:none;
}

.library-allowed-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:56px;
  padding:12px 16px;
  border:1px solid #dce5e8;
  border-radius:14px;
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease, transform .12s ease, background .18s ease;
}

.library-allowed-option:hover .library-allowed-card{
  border-color:#c3d4d8;
  box-shadow:0 8px 18px rgba(18, 31, 43, .06);
  transform:translateY(-1px);
}

.library-allowed-option input:focus + .library-allowed-card{
  border-color:#7cbab4;
  box-shadow:0 0 0 4px rgba(11, 122, 117, .14);
}

.library-allowed-option input:checked + .library-allowed-card{
  border-color:#6fb9b1;
  background:linear-gradient(180deg, #f8fffe, #edf8f6);
  box-shadow:0 0 0 2px rgba(11, 122, 117, .12), 0 10px 24px rgba(18, 31, 43, .08);
}

.library-allowed-name{
  color:#17303b;
  font-weight:800;
}

.library-allowed-check{
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:999px;
  border:2px solid #c6d6db;
  background:#fff;
  position:relative;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}

.library-allowed-check::after{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:5px;
  height:10px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(40deg);
  opacity:0;
}

.library-allowed-option input:checked + .library-allowed-card .library-allowed-check{
  border-color:var(--primary);
  background:var(--primary);
  transform:scale(1.04);
}

.library-allowed-option input:checked + .library-allowed-card .library-allowed-check::after{
  opacity:1;
}

@media (max-width: 1180px){
  .board-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .employees-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .messenger-layout{
    grid-template-columns:280px minmax(0, 1fr);
  }

  .library-grid,
  .library-allowed-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 900px){
  .profile-grid{
    grid-template-columns:1fr;
  }

  .member-picker{
    grid-template-columns:1fr;
  }

  .owner-bind{
    grid-template-columns:1fr;
  }

  .board-task-create-form,
  .task-meta-form{
    grid-template-columns:1fr;
  }

  .messenger-layout,
  .messenger-compose-row{
    grid-template-columns:1fr;
  }

  .library-form-grid{
    grid-template-columns:1fr;
  }

  .messenger-sidebar{
    position:static;
  }
}

@media (max-width: 760px){
  .board-grid,
  .employees-grid{
    grid-template-columns:1fr;
  }

  .info-grid{
    grid-template-columns:1fr;
  }

  .task-detail-grid{
    grid-template-columns:1fr;
  }

  .search-form input{
    min-width:0;
    width:100%;
  }

  .cal-nav input,
  .cal-nav select{
    width:100%;
    min-width:0;
  }

  .messenger-message{
    max-width:100%;
  }

  .messenger-inline-image,
  .messenger-inline-pdf,
  .messenger-table-preview,
  .messenger-text-preview{
    width:100%;
  }
}

.home-section-head,
.favorite-card-meta,
.activity-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.favorites-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}

.favorite-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
  border:1px solid rgba(11, 122, 117, .12);
  border-radius:18px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(15, 37, 44, .06);
}

.favorite-card-page{
  min-height:170px;
}

.favorite-kind{
  display:inline-flex;
  align-self:flex-start;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(11, 122, 117, .10);
  color:#0b7a75;
  font-size:12px;
  font-weight:700;
}

.favorite-form{
  margin:0;
}

.favorite-form-inline{
  display:inline-flex;
}

.activity-feed{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.activity-feed-page{
  margin-top:16px;
}

.activity-item{
  border:1px solid rgba(15, 37, 44, .08);
  border-radius:18px;
  padding:16px 18px;
  background:#fff;
}

.activity-item h3,
.favorite-card h3{
  margin:0;
}

.activity-item p,
.favorite-card p{
  margin:0;
}

.activity-item-board{
  border-left:4px solid #0b7a75;
}

.activity-item-library{
  border-left:4px solid #da8b2e;
}

.activity-item-kb{
  border-left:4px solid #4f5fda;
}

.news-item-announcement{
  border-left:4px solid #0b7a75;
}

.profile-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.profile-links a{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:12px;
  background:#f3faf9;
  border:1px solid rgba(11, 122, 117, .12);
}

.empty-note{
  padding:8px 0;
}

.empty-note p{
  margin:0 0 6px;
}

.board-secondary-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  margin:18px 0;
}

.page-head-compact{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.page-head-compact h3{
  margin:0 0 4px;
}

.template-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.template-card{
  padding:14px 16px;
  border:1px solid rgba(15, 37, 44, .08);
  border-radius:16px;
  background:#fbfefd;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.template-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.template-apply-form{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.template-apply-form select,
.template-apply-form input,
.stack-form input,
.stack-form textarea,
.stack-form select{
  min-height:44px;
}

.stack-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.stack-form p{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.watchers-box ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:8px;
}

.watchers-box li label{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(11, 122, 117, .12);
  border-radius:12px;
  background:#f6fbfa;
}

.checklist-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.checklist-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(15, 37, 44, .08);
  border-radius:14px;
  background:#fff;
}

.checklist-item.is-done{
  background:#f3faf9;
  color:#597074;
}

.checklist-toggle{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(11, 122, 117, .24);
  background:#fff;
  color:#0b7a75;
  font-weight:700;
}

.task-checklist-chip{
  margin-top:8px;
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(11, 122, 117, .08);
  color:#0b7a75;
  font-size:12px;
  font-weight:700;
}

@media (max-width: 900px){
  .board-secondary-grid{
    grid-template-columns:1fr;
  }
}