/* ==========================================================
   VARIABLES
========================================================== */

:root {
  --bg:         #F5F3EF;
  --surface:    #FFFFFF;
  --sidebar:    #1c1917;
  --accent:     #c8a96e;
  --accent2:    #8b5e3c;
  --text:       #1c1917;
  --text-muted: #78716c;
  --border:     #e7e5e4;
  --danger:     #dc2626;
  --blue:       #2563eb;
  --green:      #16a34a;
  --late:       #dc2626;
  --radius:     12px;
  --shadow:
      0 1px 3px rgba(0,0,0,.06),
      0 4px 12px rgba(0,0,0,.07);
  --shadow-lg:
      0 8px 32px rgba(0,0,0,.14);
  --font-head:
      'DM Serif Display',
      Georgia,
      serif;
  --font-body:
      'DM Sans',
      system-ui,
      sans-serif;
  --sidebar-w: 240px;
  --tag-project-bg: #DBDBDB;
  --tag-recurrence-bg: #D0E6FF;
  --tag-recurrence-text: #000000;
  --tag-date-bg: #BBE4FB;
  --tag-date-text: #0C9CEA;
  --status-late: #FF0000;
  --status-today: #0000FF;
  --status-future: #00A3A3;
  --status-done: #16A34A;
  --status-active: #748B64;
  --status-none: #64748B;
  --group-header-bg: #E2E8F0;
}

/* ==========================================================
   RESET
========================================================== */

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body {
    height:100%;
}

body {
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.4;
}

button,
input,
textarea,
select {
    font-family:inherit;
}

button {
    cursor:pointer;
}

a {
    color:inherit;
    text-decoration:none;
}

.hidden {
    display: none !important;
}

/* ==========================================================
   STRUCTURE GENERALE
========================================================== */

#app {
    display:flex;
    min-height:100vh;
}

#content {
    flex:1;
    padding:12px;
    overflow-x:auto;
}

.page {
    display:flex;
    flex-direction:column;
    gap:16px;
    width:100%;
    max-width:1500px;
    margin:0 auto;
}

.page h1 {
    font-family:var(--font-head);
    font-size:34px;
    margin-bottom:5px;
}

#export-page .form-section
{
	padding:4px;
}

/* Carte générique (toute section devient une carte) */

section {
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
	padding: 4px 4px;
}

/* ==========================================================
   SIDEBAR
========================================================== */

#sidebar {
    width:var(--sidebar-w);
    min-width:var(--sidebar-w);
    background:var(--sidebar);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:sticky;
    top:0;
    height:100vh;
}

#sidebar hr {
    border:none;
    height:1px;
    background:rgba(255,255,255,.12);
    margin:20px 0;
}

#sidebar .menu-main,
#sidebar .menu-item {
    cursor: pointer;
    user-select: none;
	display: block;
	width: 100%;
}

#sidebar .menu-main:hover,
#sidebar .menu-item:hover {
    cursor: pointer;
}

.sidebar-top {
    padding:20px;
}

.sidebar-bottom
{
	padding:20px;
}

.menu-main {
    color:var(--bg);
    font-size:22px;
    font-weight:700;
    text-align:center;
    padding:15px;
    border-radius:var(--radius);
    transition:.2s;
}

.menu-item {
    color:var(--accent);
    padding:12px 14px;
    border-radius:var(--radius);
    margin-bottom:5px;
    transition:.2s;
}

.menu-main:hover,
.menu-item:hover {
    background:rgba(255,255,255,.07);
}

.menu-main.active,
.menu-item.active {
    background:rgba(200,169,110,.15);
}

.menu-section-title {
    color:var(--bg);
    font-size:14px;
    font-weight:700;
    letter-spacing:.08em;
    margin-bottom:10px;
}

.menu-section-toggle
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	cursor:pointer;
}

.menu-section-arrow
{
	font-size:.7rem;
	color:var(--text-muted);
}

