/* === DESIGN SYSTEM === */
:root {
  --primary: #b8860b;
  --primary-light: #d4af37;
  --primary-dark: #7f5f03;
  --primary-bg: #fbf2d9;
  --amber: #b8860b;
  --amber-light: #f5deb3;
  --amber-dark: #8b6500;
  --success: #b8860b;
  --success-light: #f5deb3;
  --success-dark: #7f5f03;
  --warning: #b8860b;
  --warning-light: #f5deb3;
  --warning-dark: #8b6500;
  --danger: #9c6b14;
  --danger-light: #faecc6;
  --danger-dark: #7f5f03;
  --info: #b8860b;
  --info-light: #fbf2d9;
  --secondary: #bda16f;
  --secondary-light: #f6edd0;

  --dark: #0f172a;
  --dark-2: #1e293b;
  --gray-900: #0f172a;
  --gray-800: #1e293b;
  --gray-700: #334155;
  --gray-600: #475569;
  --gray-500: #64748b;
  --gray-400: #94a3b8;
  --gray-300: #cbd5e1;
  --gray-200: #e2e8f0;
  --gray-100: #f1f5f9;
  --gray-50: #f8fafc;
  --white: #ffffff;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);

  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --topbar-height: 64px;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family: var(--font);
  background: var(--gray-100);
  color: var(--gray-700);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gray-400); }

/* === LOGIN (fullscreen, no sidebar) === */
.login-body {
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #0c0901 0%, #211803 30%, #1a1002 60%, #0c0901 100%);
  min-height:100vh; position:relative; overflow:hidden;
}

/* Animated gradient orbs */
.login-body::before {
  content:''; position:absolute; width:800px; height:800px;
  background: radial-gradient(circle, rgba(184,134,11,0.13) 0%, rgba(184,134,11,0.03) 40%, transparent 70%);
  top:-300px; right:-200px; border-radius:50%;
  animation: orbFloat 12s ease-in-out infinite alternate;
}
.login-body::after {
  content:''; position:absolute; width:600px; height:600px;
  background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0.02) 40%, transparent 70%);
  bottom:-200px; left:-150px; border-radius:50%;
  animation: orbFloat 15s ease-in-out infinite alternate-reverse;
}
@keyframes orbFloat {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(40px,30px) scale(1.15); }
}

/* Floating geometric shapes */
.login-particles {
  position:fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:0; overflow:hidden;
}
.login-particle {
  position:absolute; border-radius:50%; opacity:0;
  animation: particleUp 20s linear infinite;
}
.login-particle:nth-child(1) { width:6px; height:6px; background:rgba(184,134,11,0.3); left:10%; animation-delay:0s; animation-duration:18s; }
.login-particle:nth-child(2) { width:4px; height:4px; background:rgba(212,175,55,0.3); left:25%; animation-delay:2s; animation-duration:22s; }
.login-particle:nth-child(3) { width:8px; height:8px; background:rgba(184,134,11,0.2); left:45%; animation-delay:4s; animation-duration:16s; }
.login-particle:nth-child(4) { width:3px; height:3px; background:rgba(245,158,11,0.3); left:60%; animation-delay:1s; animation-duration:24s; }
.login-particle:nth-child(5) { width:5px; height:5px; background:rgba(184,134,11,0.25); left:75%; animation-delay:3s; animation-duration:20s; }
.login-particle:nth-child(6) { width:7px; height:7px; background:rgba(212,175,55,0.2); left:88%; animation-delay:5s; animation-duration:19s; }
.login-particle:nth-child(7) { width:4px; height:4px; background:rgba(245,158,11,0.2); left:35%; animation-delay:7s; animation-duration:21s; }
.login-particle:nth-child(8) { width:6px; height:6px; background:rgba(184,134,11,0.2); left:55%; animation-delay:9s; animation-duration:17s; }
@keyframes particleUp {
  0% { transform: translateY(100vh) scale(0); opacity:0; }
  10% { opacity:1; }
  90% { opacity:1; }
  100% { transform: translateY(-10vh) scale(1); opacity:0; }
}

