/* Atlas CRM — app shell styles. Theme aware via [data-theme]. */

:root {
  --app-bg:        #F6F4F0;          /* warm off-white page bg (Moroccan tone) */
  --app-surface:   #FFFFFF;
  --app-surface-2: #FAF8F4;
  --app-border:    #ECE7DD;          /* warm hairline */
  --app-border-2:  #E4DFD3;
  --app-text:      #1B1C22;
  --app-text-2:    #4B5675;
  --app-text-3:    #78829D;
  --app-text-4:    #99A1B7;
  --app-sidebar-bg:#16151E;
  --app-sidebar-2: #1F1E27;
  --app-sidebar-tx:#9A9CAE;
  --app-sidebar-tx-strong:#FFFFFF;

  /* Brand — Moroccan-warm accent palette built on Metronic primitives */
  --app-primary:   #1379F0;          /* CTA blue */
  --app-success:   #19C781;          /* logo green */
  --app-warm:      #C2410C;          /* Atlas terracotta */
  --app-warm-soft: rgba(194, 65, 12, .10);
  --app-saffron:   #D97706;          /* saffron accent */
  --app-zellige:   #0F766E;          /* deep zellige teal */
  --app-danger:    #F8285A;
  --app-warning:   #FFA800;
}

[data-theme="dark"] {
  --app-bg:        #0A0A0D;
  --app-surface:   #1C1D22;
  --app-surface-2: #16151E;
  --app-border:    #26272D;
  --app-border-2:  #2C2D33;
  --app-text:      #FFFFFF;
  --app-text-2:    #B5B7C8;
  --app-text-3:    #8F92A1;
  --app-text-4:    #5C5F6F;
  --app-sidebar-bg:#0A0A0D;
  --app-sidebar-2: #1F1E27;
}

html, body {
  margin: 0;
  background: var(--app-bg);
  font-family: var(--m-font-sans);
  color: var(--app-text);
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--app-border-2); border-radius: 999px; border: 2px solid var(--app-bg); }

/* Card primitive */
.card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: 0 3px 4px rgba(0,0,0,.03);
}
[data-theme="dark"] .card { box-shadow: 0 3px 4px rgba(0,0,0,.20); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: 8px;
  font: 600 13px/1 var(--m-font-sans);
  transition: background 140ms ease-out, box-shadow 140ms ease-out, border-color 140ms ease-out;
}
.btn-primary  { background: var(--app-primary); color: #fff; }
.btn-primary:hover { box-shadow: 0 4px 12px rgba(19,121,240,.25); }
.btn-warm     { background: var(--app-warm); color: #fff; }
.btn-warm:hover { box-shadow: 0 4px 12px rgba(194,65,12,.25); }
.btn-ghost    { background: var(--app-surface); color: var(--app-text-2); border: 1px solid var(--app-border); }
.btn-ghost:hover { background: var(--app-surface-2); }
.btn-soft     { background: var(--app-surface-2); color: var(--app-text-2); border: 1px solid var(--app-border); }
.btn-icon     { width: 36px; padding: 0; justify-content: center; }

/* Input */
.input {
  height: 36px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
  font: 500 13px/1 var(--m-font-sans);
  width: 100%;
}
.input:focus { outline: 0; border-color: var(--app-primary); box-shadow: 0 0 0 3px rgba(19,121,240,.15); }
.input::placeholder { color: var(--app-text-4); }

/* Status pill */
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px;
  padding: 0 9px; border-radius: 6px;
  font: 700 11px/1 var(--m-font-sans);
}
.pill-dot { width: 6px; height: 6px; border-radius: 99px; }

/* Eyebrow / table head */
.eyebrow {
  font: 700 11px/1 var(--m-font-sans);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--app-text-4);
}

/* Reusable table */
table.m-table { width: 100%; border-collapse: collapse; font: 500 13px/1.2 var(--m-font-sans); }
table.m-table thead th {
  text-align: left; padding: 12px 0; border-bottom: 1px solid var(--app-border);
  font: 700 11px/1 var(--m-font-sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--app-text-4);
}
table.m-table tbody td {
  padding: 14px 0; border-bottom: 1px solid var(--app-border);
  color: var(--app-text-2);
}
table.m-table tbody tr:hover td { background: var(--app-surface-2); }

/* Layout */
.page {
  padding: 30px 30px 60px;
  display: flex; flex-direction: column; gap: 24px;
}
.page-header { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-header h1 { margin: 0; font: 700 26px/1.1 var(--m-font-sans); letter-spacing: -.02em; color: var(--app-text); }
.page-header .sub { margin-top: 4px; font: 500 13px/1 var(--m-font-sans); color: var(--app-text-3); }
.spacer { flex: 1; }

/* Avatar */
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font: 700 12px/1 var(--m-font-sans);
}

/* Mobile */
@media (max-width: 900px) {
  .page { padding: 20px 16px 40px; }
}

/* Hover lift */
.lift { transition: transform 140ms ease-out, box-shadow 140ms ease-out; }
.lift:hover { transform: translateY(-1px); box-shadow: 0 10px 14px rgba(15,42,81,.06); }

/* Dashed (Moroccan-pattern subtle) */
.warm-stripe {
  background-image: repeating-linear-gradient(135deg, var(--app-warm-soft) 0 6px, transparent 6px 12px);
}

/* Print etc. */
* { scrollbar-color: var(--app-border-2) transparent; }