:root {
  --sidebar-width: 292px;
  --planicare-navy: #1b2d62;
  --planicare-navy-2: #263b7a;
  --planicare-teal: #20b3a5;
  --planicare-sky: #43b4e5;
  --planicare-cyan: #5bc8d7;
  --planicare-mint: #5bc5ba;
  --planicare-bg: #dce3e7;
  --bg: #eef4f7;
  --text: #172554;
  --accent: var(--planicare-teal);
}
* { box-sizing: border-box; }
body { background: radial-gradient(circle at top left, rgba(91,200,215,.28), transparent 30%), var(--bg); color: var(--text); font-family: Verdana, Arial, sans-serif; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: var(--sidebar-width); background: linear-gradient(180deg,var(--planicare-navy),#10204b); color: #fff; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040; transition: transform .2s ease-in-out; overflow-y:auto; }
.sidebar:before { content:""; position:absolute; inset:0 auto 0 0; width:52px; background: linear-gradient(180deg,rgba(67,180,229,.25),rgba(32,179,165,.15)); border-radius:0 0 40px 0; pointer-events:none; }
.sidebar-brand {
  min-height: 86px;
  display: grid;
  gap: .2rem;
  justify-items: center;
  text-align: center;
  padding: 1rem 1rem;
  font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
}
.brand-logo {
  width: 240px;
  max-width: 100%;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.15));
  background: rgba(255,255,255,.95);
  border-radius: 15px;
  padding: .40rem .70rem;
}
.brand-product {
  color: var(--planicare-cyan);
  font-size: .9rem;
  letter-spacing: .03em;
  margin-left: 0;
  text-align: center;
}
.sidebar-nav { padding: 1rem; display: grid; gap: .35rem; position:relative; }
.sidebar-nav a { color: rgba(255,255,255,.86); text-decoration: none; padding: .78rem .95rem; border-radius: 999px; display: flex; gap: .7rem; align-items: center; }
.sidebar-nav a:hover { background: rgba(91,200,215,.18); color: #fff; }
.sidebar-nav i { color: var(--planicare-cyan); }
.main { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); min-height: 100vh; }
.topbar { height: 76px; background: rgba(255,255,255,.86); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(27,45,98,.12); display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; position: sticky; top:0; z-index: 1000; }
.content-wrap { padding: 1.35rem; }
.btn-primary { --bs-btn-bg: var(--planicare-navy); --bs-btn-border-color: var(--planicare-navy); --bs-btn-hover-bg: var(--planicare-teal); --bs-btn-hover-border-color: var(--planicare-teal); }
.btn-outline-primary { --bs-btn-color: var(--planicare-navy); --bs-btn-border-color: var(--planicare-navy); --bs-btn-hover-bg: var(--planicare-navy); --bs-btn-hover-border-color: var(--planicare-navy); }
.nav-pills .nav-link { border-radius:999px; color:var(--planicare-navy); }
.nav-pills .nav-link.active { background:var(--planicare-navy); }
.admin-card { border: 0; border-radius: 26px; box-shadow: 0 18px 45px rgba(27,45,98,.10); overflow: hidden; }
.admin-card .card-header { background: #fff; font-weight: 700; border-bottom: 1px solid #eef2f7; }
.stat-card { min-height: 120px; background: #fff; border-radius: 26px; box-shadow: 0 18px 45px rgba(27,45,98,.09); padding: 1.2rem; position: relative; overflow: hidden; border:1px solid rgba(27,45,98,.06); }
.stat-card:after { content:""; position:absolute; right:-28px; top:-28px; width:120px; height:120px; background:rgba(91,200,215,.22); border-radius:999px; }
.stat-card span { color: #607085; font-size: .9rem; }
.stat-card strong { display: block; font-size: 2rem; line-height: 1.2; color:var(--planicare-navy); }
.stat-card i { position: absolute; right: 1rem; bottom: .75rem; font-size: 3rem; opacity: .14; color:var(--planicare-teal); }
.stat-card.danger strong, .stat-card.danger i { color: #dc3545; }
.admin-tile { display: block; background: #fff; border-radius: 26px; box-shadow: 0 18px 45px rgba(27,45,98,.09); padding: 1.5rem; text-decoration: none; color: var(--text); min-height: 150px; border:1px solid rgba(27,45,98,.06); }
.admin-tile i { font-size: 2rem; color: var(--planicare-teal); }
.admin-tile strong { display:block; font-size:1.2rem; margin-top:.75rem; }
.admin-tile span { color:#607085; }
.rich-editor { min-height: 190px; background:#fff; border-radius: 0 0 18px 18px; }
.ql-toolbar.ql-snow { border-radius: 18px 18px 0 0; background:#f8fbfc; border-color:#dbe6ec; }
.ql-container.ql-snow { border-color:#dbe6ec; }
.ql-render img, .ql-editor img { max-width: 100%; border-radius: 14px; }
.template-toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.45rem 0 .6rem; }
.template-toolbar .form-select { max-width: 280px; }
.ai-panel { background:linear-gradient(135deg, rgba(91,200,215,.14), rgba(32,179,165,.12)); border:1px solid rgba(32,179,165,.25); border-radius:20px; padding:1rem; }
.ai-panel textarea { min-height:105px; }
.timeline { position: relative; display: grid; gap: 1rem; }
.timeline-item { display:flex; gap:.9rem; }
.timeline-dot { width:14px; height:14px; border-radius:50%; background:var(--planicare-sky); margin-top:.35rem; flex:0 0 auto; }
.timeline-dot.comment { background:var(--planicare-teal); }
.timeline-content { background:#f8fafc; border:1px solid #e5edf2; border-radius:18px; padding:.9rem; flex:1; }
.attachment-list { display:flex; flex-wrap:wrap; gap:.5rem; }
.attachment-pill { border:1px solid #dbe6ec; color:#1f2937; background:#fff; border-radius:999px; padding:.35rem .7rem; text-decoration:none; font-size:.9rem; }
.attachment-pill:hover { background:#effbfc; color:var(--planicare-navy); }
.table thead th { color:#607085; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
.kanban-shell { overflow-x:auto; padding-bottom: .5rem; }
.kanban-board { display:flex; gap:1rem; min-height:68vh; align-items:flex-start; }
.kanban-column { flex:0 0 315px; background:rgba(255,255,255,.68); border:1px solid rgba(27,45,98,.08); border-radius:24px; padding:.85rem; box-shadow: 0 12px 30px rgba(27,45,98,.06); }
.kanban-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.kanban-header strong { color:var(--planicare-navy); }
.kanban-card { display:block; background:#fff; color:var(--text); text-decoration:none; border-radius:20px; padding:.9rem; margin-bottom:.75rem; box-shadow:0 10px 24px rgba(27,45,98,.08); border:1px solid rgba(27,45,98,.06); }
.kanban-card:hover { transform: translateY(-2px); color:var(--planicare-navy); }
.kanban-meta { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.7rem; }
@media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); } .sidebar.show { transform: translateX(0); } .main { margin-left: 0; width:100%; } .content-wrap { padding: .9rem; } }
/* V4 - refinamentos de branding e login */
.sidebar { background: var(--planicare-navy) !important; }
.sidebar:before { display:none; }
.sidebar-nav a:hover, .sidebar-nav a.active { background: rgba(255,255,255,.10); }
.login-page { min-height:100vh; background: radial-gradient(circle at 20% 20%, rgba(91,200,215,.32), transparent 28%), var(--planicare-bg); }
.login-shell { min-height:100vh; display:grid; grid-template-columns: minmax(340px, 1fr) minmax(360px, 520px); padding: clamp(1rem, 3vw, 3rem); gap: clamp(1rem, 3vw, 3rem); align-items:stretch; }
.login-shell.compact { grid-template-columns: minmax(320px, 560px); justify-content:center; align-items:center; }
.login-brand-panel { position:relative; overflow:hidden; background:var(--planicare-navy); color:#fff; border-radius:36px; padding:clamp(2rem, 5vw, 5rem); display:flex; flex-direction:column; justify-content:center; box-shadow:0 30px 70px rgba(27,45,98,.25); }
.login-brand-panel:after { content:""; position:absolute; right:-120px; top:-80px; width:360px; height:360px; border-radius:999px; background:rgba(91,200,215,.20); }
.login-brand-panel h1 { font-size:clamp(2rem, 4vw, 4.2rem); line-height:1.03; max-width:760px; margin-top:3rem; }
.login-brand-panel p { max-width:620px; color:rgba(255,255,255,.78); font-size:1.08rem; }
.login-logo { width:220px; background:#fff; border-radius:22px; padding:.55rem .85rem; position:relative; z-index:1; }
.login-logo.small-logo { width:200px; }
.login-pill { display:inline-flex; gap:.5rem; align-items:center; margin-top:2rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); padding:.7rem 1rem; border-radius:999px; width:max-content; }
.login-card { background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.72); border-radius:36px; padding:clamp(1.4rem, 3vw, 3rem); box-shadow:0 28px 70px rgba(27,45,98,.16); align-self:center; width:100%; }
.login-card h2 { color:var(--planicare-navy); font-weight:800; }
.modal-content { border:0; border-radius:26px; box-shadow:0 30px 80px rgba(27,45,98,.20); }
.modal-header { border-bottom:1px solid #eef2f7; }
.dataTables_wrapper .dt-search input, .dataTables_wrapper .dt-length select { border-radius:999px; }
.mention-box { position:absolute; z-index:2000; min-width:260px; background:#fff; border:1px solid #dbe6ec; border-radius:16px; box-shadow:0 18px 45px rgba(27,45,98,.16); overflow:hidden; display:none; }
.mention-item { padding:.65rem .85rem; cursor:pointer; border-bottom:1px solid #f1f5f9; }
.mention-item:hover { background:#effbfc; }
.kanban-column.hidden-kanban-column { display:none !important; }
.kanban-card { cursor:grab; }
.kanban-card:active { cursor:grabbing; }
.kanban-dropzone { min-height:90px; }
@media (max-width: 991.98px) { .login-shell { grid-template-columns:1fr; } .login-brand-panel { min-height:340px; } }

.rich-editor-invalid .ql-editor,
.rich-editor.rich-editor-invalid {
    border: 1px solid #dc3545 !important;
    border-radius: 0.5rem;
}
.attachment-preview-frame {
    width: 100%;
    min-height: 70vh;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 0.75rem;
    background: #fff;
}
.attachment-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .4rem .65rem;
    background: rgba(65, 179, 217, .12);
    color: var(--planicare-navy, #1b2a59);
    text-decoration: none;
    margin: .15rem;
    cursor: pointer;
}
.attachment-pill:hover { background: rgba(65, 179, 217, .22); }

/* V12 - perfil e menu de utilizador */
.user-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid rgba(27,45,98,.14);
    background: #fff;
    color: var(--planicare-navy);
    border-radius: 999px;
    padding: .45rem .75rem;
    font-weight: 600;
}
.user-menu-btn:hover,
.user-menu-btn:focus {
    background: rgba(91,200,215,.12);
    color: var(--planicare-navy);
    border-color: rgba(32,179,165,.35);
}
.user-dropdown .dropdown-menu,
.navbar-nav .dropdown-menu {
    border: 0;
    border-radius: 18px;
    padding: .55rem;
    box-shadow: 0 18px 45px rgba(27,45,98,.16) !important;
}
.user-dropdown .dropdown-item,
.navbar-nav .dropdown-item {
    border-radius: 12px;
    padding: .55rem .75rem;
}
.user-dropdown .dropdown-item:hover,
.navbar-nav .dropdown-item:hover {
    background: rgba(91,200,215,.14);
    color: var(--planicare-navy);
}
.profile-hero {
    background: linear-gradient(135deg, #fff 0%, rgba(91,200,215,.12) 100%);
}
.profile-avatar {
    width: 84px;
    height: 84px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    background: var(--planicare-navy);
    color: #fff;
    box-shadow: 0 18px 42px rgba(27,45,98,.18);
    flex: 0 0 auto;
}
.profile-avatar i {
    font-size: 3rem;
    line-height: 1;
}
.profile-details {
    display: grid;
    grid-template-columns: minmax(130px, 190px) 1fr;
    gap: .85rem 1rem;
}
.profile-details dt {
    color: #607085;
    font-weight: 700;
}
.profile-details dd {
    margin: 0;
    color: var(--planicare-navy);
}
.security-status strong {
    color: var(--planicare-navy);
}
@media (max-width: 575.98px) {
    .profile-details {
        grid-template-columns: 1fr;
        gap: .15rem;
    }
    .profile-details dd {
        margin-bottom: .75rem;
    }
}

/* Fix Quill toolbar and popup positioning */
.ql-toolbar {
    position: relative;
    z-index: 1050;
}

.ql-editor {
    position: relative;
    z-index: 1;
}

.ql-tooltip {
    position: absolute;
    z-index: 2000 !important;
}

.ql-picker-options {
    z-index: 2000 !important;
}

.rich-editor {
    position: relative;
    z-index: 1;
}