/* ═══════════════════════════════════════════════════════════════
   LSGate Admin — Design System
   Palette: Navy #0F1E44 | Blue-Dark #1C3E78 | Blue-Mid #4878B5
   ═══════════════════════════════════════════════════════════════ */

:root {
  --navy:        #0F1E44;
  --blue-dark:   #1C3E78;
  --blue-mid:    #4878B5;
  --blue-light:  #B5D4EE;
  --blue-faint:  #EBF3FB;
  --surface:     #ffffff;
  --bg:          #f0f4f8;
  --text:        #1a2540;
  --muted:       #64748b;
  --border:      #dde4ed;
  --danger:      #dc2626;
  --success:     #16a34a;
  --warning:     #d97706;
  --info:        #0284c7;
  --sidebar-w:   240px;
  --header-h:    56px;
  --radius:      6px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,.12);
  --shadow-lg:   0 8px 40px rgba(0,0,0,.18);
  --transition:  .15s ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; scroll-behavior: smooth; }
@media (min-width: 1024px) { html { font-size: 15px; } }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* ── Admin Shell ────────────────────────────────────────────── */
.ls-shell {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.ls-sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  transition: transform .25s ease;
  overflow-y: auto;
  overflow-x: hidden;

  & .ls-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    flex-shrink: 0;

    & small {
      display: block;
      font-size: .68rem;
      font-weight: 400;
      color: var(--blue-light);
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    &:hover { color: var(--blue-light); }
  }

  & .ls-sidebar-nav {
    flex: 1;
    padding: .5rem 0;
    display: flex;
    flex-direction: column;
  }

  & .ls-nav-section {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    padding: 1rem 1.25rem .3rem;
  }

  & .ls-nav-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1.25rem;
    color: rgba(255,255,255,.75);
    font-size: .875rem;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background var(--transition), color var(--transition);

    & i { flex-shrink: 0; opacity: .8; }

    &:hover {
      background: rgba(255,255,255,.08);
      color: #fff;
      & i { opacity: 1; }
    }

    &.active {
      background: rgba(255,255,255,.1);
      color: #fff;
      border-left-color: var(--blue-light);
      font-weight: 600;
      & i { opacity: 1; }
    }
  }

  & .ls-sidebar-footer {
    padding: .75rem 1rem;
    border-top: 1px solid rgba(255,255,255,.1);
    flex-shrink: 0;

    & button.ls-nav-item {
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      border-left: 3px solid transparent;
    }
  }
}

/* ── Main Area ──────────────────────────────────────────────── */
.ls-main {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Header ─────────────────────────────────────────────────── */
.ls-header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;

  & .ls-header-left {
    display: flex;
    align-items: center;
    gap: .75rem;
  }

  & .ls-header-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
  }

  & .ls-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  & .ls-user-badge {
    font-size: .8rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .4rem;
  }
}

/* ── Hamburger (mobile only) ─────────────────────────────────  */
.ls-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  cursor: pointer;

  &:hover { background: var(--bg); color: var(--text); }
}

/* ── Overlay (mobile sidebar) ────────────────────────────────  */
.ls-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 150;
  backdrop-filter: blur(2px);

  &.open { display: block; }
}

/* ── Content ─────────────────────────────────────────────────  */
.ls-content {
  padding: 1.5rem;
  flex: 1;
}

/* ── Page Header ─────────────────────────────────────────────  */
.ls-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: .5rem;

  & .ls-page-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--navy);
  }

  & .ls-page-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
  }
}

/* ── KPI Cards ───────────────────────────────────────────────  */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-top: 3px solid var(--blue-mid);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);

  & .kpi-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin-bottom: .35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  & .kpi-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.1;
  }

  & .kpi-sub {
    font-size: .75rem;
    color: var(--muted);
    margin-top: .2rem;
  }

  &.kpi-warning  { border-top-color: var(--warning); }
  &.kpi-danger   { border-top-color: var(--danger);  }
  &.kpi-success  { border-top-color: var(--success); }
  &.kpi-info     { border-top-color: var(--info);    }
}

