* {
  box-sizing: border-box;
  }

:root {
--primary: #4f46e5;
--primary-dark: #4338ca;
--background: #f5f7fb;
--surface: #ffffff;
--border: #e5e7eb;
--text: #111827;
--muted: #6b7280;
--danger: #dc2626;
--success: #16a34a;
--today: #eef2ff;
--shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
--radius: 14px;
}

html,
body {
margin: 0;
padding: 0;
min-height: 100%;
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
background: var(--background);
color: var(--text);
}

body {
min-height: 100vh;
}

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

button {
cursor: pointer;
}

.hidden {
display: none !important;
}

/* =========================
AUTHENTIFICATION
========================= */

.screen {
min-height: 100vh;
}

#auth-screen {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background:
radial-gradient(
circle at top left,
rgba(79, 70, 229, 0.12),
transparent 35%
),
var(--background);
}

.auth-card {
width: 100%;
max-width: 430px;
padding: 34px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow: var(--shadow);
}

.logo {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 30px;
}

.logo-icon,
.logo-small {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--primary);
color: white;
font-weight: 800;
border-radius: 12px;
}

.logo-icon {
width: 48px;
height: 48px;
font-size: 24px;
}

.logo h1 {
margin: 0;
font-size: 24px;
}

.logo p {
margin: 4px 0 0;
color: var(--muted);
font-size: 14px;
}

.auth-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
padding: 4px;
margin-bottom: 24px;
background: #f3f4f6;
border-radius: 10px;
}

.auth-tab {
border: 0;
padding: 11px;
background: transparent;
color: var(--muted);
border-radius: 8px;
font-weight: 600;
}

.auth-tab.active {
background: var(--surface);
color: var(--primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

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

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

.form-group {
display: flex;
flex-direction: column;
gap: 7px;
}

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

.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
min-height: 44px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 9px;
outline: none;
background: white;
color: var(--text);
transition:
border-color 0.15s,
box-shadow 0.15s;
}

.form-group textarea {
min-height: 100px;
resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}

.password-wrapper {
position: relative;
}

.password-wrapper input {
padding-right: 48px;
}

.password-toggle {
position: absolute;
top: 50%;
right: 8px;
width: 36px;
height: 36px;
transform: translateY(-50%);
border: 0;
background: transparent;
border-radius: 8px;
}

.password-toggle:hover {
background: #f3f4f6;
}

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

.primary-button,
.secondary-button,
.icon-button,
.logout-button,
.close-button {
border: 0;
transition:
background 0.15s,
color 0.15s,
transform 0.1s;
}

.primary-button {
min-height: 42px;
padding: 10px 16px;
background: var(--primary);
color: white;
border-radius: 9px;
font-weight: 600;
}

.primary-button:hover {
background: var(--primary-dark);
}

.primary-button:active,
.secondary-button:active {
transform: scale(0.98);
}

.secondary-button {
min-height: 40px;
padding: 9px 14px;
background: #f3f4f6;
color: var(--text);
border-radius: 9px;
font-weight: 600;
}

.secondary-button:hover {
background: #e5e7eb;
}

.full-width {
width: 100%;
}

.icon-button {
width: 40px;
height: 40px;
background: #f3f4f6;
color: var(--text);
border-radius: 9px;
font-size: 24px;
}

.icon-button:hover {
background: #e5e7eb;
}

.close-button {
width: 38px;
height: 38px;
background: transparent;
color: var(--muted);
border-radius: 8px;
font-size: 28px;
}

.close-button:hover {
background: #f3f4f6;
}

/* =========================
APPLICATION
========================= */

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

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

.sidebar {
position: fixed;
inset: 0 auto 0 0;
z-index: 10;
display: flex;
flex-direction: column;
width: 250px;
padding: 20px 14px;
background: var(--surface);
border-right: 1px solid var(--border);
}

.sidebar-header {
display: flex;
align-items: center;
gap: 11px;
padding: 6px 8px 24px;
}

.logo-small {
width: 38px;
height: 38px;
border-radius: 10px;
}

.sidebar-header strong {
display: block;
font-size: 16px;
}

.sidebar-header span {
display: block;
margin-top: 2px;
color: var(--muted);
font-size: 12px;
}

.main-nav {
display: flex;
flex-direction: column;
gap: 5px;
}

.nav-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 11px 12px;
border: 0;
background: transparent;
color: var(--muted);
border-radius: 9px;
text-align: left;
font-weight: 600;
}