/* Grid pattern overlay */
.login-grid {
  position:fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(184,134,11,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,134,11,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.login-container {
  width:100%; max-width:420px; padding:24px; position:relative; z-index:2;
}

.login-box {
  background: rgba(255,255,255,0.96);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-radius: 20px; padding:32px 28px 28px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 25px 60px -12px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.15);
  text-align:center;
  animation: slideUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
  position:relative; overflow:hidden;
}
/* Subtle inner glow line at top */
.login-box::before {
  content:''; position:absolute; top:0; left:10%; right:10%;
  height:1px; background: linear-gradient(90deg, transparent, rgba(184,134,11,0.4), transparent);
}

@keyframes slideUp {
  from { opacity:0; transform:translateY(30px) scale(0.98); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

.login-icon {
  width:60px; height:60px; margin:0 auto 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light), var(--primary-dark));
  background-size: 200% 200%;
  border-radius:20px; display:flex; align-items:center; justify-content:center;
  font-size:26px; color:white;
  box-shadow:0 8px 28px rgba(184,134,11,0.4);
  animation: iconPulse 3s ease-in-out infinite, iconShimmer 4s linear infinite;
  position:relative;
}
.login-icon::after {
  content:''; position:absolute; inset:-2px; border-radius:22px;
  background: linear-gradient(135deg, rgba(184,134,11,0.3), transparent, rgba(212,175,55,0.3));
  z-index:-1; animation: iconGlow 3s ease-in-out infinite;
}
@keyframes iconPulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.03); }
}
@keyframes iconShimmer {
  0% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
@keyframes iconGlow {
  0%,100% { opacity:0.5; }
  50% { opacity:1; }
}

.login-box h2 {
  color:var(--dark); font-size:1.35rem; font-weight:700; margin-bottom:4px;
  letter-spacing:-0.3px;
}
.login-subtitle { color:var(--gray-400); font-size:0.85rem; margin-bottom:28px; }

/* Floating label inputs */
.login-box .form-group { text-align:left; margin-bottom:20px; position:relative; }
.login-box .form-group label {
  color:var(--gray-500); font-size:0.72rem; font-weight:600; margin-bottom:6px;
  display:flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:0.5px;
}
.input-icon-wrap { position:relative; }
.input-icon-wrap input {
  width:100%; padding:13px 16px 13px 44px;
  border:2px solid var(--gray-200);
  border-radius:var(--radius); font-size:0.9rem; transition:all 0.25s ease;
  background:var(--gray-50); color:var(--gray-700);
}
.input-icon-wrap input:hover { border-color:var(--gray-300); }
.input-icon-wrap input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(184,134,11,0.12);
  background:white; padding-left:44px;
}
.input-icon-wrap input::placeholder { color:var(--gray-300); font-size:0.85rem; }
.input-icon-wrap input:focus::placeholder { color:var(--gray-400); }
.input-icon-wrap .input-icon {
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:var(--gray-400); font-size:16px; transition:all 0.25s ease;
  pointer-events:none;
}
.input-icon-wrap input:focus ~ .input-icon,
.input-icon-wrap input:not(:placeholder-shown) ~ .input-icon { color:var(--primary); }

.input-focus-ring {
  position:absolute; bottom:-2px; left:50%; width:0; height:2px;
  background:var(--primary); border-radius:2px;
  transition:all 0.3s ease; transform:translateX(-50%);
}

.login-box .btn {
  margin-top:4px; height:50px; font-size:0.95rem; font-weight:600;
  letter-spacing:0.3px; position:relative; overflow:hidden;
  border-radius:var(--radius);
}
.login-box .btn::after {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition:left 0.5s ease;
}
.login-box .btn:hover::after { left:100%; }
.login-box .btn:active { transform:scale(0.98); }

/* Divider with text */
.login-divider {
  display:flex; align-items:center; gap:12px; margin:22px 0 16px;
  color:var(--gray-300); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.5px;
}
.login-divider::before,
.login-divider::after { content:''; flex:1; height:1px; background:var(--gray-200); }

.login-info {
  margin-top:6px; padding:16px; background:var(--gray-50);
  border-radius:var(--radius); font-size:0.76rem; color:var(--gray-500);
  border:1px solid var(--gray-200); text-align:left;
}
.login-info p { margin:4px 0; display:flex; align-items:center; gap:8px; }
.login-info .info-label { font-weight:600; color:var(--gray-600); min-width:56px; }
.login-info code {
  background:var(--white); padding:2px 7px; border-radius:4px;
  font-size:0.72rem; color:var(--primary); border:1px solid var(--gray-200);
  font-weight:600; font-family:var(--font);
}

.login-footer-text {
  margin-top:24px; font-size:0.7rem; color:var(--gray-400);
  text-align:center;
}

/* === SIDEBAR LAYOUT === */
.app-layout { display:flex; min-height:100vh; }

.sidebar {
  width: var(--sidebar-width); background: var(--gray-900);
  display:flex; flex-direction:column; position:fixed; top:0; left:0;
  height:100vh; z-index:200; transition: width 0.25s ease;
  border-right: 1px solid rgba(255,255,255,0.05);
}