.menu-section-items
{
	display:flex;
	flex-direction:column;
	max-height:200px;
	overflow:hidden;
	transition:max-height .2s ease;
}

.menu-section-items.collapsed
{
	max-height:0;
}

.btn-sidebar {
    width:100%;
    margin-bottom:10px;
    padding:12px;
    border:none;
    border-radius:var(--radius);
    background:#A1948C;
    color:var(--sidebar);
    font-weight:600;
}

.btn-logout
{
    width:100%;
    margin-bottom:10px;
    align-items:center;
    padding:8px 14px;
    background:transparent;
    border:1px solid #666;
    border-radius:6px;
    color:#ddd;
    font-size:14px;
    cursor:pointer;
    transition:background 0.2s ease, border-color 0.2s ease;
}

.btn-logout:hover
{
    background:rgba(255, 255, 255, 0.08);
    border-color:#C96A00;
	color:#C96A00;
}

/* --- Barre de recherche --- */

.sidebar-search
{
	position:relative;
	padding:4px 4px 30px;
}

.sidebar-search input
{
	width:100%;
	padding:10px 12px;
	border-radius:var(--radius);
	border:1px solid var(--border);
	background:var(--bg);
	color:var(--text);
	font-size:.9rem;
}

.sidebar-search input:focus
{
	outline:none;
	border-color:var(--accent);
}

.search-results-dropdown
{
	position:absolute;
	top:calc(100% - 4px);
	left:16px;
	right:16px;
	background:var(--surface);
	border-radius:var(--radius);
	box-shadow:var(--shadow-lg);
	max-height:400px;
	overflow-y:auto;
	z-index:2000;
	padding:8px 0;
}

.search-results-dropdown.hidden
{
	display:none;
}

.search-group-label
{
	padding:6px 14px;
	font-size:.75rem;
	font-weight:700;
	color:var(--text-muted);
	text-transform:uppercase;
}

.search-result-item
{
	padding:8px 14px;
	cursor:pointer;
	display:flex;
	flex-direction:column;
	gap:2px;
}

.search-result-item:hover
{
	background:var(--bg);
}

.search-result-name
{
	font-weight:600;
	color:var(--text);
}

.search-result-meta
{
	font-size:.75rem;
	color:var(--text-muted);
}

.search-no-results
{
	padding:14px;
	text-align:center;
	color:var(--text-muted);
	font-size:.85rem;
}

.search-highlight
{
	animation:search-flash 2s ease;
}

@keyframes search-flash
{
	0%, 100% { background:transparent; }
	20% { background:rgba(200, 169, 110, 0.35); }
}

/* ==========================================================
   BOUTONS
========================================================== */

.btn-delete {
    padding:10px 22px;
    border:1.5px solid var(--danger);
    border-radius:var(--radius);
    background:none;
    color:var(--danger);
    font-size:14px;
    font-weight:600;
    transition:.15s;
}

.btn-delete:hover {
    background:var(--danger);
    color:#fff;
}

.btn-delete:disabled {
    opacity:.5;
    cursor:not-allowed;
}

.btn-save {
    padding:10px 22px;
    border:none;
    border-radius:var(--radius);
    background:var(--sidebar);
    color:var(--accent);
    font-size:14px;
    font-weight:600;
}

.btn-add {
    padding:10px 32px;
    border:none;
    border-radius:var(--radius);
    background:var(--sidebar);
    color:var(--accent);
    font-size:15px;
    font-weight:600;
}

.btn-cancel {
    padding:10px 22px;
    border:1.5px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
    color:var(--text);
	cursor:pointer;
}

.btn-cancel:hover {
    background: #f5f5f5;
}

.btn-show-more {
    display:block;
    margin:0px auto 0;
    padding:10px 28px;
    border:1.5px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface);
    color:var(--text-muted);
    font-size:14px;
}