/* ── Cards ───────────────────────────────────────────────────  */
.ls-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;

  &:last-child { margin-bottom: 0; }

  & .ls-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
  }

  & .ls-card-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--navy);
  }
}

/* ── Tabs ─────────────────────────────────────────────────────  */
.ls-tabs {
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;

  & .ls-tab {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .85rem;
    border-radius: 20px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all var(--transition);
    text-decoration: none;

    &:hover { color: var(--blue-mid); border-color: var(--blue-mid); }

    &.active {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
    }
  }
}

/* ── Table ───────────────────────────────────────────────────  */
.ls-table-wrapper,
.ls-table-wrap { overflow-x: auto; }

.ls-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;

  & thead {
    & th {
      background: var(--bg);
      color: var(--muted);
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: .65rem 1rem;
      border-bottom: 2px solid var(--border);
      text-align: left;
      white-space: nowrap;

      & a.ls-th-sort {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        color: var(--muted);
        text-decoration: none;
        &:hover, &.active { color: var(--blue-mid); }
      }
    }
  }

  & tbody {
    & td {
      padding: .75rem 1rem;
      border-bottom: 1px solid var(--border);
      color: var(--text);
      vertical-align: middle;
    }

    & tr:last-child td { border-bottom: none; }

    & tr:hover td { background: var(--blue-faint); }
  }
}