.sidebar-brand {
  height: var(--topbar-height); display:flex; align-items:center;
  padding:0 20px; gap:12px; border-bottom:1px solid rgba(255,255,255,0.06);
  flex-shrink:0;
}
.sidebar-brand-icon {
  width:36px; height:36px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:18px; color:white; flex-shrink:0;
}
.sidebar-brand-text { color:white; font-size:1.05rem; font-weight:700; letter-spacing:-0.3px; white-space:nowrap; overflow:hidden; }

.sidebar-user {
  padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.sidebar-user-avatar {
  width:40px; height:40px; border-radius:10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:white; flex-shrink:0;
}
.sidebar-user-info { overflow:hidden; }
.sidebar-user-name { color:white; font-size:0.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-role {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:10px; font-size:0.6rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.5px; margin-top:2px;
}
.sidebar-user-role.admin { background:rgba(184,134,11,0.2); color:var(--primary-light); }
.sidebar-user-role.lawyer { background:rgba(212,175,55,0.2); color:var(--primary-dark); }

.sidebar-nav { flex:1; padding:12px 12px; overflow-y:auto; }
.sidebar-label {
  padding:16px 12px 6px; font-size:0.65rem; font-weight:600;
  color:var(--gray-500); text-transform:uppercase; letter-spacing:0.8px;
}
.sidebar-link {
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  border-radius:var(--radius-sm); color:var(--gray-400); text-decoration:none;
  font-size:0.85rem; font-weight:500; transition:var(--transition);
  position:relative; white-space:nowrap; overflow:hidden;
}
.sidebar-link i { width:20px; text-align:center; font-size:1rem; flex-shrink:0; }
.sidebar-link:hover { background:rgba(255,255,255,0.06); color:white; }
.sidebar-link.active {
  background: rgba(184,134,11,0.15); color: var(--primary-light);
}
.sidebar-link.active::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:20px; background:var(--primary); border-radius:2px;
}
.sidebar-link .link-badge {
  margin-left:auto; padding:1px 8px; border-radius:10px;
  font-size:0.65rem; font-weight:600; background:rgba(184,134,11,0.2); color:var(--primary-light);
}

.sidebar-footer {
  padding:12px; border-top:1px solid rgba(255,255,255,0.06);
  flex-shrink:0;
}
.sidebar-footer .sidebar-link { color:var(--gray-500); font-size:0.8rem; }
.sidebar-footer .sidebar-link:hover { color:var(--primary-dark); background:rgba(184,134,11,0.12); }

/* === MAIN CONTENT === */
.main-content {
  margin-left: var(--sidebar-width); min-height:100vh; flex:1;
  transition: margin-left 0.25s ease;
}

.topbar {
  height: var(--topbar-height); background: var(--white);
  border-bottom: 1px solid var(--gray-200); display:flex;
  align-items:center; padding:0 28px; position:sticky; top:0; z-index:50;
  box-shadow: var(--shadow-sm);
}
.topbar-left { display:flex; align-items:center; gap:16px; }
.topbar-toggle {
  width:36px; height:36px; border:none; background:var(--gray-100);
  border-radius:var(--radius-sm); cursor:pointer; color:var(--gray-600);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  transition:var(--transition);
}
.topbar-toggle:hover { background:var(--gray-200); color:var(--gray-800); }
.topbar-breadcrumbs {
  display:flex; align-items:center; gap:8px; font-size:0.8rem; color:var(--gray-400);
}
.topbar-breadcrumbs a { color:var(--gray-500); text-decoration:none; transition:var(--transition); }
.topbar-breadcrumbs a:hover { color:var(--primary); }
.topbar-breadcrumbs span { color:var(--gray-600); font-weight:500; }
.topbar-breadcrumbs i { font-size:10px; color:var(--gray-300); }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; }

.page-content {
  padding:28px 32px;
  max-width:1280px;
  margin:0 auto;
  min-height:calc(100vh - var(--topbar-height));
  width:100%;
}

