/* ==========================================================================
   Sunbox Quotes — UI Theme (app.css)
   --------------------------------------------------------------------------
   • Déposez vos assets :
     - Logo : /public/assets/img/logo.svg (ou .png)
     - Background : /public/assets/img/bg.jpg
   • Personnalisez les variables ci-dessous.
   ========================================================================== */

:root{
  /* Couleurs de marque */
  --brand:        #0ea5e9;   /* cyan-500 */
  --brand-600:    #0284c7;   /* cyan-600 */
  --brand-700:    #0369a1;   /* cyan-700 */
  --accent:       #8b5cf6;   /* violet-500 */
  --bg:           #f7fafc;
  --panel:        #ffffff;
  --text:         #0f172a;   /* slate-900 */
  --muted:        #64748b;   /* slate-500 */
  --line:         #e5e7eb;

  /* États */
  --success: #16a34a;  /* green-600 */
  --warning: #d97706;  /* amber-600 */
  --danger:  #dc2626;  /* red-600 */
  --info:    #2563eb;  /* blue-600 */

  /* Effets & rayons */
  --radius: 12px;
  --radius-sm: 10px;
  --shadow: 0 8px 24px rgba(2,8,23,.06), 0 2px 8px rgba(2,8,23,.05);

  /* Images */
  --bg-image: url('/public/assets/img/bg.jpg');
  --logo-image: url('/public/assets/img/logo.svg');

  /* Typo */
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* Reset doux + base ------------------------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:var(--font-sans);
  line-height:1.45;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(2,132,199,.08), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(139,92,246,.08), transparent 60%),
    var(--bg);
  /* Optionnel : image de fond (si présente) */
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(2,132,199,.08), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(139,92,246,.08), transparent 60%),
    var(--bg-image);
  background-size: auto, auto, cover;
  background-attachment: fixed;
  background-position: center;
}

/* Liens & focus ----------------------------------------------------------- */
a{color:var(--brand-700); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}

/* Grille d’app (si vous ajoutez des classes dans layout.php) -------------- */
.app{
  min-height:100%;
  display:grid;
  grid-template-rows:auto 1fr;
}
.app-main{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:20px;
  padding:16px 18px 28px;
}
@media (max-width: 980px){
  .app-main{grid-template-columns:1fr}
}

/* Topbar moderne (si vous remplacez les styles inline) -------------------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.75);
  -webkit-backdrop-filter:saturate(140%) blur(6px); backdrop-filter:saturate(140%) blur(6px);
  position:sticky; top:0; z-index:50;
}
.topbar .brand{
  display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text);
}
.topbar .brand::before{
  content:""; width:28px; height:28px; display:inline-block; background-image:var(--logo-image);
  background-size:contain; background-repeat:no-repeat; background-position:center;
  filter: drop-shadow(0 2px 4px rgba(2,8,23,.15));
}
.topbar .nav a{margin-right:14px; padding:6px 8px; border-radius:8px}
.topbar .nav a:hover{background:rgba(14,165,233,.12); text-decoration:none}

/* Sidebar / left menu ----------------------------------------------------- */
.sidebar{
  background:rgba(255,255,255,.8);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
  position:sticky; top:84px; height:max-content;
}
.sidebar h3, .sidebar strong{font-size:13px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted)}
.sidebar ul{list-style:none; margin:8px 0 16px; padding:0}
.sidebar li a{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px; color:var(--text);
}
.sidebar li a:hover{background:rgba(2,132,199,.10); text-decoration:none}

