/* ════════════════════════════════════════════════════════════
   Medys — Espace connecté : styles
   Palette : bleu profond #0e3a5f, accent teal #0e7490
   ════════════════════════════════════════════════════════════ */
:root {
    --medys-primary: #0e3a5f;
    --medys-accent:  #0e7490;
    --medys-soft:    #eef5f9;
    --bs-primary:        #0e7490;
    --bs-primary-rgb:    14,116,144;
}
.btn-primary { --bs-btn-bg:#0e7490; --bs-btn-border-color:#0e7490; --bs-btn-hover-bg:#0b5e74; --bs-btn-hover-border-color:#0b5e74; --bs-btn-active-bg:#0b5e74; }
.text-primary { color: var(--medys-accent) !important; }
a { color: var(--medys-accent); }

/* ─── Sidebar ─── */
.app-sidebar { --lte-sidebar-bg: var(--medys-primary); }
.sidebar-brand { background: rgba(0,0,0,.15); }

/* Logo sidebar : logo complet en barre étendue, logo "card" en barre réduite.
   Fondu enchaîné (opacity) → le mini est superposé en absolu par-dessus le full. */
.sidebar-brand .brand-logo { transition:opacity .3s ease-in-out; }
.sidebar-brand .brand-logo--full { max-width:50%; min-width:40px; height:auto; opacity:1; }
.sidebar-brand .brand-logo--mini {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    max-height:2.5rem; width:auto; height:auto; opacity:0; pointer-events:none;
}
/* Barre réduite → on efface le logo complet, on révèle le "card" */
.sidebar-collapse .sidebar-brand .brand-logo--full { opacity:0; }
.sidebar-collapse .sidebar-brand .brand-logo--mini { opacity:1; }
/* Au survol, la barre se ré-étend → retour au logo complet */
.sidebar-collapse .app-sidebar:hover .brand-logo--full { opacity:1; }
.sidebar-collapse .app-sidebar:hover .brand-logo--mini { opacity:0; }
/* Respect de l'accessibilité : pas d'animation si l'utilisateur la désactive */
@media (prefers-reduced-motion: reduce) { .sidebar-brand .brand-logo { transition:none; } }

.app-sidebar .brand-text { color:#fff; }
.app-sidebar .sidebar-menu .nav-link { color:#cfe0ec; }
.app-sidebar .sidebar-menu .nav-link.active { background: var(--medys-accent); color:#fff; }
.app-sidebar .sidebar-menu .nav-link:hover { background: rgba(255,255,255,.08); color:#fff; }
.app-sidebar .nav-header { color:#7fa6c0; letter-spacing:.04em; font-size:.7rem; }

/* ════════════════════════════════════════════════════════════
   Pages d'authentification — écran scindé (visuel + formulaire)
   ════════════════════════════════════════════════════════════ */
.auth-page {
    margin:0; background:#fff; color:#0f172a;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.auth-split { min-height:100vh; min-height:100dvh; display:flex; }

/* ── Panneau visuel (gauche) ── */
.auth-aside {
    position:relative; flex:1 1 46%; max-width:46%;
    display:flex; flex-direction:column; justify-content:space-between;
    padding:44px 48px; color:#fff; background:var(--medys-primary); overflow:hidden;
}
.auth-aside::before {
    content:""; position:absolute; inset:0;
    background:
        linear-gradient(157deg, rgba(11,83,148,.80) 0%, rgba(14,58,95,.88) 48%, rgba(14,116,144,.80) 100%),
        url("../../img/hero/secretaire.webp") center/cover no-repeat;
}
.auth-aside > * { position:relative; z-index:1; }
.auth-aside__brand img { height:38px; }
.auth-aside__body { margin:auto 0; max-width:430px; }
.auth-aside__eyebrow { text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:600; color:#9fd5e3; margin:0 0 14px; }
.auth-aside__title { font-size:2.05rem; line-height:1.22; font-weight:700; letter-spacing:-.01em; margin:0 0 16px; }
.auth-aside__text { color:rgba(255,255,255,.84); font-size:1rem; line-height:1.6; margin:0 0 28px; }
.auth-aside__list { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.auth-aside__list li { display:flex; align-items:flex-start; gap:12px; font-size:.93rem; color:rgba(255,255,255,.92); }
.auth-aside__list i { margin-top:3px; color:#5fd0c4; font-size:.95rem; flex:none; }
.auth-aside__foot { font-size:.78rem; color:rgba(255,255,255,.62); margin:0; }

/* ── Panneau formulaire (droite) ── */
.auth-main { flex:1 1 54%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; }
.auth-card { width:100%; max-width:400px; }
.auth-card__logo { display:none; text-align:center; margin-bottom:26px; }
.auth-card__logo img { height:42px; }
.auth-card__baseline { display:block; color:#64748b; font-size:.82rem; margin-top:9px; }

.auth-title { font-size:1.6rem; font-weight:700; color:var(--medys-primary); letter-spacing:-.01em; margin:0 0 6px; }
.auth-sub { color:#64748b; font-size:.95rem; line-height:1.5; margin:0 0 26px; }

/* Champs : le groupe Bootstrap devient un champ unifié, focus accentué */
.auth-main .form-label { font-weight:600; font-size:.85rem; color:#334155; margin-bottom:7px; }
.auth-main .input-group { border:1px solid #d8e0e8; border-radius:11px; background:#fff; overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.auth-main .input-group:focus-within { border-color:var(--medys-accent); box-shadow:0 0 0 3px rgba(14,116,144,.15); }
.auth-main .input-group-text { background:transparent; border:0; color:#94a3b8; padding-left:15px; padding-right:6px; }
.auth-main .input-group .form-control { border:0; background:transparent; box-shadow:none; padding-top:.72rem; padding-bottom:.72rem; }
.auth-main .input-group .btn-outline-secondary { border:0; background:transparent; color:#94a3b8; }
.auth-main .input-group .btn-outline-secondary:hover { color:var(--medys-accent); background:transparent; }

.auth-main .btn-primary {
    border:0; border-radius:11px; font-weight:600; padding:.8rem 1rem; margin-top:6px;
    background-image:linear-gradient(135deg, #0B5394 0%, #0e7490 58%, #14B8A6 100%);
    box-shadow:0 8px 20px rgba(14,116,144,.28);
    transition:transform .12s, box-shadow .15s, filter .15s;
}
.auth-main .btn-primary:hover { filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 10px 26px rgba(14,116,144,.34); }
.auth-main .btn-primary:active { transform:translateY(0); }

.auth-links { margin-top:22px; display:flex; justify-content:center; gap:10px 18px; flex-wrap:wrap; font-size:.9rem; }
.auth-links a { color:var(--medys-accent); text-decoration:none; }
.auth-links a:hover { text-decoration:underline; }
.auth-footer { margin-top:30px; text-align:center; color:#94a3b8; font-size:.78rem; line-height:1.5; }

.auth-alert { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:10px; font-size:.9rem; margin-bottom:20px; }
.auth-alert--error   { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.auth-alert--success { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }

@media (max-width:991.98px){
    .auth-aside { display:none; }
    .auth-main { flex:1 1 100%; }
    .auth-card__logo { display:block; }
}

/* ════════════════════════════════════════════════════════════
   Cartes & composants de l'app
   ════════════════════════════════════════════════════════════ */
.stat-card { border:none; border-radius:14px; box-shadow:0 4px 14px rgba(15,40,70,.06); }
.stat-card .stat-ico { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#fff; }
.stat-card .stat-val { font-size:1.9rem; font-weight:800; line-height:1; color:var(--medys-primary); }
.stat-card .stat-lbl { color:#64748b; font-size:.85rem; }

.card { border:none; border-radius:14px; box-shadow:0 4px 14px rgba(15,40,70,.05); }
.card-header { background:#fff; border-bottom:1px solid #eef1f5; font-weight:600; }

.act-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:600; color:#fff; }

/* Timeline du journal */
.timeline-day { border-left:3px solid var(--medys-accent); padding:4px 0 14px 18px; position:relative; }
.timeline-day::before { content:""; position:absolute; left:-8px; top:6px; width:13px; height:13px; border-radius:50%; background:var(--medys-accent); border:3px solid #fff; box-shadow:0 0 0 1px var(--medys-accent); }
.timeline-date { font-weight:700; color:var(--medys-primary); margin-bottom:8px; }

/* Messagerie */
.chat-box { height:420px; overflow-y:auto; background:#f6f9fb; border-radius:12px; padding:16px; }
.chat-msg { max-width:78%; margin-bottom:12px; padding:10px 14px; border-radius:14px; font-size:.9rem; }
.chat-msg .chat-meta { font-size:.72rem; opacity:.7; margin-top:4px; }
.chat-mine { background:var(--medys-accent); color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.chat-other { background:#fff; border:1px solid #e6ebf1; border-bottom-left-radius:4px; }

.doc-row .doc-ico { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--medys-soft); color:var(--medys-accent); }
.empty-state { text-align:center; padding:48px 20px; color:#94a3b8; }
.empty-state i { font-size:2.4rem; margin-bottom:10px; opacity:.6; }


.app-content{ padding-top: 30px;}

/* ════════════════════════════════════════════════════════════
   Bootstrap-select : aligné sur l'apparence des champs Medys
   ════════════════════════════════════════════════════════════ */
/* neutralise le chrome .form-select hérité par le wrapper (flèche en double) */
.bootstrap-select.form-select,
.bootstrap-select.form-select-sm { background:none; border:0; padding:0; height:auto; box-shadow:none; }

.bootstrap-select > .dropdown-toggle {
    background:#fff; color:#212529; font-weight:400; text-align:left;
    border:1px solid var(--bs-border-color, #dee2e6); border-radius:.375rem;
    padding:.375rem .75rem;
}
.bootstrap-select > .dropdown-toggle:hover { background:#fff; }
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle {
    background:#fff; border-color:#6bbcd0; outline:0;
    box-shadow:0 0 0 .25rem rgba(14,116,144,.2);
}
.bootstrap-select > .dropdown-toggle.bs-placeholder { color:#6c757d; }
.bootstrap-select.form-select-sm > .dropdown-toggle { padding:.25rem .5rem; font-size:.875rem; }

.bootstrap-select .dropdown-menu { border-radius:.5rem; border:1px solid #eef1f5; box-shadow:0 8px 24px rgba(15,40,70,.12); }
.bootstrap-select .dropdown-item.selected.active,
.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item:active { background:var(--medys-accent); color:#fff; }
.bootstrap-select .dropdown-menu .notify { border-radius:.375rem; }

/* ════════════════════════════════════════════════════════════
   Zone de dépôt de document (drag & drop)
   ════════════════════════════════════════════════════════════ */
.dropzone {
    border:2px dashed #cdd9e3; border-radius:12px; background:#f8fafc;
    padding:22px 14px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
}
.dropzone:hover, .dropzone:focus { border-color:var(--medys-accent); background:#f1f8fb; outline:none; }
.dropzone.dragover { border-color:var(--medys-accent); background:#e3f2f7; }
.dropzone.has-file { border-style:solid; border-color:#16a34a; background:#f0fdf4; }
.dropzone .dz-ico { font-size:1.8rem; color:var(--medys-accent); margin-bottom:6px; display:block; }
.dropzone.has-file .dz-ico { color:#16a34a; }
.dropzone .dz-text { font-size:.85rem; color:#64748b; margin-bottom:8px; }
.dropzone .dz-filename { margin-top:10px; font-size:.82rem; font-weight:600; color:#15803d; word-break:break-all; }


/**********************   Supprimer les outlines / focus Bootstrap  *************************/

input:focus,
textarea:focus,
select:focus,
button:focus,
.form-control:focus,
.form-select:focus,
.btn:focus,
.btn:active:focus {
    outline: none !important;
    box-shadow: none !important;
}
/**********************   textarea autorisize *************************/

 .grow-wrap {
	/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
	display: grid;
	 
	 
  }
  .grow-wrap::after { 
	/* Note the weird space! Needed to preventy jumpy behavior */
	content: attr(data-replicated-value) " ";
  
	/* This is how textarea text behaves */
	white-space: pre-wrap;
  
	/* Hidden from view, clicks, and screen readers */
	visibility: hidden;
  }
  .grow-wrap > textarea {
	/* You could leave this, but after a user resizes, then it ruins the auto sizing */
	resize: none;
  
	/* Firefox shows scrollbar on growth, you can hide like this. */
	overflow: hidden;
  }

  .grow-wrap > textarea,
  .grow-wrap::after {
	/* Identical styling required!! */
	
	padding: 0.5rem;
	border: 1px solid #dadee3;
  
	/* Place on top of each other */
	grid-area: 1 / 1 / 2 / 2;
  }

/**********************   Supprimer zoom input  *************************/

input,
textarea,
select {
    font-size: 16px;
}

/* ════════════════════════════════════════════════════════════
   Litepicker — accent Medys
   ════════════════════════════════════════════════════════════ */
.lp-input { cursor: pointer; background:#fff; }
.litepicker .container__days .day-item:hover { color:var(--medys-accent); box-shadow: inset 0 0 0 1px var(--medys-accent); }
.litepicker .container__days .day-item.is-today { color:var(--medys-accent); }
.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date,
.litepicker .container__days .day-item.is-in-range { background-color:var(--medys-accent) !important; color:#fff !important; }
.litepicker .container__footer .button-apply { background-color:var(--medys-accent); }