/* === DASHBOARD === */
.welcome-banner {
  background: linear-gradient(135deg, var(--gray-900), #1c1300);
  border-radius: var(--radius-lg); padding:32px 36px; margin-bottom:28px;
  display:flex; align-items:center; justify-content:space-between;
  position:relative; overflow:hidden;
}
.welcome-banner::before {
  content:''; position:absolute; width:500px; height:500px;
  background: radial-gradient(circle, rgba(184,134,11,0.1) 0%, transparent 70%);
  top:-150px; right:-150px; border-radius:50%;
}
.welcome-banner h1 { color:white; font-size:1.4rem; font-weight:700; position:relative; z-index:1; display:flex; align-items:center; gap:10px; }
.welcome-banner h1 i { color:var(--primary-light); }
.welcome-banner p { color:var(--gray-400); font-size:0.85rem; margin-top:4px; position:relative; z-index:1; }
.welcome-avatar {
  width:52px; height:52px; background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:22px; color:white; position:relative; z-index:1;
}

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:18px; margin-bottom:28px; }
.stat-card {
  background:var(--white); border-radius:var(--radius-lg); padding:22px 24px;
  box-shadow:var(--shadow); border:1px solid var(--gray-100);
  transition:var(--transition); position:relative; overflow:hidden;
}
.stat-card-inner { display:flex; align-items:flex-start; gap:16px; position:relative; z-index:1; }
.stat-card::after {
  content:''; position:absolute; top:0; right:0; width:120px; height:120px;
  background: radial-gradient(circle, rgba(184,134,11,0.04) 0%, transparent 70%);
  border-radius:50%;
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--gray-200); }
.stat-card-inner { display:flex; align-items:flex-start; gap:16px; position:relative; z-index:1; }
.stat-icon {
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.stat-icon.purple { background:var(--primary-bg); color:var(--primary); }
.stat-icon.green { background:var(--success-light); color:var(--success); }
.stat-icon.amber { background:var(--warning-light); color:var(--warning); }
.stat-icon.cyan { background:var(--info-light); color:var(--info); }
.stat-info h3 { font-size:1.65rem; font-weight:700; color:var(--dark); line-height:1.2; }
.stat-info p { color:var(--gray-400); font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; margin-top:2px; }
.stat-link {
  display:flex; align-items:center; gap:6px; color:var(--primary); text-decoration:none;
  font-size:0.78rem; font-weight:600; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--gray-100); transition:var(--transition);
}
.stat-link:hover { color:var(--primary-dark); gap:10px; }

.section-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:8px;
}
.section-header h2 { font-size:1.05rem; font-weight:700; color:var(--dark); display:flex; align-items:center; gap:8px; }
.section-header h2 i { color:var(--primary); }

.quick-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.quick-action-btn {
  display:inline-flex; align-items:center; gap:10px; padding:12px 20px;
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius);
  color:var(--gray-700); text-decoration:none; font-size:0.85rem; font-weight:600;
  transition:var(--transition); box-shadow:var(--shadow-sm);
}
.quick-action-btn:hover { border-color:var(--primary); color:var(--primary); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.quick-action-btn i { font-size:1.05rem; color:var(--primary); }

/* === CARDS === */
.card {
  background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); border:1px solid var(--gray-100);
  margin-bottom:22px; overflow:hidden; transition:var(--transition);
}
.card-header {
  padding:16px 24px; border-bottom:1px solid var(--gray-100);
  display:flex; align-items:center; justify-content:space-between;
}
.card-header h2,.card-header h3 {
  font-size:0.9rem; font-weight:700; color:var(--dark);
  display:flex; align-items:center; gap:8px;
}
.card-header h2 i,.card-header h3 i { color:var(--primary); }
.card-body { padding:24px; }
.card-footer {
  padding:14px 24px; border-top:1px solid var(--gray-100);
  background:var(--gray-50); display:flex; align-items:center; gap:12px;
}

/* === FORMS === */
.form-group { margin-bottom:18px; }
.form-group label {
  display:block; font-size:0.78rem; font-weight:600; color:var(--gray-600);
  margin-bottom:5px; letter-spacing:0.2px;
}
.form-group .label-hint { color:var(--gray-400); font-weight:400; font-size:0.72rem; margin-left:4px; }
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="file"],
.form-group textarea,
.form-group select {
  width:100%; padding:10px 14px; border:2px solid var(--gray-200);
  border-radius:var(--radius); font-size:0.875rem; font-family:inherit;
  transition:var(--transition); background:var(--white); color:var(--gray-700);
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(184,134,11,0.1);
}
.form-group textarea { resize:vertical; min-height:90px; line-height:1.6; }
.form-group select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.form-group .help-text { font-size:0.76rem; color:var(--gray-400); margin-top:4px; }
.form-group .help-text code { background:var(--gray-100); padding:2px 6px; border-radius:4px; font-size:0.68rem; color:var(--primary); }

.form-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; align-items:end; }
.form-row .form-group { margin-bottom:0; }

