/* Redesign override stylesheet
   Loaded after app.css to transform the visual language.
   Theme: warm industrial, high-contrast hierarchy, bold typography.
*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --rd-ink:#0f172a;
  --rd-ink-2:#1f2937;
  --rd-muted:#64748b;
  --rd-sand:#f8f4ef;
  --rd-mist:#f4f0ea;
  --rd-surface:#ffffff;
  --rd-border:#e4ddd4;
  --rd-border-strong:#d4cbbf;
  --rd-primary:#d97706;
  --rd-primary-2:#f59e0b;
  --rd-accent:#0ea5a8;
  --rd-accent-2:#22c1c3;
  --rd-danger:#ef4444;
  --rd-radius:16px;
  --rd-radius-sm:10px;
  --rd-shadow-1: 0 6px 18px rgba(15, 23, 42, 0.08);
  --rd-shadow-2: 0 18px 48px rgba(15, 23, 42, 0.12);
  --rd-focus: 0 0 0 4px rgba(217, 119, 6, 0.18);
}

html,body{
  background: var(--rd-sand);
}

body{
  color: var(--rd-ink);
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  letter-spacing: 0.01em;
}

body::before{
  content:"";
  position:fixed;
  inset:-20vmax;
  background:
    radial-gradient(40vmax 30vmax at 10% 10%, rgba(14,165,168,0.08), transparent 60%),
    radial-gradient(35vmax 28vmax at 80% 0%, rgba(245,158,11,0.14), transparent 60%),
    radial-gradient(30vmax 24vmax at 80% 90%, rgba(217,119,6,0.12), transparent 60%),
    linear-gradient(180deg, rgba(248,244,239,0.9), rgba(244,240,234,0.9));
  z-index:-1;
  pointer-events:none;
}

/* Layout container */
.app-shell{
  background: transparent;
}

.container{
  max-width: 1180px;
  padding: 0 20px;
}

/* Topbar */
.app-topbar{
  position: sticky;
  top: 0;
  z-index: 950;
  display:flex;
  align-items:center;
  gap:1rem;
  padding:0.85rem 1.25rem;
  background: rgba(255,255,255,0.82);
  border-bottom:1px solid var(--rd-border);
  box-shadow: var(--rd-shadow-1);
  backdrop-filter: blur(12px);
}

.app-topbar__title h1{
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 1.15rem;
  margin:0;
  font-weight:700;
  letter-spacing:0.02em;
}

.eyebrow{
  margin:0;
  color:var(--rd-muted);
  font-size:0.75rem;
  letter-spacing:0.24em;
  text-transform: uppercase;
}

/* Sidebar */
.app-sidebar{
  width: 240px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,244,239,0.95));
  border-right:1px solid var(--rd-border);
  box-shadow: 10px 0 30px rgba(15, 23, 42, 0.08);
}

.app-sidebar__brand{
  padding:1.25rem 1.4rem;
  border-bottom:1px solid var(--rd-border);
  display:flex;
  align-items:center;
  gap:0.85rem;
}

.brand__mark{
  width:46px;
  height:46px;
  border-radius:14px;
  background: linear-gradient(145deg, rgba(217,119,6,0.22), rgba(14,165,168,0.22));
  display:grid;
  place-items:center;
}

.brand__title{
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight:700;
  font-size:1rem;
  letter-spacing:0.04em;
}

.brand__subtitle{
  color: var(--rd-muted);
}

.app-sidebar__nav{
  padding:0.75rem;
}

.app-sidebar__section{
  color: var(--rd-muted);
}