/* Contenu / cartes -------------------------------------------------------- */
.panel{
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.panel-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.panel-title{font-size:18px; font-weight:700}

/* Titres & textes --------------------------------------------------------- */
h1{font-size:24px; margin:10px 0 14px}
h2{font-size:20px; margin:10px 0 12px}
p.lead{color:var(--muted); margin-top:0}

/* Boutons ----------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px; border:1px solid transparent;
  font-weight:600; cursor:pointer; transition:.15s ease-in-out;
  background:#fff; color:var(--text);
}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(2,8,23,.08)}
.btn:active{transform:translateY(0); box-shadow:none}

.btn-primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-600); border-color:var(--brand-600)}
.btn-outline{background:transparent; border-color:var(--line)}
.btn-danger{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn-success{background:var(--success); color:#fff; border-color:var(--success)}

/* Badges / Statuts -------------------------------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; padding:4px 8px; border-radius:999px;
  background:#eef2f7; color:#334155; border:1px solid #e2e8f0;
}
.badge-dot::before{
  content:""; width:8px; height:8px; border-radius:50%; display:inline-block; background:currentColor;
}
.badge.draft{ color:#475569; background:#f1f5f9 }
.badge.sent{ color:#2563eb; background:#eff6ff }
.badge.approved{ color:#16a34a; background:#ecfdf5 }
.badge.rejected{ color:#dc2626; background:#fef2f2 }
.badge.amend{ color:#d97706; background:#fffbeb }

/* Tableaux ---------------------------------------------------------------- */
table{
  width:100%; border-collapse:collapse; background:rgba(255,255,255,.92);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
thead tr{ background:#f7fafc }
th, td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top }
tbody tr:last-child td{ border-bottom:none }
tbody tr:hover{ background:#f8fafc }
th{ text-align:left; font-size:13px; color:#475569; text-transform:uppercase; letter-spacing:.02em }
td.num, th.num{ text-align:right }

.table-clickable tbody tr{ cursor:pointer }
.table-clickable tbody tr:hover{ background:#f0f8ff }

/* Formulaires ------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="number"], input[type="password"],
select, textarea{
  width:100%; background:#fff; color:var(--text);
  border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(14,165,233,.18);
}
label{ display:block; font-weight:600; margin:10px 0 6px }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width: 720px){ .form-row{ grid-template-columns:1fr } }
.help{ font-size:12px; color:var(--muted) }

/* Grilles / Utilities ----------------------------------------------------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
@media (max-width: 1080px){ .grid-4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 720px){ .grid-4{ grid-template-columns:1fr } }

.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:14px;
}
.kpi{
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.8));
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:14px;
}
.kpi .label{ font-size:12px; color:var(--muted) }
.kpi .value{ font-size:22px; font-weight:800 }

/* Notifications ----------------------------------------------------------- */
.alert{
  padding:12px 14px; border-radius:12px; border:1px solid;
  background:#fff; margin:10px 0; display:flex; gap:10px; align-items:flex-start
}
.alert.info{    color:#1e40af; border-color:#bfdbfe; background:#eff6ff }
.alert.success{ color:#166534; border-color:#bbf7d0; background:#f0fdf4 }
.alert.warn{    color:#92400e; border-color:#fde68a; background:#fffbeb }
.alert.danger{  color:#991b1b; border-color:#fecaca; background:#fef2f2 }

/* Tuiles “picker modèle” -------------------------------------------------- */
.model-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width: 1080px){ .model-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 720px){ .model-grid{ grid-template-columns:1fr } }
.model-card{
  background:rgba(255,255,255,.92); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease; cursor:pointer;
}
.model-card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(2,8,23,.12) }
.model-card img{ width:100%; height:220px; object-fit:cover; display:block; background:#f1f5f9 }
.model-card .body{ padding:12px }
.model-card .title{ font-weight:800; margin:4px 0 6px }
.model-card .meta{ color:var(--muted); font-size:13px }

/* Images & placeholders --------------------------------------------------- */
img.logo{ height:28px; width:auto; display:inline-block }
.img-rounded{ border-radius:14px }
.shadow{ box-shadow:var(--shadow) }

/* Footer / petites infos -------------------------------------------------- */
.footer{ color:var(--muted); font-size:12px; padding:16px 0 }

/* Dark mode (opt-in : ajoutez .dark sur <body>) -------------------------- */
body.dark{
  --bg:#0b1220; --panel:#0f1629; --text:#e5e7eb; --muted:#94a3b8; --line:#1f2937;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.12), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(139,92,246,.12), transparent 60%),
    #0b1220;
  color:var(--text);
}
body.dark .sidebar,
body.dark .panel,
body.dark .card,
body.dark table{ background:rgba(17,24,39,.8); border-color:#1f2937 }
body.dark thead tr{ background:#111827 }
body.dark a{ color:#7dd3fc }
body.dark .btn-outline{ border-color:#374151; color:#e5e7eb }