.form-section { margin-bottom:24px; }
.form-section h3 {
  font-size:1rem; font-weight:700; color:var(--dark);
  margin-bottom:4px; display:flex; align-items:center; gap:8px;
}
.form-section h3 i { color:var(--primary); }
.form-section p { color:var(--gray-400); font-size:0.82rem; }

.form-actions {
  display:flex; gap:12px; margin-top:24px; padding-top:20px;
  border-top:1px solid var(--gray-200);
}

/* === BUTTONS === */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:9px 20px; border:none; border-radius:var(--radius);
  font-size:0.85rem; font-weight:600; font-family:inherit;
  cursor:pointer; transition:var(--transition); text-decoration:none;
  white-space:nowrap; line-height:1.4;
}
.btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn:active { transform:translateY(0); }
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none!important; box-shadow:none!important; }
.btn-primary { background:var(--primary); color:white; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-success { background:var(--success); color:white; }
.btn-success:hover { background:var(--success-dark); }
.btn-warning { background:var(--warning); color:white; }
.btn-warning:hover { background:var(--warning-dark); }
.btn-danger { background:var(--danger); color:white; }
.btn-danger:hover { background:var(--danger-dark); }
.btn-info { background:var(--info); color:white; }
.btn-info:hover { background:var(--info-dark); }
.btn-secondary { background:var(--gray-200); color:var(--gray-700); }
.btn-secondary:hover { background:var(--gray-300); }
.btn-ghost { background:transparent; color:var(--gray-600); border:2px solid var(--gray-200); }
.btn-ghost:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-bg); }
.btn-block { width:100%; }
.btn-sm { padding:6px 12px; font-size:0.76rem; border-radius:var(--radius-sm); }
.btn-lg { padding:12px 24px; font-size:0.95rem; }
.btn-icon { width:34px; height:34px; padding:0; justify-content:center; border-radius:var(--radius-sm); }

/* === TABLES === */
.table-container { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--gray-200); }
.table { width:100%; border-collapse:separate; border-spacing:0; font-size:0.85rem; }
.table th {
  text-align:left; padding:11px 16px; background:var(--gray-50);
  font-weight:600; color:var(--gray-600); font-size:0.72rem;
  text-transform:uppercase; letter-spacing:0.4px; border-bottom:1px solid var(--gray-200);
  white-space:nowrap;
}
.table td { padding:12px 16px; border-bottom:1px solid var(--gray-100); color:var(--gray-700); }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:var(--gray-50); }
.cell-actions { white-space:nowrap; text-align:right; }
.cell-actions .btn { margin-left:4px; }

/* === BADGES === */
.badge {
  display:inline-flex; align-items:center; gap:4px; padding:2px 9px;
  border-radius:20px; font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.3px;
}
.badge-success { background:var(--success-light); color:var(--success-dark); }
.badge-warning { background:var(--warning-light); color:var(--warning-dark); }
.badge-info { background:var(--info-light); color:var(--info-dark); }
.badge-danger { background:var(--danger-light); color:var(--danger-dark); }
.badge-primary { background:var(--primary-bg); color:var(--primary-dark); }

/* === ALERTS === */
.alert {
  padding:14px 18px; border-radius:var(--radius); margin-bottom:18px;
  font-size:0.84rem; display:flex; align-items:center; gap:10px;
  animation: slideDown 0.3s ease-out;
}
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.alert i { font-size:1.05rem; }
.alert-error { background:var(--danger-light); color:var(--danger-dark); border:1px solid rgba(156,107,20,0.25); }
.alert-success { background:var(--success-light); color:var(--success-dark); border:1px solid rgba(184,134,11,0.25); }
.alert-warning { background:var(--warning-light); color:var(--warning-dark); border:1px solid rgba(184,134,11,0.35); }
.alert-info { background:var(--info-light); color:var(--info-dark); border:1px solid rgba(184,134,11,0.25); }