.btn-edit {
    padding: 10px 22px;
    border: 1.5px solid var(--sidebar);
    border-radius: var(--radius);
    background: none;
    color: var(--sidebar);
    font-size: 14px;
    font-weight: 600;
    transition: .15s;
}

.btn-edit:hover {
    background: var(--sidebar);
    color: #fff;
}

.btn-edit:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btn-secondary
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:10px 16px;
	border:1px solid var(--border);
	border-radius:var(--radius);
	background:#F8F8F8;
	color:var(--text);
	font-weight:500;
	cursor:pointer;
	transition:.15s;
}

.btn-secondary:hover
{
	background:#EFEFEF;
	border-color:#BDBDBD;
}

.btn-secondary:active
{
	transform:scale(.97);
}

button:disabled {
    opacity:0.5;
    cursor:not-allowed;
    pointer-events:none;
}

button:active {
	transform: scale(.97);
}

/* --- Boutons icône (tableaux / cartes) --- */

.btn-icon-complete,
.btn-icon-reopen,
.btn-icon-regenerate,
.btn-icon-export,
.btn-icon-add-task,
.btn-icon-add-task-day,
.btn-icon-edit,
.btn-icon-suspend,
.btn-icon-reactivate,
.btn-icon-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.btn-icon-reactivate
{
	background: rgba(22, 163, 74, 0.15);
	border-radius: 6px;
}

.btn-icon-reactivate:hover
{
	background: rgba(22, 163, 74, 0.3);
}

.btn-icon-suspend
{
	background: rgba(220, 38, 38, 0.12);
	border-radius: 6px;
}

.btn-icon-suspend:hover
{
	background: rgba(220, 38, 38, 0.25);
}

.btn-icon-regenerate:disabled
{
	pointer-events:auto;
}

/* --- Barre d'actions groupées --- */

.bulk-actions-bar
{
	position:fixed;
	bottom:24px;
	left:50%;
	transform:translateX(-50%);
	display:flex;
	align-items:center;
	gap:14px;
	padding:14px 20px;
	background:var(--surface);
	color:#fff;
	border-radius:var(--radius);
	box-shadow:0 8px 24px rgba(0,0,0,.25);
	z-index:1000;
	transition:opacity .2s ease, transform .2s ease;
}

.bulk-actions-bar button
{
	white-space:nowrap;
}

.bulk-actions-bar.hidden
{
	opacity:0;
	pointer-events:none;
	transform:translateX(-50%) translateY(10px);
}

#bulk-actions-count
{
	font-weight:600;
	color:var(--accent);
	margin-right:6px;
}

.group-select-all
{
	margin-right:6px;
}

/* --- Actions flottantes (scroll haut/bas) --- */