/* ── Badges ──────────────────────────────────────────────────  */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .6rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;

  &.badge-pending  { background: #fef3c7; color: #92400e; }
  &.badge-success  { background: #d1fae5; color: #065f46; }
  &.badge-danger   { background: #fee2e2; color: #991b1b; }
  &.badge-info     { background: #dbeafe; color: #1e40af; }
  &.badge-warning  { background: #fef3c7; color: #92400e; }
  &.badge-active   { background: #d1fae5; color: #065f46; }
  &.badge-muted    { background: #f1f5f9; color: #64748b; }
}

/* ── Buttons ─────────────────────────────────────────────────  */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem 1rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;

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

  &.btn-primary {
    background: var(--blue-mid);
    color: #fff;
    border-color: var(--blue-mid);
    &:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
  }

  &.btn-secondary {
    background: var(--surface);
    color: var(--blue-mid);
    border-color: var(--blue-mid);
    &:hover { background: var(--blue-faint); }
  }

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

  &.btn-ghost {
    background: transparent;
    color: var(--muted);
    border-color: transparent;
    &:hover { background: var(--bg); color: var(--text); }
  }

  &.btn-sm {
    padding: .3rem .7rem;
    font-size: .8rem;
  }

  &.btn-xs {
    padding: .2rem .5rem;
    font-size: .75rem;
  }
}

/* ── Forms ───────────────────────────────────────────────────  */
.ls-form-group {
  margin-bottom: 1rem;

  & label, & .ls-form-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: .3rem;
  }
}

.ls-form-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: .3rem;
}

.ls-form-control, .form-control {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .875rem;
  color: var(--text);
  background: var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;

  &:focus {
    border-color: var(--blue-mid);
    box-shadow: 0 0 0 3px rgba(72, 120, 181, .15);
  }

  &::placeholder { color: #94a3b8; }

  &.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
  }
}

textarea.ls-form-control, textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

select.ls-form-control, select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.25rem;
}

/* ── Alerts ──────────────────────────────────────────────────  */
.ls-alert {
  padding: .75rem 1rem;
  border-radius: var(--radius);
  font-size: .875rem;
  border-left: 3px solid;
  margin-bottom: 1rem;

  &.ls-alert-success { background: #f0fdf4; border-color: var(--success); color: #166534; }
  &.ls-alert-danger  { background: #fef2f2; border-color: var(--danger);  color: #991b1b; }
  &.ls-alert-warning { background: #fffbeb; border-color: var(--warning); color: #92400e; }
  &.ls-alert-info    { background: #eff6ff; border-color: var(--info);    color: #1e40af; }
}

/* ── Modal ───────────────────────────────────────────────────  */
.ls-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(3px);
  animation: fadeIn .15s ease;

  &.open { display: flex; }

  & .ls-modal {
    background: var(--surface);
    border-radius: 10px;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: slideUp .2s ease;

    &.ls-modal-lg { max-width: 720px; }
    &.ls-modal-sm { max-width: 380px; }

    & .ls-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.1rem 1.5rem;
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      background: var(--surface);
      z-index: 1;

      & .ls-modal-title {
        font-size: .95rem;
        font-weight: 700;
        color: var(--navy);
        display: flex;
        align-items: center;
        gap: .4rem;
      }

      & .ls-modal-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: none;
        border: none;
        border-radius: 50%;
        color: var(--muted);
        font-size: 1rem;
        cursor: pointer;
        &:hover { background: var(--bg); color: var(--text); }
      }
    }

    & .ls-modal-body {
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    & .ls-modal-footer {
      padding: 1rem 1.5rem;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
      gap: .5rem;
      background: var(--bg);
      border-radius: 0 0 10px 10px;
    }
  }
}

/* ── Toast ───────────────────────────────────────────────────  */
#toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  z-index: 9000;
  pointer-events: none;
}

.ls-toast {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .875rem;
  min-width: 280px;
  max-width: 400px;
  pointer-events: all;
  animation: slideInRight .2s ease;

  & .ls-toast-icon { flex-shrink: 0; width: 16px; height: 16px; }
  & .ls-toast-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    &:hover { color: var(--text); }
  }

  &.ls-toast-success { border-left: 3px solid var(--success); & .ls-toast-icon { color: var(--success); } }
  &.ls-toast-danger  { border-left: 3px solid var(--danger);  & .ls-toast-icon { color: var(--danger);  } }
  &.ls-toast-warning { border-left: 3px solid var(--warning); & .ls-toast-icon { color: var(--warning); } }
  &.ls-toast-info    { border-left: 3px solid var(--info);    & .ls-toast-icon { color: var(--info);    } }

  &.ls-toast-leaving {
    animation: slideOutRight .2s ease forwards;
  }
}

/* ── Confirm Dialog ──────────────────────────────────────────  */
#ls-confirm-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,.5);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);

  &.open { display: flex; }

  & .ls-confirm-box {
    background: var(--surface);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    width: 100%;
    max-width: 360px;
    box-shadow: var(--shadow-lg);
    animation: slideUp .2s ease;

    & .ls-confirm-message {
      font-size: .9rem;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 1.25rem;
      display: flex;
      align-items: flex-start;
      gap: .6rem;
      line-height: 1.5;
    }

    & .ls-confirm-actions {
      display: flex;
      justify-content: flex-end;
      gap: .5rem;
    }
  }
}

/* ── Pagination ──────────────────────────────────────────────  */
.ls-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: .5rem;

  & .ls-pager-info {
    font-size: .8rem;
    color: var(--muted);
  }

  & .ls-pager-btns {
    display: flex;
    gap: .2rem;
    flex-wrap: wrap;
  }

  & .ls-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 .5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: .8rem;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);

    &:hover:not(.active):not(:disabled) {
      background: var(--blue-faint);
      border-color: var(--blue-light);
      color: var(--blue-mid);
    }

    &.active { background: var(--navy); color: #fff; border-color: var(--navy); }
    &:disabled, &.disabled { opacity: .4; pointer-events: none; }
    &.pager-ellipsis { border: none; background: none; cursor: default; color: var(--muted); }
  }
}

/* ── Password Toggle ──────────────────────────────────────────  */
.ls-pw-wrap {
  position: relative;

  & input { padding-right: 2.5rem; }

  & .ls-pw-toggle {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--muted);
    display: flex;
    align-items: center;
    line-height: 1;

    &:hover { color: var(--text); }
    & svg   { width: 16px; height: 16px; }
  }
}

/* ── HTMX ─────────────────────────────────────────────────────  */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-flex; }
.htmx-request.htmx-indicator { display: inline-flex; }

/* Button loading state */
.ls-btn-loading { display: none; }
.htmx-request .ls-btn-loading { display: inline-flex; align-items: center; gap: .35rem; }
.htmx-request .ls-btn-default { display: none; }

/* ── Empty State ─────────────────────────────────────────────  */
.ls-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);

  & .ls-empty-icon {
    width: 40px;
    height: 40px;
    opacity: .3;
    display: block;
    margin: 0 auto .75rem;
  }

  & p { font-size: .875rem; margin-top: .25rem; }
}