/* === TOAST === */
.toast-container {
  position:fixed; top:20px; right:20px; z-index:9999;
  display:flex; flex-direction:column; gap:8px;
}
.toast {
  padding:14px 20px; background:var(--gray-900); color:white;
  border-radius:var(--radius); box-shadow:var(--shadow-xl);
  font-size:0.83rem; display:flex; align-items:center; gap:10px;
  animation:toastIn 0.3s ease-out; max-width:400px;
  border-left:4px solid var(--primary);
}
.toast.success { border-left-color:var(--success); }
.toast.error { border-left-color:var(--danger); }
.toast.warning { border-left-color:var(--warning); }
@keyframes toastIn { from{opacity:0;transform:translateX(80px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(80px)} }

/* === EMPTY STATE === */
.empty-state { text-align:center; padding:50px 20px; }
.empty-state i { font-size:44px; color:var(--gray-300); margin-bottom:14px; display:block; }
.empty-state h3 { font-size:1.05rem; color:var(--gray-600); margin-bottom:6px; font-weight:600; }
.empty-state p { color:var(--gray-400); font-size:0.83rem; max-width:380px; margin:0 auto 18px; }

/* === FIELDS GRID === */
.fields-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:16px;
}
.field-card {
  background:var(--gray-50); border:1px solid var(--gray-200);
  border-radius:var(--radius); padding:14px 16px; transition:var(--transition);
}
.field-card:hover { border-color:var(--primary); background:var(--primary-bg); }
.field-card label { font-size:0.78rem; font-weight:600; color:var(--gray-600); display:block; margin-bottom:5px; }
.field-card input,.field-card select,.field-card textarea {
  width:100%; padding:8px 12px; border:2px solid var(--gray-200);
  border-radius:var(--radius-sm); font-size:0.84rem; font-family:inherit;
  transition:var(--transition); background:white;
}
.field-card input:focus,.field-card select:focus,.field-card textarea:focus {
  border-color:var(--primary); outline:none; box-shadow:0 0 0 3px rgba(184,134,11,0.1);
}

/* === LIVE PREVIEW === */
.live-preview-section { margin-top:24px; padding-top:20px; border-top:2px solid var(--gray-200); }
.live-preview-section h3 { font-size:0.95rem; font-weight:700; color:var(--dark); margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.live-preview-section h3 i { color:var(--primary); }
.live-preview {
  border:2px dashed var(--gray-300); border-radius:var(--radius);
  padding:24px; background:var(--white); min-height:120px;
  transition:var(--transition);
}
.live-preview:empty::before { content:'Fill in the fields above to see a live preview...'; color:var(--gray-400); font-style:italic; }

/* === PREVIEW LAYOUT === */
.preview-layout { display:flex; gap:24px; align-items:flex-start; }
.preview-tools { width:320px; flex-shrink:0; position:sticky; top:88px; max-height:calc(100vh - 110px); overflow-y:auto; }
.preview-tools .card { margin-bottom:14px; }
.preview-tools .card-header { padding:12px 16px; }
.preview-tools .card-header h3 { font-size:0.85rem; }
.preview-tools .card-body { padding:16px; }

.preview-document {
  flex:1; background:#fff; border-radius:var(--radius-lg);
  padding:40px; min-height:900px; position:relative;
  box-shadow:var(--shadow-lg); border:1px solid var(--gray-200);
}
.document-wrapper { position:relative; min-height:600px; }

.overlay-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.overlay-container > * { position:absolute; pointer-events:all; cursor:move; }
.overlay-container img { max-width:200px; }

.canvas-wrap { position:relative; }
.sig-canvas {
  border:2px dashed var(--gray-300); border-radius:var(--radius);
  background:var(--white); cursor:crosshair; width:100%;
  transition:var(--transition);
}
.sig-canvas:hover { border-color:var(--gray-400); }
.canvas-label {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:var(--gray-300); font-size:0.8rem; pointer-events:none; white-space:nowrap;
}
.sig-canvas.drawing ~ .canvas-label,.sig-canvas:hover ~ .canvas-label { opacity:0; }

.preview-toolbar {
  display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px;
}
.tool-btn {
  flex:1; min-width:0; display:flex; align-items:center; justify-content:center;
  gap:6px; padding:10px 8px; border:2px solid var(--gray-200); border-radius:var(--radius);
  background:var(--white); color:var(--gray-600); cursor:pointer;
  font-size:0.75rem; font-weight:600; font-family:inherit;
  transition:var(--transition);
}
.tool-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-bg); }
.tool-btn i { font-size:1rem; }
.tool-btn span { white-space:nowrap; }

.size-picker { }
.size-options { display:flex; gap:4px; }
.size-btn {
  flex:1; padding:5px 8px; border:2px solid var(--gray-200); border-radius:var(--radius-sm);
  background:var(--white); color:var(--gray-600); cursor:pointer;
  font-size:0.68rem; font-weight:600; font-family:inherit;
  transition:var(--transition);
}
.size-btn:hover { border-color:var(--gray-400); }
.size-btn.active { border-color:var(--primary); background:var(--primary-bg); color:var(--primary); }

