/* styles.css - PIM11 theme (blue/white/gray) */
:root{
  --bg:#f8fafc;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --blue:#3b82f6;
  --blue-dark:#1e3a8a;
  --gray:#e2e8f0;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --radius: 0px; /* squared edges */
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 Inter,system-ui,Segoe UI,Arial,sans-serif;}

.shadow{box-shadow:var(--shadow)}
.pill{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-weight:600;font-size:12px;margin-right:.25rem}

.login-wrap{display:grid;place-items:center;min-height:100vh;padding:24px}
.login-card{background:var(--panel);border:1px solid var(--gray);border-radius:var(--radius);padding:24px;max-width:420px;width:100%}
.logo-row{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.logo-row h1{margin:0;font-size:24px}

/* 
  Layout compacto dos campos dos modais (form-row-compact)
  - .form-group: empacota <label> + <input/select> em coluna
  - aplicado apenas quando usamos .grid-2 ou .grid-3 no modal de marcações
*/
.form-row-compact{margin-bottom:6px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group > label{font-weight:600}
.form{display:flex;flex-direction:column;gap:10px}
.form input, .form select{padding:10px;border:1px solid var(--gray);border-radius:var(--radius);background:#fff}
.btn{background:#fff;border:1px solid var(--gray);padding:8px 12px;border-radius:var(--radius);cursor:pointer}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.danger{background:#ef4444;border-color:#ef4444;color:#fff}
.icon-btn{border:1px solid var(--gray);background:#fff;padding:6px 10px;border-radius:var(--radius);cursor:pointer}
.small{font-size:12px}
.muted{color:var(--muted)}

#app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,#ffffff,#f1f5f9);border-right:1px solid var(--gray);position:relative;z-index:2}
.sidebar .brand{display:flex;align-items:center;gap:8px;padding:16px 12px;font-weight:700;color:var(--blue-dark)}
.sidebar nav{display:flex;flex-direction:column;padding:8px}
.nav-btn{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:4px 8px;background:#fff;border:1px solid var(--gray);border-radius:var(--radius);cursor:pointer;text-align:left}
.nav-btn:hover{background:#f8fafc}
.nav-btn.danger{background:#fff1f2;border-color:#fecdd3;color:#991b1b}
.collapse-toggle{position:absolute;right:8px;top:8px;cursor:pointer;color:var(--muted)}

.content{display:flex;flex-direction:column}
.topbar{background:linear-gradient(180deg,#ffffff,#f1f5f9);border-bottom:1px solid var(--gray);padding:10px 16px;display:flex;align-items:center;justify-content:space-between}
.topbar .left{display:flex;align-items:center;gap:10px}

.page{padding:16px;display:none}
.page.visible{display:block}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.panel{background:var(--panel);border:1px solid var(--gray);border-radius:var(--radius)}
.panel-title{padding:10px 12px;background:#eff6ff;border-bottom:1px solid var(--gray);font-weight:700}
.panel-title.small{font-weight:600;font-size:12px}
.panel-subtabs{padding:8px 12px;border-bottom:1px solid var(--gray);display:flex;gap:8px}
.panel-body{padding:12px}

.table-wrap{background:var(--panel);border:1px solid var(--gray);border-radius:var(--radius)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px;border-bottom:1px solid var(--gray);text-align:left}

.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.input{padding:8px;border:1px solid var(--gray);border-radius:var(--radius);background:#fff}

.calendar-wrap{display:grid;grid-template-columns:1fr 360px;gap:16px}
#calendar{background:var(--panel);border:1px solid var(--gray);border-radius:var(--radius);padding:8px;min-height:520px}
.sidepanel{background:var(--panel);border:1px solid var(--gray);border-radius:var(--radius);padding:8px;min-height:520px}
.divider{height:1px;background:var(--gray);margin:8px 0}

.calendar-header{display:flex;align-items:center;justify-content:space-between;padding:8px 6px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:6px}
.day-cell{border:1px solid var(--gray);min-height:96px;border-radius:var(--radius);padding:6px;position:relative;background:#fff}
.day-num{position:absolute;top:6px;right:6px;color:var(--muted);font-size:12px}
.event{display:block;font-size:12px;padding:2px 4px;border-radius:4px;margin-top:4px;color:#0f172a;border:1px solid rgba(0,0,0,.1);cursor:pointer;position:relative}
.event:hover{filter:brightness(0.98)}

.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.week-col{background:#fff;border:1px solid var(--gray);border-radius:var(--radius);padding:8px;min-height:400px}
.day-list{display:flex;flex-direction:column;gap:6px}
.agenda-list{background:#fff;border:1px solid var(--gray);border-radius:var(--radius);padding:8px}
.agenda-item{border-bottom:1px solid var(--gray);padding:8px 4px}

.task-layout{display:grid;grid-template-columns:1fr 360px;gap:16px}

.rte{min-height:120px;border:1px dashed var(--gray);padding:8px;background:#fff;border-radius:var(--radius);overflow:auto}
.rte-toolbar{display:flex;gap:6px;margin:6px 0}
.rte-toolbar button, .rte-toolbar label{border:1px solid var(--gray);background:#fff;padding:4px 6px;border-radius:var(--radius);cursor:pointer}

.actions-row{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}

.modal{position:fixed;inset:0;background:rgba(15,23,42,.4);display:none;align-items:center;justify-content:center;padding:16px;z-index:20}
.modal.show{display:flex}
.modal-card{background:#fff;border:1px solid var(--gray);border-radius:var(--radius);max-width:720px;width:100%}
.modal-title{padding:10px 12px;background:#eff6ff;border-bottom:1px solid var(--gray);font-weight:700}
.modal .form{padding:12px}

.tooltip{position:fixed;pointer-events:none;background:#111827;color:#fff;padding:6px 8px;border-radius:6px;font-size:12px;display:none;z-index:50}

.toast{position:fixed;right:12px;bottom:12px;background:#111827;color:#fff;padding:10px 12px;border-radius:6px;opacity:0;transform:translateY(10px);transition:all .2s;z-index:100}
.toast.show{opacity:1;transform:none}
.toast.success{background:#16a34a}
.toast.error{background:#dc2626}
.toast.warn{background:#ca8a04}

@media (max-width: 900px){
  #app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-280px;top:0;bottom:0;width:260px;transition:left .2s}
  .sidebar.open{left:0}
  .calendar-wrap, .task-layout{grid-template-columns:1fr}
}

.inline-rte-toolbar{display:flex;gap:6px;margin:6px 0}
.inline-rte-toolbar button{border:1px solid var(--gray);background:#fff;padding:4px 6px;border-radius:var(--radius);cursor:pointer}
.comment-card .editor{min-height:100px}

/* Desktop collapsible sidebar */
#app.sidebar-collapsed{ grid-template-columns:72px 1fr; }
.sidebar.collapsed{ width:72px; }
.sidebar.collapsed .brand span{ display:none; }
.sidebar.collapsed nav .nav-btn{ justify-content:center; padding:10px; }
.sidebar.collapsed .nav-btn{ font-size:0; }           /* hide labels (text nodes) */
.sidebar.collapsed .nav-btn span{ font-size:18px; }   /* keep icon visible */
.sidebar.collapsed .nav-btn.danger{ font-size:0; }
.sidebar.collapsed .collapse-toggle{ right:8px; }

.comment-view input[type="checkbox"]{ pointer-events:none; }

.section-actions{display:flex;justify-content:flex-end;margin:8px 0}.section-actions .btn{margin-left:8px}


/* Azul para botões "Novo" por secção */
#btnNewEvent, #btnNewTask, #btnNewNote, #btnNewContact, #btnNewCategory{
  background:#1976d2 !important;
  color:#fff !important;
  border-color:#1976d2 !important;
}
#btnNewEvent:hover, #btnNewTask:hover, #btnNewNote:hover, #btnNewContact:hover, #btnNewCategory:hover{
  filter:brightness(0.95);
}
/* Alinhamento dos action rows */
.section-actions{display:flex;justify-content:flex-end;margin:8px 0}
.section-actions .btn{margin-left:8px}



/* Evitar que os eventos fiquem por cima do número do dia no mês */
.calendar-grid .day-cell{ padding-top: 22px; }
.calendar-grid .day-cell .event{ margin-top: 4px; }



/* Dias de outros meses na vista mensal */
.calendar-grid .day-cell.other-month{
  background: #f5f6f8;
  color: var(--muted);
}
.calendar-grid .day-cell.other-month .day-num{
  color: var(--muted);
}
.calendar-grid .day-cell.other-month .event{
  opacity: 0.65;
}


/* Status icons */
.status-icon{display:inline-block;margin-right:4px;font-size:11px;opacity:.9;vertical-align:baseline}
.agenda-item .status-icon{font-size:12px}




/* Reminder icons (calendário) */
.reminder-icon{display:inline-block;margin-right:4px;font-size:11px;opacity:.9;vertical-align:baseline}
.agenda-item .reminder-icon{font-size:12px}
/* Cancelled style */
.event.canceled{ text-decoration: line-through; opacity: .75; }
.event .evt-title{ text-decoration: none; } /* reset for normal */
.agenda-item.canceled strong{ text-decoration: line-through; }


/* Recurrence icon spacing */
.rec-icon{display:inline-block;margin-right:4px;font-size:11px;opacity:.9;vertical-align:baseline}



/* ===== Agenda: date headers ===== */
.agenda-date{
  background:#eff6ff;
  border:1px solid var(--gray);
  border-radius: var(--radius);
  padding:6px 8px;
  margin-top:10px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
}
.agenda-date .weekday{ text-transform: capitalize; }
.agenda-item .time{ font-weight:600; }

/* ===== Calendar weekday header + today highlight ===== */
.calendar-weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  padding:0 6px 6px;
}
.calendar-weekdays .wd{
  text-align:center;
  font-weight:600;
  color:var(--muted);
  font-size:12px;
  text-transform:capitalize;
}

/* Today highlight in month grid (overrides other-month) */
.calendar-grid .day-cell.today{
  background:#fff7ed;
  border-color:#fdba74;
}
.calendar-grid .day-cell.today .day-num{
  color:#b45309;
  font-weight:700;
}



/* Reminder (bell) icon spacing */
.rem-icon{
  display:inline-block;
  margin-right:4px;
  font-size:11px;
  opacity:.9;
  vertical-align:baseline;
}


/* Sortable table headers */
.table th.sortable{ cursor: pointer; user-select: none; position: relative; }
.table th.sort-asc::after{ content: "▲"; font-size: 10px; margin-left: 6px; }
.table th.sort-desc::after{ content: "▼"; font-size: 10px; margin-left: 6px; }

/* Ocultar ações de edição/apagar nas tarefas (tabela) */
#taskTable [data-edit], #taskTable [data-del], #tasksTable [data-edit], #tasksTable [data-del]{ display:none !important; }


/* ===== Rich Text Editor (toolbar + editor) ===== */
.rte-wrap{ border:1px solid var(--gray); background:#fff; border-radius: var(--radius); }
.rte-wrap .rte-toolbar{ display:flex; flex-wrap:wrap; gap:6px; padding:6px; border-bottom:1px solid var(--gray); background:linear-gradient(180deg,#ffffff,#f8fafc); }
.rte-wrap .rte-toolbar .btn,
.rte-wrap .rte-toolbar button{ border:1px solid var(--gray); background:#fff; padding:4px 6px; border-radius: var(--radius); cursor:pointer; }
.rte-wrap .rte-toolbar select{ border:1px solid var(--gray); background:#fff; padding:4px 6px; border-radius: var(--radius); }
.rte-wrap .rte-toolbar input[type="color"]{ height:28px; width:36px; padding:0; border:1px solid var(--gray); border-radius: var(--radius); }
.rte-wrap .rte{ min-height:200px; padding:10px; border:0; border-radius:0 0 var(--radius) var(--radius); }
.rte-source{ width:100%; min-height:200px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; padding:10px; border:0; }



/* ===== Modal vertical elevator (scroll) ===== */
body.modal-open{ overflow:hidden; }

.modal-card{
  max-height: 92vh;
  display:flex;
  flex-direction: column;
  overflow: hidden; /* contain inner scrolling to the form */
}

.modal-title{
  position: sticky;
  top: 0;
  z-index: 1;
}

.modal .form{
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-height: 540px){
  .modal-card{ max-height: calc(100vh - 24px); }
}


/* ===== Comment list separators + icon-only actions ===== */
#eventComments .comment-card + .comment-card,
#taskComments  .comment-card + .comment-card,
#contactComments .comment-card + .comment-card{
  border-top: 1px dashed var(--gray);
  margin-top: 8px;
  padding-top: 8px;
}

.comment-actions{
  display:flex;
  gap:6px;
  justify-content:flex-end;
  margin-top:6px;
}

.icon-btn.xs{
  padding:4px 6px;
  font-size:14px;
  line-height:1;
  border-radius:6px;
}

.icon-btn.xs.danger{ color:#dc2626; border-color:#fecaca; }
.icon-btn.xs:hover{ background:#f8fafc; }


/* ===== Comments: spacing, separators, right-aligned icon buttons ===== */
#eventComments, #taskComments{
  display: flex;
  flex-direction: column;
  gap: 8px; /* small spacing between notes */
}

.comment-card{
  padding-bottom: 4px;
}

.comment-card + .comment-card{
  border-top: 1px dashed var(--border, #e5e7eb); /* separator line */
  margin-top: 10px;   /* space above the next note */
  padding-top: 10px;  /* space below the separator line */
}

.comment-actions{
  display: flex;
  width: 100%;              /* make the row span the card */
  justify-content: flex-end;/* place buttons on the right */
  gap: 6px;
  margin-top: 6px;
  text-align: right;        /* fallback alignment */
}

.icon-btn{
  appearance: none;
  border: 1px solid var(--border, #e5e7eb);
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
}

.icon-btn.xs{
  padding: 4px 6px;
  font-size: 14px;
  line-height: 1;
  border-radius: 6px;
}

.icon-btn.xs.danger{ color:#dc2626; border-color:#fecaca; }
.icon-btn.xs:hover{ background:#f8fafc; }


/* Show summarized comments with preserved line breaks */
.comment-card .comment-view{ white-space: pre-line; }

/* === Notas: ajustar layout e seleção === */
#page-notas .grid-2{ grid-template-columns: 1fr 3fr; } /* Livros passa a ~25%, Notas ~75% */
.table tr.selected{ background:#eef2ff; }
#bookList .table{ width:100%; }

/* === Books CRUD UI === */
#bookList .row-actions{ float:right; display:inline-flex; gap:6px; align-items:center; }
.icon-btn{ border:1px solid #e5e7eb; background:#fff; padding:2px 6px; border-radius:8px; font-size:12px; line-height:1; cursor:pointer; }
.icon-btn:hover{ background:#f3f4f6; }
.icon-btn.danger{ border-color:#fecaca; background:#fff5f5; }



/* Floating bell (fallback) */
.notif-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 1px solid var(--gray, #e2e8f0);
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  display: inline-flex; align-items:center; justify-content:center;
  font-size: 20px;
  z-index: 140;
  cursor: pointer;
}
.notif-fab:hover{ transform: translateY(-1px); }


/* === Notifications side panel === */
.notif-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 150;
}
.notif-backdrop.show{ opacity:1; pointer-events:auto; }

.notif-panel{
  position: fixed;
  top: 0;
  right: -380px;
  width: 360px;
  max-width: 90vw;
  height: 100vh;
  background: var(--panel);
  border-left: 1px solid var(--gray);
  box-shadow: var(--shadow);
  transition: right .22s ease;
  z-index: 160;
  display:flex;
  flex-direction:column;
}
.notif-panel.open{ right: 0; }

.notif-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  background:#eff6ff;
  border-bottom:1px solid var(--gray);
  position: sticky;
  top: 0;
  z-index: 1;
}
.notif-body{
  padding: 10px 12px;
  overflow:auto;
  flex:1 1 auto;
}

.notif-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:8px 6px;
  border-bottom:1px dashed var(--gray);
}
.notif-item:last-child{ border-bottom:0; }
.notif-item .when{ font-size:12px; color:var(--muted); }
.notif-item .kind{ font-size:12px; color:var(--muted); }
.notif-empty{ color:var(--muted); font-size:13px; }

@media (max-width: 480px){
  .notif-panel{ width: 92vw; }
}

/* === Notifications side panel v3 === */
.notif-backdrop{
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease; z-index: 9998;
}
.notif-backdrop.show{ opacity:1; pointer-events:auto; }
.notif-panel{
  position: fixed; top:0; right:-440px;
  width:400px; max-width:92vw; height:100vh;
  background: var(--panel, #fff);
  border-left: 1px solid var(--gray, #e5e7eb);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  transition: right .22s ease; z-index: 9999;
  display:flex; flex-direction:column;
  will-change: right;
}
.notif-panel.open{ right:0; }
.notif-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:12px 14px; background:#eff6ff;
  border-bottom:1px solid var(--gray, #e5e7eb); position:sticky; top:0; z-index:1;
}
.notif-body{ padding:12px 14px; overflow:auto; flex:1 1 auto; }
.notif-item{ display:flex; align-items:flex-start; gap:10px; padding:10px 6px; border-bottom:1px dashed var(--gray, #e5e7eb); }
.notif-item:last-child{ border-bottom:0; }
.notif-item .when, .notif-item .kind{ font-size:12px; color:var(--muted, #6b7280); }
.notif-empty{ color:var(--muted, #6b7280); font-size:13px; }

/* Floating bell (fallback) */
.notif-fab{
  position: fixed; bottom:16px; right:16px;
  width:46px; height:46px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#111827; color:#fff; border:0; cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.28); z-index:10000;
}
@media (max-width: 480px){ .notif-panel{ width:92vw; } }

/* === Notifications rail (left, collapsible) === */
:root{
  --notif-rail-width: 340px;
  --notif-rail-collapsed: 44px;
  --notif-rail-bg: var(--panel, #ffffff);
  --notif-rail-border: var(--gray, #e5e7eb);
  --notif-muted: var(--muted, #6b7280);
}

.notif-rail{
  position: fixed;
  top: 0;
  left: 0; /* will be adjusted by JS to sit after the main sidebar if present */
  height: 100vh;
  width: var(--notif-rail-width);
  background: var(--notif-rail-bg);
  border-right: 1px solid var(--notif-rail-border);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  z-index: 990;
  display: flex;
  flex-direction: column;
  transition: width .22s ease, left .22s ease;
}

.notif-rail.collapsed{
  width: var(--notif-rail-collapsed);
}

.notif-rail .rail-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--notif-rail-border);
  background: #eff6ff;
}
.notif-rail .rail-head .title{
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-rail .rail-actions{
  display: flex;
  gap: 6px;
}
.notif-rail .rail-actions .icon-btn{
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.notif-rail .rail-body{
  padding: 10px 10px;
  overflow: auto;
  flex: 1 1 auto;
}

.notif-rail .notif-item{
  display: flex;
  gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px dashed var(--notif-rail-border);
}
.notif-rail .notif-item:last-child{ border-bottom: 0; }
.notif-rail .notif-item .meta{
  font-size: 12px;
  color: var(--notif-muted);
}
.notif-rail .empty{ color: var(--notif-muted); font-size: 13px; }

/* When collapsed, hide body and header title, keep a vertical icon strip */
.notif-rail.collapsed .rail-body,
.notif-rail.collapsed .rail-head .title{
  display: none;
}

.notif-rail .collapse-tab{
  position: absolute;
  top: 10px;
  right: -12px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: #111827;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

@media (max-width: 640px){
  :root{ --notif-rail-width: 86vw; }
}

/* === Notifications right rail (collapsible, always visible) === */
:root{
  --notif-rail-r-width: 340px;
  --notif-rail-r-collapsed: 44px;
  --notif-rail-bg: var(--panel, #ffffff);
  --notif-rail-border: var(--gray, #e5e7eb);
  --notif-muted: var(--muted, #6b7280);
}

body.notif-rail-right-expanded{ margin-right: var(--notif-rail-r-width); transition: margin-right .22s ease; }
body.notif-rail-right-collapsed{ margin-right: var(--notif-rail-r-collapsed); transition: margin-right .22s ease; }

.notif-rail-right{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: var(--notif-rail-r-width);
  background: var(--notif-rail-bg);
  border-left: 1px solid var(--notif-rail-border);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  z-index: 990;
  display: flex;
  flex-direction: column;
  transition: width .22s ease;
}

.notif-rail-right.collapsed{
  width: var(--notif-rail-r-collapsed);
}

.notif-rail-right .rail-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--notif-rail-border);
  background: #eff6ff;
}
.notif-rail-right .rail-head .title{
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-rail-right .rail-actions{ display:flex; gap:6px; }
.notif-rail-right .rail-actions .icon-btn{
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.notif-rail-right .rail-body{
  padding: 10px 10px;
  overflow: auto;
  flex: 1 1 auto;
}

.notif-rail-right .notif-item{
  display: flex;
  gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px dashed var(--notif-rail-border);
}
.notif-rail-right .notif-item:last-child{ border-bottom: 0; }
.notif-rail-right .notif-item .meta{
  font-size: 12px;
  color: var(--notif-muted);
}
.notif-rail-right .empty{ color: var(--notif-muted); font-size: 13px; }

/* When collapsed, hide body and header title */
.notif-rail-right.collapsed .rail-body,
.notif-rail-right.collapsed .rail-head .title{
  display: none;
}

/* Collapser tab (sticks on the left edge of the rail) */
.notif-rail-right .collapse-tab{
  position: absolute;
  top: 10px;
  left: -12px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: #111827;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

@media (max-width: 640px){
  :root{ --notif-rail-r-width: 86vw; }
}

/* === Notif cleanup overrides === */
.notif-fab{ display:none !important; }
.notif-backdrop{ display:none !important; } /* if some old backdrop exists */
.notif-rail{ display:none !important; }     /* hide old LEFT rail if injected */

/* === Notif v7 header/icon tweaks === */
.notif-fab{ display:none !important; } /* hide any old floating bell */
.notif-rail{ display:none !important; } /* hide old LEFT rail if any */
.notif-backdrop{ display:none !important; } /* hide old side panel backdrop if any */

.notif-rail-right .collapse-tab{
  background: transparent !important;
  color: #111827 !important;
  box-shadow: none !important;
  width: 28px; height: 28px;
  border-radius: 0 !important;
  font-size: 20px; line-height: 28px;
}

/* === Notifications right rail v8 === */
:root{
  --notif-rail-r-width: 340px;
  --notif-rail-r-collapsed: 44px;
  --notif-rail-bg: var(--panel, #ffffff);
  --notif-rail-border: var(--gray, #e5e7eb);
  --notif-muted: var(--muted, #6b7280);
}
/* Body margins so content never fica tapado */
body.notif-rail-right-expanded{ margin-right: var(--notif-rail-r-width); transition: margin-right .22s ease; }
body.notif-rail-right-collapsed{ margin-right: var(--notif-rail-r-collapsed); transition: margin-right .22s ease; }

/* Right rail */
.notif-rail-right{
  position: fixed; top:0; right:0; height:100vh;
  width: var(--notif-rail-r-width);
  background: var(--notif-rail-bg);
  border-left: 1px solid var(--notif-rail-border);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  z-index: 990;
  display:flex; flex-direction:column;
  transition: width .22s ease;
}
.notif-rail-right.collapsed{ width: var(--notif-rail-r-collapsed); }

/* Head + actions */
.notif-rail-right .rail-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:10px 12px;
  border-bottom:1px solid var(--notif-rail-border);
  background:#eff6ff;
}
.notif-rail-right .rail-head .title{
  font-weight:600; font-size:14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.notif-rail-right .rail-actions{ display:flex; gap:6px; }
.notif-rail-right .rail-actions .icon-btn{
  background:transparent; border:0; cursor:pointer; font-size:16px; line-height:1;
}

.notif-rail-right .rail-body{ padding:10px 10px; overflow:auto; flex:1 1 auto; }
.notif-rail-right .notif-item{ display:flex; gap:8px; padding:8px 6px; border-bottom:1px dashed var(--notif-rail-border); }
.notif-rail-right .notif-item:last-child{ border-bottom:0; }
.notif-rail-right .notif-item .meta{ font-size:12px; color: var(--notif-muted); }
.notif-rail-right .empty{ color: var(--notif-muted); font-size:13px; }

/* When collapsed, hide internals (show only the bell tab) */
.notif-rail-right.collapsed .rail-body,
.notif-rail-right.collapsed .rail-head .title,
.notif-rail-right.collapsed .rail-actions{ display:none; }

/* Collapse tab as a clean bell icon (no black circle) */
.notif-rail-right .collapse-tab{
  position:absolute; top:10px; left:-12px;
  width:28px; height:28px; padding:0;
  background: transparent; color:#111827;
  border:0; box-shadow:none; border-radius:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:20px; line-height:28px;
}

/* Cleanup remnants */
.notif-fab{ display:none !important; }     /* legacy floating bell */
.notif-rail{ display:none !important; }    /* legacy LEFT rail */
.notif-backdrop{ display:none !important;} /* legacy overlay */
@media (max-width: 640px){ :root{ --notif-rail-r-width: 86vw; } }


/* === Notif v9: collapsed-only tab + min width + hide stray bells === */
:root{
  --notif-rail-r-width: clamp(320px, 28vw, 440px) !important; /* min 320px, max ~440px */
  --notif-rail-r-collapsed: 28px !important;                   /* only bell tab visible */
}
/* When collapsed, rail is a 28px sliver; nothing inside is visible except the tab */
.notif-rail-right.collapsed{
  width: var(--notif-rail-r-collapsed) !important;
  border-left: 0;
  box-shadow: none;
}
.notif-rail-right.collapsed .rail-body,
.notif-rail-right.collapsed .rail-head .title,
.notif-rail-right.collapsed .rail-actions{ display:none !important; }

/* Bell tab visual */
.notif-rail-right .collapse-tab{
  position:absolute; top:10px; left:-12px;
  width:28px; height:28px; padding:0;
  background: transparent; color:#111827;
  border:0; box-shadow:none; border-radius:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:20px; line-height:28px;
}

/* Body margin equals the current rail width states */
body.notif-rail-right-expanded{ margin-right: clamp(320px, 28vw, 440px) !important; transition: margin-right .22s ease; }
body.notif-rail-right-collapsed{ margin-right: 28px !important; transition: margin-right .22s ease; }

/* Kill any floating/stray bells outside the rail */
.notif-fab{ display:none !important; }
.floating-bell, .bell-fab, .btn-bell, .bell-button{ display:none !important; }
button[aria-label="Abrir notificações"]:not(.collapse-tab){ display:none !important; }


/* === Notif v11: collapsed = 0px, only bell tab visible === */
.notif-rail-right{ overflow: visible; } /* allow tab to overhang */
.notif-rail-right.collapsed{
  width: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Bell tab sits outside the rail so only it is visible */
.notif-rail-right .collapse-tab{
  position:absolute; top:10px; left:-32px;  /* overhang 32px to the left */
  width:28px; height:28px; padding:0;
  background: transparent; color:#111827;
  border:0; box-shadow:none; border-radius:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:20px; line-height:28px;
  z-index: 1000; /* above content */
}
/* Body should not reserve space when collapsed */
body.notif-rail-right-collapsed{ margin-right: 0 !important; transition: margin-right .22s ease; }
/* Expanded margin keeps clamp width */
body.notif-rail-right-expanded{ margin-right: clamp(320px, 28vw, 440px) !important; transition: margin-right .22s ease; }


/* ==== Compact sidebar (Resumo request 2025-11-08) ==== */
#app{ grid-template-columns: 200px 1fr; }
.sidebar nav{ padding:6px; }
.nav-btn{ padding:8px 10px; background: transparent; border: 0; box-shadow:none; border-radius:0; }
.nav-btn:hover{ background: rgba(15,23,42,0.06); }
.nav-btn.danger{ background: transparent; border:0; }


/* ==== Sidebar collapsed tweaks: center icons and narrower rail ==== */
#app.sidebar-collapsed{ grid-template-columns: 60px 1fr !important; }
.sidebar.collapsed{ width:60px !important; }
.sidebar.collapsed nav .nav-btn{
  justify-content: center !important;
  padding: 8px 0 !important;
  gap: 0 !important;
  text-align: center !important;
}
.sidebar.collapsed .nav-btn span{
  font-size: 20px !important;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}


/* Time label inside month event */
.calendar-grid .event .evt-time{font-weight:600;margin-right:6px;}


/* === Tasks table row selection & click-friendly icons === */
tr.task-row{ cursor:pointer; }
tr.task-row.selected{ background: #eef2ff; }
tr.task-row .pill,
tr.task-row .rem-icon,
tr.task-row .rec-icon{ pointer-events: none; }



/* === Task Importance pills === */
.pill.imp-low{ background:#22c55e; color:#fff; }
.pill.imp-med{ background:#f59e0b; color:#111827; }
.pill.imp-high{ background:#ef4444; color:#fff; }


/* Contact side panel layout */
.contact-layout{display:grid;grid-template-columns:1fr 360px;gap:16px}



/* === Overdue task indicators === */
.pill.overdue{ background:#fee2e2; color:#991b1b; border:1px solid #ef4444; }
.overdue-flag{ color:#991b1b; font-weight:600; }
.overdue-icon{ display:inline-block; margin-right:4px; font-size:12px; }

@keyframes pill-blink {0%{opacity:1}50%{opacity:.35}100%{opacity:1}}
.pill.blink{animation:pill-blink 1.1s linear infinite}



/* === Pills for recurrence & reminder icons === */
.pill.pill-icon { padding: .1rem .45rem; line-height: 1; font-weight: 700; border: 1px solid var(--gray); }
.pill-rec { background: #dbeafe; color: #1e3a8a; border-color: #60a5fa; }
.pill-rem { background: #fef3c7; color: #92400e; border-color: #f59e0b; }
tr.task-row .pill-rec, tr.task-row .pill-rem { pointer-events: none; }
 }

/* === Context menu (tasks) === */
.ctx-menu{ position: fixed; z-index: 10000; background:#fff; border:1px solid var(--gray); box-shadow: var(--shadow); border-radius: var(--radius); min-width: 200px; display:none; padding:4px 0; }
.ctx-menu.show{ display:block; }
.ctx-menu .ctx-item{ padding:8px 12px; cursor:pointer; display:flex; align-items:center; gap:8px; font-size:14px; }
.ctx-menu .ctx-item:hover{ background:#f8fafc; }
.ctx-menu .ctx-sep{ height:1px; background:var(--gray); margin:4px 0; }


/* === Reminder / Recurrence Pills === */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid rgba(0,0,0,.1);
  background: #f4f6f8;
  white-space: nowrap;
}
.pill-icon { padding-left: 8px; padding-right: 8px; }
.pill-rem { background: #fff6d6; border-color: #f2d98a; }
.pill-rec { background: #e6f7ff; border-color: #9bd5ff; }

/* === Context Menu === */
.context-menu {
  position: fixed;
  z-index: 100000;
  min-width: 220px;
  background: #1f2937;
  color: #e5e7eb;
  border: 1px solid #374151;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  padding: 6px;
  display: none;
}
.context-menu.open { display: block; }
.context-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}
.context-menu__item:hover { background: #111827; }
.context-menu__item .k { margin-left: auto; opacity: .6; font-size: 11px; }

.context-menu{position:fixed;z-index:100000;min-width:220px;background:#1f2937;color:#e5e7eb;border:1px solid #374151;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);padding:6px;display:none}
.context-menu.open{display:block}
.context-menu__item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;user-select:none}
.context-menu__item:hover{background:#111827}
.context-menu__item .k{margin-left:auto;opacity:.6;font-size:11px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12px;line-height:1.4;border:1px solid rgba(0,0,0,.1);background:#f4f6f8;white-space:nowrap}
.pill-icon{padding-left:8px;padding-right:8px}
.pill-rem{background:#fff6d6;border-color:#f2d98a}


/* === Painéis laterais colapsáveis (Calendário, Tarefas, Contactos) ===
   Objetivo: permitir pin (fixar) para manter o painel aninhado à direita,
   ou trabalhar em modo flutuante (sobreposição) que recolhe ao clicar fora.
   Lógica de classes:
     - .pinned -> painel aninhado (grid com 2 colunas). Sem overlay. Não recolhe ao clicar fora.
     - .floating -> painel destacado do fluxo com position:fixed. Usa .open para ficar visível.
     - .open -> painel visível (apenas quando .floating).
     - wrapper .undocked -> a grid perde a 2.ª coluna (1fr).
   Estes estilos são genéricos e funcionam para #calendarDetail, #taskDetail e #contactDetail.
*/
.calendar-wrap.undocked,
.task-layout.undocked,
.contact-layout.undocked{ grid-template-columns: 1fr !important; }

/* Cabeçalho do painel: botões pin/colapsar alinhados à direita */
.sidepanel .panel-tools{
  position: sticky; /* mantém visível no topo do painel */
  top: -8px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-bottom: 4px;
  z-index: 2;
  background: linear-gradient(to bottom, var(--panel) 75%, transparent);
}
.sidepanel .panel-tools .icon-btn{
  width: 28px; height: 28px; padding:0; line-height: 28px;
  display:flex; align-items:center; justify-content:center;
}
.sidepanel.pinned .btn-collapse{ display: none; } /* Quando fixo não há colapso manual */

/* Modo flutuante (sobreposto) */
.sidepanel.floating{
  position: fixed;
  top: 88px;                 /* abaixo da toolbar principal */
  right: 16px;
  bottom: 16px;
  width: 360px;
  max-width: calc(100vw - 32px);
  box-shadow: var(--shadow);
  transform: translateX(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .2s ease;
  z-index: 140;
}
.sidepanel.floating.open{
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Aba (ícone flutuante) que reabre o painel quando recolhido */
.panel-tab{
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--gray);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: none; /* visível só quando o painel está em modo flutuante */
  z-index: 141;
}
.panel-tab.show{ display:flex; align-items:center; justify-content:center; }

/* Backdrop para capturar clique fora do painel em modo flutuante */
.panel-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 139;
}
.panel-overlay.show{ opacity: 1; pointer-events: auto; }


/* === Modal maximizável (para notas grandes) ===
   - A classe .max aplicada a .modal-card faz o modal ocupar quase todo o ecrã.
   - A .rte (editor rico) cresce para ocupar o espaço disponível.
   Explicação:
     * width/height em viewport -> melhor área de escrita;
     * .form e .rte-wrap passam a flex para o editor expandir sem quebrar o layout.
*/
.modal-card.max{
  width: 96vw;
  max-width: 96vw;
  height: 94vh;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
}
.modal-card.max .form{
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;          /* permite que os filhos usem o espaço */
}
.modal-card.max .rte-wrap{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.modal-card.max .rte{
  flex: 1 1 auto;
  min-height: 0;
  height: auto;           /* o editor usa o espaço em vez de impor altura */
  overflow: auto;
}

/* Cabeçalho do modal com ações (ex: maximizar/restaurar) */
.modal-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.modal-title .modal-actions{
  display:flex; gap:6px;
}


/* === Suporte genérico para modais maximizados (todas as janelas) ===
   - Para além de .form, cobrimos também .modal-body (quando existir).
   - Garante que a zona de conteúdo cresce e o scroll ocorre dentro do corpo.
*/
.modal-card.max .modal-body,
.modal-card.max .form{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* permite que os filhos usem o espaço disponível */
}

.modal-card.max .modal-body > *:last-child{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto; /* scroll só no conteúdo, não no ecrã todo */
}

/* Botão de ação no cabeçalho do modal (🗖/🗗) - aparência discreta */
.modal-title .btn-maximize{
  border: 1px solid var(--gray-300, #ccc);
  background: var(--bg, #f7f7f9);
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
  cursor: pointer;
}
.modal-title .btn-maximize:hover{
  filter: brightness(0.95);
}



/* === RTE: botão e inputs checkbox ===
   Comentários: Permitimos inserir checkboxes no editor e guardar o estado.
   O estilo abaixo melhora o alinhamento dentro de parágrafos. */
.rte input[type="checkbox"]{
  transform: translateY(1px);
  margin-right: .35rem;
}
.rte-toolbar .rte-checkbox{
  border: 1px solid var(--border, #e5e7eb);
  background: var(--btn-bg, rgba(0,0,0,0.02));
  padding: .25rem .4rem;
  border-radius: .375rem;
}
.rte-toolbar .rte-checkbox:active{
  transform: scale(0.96);
}


/* === Importância (Calendário) === */
@keyframes border-blink { 0%{ box-shadow:0 0 0 2px rgba(239,68,68,.9) inset; } 50%{ box-shadow:0 0 0 2px rgba(239,68,68,.2) inset; } 100%{ box-shadow:0 0 0 2px rgba(239,68,68,.9) inset; } }
@keyframes pill-blink { 0%{ filter:brightness(1.0);} 50%{ filter:brightness(1.35);} 100%{ filter:brightness(1.0);} }
.event.blink{ animation: border-blink 1.1s linear infinite; }
.pill.blink{ animation: pill-blink 1.1s linear infinite; }
.pill.pill-green{ background:#22c55e !important; color:#fff !important; }
.pill.pill-yellow{ background:#f59e0b !important; color:#111 !important; }
.pill.pill-red{ background:#ef4444 !important; color:#fff !important; }


/* [PT-PT] Ícone de recorrência (🔁) — exibido fora de 'pill', alinhado com os restantes ícones */
.recurrence-icon{
  display:inline-block;
  margin-right:4px;
  vertical-align:middle;
  line-height:1;
}



/* === Notificações: destaque da nova entrada (borda a piscar por importância) === */
@keyframes notif-flash-red { 0%{ box-shadow:0 0 0 2px rgba(239,68,68,.95) inset; } 50%{ box-shadow:0 0 0 2px rgba(239,68,68,.25) inset; } 100%{ box-shadow:0 0 0 2px rgba(239,68,68,.95) inset; } }
@keyframes notif-flash-yellow { 0%{ box-shadow:0 0 0 2px rgba(245,158,11,.95) inset; } 50%{ box-shadow:0 0 0 2px rgba(245,158,11,.25) inset; } 100%{ box-shadow:0 0 0 2px rgba(245,158,11,.95) inset; } }
@keyframes notif-flash-green { 0%{ box-shadow:0 0 0 2px rgba(34,197,94,.95) inset; } 50%{ box-shadow:0 0 0 2px rgba(34,197,94,.25) inset; } 100%{ box-shadow:0 0 0 2px rgba(34,197,94,.95) inset; } }
.notif-item.notif-flash-red{ animation: notif-flash-red 1.1s linear infinite; border:1px solid #ef4444; }
.notif-item.notif-flash-yellow{ animation: notif-flash-yellow 1.1s linear infinite; border:1px solid #f59e0b; }
.notif-item.notif-flash-green{ animation: notif-flash-green 1.1s linear infinite; border:1px solid #22c55e; }


/* === Ações por notificação (Abrir / Snooze / Dispensar) ===
   Comentários (PT-PT):
   - .notif-actions apresenta botões em linha para cada lembrete.
   - .snooze-menu surge inline com opções de 5/10/20/30/60 minutos.
   - Tudo pensado para ser compacto e "tap-friendly".
*/
.notif-item{ gap:8px; padding:10px 0; border-bottom:1px dashed rgba(0,0,0,.08); }

/* =======================================================================
   CORREÇÃO (PT-PT): Snooze/Adiar
   - Problema: as opções de minutos apareciam sempre "abertas" porque a regra
     `.snooze-menu { display: flex; }` sobrepunha-se ao estilo por omissão do
     atributo [hidden] do browser.
   - Solução: forçar que `.snooze-menu[hidden]` tenha `display: none !important;`,
     garantindo que as opções só aparecem quando o JS remove o atributo [hidden]
     ao carregar no botão "😴 Adiar".
   - Impacto: apenas afeta os menus de adiar; o restante layout não é alterado.
   ======================================================================= */
.snooze-menu[hidden]{ display:none !important; }


.notif-item .notif-actions{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.btn-notif{ font: inherit; font-size:12px; line-height:1; padding:6px 8px; border-radius:8px; border:1px solid #e5e7eb; background:#f9fafb; cursor:pointer; }
.btn-notif:hover{ background:#f3f4f6; }
.btn-notif.danger{ border-color:#fecaca; background:#fff1f2; }
.btn-notif.snooze{ }
.snooze-wrap{ position:relative; display:inline-flex; }
.snooze-menu{ position:absolute; z-index:10; top:100%; left:0; background:#fff; border:1px solid #e5e7eb; box-shadow:0 8px 24px rgba(0,0,0,.08); border-radius:8px; padding:6px; display:flex; gap:6px; margin-top:4px; }
.snooze-menu .sno{ padding:6px 8px; border:1px solid #e5e7eb; background:#fff; border-radius:6px; cursor:pointer; font-size:12px; }
.snooze-menu .sno:hover{ background:#f9fafb; }


/* === [FIX 2025-11-14] Botões de ação por baixo de cada notificação ===
   Contexto: o Luís pediu que os botões Abrir/Adiar/Dispensar apareçam
   por baixo de cada item, e não ao lado. Esta secção sobrepõe regras
   anteriores usando CSS Grid para garantir que o bloco de ações ocupa
   sempre a linha completa abaixo do conteúdo principal.
*/
.notif-item{
  display: grid;
  grid-template-columns: 24px 1fr; /* ícone + conteúdo */
  grid-auto-rows: auto;
  align-items: start;
  gap: 8px;
}
/* o bloco .notif-actions passa a ocupar a largura total do item */
.notif-item > .notif-actions{
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
/* no mobile continua a funcionar naturalmente, sem alterações extra */
@media (max-width: 480px){
  .notif-item{ grid-template-columns: 20px 1fr; }
}

/* =========================================================
   NOTIFICAÇÕES — BOTÕES POR BAIXO DE CADA ITEM
   ---------------------------------------------------------
   Lógica:
   - Forçamos o .notif-item a usar CSS Grid com 2 colunas
     (coluna do ícone + coluna do conteúdo principal).
   - O bloco .notif-actions passa para a linha seguinte e
     ocupa a largura total (grid-column: 1 / -1).
   - Usamos !important para sobrepor regras anteriores.
   --------------------------------------------------------- */
.notif-item{
  display: grid !important;                 /* força grid mesmo que exista 'display:flex' antes */
  grid-template-columns: 22px 1fr !important; /* ícone + conteúdo */
  grid-auto-rows: auto;
  align-items: start !important;
  gap: 8px;
}
.notif-item > .notif-actions{
  grid-column: 1 / -1 !important;          /* ocupa as duas colunas, ficando por baixo */
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px !important;
  justify-content: flex-start;
}
/* Mobile */
@media (max-width: 480px){
  .notif-item{ grid-template-columns: 18px 1fr !important; }
}
/* ======================================================= */


/* =======================================================================
   CORREÇÃO (PT-PT): Comportamento do menu "Adiar"
   - Objetivo: opções de minutos só aparecem após clique.
   - Implementação:
     1) Por omissão, o menu fica oculto (`display:none`).
     2) Mostramos o menu quando:
        - o wrapper tiver a classe `.open` (definida pelo JS), OU
        - o menu não tiver o atributo `[hidden]` (fallback).
   - Extra: z-index e posição mantidos conforme desenho anterior.
   ======================================================================= */
.snooze-wrap .snooze-menu{ display:none; }
.snooze-wrap.open .snooze-menu{ display:flex; }
.snooze-menu:not([hidden]){ display:flex; }
.snooze-menu[hidden]{ display:none !important; }



/* =========================================================
   PAINEL DE NOTIFICAÇÕES — MODO SOBREPOSTO (Overlay)
   ---------------------------------------------------------
   Objetivo: quando expandido, o painel deve *sobrepor-se*
   à aplicação em vez de ficar ancorado e empurrar o layout.
   ---------------------------------------------------------
   - .notif-rail-right passa a ser fixed com z-index alto
   - .collapsed usa translateX(100%) para sair do ecrã
   - .notif-rail-backdrop cria um véu clicável para fechar
   - Nenhuma margem do <body> é ajustada neste modo
   ========================================================= */
.notif-rail-right{
  position: fixed;        /* sobrepõe toda a app */
  top: 0;
  right: 0;
  height: 100vh;
  width: 420px;
  max-width: 90vw;
  background: var(--panel-bg, #fff);
  box-shadow: -18px 0 30px rgba(0,0,0,.28);
  transform: translateX(100%);
  transition: transform .22s ease;
  z-index: 5000;          /* acima do conteúdo geral */
  border-left: 1px solid rgba(0,0,0,.08);
}
.notif-rail-right:not(.collapsed){
  transform: translateX(0); /* visível */
}
/* Botão de aba mantém-se encostado ao painel */
.notif-rail-right .collapse-tab{
  position: absolute;
  left: -44px;
  top: 12px;
  width: 40px;
  height: 40px;
  border-radius: 8px 0 0 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Backdrop (véu) do rail em modo overlay */
.notif-rail-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 4990; /* logo abaixo do painel */
}
.notif-rail-backdrop.show{
  opacity: 1;
  pointer-events: auto;
}
/* Fim do bloco overlay do painel de notificações */

/* === Overlay: neutralizar margens do body para não "empurrar" o layout === */
body.notif-rail-right-expanded,
body.notif-rail-right-collapsed{
  margin-right: 0 !important;
}

/* === Notificações: cor por importância (fundos claros + barra esquerda) === */
.notif-item[data-imp="Baixo"]{ background:#ecfdf5; border-left:3px solid #22c55e; }
.notif-item[data-imp="Médio"]{ background:#fffbeb; border-left:3px solid #f59e0b; }
.notif-item[data-imp="Alto"]{  background:#fee2e2; border-left:3px solid #ef4444; }

/* === Finanças: layout em pilha === */
#page-financas .grid-3{ grid-template-columns: 1fr; }

/* Caption para cada tabela */
.table-caption{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700;
  padding:6px 12px;
  border:1px solid var(--gray);
  background:#f8fafc;
  color:var(--blue-dark);
  border-radius:9999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
  margin:6px 0 8px;
}

/* Botões icónicos (exemplo imagem) */
.btn-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:28px; padding:0;
  border-radius:12px; border:1px solid var(--gray); background:#fff; cursor:pointer;
}
.btn-ic.soft{ background:#fff; }
.btn-ic.soft.danger{ background:#fff1f2; border-color:#fecdd3; }
.btn-ic:hover{ box-shadow: var(--shadow); }
.btn-ic svg{ width:16px; height:16px; }

/* Finanças: total por baixo da coluna Valor */
.table tfoot td{ border-top:1px solid var(--gray); }
.text-strong{ font-weight:700; }

/* === Finanças: destaque do Orçamento/Diária antes das tabelas === */
.fin-summary{
  display:flex; align-items:center; gap:16px;
  padding:10px 12px; margin:8px 8px 12px;
  background:#eef2ff; border:1px solid #c7d2fe; border-radius:12px;
  color:var(--blue-dark);
}
.fin-summary .stat{ display:flex; align-items:baseline; gap:6px; }
.fin-summary .stat-label{ font-weight:700; opacity:.9; }
.fin-summary .stat-value{ font-weight:800; }
.fin-summary .sep{ opacity:.5; }

/* === Finanças: destaques por tabela === */
.fin-group{ padding:6px 8px 10px; border-radius:12px; margin:8px 0; }
.fin-group.abono{ background:#ecfdf5; border:1px solid #a7f3d0; }
.fin-group.poupanca{ background:#fffbeb; border:1px solid #fde68a; }
.fin-group.despesa{ background:#fff1f2; border:1px solid #fecdd3; }

/* Negativo no registo diário */
#finDailyTable .table tr.neg{ background:#fff1f2; }

/* Ajuste: botão 'Gravar' versão icónica */
#finDailyTable .btn-ic{ margin:0; }

#finDailyTable .table tr.ok{ background:#ecfdf5; }

#finDailyTable .table tr.warn{ background:#fffbeb; }