.floating-actions {
    position:fixed;
    right:20px;
    bottom:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.floating-actions button {
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:var(--sidebar);
    color:var(--accent);
    box-shadow:var(--shadow);
}

/* --- Groupes de boutons filtres/vues --- */

.button-group,
.projects-button-group {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
	padding:4px 4px;
}

.button-group button,
.projects-button-group button {
    border:1px solid var(--border);
    padding:8px 14px;
    border-radius:var(--radius);
    transition:.15s;
}

.button-group button {
    background:white;
}

.button-group button:hover,
.projects-button-group button:hover
{
    filter: brightness(96%);
}

.button-group button.active {
    background:var(--sidebar);
    color:var(--accent);
}

.sortable-header
{
	cursor:pointer;
	user-select:none;
}

.sortable-header:hover
{
	color:var(--accent);
}

.sort-arrow
{
	display:inline-block;
	margin-left:4px;
	font-size:.7rem;
}

/* ==========================================================
   FORMULAIRES
========================================================== */

.form-section form {
	padding: 4px 4px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.form-row {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.task-top-row {
    display:grid;
    grid-template-columns:
        250px
        250px
        1fr;
    gap:12px;
}

label {
    font-size:14px;
    font-weight:600;
}

input[type=text],
input[type=date],
input[type=time],
textarea,
select {
    width:100%;
    padding:12px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:white;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="time"],
textarea,
select {
	font-size:16px;
}

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

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.field-warning
{
	position:absolute;
	top:100%;
	left:0;
	margin-top:4px;
	padding:6px 10px;
	background:var(--blue);
	color:#fff;
	font-size:.8rem;
	border-radius:6px;
	opacity:0;
	pointer-events:none;
	transform:translateY(-4px);
	transition:opacity .15s ease, transform .15s ease;
	z-index:10;
	white-space:nowrap;
}

.field-warning.show
{
	opacity:1;
	transform:translateY(0);
}

/* --- Formulaires multi-colonnes --- */

.form-row-multi {
    display: grid;
    gap: 16px;
    align-items: end;
    width: 100%;
}

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

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

/* Groupe label + champ */

.field-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Un champ qui doit prendre toute la largeur */

.field-group.full-width {
    grid-column: 1 / -1;
}

/* Les contrôles occupent toute la largeur disponible */

.field-group input,
.field-group select,
.field-group textarea {
    width: 100%;
    box-sizing: border-box;
}

.recurrence-custom-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.recurrence-custom-inline input[type="number"] {
    width: 70px;
	flex: 0 0 auto;
}

.recurrence-custom-inline select {
    flex: 1;
}

.section-content {
    overflow: hidden;
    transition: all 0.2s ease;
}

.section-content.collapsed,
.filter-content.collapsed {
    display: none;
}

.collapse-btn {
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s ease;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* --- Couleurs projets --- */

#project-color-picker {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.project-color-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
	padding-left: 6px;
}

.color-option {
    cursor:pointer;
	padding: 3px;
}

.color-option input {
    display:none;
}

.color-preview {
    display:block;
    width:32px;
    height:32px;
    border-radius:50%;
    border:2px solid transparent;
    transition:.15s;
}

.custom-color-preview {
    display: block;
    width: 32px;
    height: 32px;
	border-radius: 6px !important;
    border: 2px solid transparent;
	transition:.15s;
}

.color-option input:checked + .color-preview {
    border-color:var(--sidebar);
    transform:scale(1.15);
}

/* ==========================================================
   TABLEAUX
========================================================== */

.table-section {
    overflow-x:auto;
}

table {
    width:100%;
    border-collapse:collapse;
    margin-top:15px;
}

thead {
    background:var(--group-header-bg);
}

th,
td {
    padding:8px;
    border-bottom:1px solid var(--border);
    text-align:left;
}

th {
    font-weight:700;
}

.actions {
    display: flex;
	align-items: center;
    gap: 8px;
}

#projects-table tbody tr,
#tasks-table tbody tr,
#templates-table tbody tr
{
    cursor: help;
}

#projects-table tbody tr:nth-child(even),
#tasks-table tbody tr:nth-child(even),
#templates-table tbody tr:nth-child(even)
{
	background:var(--bg);
}

#projects-table tbody tr:hover,
#tasks-table tbody tr:hover,
#templates-table tbody tr:hover
{
	background:rgba(200, 169, 110, 0.10);
}

tr.task-suspended td:not(.actions):not(:first-child)
{
	opacity:.55;
}

/* ==========================================================
   TAGS ET BADGES
========================================================== */

.tag
{
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: .80rem;
	font-weight: 600;
	border: 2px solid transparent;
	white-space: nowrap;
}

.tag-project
{
	background: var(--project-color, var(--tag-project-bg));
	color:#000000;
	border: none;
}

.project-name-badge
{
	background: var(--project-color, var(--tag-project-bg));
	color:#000000;
	font-weight:600;
	border:none;
}

.tag-recurrence
{
	background: var(--tag-recurrence-bg);
	color: var(--tag-recurrence-text);
}

.tag-date
{
	background: var(--tag-date-bg);
	color: var(--tag-date-text);
}

.tag-date-late
{
	color:#FF0000;
}

.tag-date-done
{
	color:#16A34A;
}

.tag-time-badge
{
	border-radius: 4px;
	background: none;
	font-size: .90rem;
}

.tag-status
{
	background: #FAFAFA;
	font-weight: bold;
}

.tag-status.todo-today
{
	color: var(--status-today);
}

.tag-status.todo-future
{
	color: var(--status-future);
}

.tag-status.late
{
	color: var(--status-late);
}

.tag-status.done
{
	color: var(--status-done);
}

.tag-status.active
{
	color: var(--status-active);
}

.tag-status.none
{
	color: var(--status-none);
}

.tag-customized
{
	background:rgba(200, 169, 110, 0.18);
	color:var(--accent);
	font-weight:600;
}

.tag-suspended
{
	background:rgba(120, 113, 108, .18);
	color:var(--text-muted);
	font-weight:600;
	margin-left:8px;
}

.task-summary
{
	display:flex;
	flex-direction:column;
	gap:6px;
	font-size:.85rem;
}

.task-summary-row
{
	display:flex;
	align-items:center;
	gap:6px;
}

.task-summary-label
{
	color:var(--text-muted);
	font-weight:600;
	min-width:90px;
}

.count-badge
{
	padding:2px 9px;
	border-radius:12px;
	font-weight:600;
	font-size:.8rem;
	white-space:nowrap;
}

.count-badge.active
{
	background:rgba(37, 99, 235, .12);
	color:var(--blue);
}

.count-badge.inactive
{
	background:rgba(120, 113, 108, .15);
	color:var(--text-muted);
}

.count-badge.done
{
	background:rgba(34, 197, 94, .15);
	color:#16a34a;
}

/* ==========================================================
   FILTRES
========================================================== */

.section-header,
.filter-header
{
	padding:4px 4px;
	background:none;
	border:none;
	font-weight:700;
	cursor:pointer;
	color:var(--text-muted);
}

.filter-group {
    display:flex;
    flex-direction:column;
    gap:8px;
	padding:4px 4px;
}

.filter-group h3 {
    font-size:15px;
    color:var(--text-muted);
	margin:0;
}

.filter-content
{
	margin-top:15px;
	padding-top:15px;
	display:flex;
	flex-direction:column;
	gap:24px;
}

.filter-project
{
    background: color-mix(
        in srgb,
        var(--project-color, #D6D3D1) 15%,
        white
    );
    color: var(--project-color, #444);
    transition: .2s;
}

.filter-project.active
{
    background: var(--project-color);
    color: white;
    border-color: var(--project-color);
}

.filter-project[data-project="all"]
{
    background: white;
    color: black;
}

.filter-project[data-project="all"].active
{
    background:var(--sidebar);
	color:var(--accent);
    border-color:var(--sidebar);
}

.filter-actions
{
	margin-top:2px;
	padding-top:2px;
	border-top:1px solid var(--border);
}

.btn-reset-filters
{
	background:none;
	border:none;
	cursor:pointer;
	font-size:.9rem;
	font-weight:600;
	color:var(--text-muted);
}

.btn-reset-filters:hover
{
	color:#0C9CEA;
}

/* ==========================================================
   MODALES
========================================================== */

#modal-container {
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:10000;
}

#modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
}

#modal-overlay.hidden {
    display: none;
}

#modal-window {
    width: min(700px, 90vw);
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

#modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

h2 .tag-time-badge
{
	vertical-align:middle;
	margin-right:6px;
}

.modal-info {
    margin: 16px 0;
    padding: 12px;
    border-radius: var(--radius);
    background: #eef5ff;
}

.modal-warning {
    margin: 16px 0;
    padding: 12px;
    border-radius: var(--radius);
    background: #ffeaea;
    color: #b00020;
    font-weight: 600;
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.modal-actions-column
{
	display:flex;
	flex-direction:column;
	gap:12px;
	margin-top:20px;
}

.modal-actions-column button
{
	width:100%;
}

.modal-message {
    white-space: pre-line;
}

/* ==========================================================
   PLANNING - STATISTIQUES / VUES / OUTILS
========================================================== */

.planning-stats
{
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
	gap:14px;
	align-items:center;
	justify-content:center;
	margin-bottom:4px;
	padding:4px;
}

.planning-today-date
{
	font-family:var(--font-head);
	font-size:1.3rem;
	color:var(--accent);
	width:100%;
	text-align:center;
}

.planning-stats-row
{
	display:flex;
	flex-wrap:wrap;
	gap:30px;
	justify-content:center;
}

.stat-card
{
	display:flex;
	align-items:center;
	gap:8px;
	padding:0;
	background:none;
	border:none;
	box-shadow:none;
	font-size:1rem;
	font-weight:600;
}

.stat-number
{
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:32px;
	height:32px;
	border-radius:8px;
	color:#FFF;
	font-weight:700;
}

.stat-today .stat-number
{
	background:#2563EB;
}

.stat-late .stat-number
{
	background:#DC2626;
}

.stat-done .stat-number
{
	background:#16A34A;
}

.planning-actions
{
	display:flex;
	justify-content:flex-end;
	margin-bottom:15px;
}

.planning-view,
.filters-panel
{
	padding:4px 0;
	background:var(--surface);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	margin-bottom:2px;
}

.planning-view h2
{
	margin:0 0 10px;
	font-size:1.2rem;
}

.planning-toolbar
{
	display:flex;
	justify-content:flex-end;
	margin-bottom:20px;
	padding-bottom:15px;
	border-bottom:1px solid var(--border);
}

#toggle-all-groups
{
	background:none;
	border:none;
	font-size:.95rem;
	font-weight:600;
	cursor:pointer;
	padding:0;
	color:var(--text-muted);
}

#planning-groups
{
	background:none;
	box-shadow:none;
	border-radius:0;
}

/* ==========================================================
   PLANNING - GROUPES ET CARTES D'OCCURRENCE
========================================================== */

.planning-group
{
	margin-bottom:30px;
	padding:0;
	overflow:hidden;
	background:transparent;
	box-shadow:var(--shadow);
}

.planning-group h2
{
	font-size: 1.35rem;
	font-weight: 700;
}

.planning-section-title
{
	margin-bottom:10px;
	font-size:1rem;
	font-weight:700;
	color:#64748b;
	text-transform:uppercase;
	letter-spacing:.05em;
}

.group-header
{
	display:flex;
	align-items:center;
	gap:10px;
	padding:14px 20px;
	background:var(--group-header-bg);
	border-bottom:none;
	cursor:pointer;
	font-size:1.15rem;
	font-weight:700;
}

.group-content
{
	padding:16px 20px 20px;
	background:none;
	overflow:hidden;
	transition:opacity .20s ease;
}

.group-title
{
	font-size:1.15rem;
	font-weight:700;
}

.group-count
{
	margin-left:auto;
	color:#64748B;
	font-size:.90rem;
	font-weight:600;
}

.group-toggle
{
	border:none;
	background:none;
	cursor:pointer;
	font-size:1rem;
}

.occurrence-card
{
	display: flex;
	align-items: stretch;
	background: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0,0,0,.08);
	margin: 12px 0;
	margin-bottom:12px;
	overflow: hidden;
	transition:
		transform .15s ease,
		box-shadow .15s ease;
}

.occurrence-card:hover
{
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

.occurrence-status
{
	width:6px;
	flex-shrink:0;
	background:var(--project-color,#999);
}

.occurrence-content
{
	flex:1;
	padding:8px;
	display:flex;
	flex-direction:column;
	gap:8px;
}

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

.occurrence-info
{
	display:flex;
	align-items:center;
	gap:6px;
	margin-left:auto;
	margin-right:12px;
}

.occurrence-info.late
{
	color:#FF0000;
	font-weight:600;
}

.occurrence-info.done
{
	color:#16A34A;

	font-weight:600;
}

.occurrence-title
{
	flex:1;
	font-size:1.05rem;
	font-weight:700;
	color: var(--text-color);
}

.occurrence-actions
{
	display:flex;
	align-items: center;
	gap:6px;
}

.occurrence-tags
{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}

.empty-day-message {
	padding:15px;
    color:var(--green);
    font-weight:600;
}

/* ==========================================================
   CALENDRIER
========================================================== */

.calendar-toolbar
{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:20px;
	margin-bottom:20px;
}

#calendar-month-label
{
	font-family:var(--font-head);
	font-style:italic;
	min-width:200px;
	text-align:center;
}

.calendar-grid
{
	display:grid;
	grid-template-columns:repeat(7, 1fr);
	gap:1px;
	background:var(--border);
	border:1px solid var(--border);
	border-radius:var(--radius);
	overflow:hidden;
}

.calendar-day-header
{
	background:var(--group-header-bg);
	padding:10px;
	text-align:center;
	font-weight:700;
	font-size:.85rem;
}

.calendar-day-cell
{
	background:var(--surface);
	min-height:110px;
	padding:6px;
	display:flex;
	flex-direction:column;
	gap:4px;
}

.calendar-day-outside
{
	background:var(--bg);
	opacity:.5;
}

.calendar-day-today
{
	background:rgba(200, 169, 110, 0.08);
}

.calendar-day-number
{
	font-weight:600;
	font-size:.85rem;
	color:var(--text-muted);
}

.calendar-pill
{
	background: var(--project-color, var(--tag-project-bg));
	border-radius:4px;
	padding:3px 6px;
	font-size:.75rem;
	cursor:pointer;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.calendar-pill.occurrence-done
{
	opacity:.5;
	text-decoration:line-through;
}

.view-btn[data-view="calendar"]
{
	margin-left:16px;
	position:relative;
}

.view-btn[data-view="calendar"]::before
{
	content:"";
	position:absolute;
	left:-10px;
	top:50%;
	transform:translateY(-50%);
	width:1px;
	height:22px;
	background:var(--border);
}

/* ==========================================================
   NOTIFICATIONS
========================================================== */

#notifications-container {
    position:fixed;
    top:20px;
    right:20px;
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.notification {
    min-width:260px;
    padding:15px;
    border-radius:var(--radius);
    background:white;
    box-shadow:var(--shadow-lg);
    transform:translateX(120%);
    transition:.3s;
}

.notification.show {
    transform:translateX(0);
}

.notification.info
{
	border-left:5px solid var(--blue);
}

.notification.success {
    border-left:5px solid var(--green);
}

.notification.warning {
    border-left:5px solid orange;
}

.notification.error {
    border-left:5px solid var(--danger);
}

/* ==========================================================
   RESPONSIVE
   (Règles existantes conservées à l'identique + ajouts mobiles)
========================================================== */

/* --- Tablette / petit écran (≤ 1000px) --- */

@media (max-width: 1000px) {

    #app {
        flex-direction:column;
    }

    #sidebar {
        width:100%;
        min-width:100%;
        height:auto;
        position:relative;
    }

    .planning-stats {
        grid-template-columns:1fr;
    }

}

/* --- Formulaires multi-colonnes (≤ 900px, seuil d'origine) --- */

@media (max-width: 900px) {

    .form-row-multi,
    .form-row-3 {
        grid-template-columns: 1fr;
    }

}

/* --- Mobile (≤ 640px) --- */

@media (max-width: 640px) {

    /* Sidebar : passe en barre horizontale compacte, menus
       secondaires toujours disponibles mais moins hauts */

    #sidebar {
        height:auto;
    }

    .sidebar-top {
        padding:12px;
    }

    .menu-main {
        font-size:18px;
        padding:12px;
    }

    .sidebar-search {
        padding:4px 4px 16px;
    }

    .search-results-dropdown {
        left:4px;
        right:4px;
    }

    /* Contenu principal : marges réduites */
	
	body:has(> form[method="POST"]) {
		align-items:flex-start;
		padding-top:15vh;
	}

	body:has(> form[method="POST"]) form {
		max-width:100%;
		padding:24px 20px;
	}

	body:has(> form[method="POST"]) h1 {
		font-size:26px;
	}

	body:has(> form[method="POST"]) input,
	body:has(> form[method="POST"]) button {
		padding:14px;
		font-size:16px;
	}

    #content {
        padding:8px;
    }

    .page {
        gap:12px;
    }

    .page h1 {
        font-size:24px;
    }

    /* Formulaires : toujours en une colonne, champs pleine largeur */

    .form-row-multi,
    .form-row-2,
    .form-row-3,
    .task-top-row {
        grid-template-columns: 1fr;
    }

    .recurrence-custom-inline {
        flex-wrap:wrap;
    }

    /* Tableaux : défilement horizontal plutôt que colonnes tassées */

    .table-section {
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

	table {
		min-width:0;
	}

	.table-section thead {
		display:none;
	}

	.table-section tbody tr {
		display:block;
		margin-bottom:12px;
		border:1px solid var(--border);
		border-radius:var(--radius);
		padding:6px 10px;
		background:var(--surface);
	}

	.table-section tbody td {
		display:flex;
		justify-content:space-between;
		align-items:center;
		gap:10px;
		padding:8px 2px;
		border:none;
		border-bottom:1px solid var(--border);
		text-align:right;
	}

	.table-section tbody td:last-child {
		border-bottom:none;
	}

	.table-section tbody td[data-label]::before {
		content: attr(data-label);
		font-weight:600;
		color:var(--text-muted);
		text-align:left;
		flex-shrink:0;
	}

	.table-section tbody td:not([data-label]) {
		justify-content:flex-start;
	}

    /* Cartes d'occurrence : les infos passent au-dessus des actions */

    .occurrence-header {
        flex-wrap:wrap;
    }

    .occurrence-info {
        margin-left:0;
        margin-right:0;
        width:100%;
        order:3;
    }

    .occurrence-actions {
        margin-left:auto;
    }

    /* Barre d'actions groupées : pleine largeur, empilée si besoin */

    .bulk-actions-bar {
        left:12px;
        right:12px;
        bottom:12px;
        transform:none;
        flex-wrap:wrap;
        justify-content:center;
    }

    .bulk-actions-bar.hidden {
        transform:translateY(10px);
    }

    /* Modales : occupent presque tout l'écran */

    #modal-window {
        width:95vw;
        padding:16px;
        max-height:95vh;
    }

    .modal-actions {
        flex-direction:column;
    }

    .modal-actions button {
        width:100%;
    }

    /* Filtres : boutons de vue/filtre qui s'enroulent proprement */

    .planning-view .button-group,
    .filters-panel .button-group {
        gap:6px;
    }

    .view-btn[data-view="calendar"] {
        margin-left:0;
        margin-top:6px;
    }

    .view-btn[data-view="calendar"]::before {
        display:none;
    }

    /* Calendrier : grille resserrée, texte réduit */

    .calendar-day-cell {
        min-height:70px;
        padding:4px;
    }

    .calendar-day-header {
        padding:6px 2px;
        font-size:.7rem;
    }

    .calendar-pill {
        font-size:.68rem;
        padding:2px 4px;
    }

    #calendar-month-label {
        min-width:0;
        font-size:1.1rem;
    }

    .calendar-toolbar {
        gap:10px;
    }

    /* Actions flottantes : plus discrètes sur petit écran */

    .floating-actions {
        right:12px;
        bottom:12px;
    }

    .floating-actions button {
        width:38px;
        height:38px;
    }

    /* Notifications : pleine largeur en haut */

    #notifications-container {
        left:12px;
        right:12px;
        top:12px;
    }

    .notification {
        min-width:0;
        width:100%;
    }

}