.doc-tabs { display:flex; gap:0; margin-bottom:16px; border-bottom:2px solid var(--gray-200); }
.doc-tab { padding:10px 20px; border:none; background:transparent; font-family:inherit; font-size:0.85rem; font-weight:500; color:var(--gray-500); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:var(--transition); display:inline-flex; align-items:center; gap:6px; }
.doc-tab:hover { color:var(--gray-700); }
.doc-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.doc-tab-btn {
  padding:8px 16px; border:2px solid var(--gray-200); border-radius:var(--radius-sm);
  background:var(--white); color:var(--gray-600); cursor:pointer;
  font-size:0.78rem; font-weight:600; font-family:inherit;
  transition:var(--transition);
}
.doc-tab-btn:hover { border-color:var(--gray-400); }
.doc-tab-btn.active { border-color:var(--primary); background:var(--primary-bg); color:var(--primary); }

.saved-items { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.saved-item {
  position:relative; border:1px solid var(--gray-200); border-radius:var(--radius-sm);
  padding:6px; background:var(--gray-50); transition:var(--transition);
}
.saved-item:hover { border-color:var(--primary); }
.saved-item img { display:block; border-radius:4px; }
.remove-btn {
  position:absolute; top:-8px; right:-8px; width:20px; height:20px;
  background:var(--danger); color:white; border:2px solid white;
  border-radius:50%; font-size:9px; display:flex; align-items:center;
  justify-content:center; cursor:pointer; transition:var(--transition); box-shadow:var(--shadow);
}
.remove-btn:hover { background:var(--danger-dark); transform:scale(1.15); }

/* === MODAL === */
.modal-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.45); display:none; align-items:center;
  justify-content:center; z-index:1000; backdrop-filter:blur(3px);
  animation:fadeIn 0.2s ease-out;
}
.modal-overlay.active { display:flex; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal-content {
  background:var(--white); border-radius:var(--radius-xl); padding:32px;
  max-width:500px; width:92%; box-shadow:0 25px 50px -12px rgba(0,0,0,0.3);
  position:relative; animation:modalIn 0.3s ease-out;
}
@keyframes modalIn { from{opacity:0;transform:scale(0.95) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-content h2 { font-size:1.15rem; font-weight:700; color:var(--dark); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.modal-content h2 i { color:var(--primary); }
.modal-close {
  position:absolute; top:14px; right:18px; width:30px; height:30px;
  border:none; background:var(--gray-100); border-radius:50%;
  font-size:15px; cursor:pointer; color:var(--gray-500);
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition);
}
.modal-close:hover { background:var(--gray-200); color:var(--gray-700); }

/* === PAGE HEADER (inside content) === */
.page-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px; flex-wrap:wrap; gap:12px;
}
.page-header h1 {
  font-size:1.5rem; font-weight:700; color:var(--dark);
  display:flex; align-items:center; gap:10px;
}
.page-header h1 i { color:var(--primary); font-size:1.3rem; }
.page-subtitle { color:var(--gray-400); font-size:0.85rem; margin-top:2px; }

/* === TEMPLATE BUILDER === */
.template-builder textarea { font-family:'JetBrains Mono','Fira Code',monospace; font-size:0.8rem; line-height:1.7; }
.template-preview { margin-top:10px; }
.preview-box {
  border:1px solid var(--gray-200); border-radius:var(--radius);
  padding:18px; background:var(--white); max-height:320px; overflow:auto;
}

/* === PROFESSIONAL CONTRACT DOCUMENT STYLES === */
.branded-doc .doc-body .contract-title {
  text-align: center;
  font-size: 16pt;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.contract-subtitle {
  text-align: center;
  font-size: 10pt;
  color: #64748b;
  margin: 0 0 32px;
  letter-spacing: 0.5px;
  font-family: 'Inter', sans-serif;
}

.contract-section {
  margin: 24px 0 16px;
}

.contract-section-title {
  font-size: 12pt;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid #1e3a5f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contract-clause {
  margin: 12px 0;
  padding-left: 24px;
  text-indent: -24px;
}

.contract-clause .clause-number {
  display: inline-block;
  width: 24px;
  font-weight: 700;
  color: #1e3a5f;
}

.signature-block {
  margin: 36px 0 20px;
  padding-top: 16px;
}

.signature-row {
  display: flex;
  gap: 40px;
  margin: 24px 0;
  flex-wrap: wrap;
}

.signature-field {
  flex: 1;
  min-width: 200px;
}

.signature-line {
  border-top: 1px solid #0f172a;
  padding-top: 6px;
  margin-top: 36px;
  font-size: 10pt;
  color: #475569;
  font-family: 'Inter', sans-serif;
}

.doc-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  font-size: 72pt;
  font-weight: 700;
  color: rgba(30, 58, 95, 0.04);
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
  letter-spacing: 12px;
  text-transform: uppercase;
}

.doc-reference {
  text-align: right;
  font-size: 9pt;
  color: #94a3b8;
  margin-bottom: 24px;
  font-family: 'Inter', sans-serif;
}

.doc-date-line {
  text-align: right;
  font-size: 10pt;
  color: #475569;
  margin-bottom: 28px;
  font-family: 'Inter', sans-serif;
}

.doc-party-block {
  margin: 24px 0;
  padding: 16px 20px;
  background: #f8fafc;
  border-left: 3px solid #1e3a5f;
  border-radius: 4px;
}

.doc-party-block p {
  margin: 3px 0;
  font-size: 10.5pt;
}

.doc-witness-block {
  margin: 32px 0;
  padding: 20px 0;
  border-top: 1px dashed #cbd5e1;
  border-bottom: 1px dashed #cbd5e1;
}

.doc-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.doc-page-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: #94a3b8;
  font-family: 'Inter', sans-serif;
}

@media print {
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 0.75in; }
  @page :first { margin-top: 0.5in; }
}