/* ── Info Grid (detail view) ─────────────────────────────────  */
.ls-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;

  & .ls-info-item {
    & .ls-info-label {
      font-size: .7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--muted);
      margin-bottom: .2rem;
    }

    & .ls-info-value {
      font-size: .9rem;
      font-weight: 500;
      color: var(--text);
    }

    &.span-full { grid-column: 1 / -1; }
  }
}

/* ── Login Page ──────────────────────────────────────────────  */
.ls-login-shell {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-dark) 60%, var(--blue-mid) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.ls-login-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 24px 64px rgba(0,0,0,.3);

  & .ls-login-brand {
    text-align: center;
    margin-bottom: 2rem;

    & .ls-login-logo {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -.02em;
    }

    & small {
      display: block;
      font-size: .78rem;
      color: var(--muted);
      margin-top: .2rem;
    }
  }
}

/* ── Public Layout ───────────────────────────────────────────  */
.pub-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 30, 68, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 0 2rem;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  & .pub-brand { color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
  & .pub-links { display: flex; align-items: center; gap: 1rem; }
  & .pub-link  { color: rgba(255,255,255,.75); font-size: .9rem; transition: color var(--transition); &:hover { color: #fff; } }
  & .pub-cta   {
    background: var(--blue-mid);
    color: #fff;
    padding: .45rem 1.1rem;
    border-radius: 20px;
    font-size: .875rem;
    font-weight: 600;
    transition: background var(--transition);
    &:hover { background: var(--blue-dark); }
  }
}

/* ── Sort column headers ────────────────────────────────────── */
.ls-sort-link {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  font-weight: inherit;

  &:hover { color: var(--navy); }
  &.active { color: var(--navy); font-weight: 700; }

  & .ls-sort-icon {
    width: 12px;
    height: 12px;
    opacity: .4;
    flex-shrink: 0;
  }

  &.active .ls-sort-icon { opacity: 1; }
}

/* ── Table search toolbar ────────────────────────────────────── */
.ls-table-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  border-radius: 0;
}

.ls-search-wrap {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 1;
  max-width: 340px;
  position: relative;

  & svg.ls-search-ico {
    position: absolute;
    left: .6rem;
    width: 13px;
    height: 13px;
    color: var(--muted);
    pointer-events: none;
  }

  & .ls-search-input {
    width: 100%;
    padding: .35rem .75rem .35rem 2rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .82rem;
    background: var(--bg);
    color: var(--text);
    outline: none;
    transition: border-color var(--transition);

    &:focus { border-color: var(--blue-mid); }
    &::placeholder { color: var(--muted); }
  }
}

.ls-search-clear {
  font-size: .75rem;
  color: var(--muted);
  text-decoration: none;
  padding: .2rem .5rem;
  border-radius: 4px;

  &:hover { color: var(--danger); background: #fef2f2; }
}

/* ── Animations ──────────────────────────────────────────────  */
@keyframes fadeIn       { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp      { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOutRight { to { opacity: 0; transform: translateX(20px); } }
@keyframes spin  { to { transform: rotate(360deg); } }

/* Lucide'sız sayfalar için saf CSS spinner (global `spin` keyframe ile) */
.ls-spin-dot {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes pulse {
  0%, 80%, 100% { opacity: .25; }
  40%           { opacity: 1; }
}
@keyframes galleryFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Responsive ──────────────────────────────────────────────  */
@media (max-width: 768px) {
  .ls-sidebar {
    transform: translateX(calc(-1 * var(--sidebar-w)));

    &.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  }

  .ls-main { margin-left: 0; }

  .ls-hamburger { display: flex; }

  .ls-content { padding: 1rem; }

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

  .ls-info-grid { grid-template-columns: 1fr; }

  .pub-nav {
    padding: 0 1rem;
    & .pub-links { gap: .5rem; }
    & .pub-link:not(.pub-cta) { display: none; }
  }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .ls-modal-backdrop .ls-modal { max-height: 100vh; border-radius: 12px 12px 0 0; }
}