.app-sidebar__link{
  padding:0.75rem 0.95rem;
  border-radius:12px;
  font-weight:600;
  position:relative;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.app-sidebar__link:hover{
  background: rgba(217,119,6,0.08);
  color: var(--rd-primary);
  transform: translateX(2px);
}

.app-sidebar__link.is-active{
  background: rgba(217,119,6,0.14);
  color: var(--rd-primary);
  box-shadow: inset 0 0 0 1px rgba(217,119,6,0.18);
}

.app-sidebar__link.is-active::before{
  content:"";
  position:absolute;
  left:6px;
  top:50%;
  transform:translateY(-50%);
  width:6px;
  height:60%;
  border-radius:6px;
  background: linear-gradient(180deg, var(--rd-primary), var(--rd-accent));
}

.app-sidebar__icon{
  font-size:1.1rem;
  opacity:0.95;
}

/* Cards */
.card{
  background: var(--rd-surface);
  border-radius: var(--rd-radius);
  border:1px solid var(--rd-border);
  padding:1.15rem 1.2rem;
  box-shadow: var(--rd-shadow-2);
  animation: card-rise 220ms ease both;
}

.card + .card{
  margin-top: 1rem;
}

@keyframes card-rise{
  from{transform: translateY(6px); opacity:0.85;}
  to{transform: translateY(0); opacity:1;}
}

/* Buttons */
.btn{
  border-radius:12px;
  padding:0.6rem 1rem;
  font-weight:700;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  letter-spacing:0.02em;
}

.btn-primary,
.btn.primary{
  background: linear-gradient(135deg, var(--rd-primary), var(--rd-primary-2));
  color:#fff;
  box-shadow: 0 12px 26px rgba(217,119,6,0.2);
}

.btn-primary:hover,
.btn.primary:hover{
  transform: translateY(-1px);
}

.btn-secondary,
.btn.secondary{
  background: transparent;
  border:1px solid var(--rd-border-strong);
  color: var(--rd-ink);
}

.btn-ghost,
.btn.ghost{
  background: transparent;
  color: var(--rd-primary);
  border:1px solid transparent;
}

.btn-danger,
.btn.danger{
  background: linear-gradient(135deg, #f97316, #ef4444);
  color:#fff;
}

/* Forms */
.form-control, input, textarea, select{
  border:1px solid var(--rd-border);
  border-radius:12px;
  padding:0.65rem 0.8rem;
  background: var(--rd-surface);
  color: var(--rd-ink);
}

input:focus, textarea:focus, select:focus{
  outline:none;
  border-color: var(--rd-primary);
  box-shadow: var(--rd-focus);
}

/* Tables */
.table-responsive{
  border-radius: var(--rd-radius);
  border:1px solid var(--rd-border);
  background: var(--rd-surface);
  box-shadow: var(--rd-shadow-1);
}

table{
  border-radius: var(--rd-radius);
  overflow:hidden;
}

table thead{
  background: rgba(15, 23, 42, 0.04);
}

table th, table td{
  padding:0.8rem 1rem;
  border-bottom:1px solid var(--rd-border);
}

table tbody tr:nth-child(odd){
  background: rgba(15, 23, 42, 0.02);
}

table tbody tr:hover{
  background: rgba(217,119,6,0.08);
}

/* Badges */
.badge{
  border-radius:999px;
  padding:0.3rem 0.7rem;
  font-weight:600;
  border:1px solid transparent;
}

.badge.success{
  background: rgba(16,185,129,0.14);
  color:#047857;
  border-color: rgba(16,185,129,0.28);
}

.badge.warning{
  background: rgba(245,158,11,0.16);
  color:#b45309;
  border-color: rgba(245,158,11,0.3);
}

.badge.danger{
  background: rgba(239,68,68,0.16);
  color:#b91c1c;
  border-color: rgba(239,68,68,0.3);
}

/* Breadcrumbs */
.breadcrumbs{
  font-size:0.85rem;
  color: var(--rd-muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.breadcrumbs a{
  color: var(--rd-ink-2);
}

.breadcrumbs li+li::before{
  color: var(--rd-border-strong);
}

/* Toasts */
.toast{
  border-radius:14px;
  padding:0.85rem 1rem;
  border:1px solid rgba(15,23,42,0.08);
  box-shadow: var(--rd-shadow-1);
  background: var(--rd-surface);
}

.toast-info{border-left:4px solid var(--rd-accent);}
.toast-success{border-left:4px solid #10b981;}
.toast-error{border-left:4px solid #ef4444;}
.toast-warning{border-left:4px solid #f59e0b;}

/* Command palette */
.command-palette__panel{
  width:min(720px, calc(100% - 2rem));
  border-radius:18px;
  background: var(--rd-surface);
  box-shadow: var(--rd-shadow-2);
}

/* Modal */
.photo-modal-box{
  border-radius:18px;
  border:1px solid var(--rd-border);
  box-shadow: var(--rd-shadow-2);
}

/* User chip */
.user-chip{
  background: linear-gradient(90deg, rgba(217,119,6,0.12), rgba(14,165,168,0.08));
  border-radius:14px;
  padding:0.4rem 0.6rem;
}

/* Utility: bigger touch targets */
.icon-button, .sidebar-collapse, .topbar-menu-toggle, .btn{
  min-height:42px;
}

/* Responsive */
@media (max-width:1024px){
  .app-sidebar{
    position:fixed;
    left:0; top:0; bottom:0;
    transform:translateX(-100%);
    width:78%;
    max-width:320px;
  }
  .app-shell.sidebar-open .app-sidebar{
    transform:translateX(0);
  }
  .topbar-menu-toggle{display:inline-flex;}
}

@media (max-width:640px){
  .container{padding:0 12px;}
  .app-topbar__title h1{font-size:1rem;}
  .brand__text{display:none;}
  .app-sidebar{width:82%; max-width:260px;}
  .card{padding:1rem;}
  .btn{padding:0.7rem 12px;}
}