.nav-item:hover {
background: #f3f4f6;
color: var(--text);
}

.nav-item.active {
background: #eef2ff;
color: var(--primary);
}

.sidebar-bottom {
margin-top: auto;
padding-top: 20px;
border-top: 1px solid var(--border);
}

.current-user {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
}

.avatar {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
background: #e0e7ff;
color: var(--primary);
border-radius: 50%;
font-weight: 700;
}

.current-user-info {
min-width: 0;
}

.current-user-info strong,
.current-user-info span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.current-user-info strong {
font-size: 13px;
}

.current-user-info span {
margin-top: 2px;
color: var(--muted);
font-size: 12px;
}

.logout-button {
width: 100%;
margin-top: 8px;
padding: 10px;
background: transparent;
color: var(--danger);
border-radius: 8px;
text-align: left;
}

.logout-button:hover {
background: #fef2f2;
}

/* =========================
CONTENU
========================= */

.main-content {
width: calc(100% - 250px);
margin-left: 250px;
padding: 32px;
}

.app-section {
display: none;
max-width: 1400px;
margin: 0 auto;
}

.app-section.active {
display: block;
}

.section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 28px;
}

.section-header h2 {
margin: 0;
font-size: 28px;
}

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

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

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

.calendar-toolbar h3 {
min-width: 190px;
margin: 0;
text-align: center;
font-size: 19px;
}

.calendar-wrapper {
overflow: hidden;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}

.calendar-weekdays,
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
background: #f9fafb;
border-bottom: 1px solid var(--border);
}

.calendar-weekdays div {
padding: 13px 8px;
color: var(--muted);
font-size: 13px;
font-weight: 700;
text-align: center;
}

.calendar-day {
position: relative;
min-height: 125px;
padding: 9px;
background: white;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}

.calendar-day:nth-child(7n) {
border-right: 0;
}

.calendar-day.other-month {
background: #fafafa;
color: #9ca3af;
}

.calendar-day.today {
background: var(--today);
}

.calendar-day.today::before {
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--primary);
border-radius: 4px 0 0 4px;
content: "";
}

.calendar-day-number {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 7px;
}

.calendar-day-number strong {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 13px;
}

.calendar-day.today .calendar-day-number strong {
background: var(--primary);
color: white;
}

.today-label {
padding: 3px 6px;
background: var(--primary);
color: white;
border-radius: 5px;
font-size: 10px;
font-weight: 700;
}

.calendar-work {
margin-top: 5px;
padding: 6px 7px;
background: #f0fdf4;
color: #166534;
border-left: 3px solid #22c55e;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
}

.calendar-item {
margin-top: 5px;
padding: 6px 7px;
background: #eff6ff;
color: #1d4ed8;
border-radius: 6px;
font-size: 11px;
}

/* =========================
PLANNINGS
========================= */

.plans-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 18px;
}

.plan-card {
padding: 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
}

.plan-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 15px;
}

.plan-card h3 {
margin: 0;
font-size: 17px;
}

.plan-card p {
margin: 6px 0;
color: var(--muted);
font-size: 13px;
}

.plan-actions {
display: flex;
gap: 6px;
}

.plan-action {
padding: 6px 9px;
border: 0;
background: #f3f4f6;
color: var(--text);
border-radius: 7px;
}

.plan-action:hover {
background: #e5e7eb;
}

.plan-action.delete {
color: var(--danger);
}

.empty-state {
padding: 50px 20px;
background: var(--surface);
border: 1px dashed var(--border);
border-radius: var(--radius);
color: var(--muted);
text-align: center;
}

/* =========================
EDITEUR DE PLANNING
========================= */

.modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(15, 23, 42, 0.45);
}

.modal-content {
width: 100%;
max-height: 90vh;
overflow-y: auto;
background: var(--surface);
border-radius: 16px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

.large-modal {
max-width: 850px;
}

.modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
padding: 24px;
border-bottom: 1px solid var(--border);
}

.modal-header h3 {
margin: 0;
font-size: 20px;
}

.modal-header p {
margin: 5px 0 0;
color: var(--muted);
font-size: 13px;
}

#plan-form {
padding: 24px;
}

.modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid var(--border);
}

/* =========================
EDITEUR DES JOURS
========================= */

.schedule-editor {
margin-top: 20px;
}

.schedule-editor h4 {
margin: 0 0 12px;
}

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

.schedule-day {
display: grid;
grid-template-columns: 100px 1fr 1fr;
align-items: center;
gap: 10px;
padding: 9px;
background: #f9fafb;
border-radius: 8px;
}

.schedule-day-name {
font-weight: 600;
font-size: 13px;
}

.schedule-day input[type="time"] {
min-height: 38px;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: 7px;
background: white;
}

/* =========================
CYCLE
========================= */

.cycle-settings {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 18px;
padding: 16px;
background: #f9fafb;
border-radius: 10px;
}

.cycle-positions {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 20px;
}

.cycle-position {
padding: 16px;
background: white;
border: 1px solid var(--border);
border-radius: 10px;
}

.cycle-position-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}

.cycle-position-header strong {
font-size: 14px;
}

.cycle-position-days {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 6px;
}

.cycle-day {
display: flex;
flex-direction: column;
gap: 5px;
padding: 8px;
background: #f9fafb;
border-radius: 7px;
}

.cycle-day label {
font-size: 11px;
font-weight: 700;
color: var(--muted);
}

.cycle-day input[type="time"] {
width: 100%;
min-width: 0;
padding: 5px;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 11px;
}

/* =========================
FOYER
========================= */

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

.card {
padding: 22px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
}

.card h3 {
margin: 0 0 10px;
}

.card p {
color: var(--muted);
font-size: 14px;
}

.invite-code-container {
display: flex;
align-items: center;
gap: 10px;
margin-top: 15px;
}

#invite-code {
padding: 10px 14px;
background: #f3f4f6;
border-radius: 8px;
letter-spacing: 2px;
}

/* =========================
MESSAGES
========================= */

.message {
margin-top: 15px;
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
}

.message.error {
background: #fef2f2;
color: var(--danger);
}

.message.success {
background: #f0fdf4;
color: var(--success);
}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 900px) {

.sidebar {
position: static;
width: 100%;
min-height: auto;
}

#app-screen {
flex-direction: column;
}

.main-content {
width: 100%;
margin-left: 0;
padding: 20px;
}

.main-nav {
flex-direction: row;
}

.nav-item {
justify-content: center;
}

.sidebar-bottom {
display: none;
}

.calendar-day {
min-height: 100px;
}

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

@media (max-width: 650px) {

#auth-screen {
padding: 12px;
}

.auth-card {
padding: 24px 18px;
}

.main-content {
padding: 14px;
}

.section-header {
align-items: flex-start;
flex-direction: column;
}

.calendar-toolbar {
gap: 6px;
}

.calendar-toolbar h3 {
min-width: 0;
flex: 1;
font-size: 16px;
}

.calendar-weekdays div {
padding: 8px 2px;
font-size: 11px;
}

.calendar-day {
min-height: 85px;
padding: 5px;
}

.calendar-day-number strong {
width: 24px;
height: 24px;
}

.today-label {
display: none;
}

.calendar-work,
.calendar-item {
padding: 4px;
font-size: 9px;
}

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

.schedule-day {
grid-template-columns: 80px 1fr 1fr;
}

.cycle-settings {
grid-template-columns: 1fr;
}

.cycle-position-days {
grid-template-columns: repeat(2, 1fr);
}

.modal {
padding: 8px;
}

.modal-content {
max-height: 95vh;
}
}