/* === SIDEBAR COLLAPSE (DESKTOP) === */
.sidebar.collapsed { width:var(--sidebar-collapsed); }
.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .sidebar-link span,
.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .sidebar-footer .sidebar-link span { display:none; }
.sidebar.collapsed .sidebar-link { justify-content:center; padding:12px; }
.sidebar.collapsed .sidebar-link i { margin:0; }
.sidebar.collapsed .sidebar-user { justify-content:center; padding:12px; }
.main-content.expanded { margin-left:var(--sidebar-collapsed); }

/* === MOBILE SIDEBAR TOGGLE === */
.sidebar-overlay {
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.5); z-index:150;
}

/* === PRINT === */
@media print {
  .sidebar,.topbar,.preview-tools,.page-header .flex,.breadcrumbs,
  .toast-container,.no-print,.form-actions { display:none!important; }
  .main-content { margin-left:0!important; }
  .preview-layout { display:block!important; }
  .preview-document { border:none!important; box-shadow:none!important; padding:20px!important; border-radius:0!important; }
  .page-content { padding:0!important; }
  body { background:white!important; }
}

/* === RESPONSIVE === */
@media (max-width:1024px) {
  .preview-layout { flex-direction:column; }
  .preview-tools { width:100%; position:static; max-height:none; }
}

@media (max-width:768px) {
  body { overflow-x:hidden; }
  .app-layout { overflow-x:hidden; }
  .sidebar {
    width:280px;
    transform:translateX(-100%);
    transition:transform 0.3s ease;
    left:0;
  }
  .sidebar.open { transform:translateX(0); }
  .sidebar-overlay.active { display:block; }
  .main-content { margin-left:0; }
  .page-content { padding:20px; }
  .topbar { padding:0 20px; }
  .topbar-breadcrumbs { display:none; }
  .stats-grid { grid-template-columns:1fr; }
  .fields-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .quick-actions { flex-direction:column; }
  .quick-action-btn { width:100%; justify-content:center; }
  .welcome-banner { padding:24px 20px; flex-direction:column; text-align:center; gap:12px; }
  .welcome-banner h1 { font-size:1.15rem; }
  .preview-document { padding:20px; }
  .doc-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .doc-tab { padding:10px 14px; white-space:nowrap; }
  .modal-content { max-width:calc(100% - 40px); }
  .page-header { flex-direction:column; align-items:flex-start; }
  .page-header .flex { width:100%; }
  .form-actions { flex-wrap:wrap; }
}

/* === UTILITY === */
.text-muted { color:var(--gray-400); }
.text-primary { color:var(--primary); }
.text-success { color:var(--success); }
.text-sm { font-size:0.8rem; }
.text-xs { font-size:0.72rem; }
.font-medium { font-weight:500; }
.font-semibold { font-weight:600; }
.font-bold { font-weight:700; }
.mt-1 { margin-top:4px; }
.mt-2 { margin-top:8px; }
.mt-3 { margin-top:12px; }
.mt-4 { margin-top:16px; }
.mt-6 { margin-top:24px; }
.mb-2 { margin-bottom:8px; }
.mb-3 { margin-bottom:12px; }
.mb-4 { margin-bottom:16px; }
.flex { display:flex; }
.gap-1 { gap:4px; }
.gap-2 { gap:8px; }
.gap-3 { gap:12px; }
.gap-4 { gap:16px; }
.flex-wrap { flex-wrap:wrap; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }