/* === DESIGN SYSTEM === */
:root {
  --primary: #0a1628;
  --primary-light: #1a2d4d;
  --primary-dark: #050e1c;
  --primary-bg: #eef1f5;
  --amber: #d97706;
  --amber-light: #fef3c7;
  --amber-dark: #b45309;
  --success: #10b981;
  --success-light: #d1fae5;
  --success-dark: #059669;
  --warning: #d97706;
  --warning-light: #fef3c7;
  --warning-dark: #b45309;
  --danger: #dc2626;
  --danger-light: #fee2e2;
  --danger-dark: #b91c1c;
  --info: #0a1628;
  --info-light: #eef1f5;
  --secondary: #6b7280;
  --secondary-light: #f3f4f6;

  --dark: #0a1628;
  --dark-2: #0f1b33;
  --gray-900: #0a1628;
  --gray-800: #0f1b33;
  --gray-700: #1f2a44;
  --gray-600: #3d4a5c;
  --gray-500: #6b7280;
  --gray-400: #9ca3af;
  --gray-300: #d1d5db;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --gray-50: #f9fafb;
  --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;

  /* Glassmorphism surfaces */
  --glass-light: rgba(255,255,255,0.68);
  --glass-light-strong: rgba(255,255,255,0.82);
  --glass-border-light: rgba(255,255,255,0.6);
  --glass-dark: rgba(10,22,40,0.72);
  --glass-dark-strong: rgba(10,22,40,0.85);
  --glass-border-dark: rgba(255,255,255,0.09);
  --glass-blur: blur(20px) saturate(160%);
  --glass-blur-sm: blur(10px) saturate(140%);
  --gradient-brand: linear-gradient(135deg, var(--amber-dark) 0%, var(--amber) 55%, #fbbf24 100%);
  --gradient-dark: linear-gradient(160deg, #050e1c 0%, #0a1628 45%, #16294a 100%);
  --shadow-glass: 0 8px 32px rgba(10,22,40,0.10), inset 0 1px 0 rgba(255,255,255,0.5);
  --shadow-glass-dark: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}

*,*::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;
}

/* Ambient animated mesh behind the glass app shell (login page opts out via .login-body) */
body:not(.login-body) {
  background:
    radial-gradient(circle at 12% 8%, rgba(217,119,6,0.07) 0%, transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(10,22,40,0.05) 0%, transparent 38%),
    radial-gradient(circle at 30% 95%, rgba(217,119,6,0.05) 0%, transparent 45%),
    var(--gray-100);
}
body:not(.login-body)::before,
body:not(.login-body)::after {
  content:''; position:fixed; border-radius:50%; pointer-events:none;
  z-index:0; filter:blur(70px);
}
body:not(.login-body)::before {
  width:520px; height:520px; top:-160px; right:-120px;
  background:radial-gradient(circle, rgba(217,119,6,0.14) 0%, transparent 70%);
  animation: meshFloat 24s ease-in-out infinite alternate;
}
body:not(.login-body)::after {
  width:460px; height:460px; bottom:-140px; left:8%;
  background:radial-gradient(circle, rgba(10,22,40,0.10) 0%, transparent 70%);
  animation: meshFloat 28s ease-in-out infinite alternate-reverse;
}
@keyframes meshFloat {
  0% { transform:translate(0,0) scale(1); }
  100% { transform:translate(50px,35px) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.login-body)::before, body:not(.login-body)::after,
  .login-body::before, .login-body::after, .login-particle { animation:none !important; }
}

::-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, #050e1c 0%, #0a1628 30%, #0f1b33 60%, #050e1c 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(217,119,6,0.13) 0%, rgba(217,119,6,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(217,119,6,0.08) 0%, rgba(217,119,6,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(217,119,6,0.3); left:10%; animation-delay:0s; animation-duration:18s; }
.login-particle:nth-child(2) { width:4px; height:4px; background:rgba(10,22,40,0.3); left:25%; animation-delay:2s; animation-duration:22s; }
.login-particle:nth-child(3) { width:8px; height:8px; background:rgba(217,119,6,0.2); left:45%; animation-delay:4s; animation-duration:16s; }
.login-particle:nth-child(4) { width:3px; height:3px; background:rgba(217,119,6,0.3); left:60%; animation-delay:1s; animation-duration:24s; }
.login-particle:nth-child(5) { width:5px; height:5px; background:rgba(10,22,40,0.25); left:75%; animation-delay:3s; animation-duration:20s; }
.login-particle:nth-child(6) { width:7px; height:7px; background:rgba(217,119,6,0.2); left:88%; animation-delay:5s; animation-duration:19s; }
.login-particle:nth-child(7) { width:4px; height:4px; background:rgba(217,119,6,0.2); left:35%; animation-delay:7s; animation-duration:21s; }
.login-particle:nth-child(8) { width:6px; height:6px; background:rgba(10,22,40,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(217,119,6,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,119,6,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(217,119,6,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(--amber-dark), var(--amber), var(--primary));
  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(217,119,6,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(217,119,6,0.3), transparent, rgba(10,22,40,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(--amber-dark);
  box-shadow:0 0 0 4px rgba(217,119,6,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(--amber-dark); }

.input-focus-ring {
  position:absolute; bottom:-2px; left:50%; width:0; height:2px;
  background:var(--amber); 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(--amber-dark); 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; position:relative; z-index:1; }

.sidebar {
  width: var(--sidebar-width); background: var(--gradient-dark);
  background-color: var(--glass-dark);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  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 var(--glass-border-dark);
  box-shadow: var(--shadow-glass-dark);
}

.sidebar-brand {
  min-height: var(--topbar-height); display:flex; align-items:center;
  padding:10px 20px; gap:10px; border-bottom:1px solid rgba(255,255,255,0.06);
  flex-shrink:0; flex-wrap:wrap;
}
.sidebar-brand-icon {
  width:36px; height:36px;
  background: linear-gradient(135deg, var(--amber-dark), var(--amber));
  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:0.82rem; font-weight:700; letter-spacing:-0.2px; min-width:0; line-height:1.35; flex:1 1 auto; word-break:break-word; }

.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(--amber-dark), var(--primary));
  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(217,119,6,0.2); color:var(--amber); }
.sidebar-user-role.lawyer { background:rgba(16,185,129,0.2); color:var(--success); }

.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.08); color:white; backdrop-filter:blur(4px); }
.sidebar-link.active {
  background: rgba(217,119,6,0.16); color: var(--amber);
  box-shadow: 0 0 16px rgba(217,119,6,0.15), inset 0 0 0 1px rgba(217,119,6,0.12);
}
.sidebar-link.active::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:20px; background:var(--amber); border-radius:2px;
  box-shadow: 0 0 8px var(--amber);
}
.sidebar-link .link-badge {
  margin-left:auto; padding:1px 8px; border-radius:10px;
  font-size:0.65rem; font-weight:600; background:rgba(217,119,6,0.2); color:var(--amber);
}
.sidebar-link .link-badge-alert {
  background:var(--danger); color:#fff; animation:notifPulse 2s ease-in-out infinite;
}

.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:#fca5a5; background:rgba(239,68,68,0.1); }

/* === 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(--glass-light-strong);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border-light); 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(--amber-dark); }
.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: var(--gradient-dark);
  backdrop-filter: blur(2px);
  border: 1px solid var(--glass-border-dark);
  border-radius: var(--radius-lg); padding:32px 36px; margin-bottom:28px;
  display:flex; align-items:center; justify-content:space-between;
  position:relative; overflow:hidden;
  box-shadow: var(--shadow-glass-dark);
}
.welcome-banner::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.05) 45%, transparent 60%);
  animation: bannerSheen 6s ease-in-out infinite;
}
@keyframes bannerSheen {
  0%,100% { transform:translateX(-30%); }
  50% { transform:translateX(30%); }
}
.welcome-banner::before {
  content:''; position:absolute; width:500px; height:500px;
  background: radial-gradient(circle, rgba(217,119,6,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(--amber); }
.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(--amber-dark), var(--amber));
  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(--glass-light-strong);
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  border-radius:var(--radius-lg); padding:22px 24px;
  box-shadow:var(--shadow-glass); border:1px solid var(--glass-border-light);
  transition:var(--transition); position:relative; overflow:hidden;
  animation: cardIn 0.45s cubic-bezier(0.16,1,0.3,1) both;
}
.stats-grid .stat-card:nth-child(1) { animation-delay:0s; }
.stats-grid .stat-card:nth-child(2) { animation-delay:0.06s; }
.stats-grid .stat-card:nth-child(3) { animation-delay:0.12s; }
.stats-grid .stat-card:nth-child(4) { animation-delay:0.18s; }
.stats-grid .stat-card:nth-child(5) { animation-delay:0.24s; }
.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(217,119,6,0.06) 0%, transparent 70%);
  border-radius:50%;
}
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--glass-border-light); }
.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.primary { background:var(--primary-bg); color:var(--primary); }
.stat-icon.amber { background:var(--amber-light); color:var(--amber-dark); }
.stat-icon.green { background:var(--success-light); color:var(--success); }
.stat-icon.info { background:var(--info-light); color:var(--info); }
.stat-icon.danger { background:var(--danger-light); color:var(--danger); }
.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(--amber-dark); 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(--amber); 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(--amber-dark); }

.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(--glass-light-strong);
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  border:1px solid var(--glass-border-light); 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(--amber); color:var(--amber-dark); box-shadow:0 0 20px rgba(217,119,6,0.18), var(--shadow-md); transform:translateY(-1px); }
.quick-action-btn i { font-size:1.05rem; color:var(--amber-dark); }

/* === CARDS === */
.card {
  background:var(--glass-light-strong);
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-glass); border:1px solid var(--glass-border-light);
  margin-bottom:22px; overflow:hidden; transition:var(--transition);
  animation: cardIn 0.45s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes cardIn {
  from { opacity:0; transform:translateY(10px) scale(0.99); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
.page-content > .card:nth-of-type(1) { animation-delay:0s; }
.page-content > .card:nth-of-type(2) { animation-delay:0.05s; }
.page-content > .card:nth-of-type(3) { animation-delay:0.1s; }
.page-content > .card:nth-of-type(4) { animation-delay:0.15s; }
.card-header {
  padding:16px 24px; border-bottom:1px solid var(--gray-100);
  display:flex; align-items:center; justify-content:space-between;
  position:relative;
}
.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(--amber-dark); }
.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(--amber-dark);
  box-shadow:0 0 0 4px rgba(217,119,6,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(--amber-dark); }

.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(--amber-dark); }
.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;
  position:relative; overflow:hidden;
}
.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(--gradient-brand); color:white; box-shadow:0 2px 10px rgba(217,119,6,0.25); }
.btn-primary:hover { background:var(--gradient-brand); filter:brightness(1.08); box-shadow:0 4px 16px rgba(217,119,6,0.35); }
.btn::after {
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg); transition:left 0.5s ease;
}
.btn:hover::after { left:130%; }
.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(--primary-light); }
.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(--amber); color:var(--amber-dark); background:var(--amber-light); }
.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(--primary); }
.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 #fecaca; }
.alert-success { background:var(--success-light); color:var(--success-dark); border:1px solid #bbf7d0; }
.alert-warning { background:var(--warning-light); color:var(--warning-dark); border:1px solid #fde68a; }
.alert-info { background:var(--info-light); color:#0891b2; border:1px solid #a5f3fc; }

/* === 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(--glass-dark-strong); color:white;
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-radius:var(--radius); box-shadow:var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.08);
  font-size:0.83rem; display:flex; align-items:center; gap:10px;
  animation:toastIn 0.3s cubic-bezier(0.16,1,0.3,1); max-width:400px;
  border-left:4px solid var(--amber);
}
.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(--amber); background:var(--amber-light); }
.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(217,119,6,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(--amber-dark); }
.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; }

/* Finalized contracts drop the editing sidebar's tool cards, so give the
   document itself more presence — a slimmer info rail and a centered,
   page-like reading width instead of stretching edge to edge. */
.preview-layout-final { max-width:1180px; margin:0 auto; }
.preview-layout-final .preview-tools { width:260px; }
.preview-layout-final .preview-document { padding:52px; }
@media (max-width:900px) {
  .preview-layout-final .preview-tools { width:100%; }
}

.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(--amber); color:var(--amber-dark); background:var(--amber-light); }
.tool-btn i { font-size:1rem; }
.tool-btn span { white-space:nowrap; }

.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(--amber); background:var(--amber-light); color:var(--amber-dark); }

.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(--amber-dark); border-bottom-color:var(--amber); }
.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(--amber); background:var(--amber-light); color:var(--amber-dark); }

.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(10,22,40,0.5); display:none; align-items:center;
  justify-content:center; z-index:1000; backdrop-filter:blur(6px);
  animation:fadeIn 0.2s ease-out;
}
.modal-overlay.active { display:flex; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal-content {
  background:var(--glass-light-strong);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  border:1px solid var(--glass-border-light);
  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(--amber-dark); }
.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); }

/* === MODAL (header/body/footer variant) === */
.modal { display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; }
.modal.open { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:rgba(10,22,40,0.5); backdrop-filter:blur(6px); }
.modal .modal-content {
  position:relative; background:var(--glass-light-strong);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  border:1px solid var(--glass-border-light);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); width:100%; max-width:480px; margin:20px;
  animation:modalIn 0.25s cubic-bezier(0.16,1,0.3,1);
}
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--gray-200); }
.modal-header h3 { margin:0; font-size:1.05rem; display:flex; align-items:center; gap:8px; }
.modal-header h3 i { color:var(--amber-dark); }
.modal-body { padding:20px 24px; }
.modal-footer { display:flex; gap:10px; justify-content:flex-end; padding:16px 24px; border-top:1px solid var(--gray-200); }
@media (max-width:576px) {
  .modal .modal-content { margin:12px; }
  .modal-header { padding:14px 16px; }
  .modal-header h3 { font-size:0.95rem; }
  .modal-body { padding:16px; }
  .modal-footer { padding:14px 16px; flex-direction:column; }
  .modal-footer .btn { width:100%; justify-content:center; }
}

/* === LIST SEARCH/FILTER BAR === */
.list-toolbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:14px;
}
.list-search { position:relative; flex:1; min-width:220px; max-width:360px; }
.list-search i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--gray-400); font-size:0.85rem; }
.list-search input {
  width:100%; padding:9px 12px 9px 34px; border:2px solid var(--gray-200);
  border-radius:var(--radius); font-size:0.85rem; font-family:inherit;
  background:var(--white); transition:var(--transition);
}
.list-search input:focus { outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(217,119,6,0.1); }
.list-search .list-search-clear {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border:none; background:var(--gray-200); border-radius:50%;
  color:var(--gray-600); font-size:10px; cursor:pointer; display:none;
  align-items:center; justify-content:center;
}
.list-search.has-value .list-search-clear { display:flex; }
.list-filter-select {
  padding:9px 30px 9px 12px; border:2px solid var(--gray-200); border-radius:var(--radius);
  font-size:0.85rem; font-family:inherit; background:var(--white); cursor:pointer; transition:var(--transition);
}
.list-filter-select:focus { outline:none; border-color:var(--amber); }
.list-empty-filtered { display:none; text-align:center; padding:32px 16px; color:var(--gray-400); font-size:0.88rem; }
.list-empty-filtered.show { display:block; }

/* === APPROVAL CHAIN === */
.approval-chain-list { display:flex; flex-direction:column; gap:10px; }
.approval-chain-row {
  display:flex; align-items:flex-start; gap:10px; padding:8px 10px;
  border-radius:var(--radius-sm); background:var(--gray-50);
}
.approval-chain-icon {
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:11px;
  background:var(--gray-200); color:var(--gray-500);
}
.approval-chain-row-approved .approval-chain-icon { background:var(--success-light); color:var(--success-dark); }
.approval-chain-row-rejected .approval-chain-icon { background:var(--danger-light); color:var(--danger-dark); }
.approval-chain-row-pending .approval-chain-icon { background:var(--amber-light); color:var(--amber-dark); }

/* === EXPIRY BADGES === */
.badge-expiry-ok { background:var(--success-light); color:var(--success-dark); }
.badge-expiry-soon { background:var(--amber-light); color:var(--amber-dark); }
.badge-expiry-past { background:var(--danger-light); color:var(--danger-dark); }

/* === 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(--amber-dark); 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 var(--amber-dark);
  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: var(--amber-dark);
}

.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(10, 22, 40, 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 var(--amber-dark);
  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; }
}

/* === BREADCRUMBS (standalone, outside topbar) === */
.breadcrumbs {
  display:flex; align-items:center; gap:8px; font-size:0.78rem; color:var(--gray-400);
  margin-bottom:16px; flex-wrap:wrap;
}
.breadcrumbs a { color:var(--gray-500); text-decoration:none; transition:var(--transition); }
.breadcrumbs a:hover { color:var(--amber-dark); }
.breadcrumbs span { color:var(--gray-600); font-weight:500; }
.breadcrumbs i { font-size:10px; color:var(--gray-300); }
.breadcrumbs .current { color:var(--gray-700); font-weight:600; }

/* === 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 === */

/* Large tablets / small desktops (1400px down) */
@media (max-width:1400px) {
  .page-content { max-width:100%; padding:24px 28px; }
}

/* Medium screens (1200px down) */
@media (max-width:1200px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .preview-layout { flex-direction:column; }
  .preview-tools { width:100%; position:static; max-height:none; }
  .preview-document { padding:28px; }
}

/* Tablets (992px down) */
@media (max-width:992px) {
  .page-content { padding:20px 24px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .stat-card { padding:18px 20px; }
  .welcome-banner { padding:24px 28px; }
  .welcome-banner h1 { font-size:1.25rem; }
  .preview-document { padding:24px; }
  .fields-grid { grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); }
  .form-row { grid-template-columns:repeat(2,1fr); }
  .table th, .table td { padding:10px 12px; font-size:0.8rem; }
  .modal-content { padding:24px; margin:16px; }
}

/* Small tablets / large phones (768px down) */
@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; }
  .sidebar.collapsed { width:280px; }
  .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:inline; }
  .sidebar.collapsed .sidebar-link { justify-content:flex-start; padding:10px 14px; }
  .sidebar.collapsed .sidebar-link i { margin:0; }
  .sidebar.collapsed .sidebar-user { justify-content:flex-start; padding:16px 20px; }
  .main-content.expanded { margin-left:0; }
  .page-content { padding:16px 16px; }
  .topbar { padding:0 16px; height:56px; }
  .topbar-breadcrumbs { display:none; }
  .topbar-right { gap:6px; }
  .topbar-right .clock-widget { display:none; }
  .topbar-right .profile-widget { padding:4px; gap:0; }
  .topbar-right .profile-info { display:none; }
  .topbar-right .profile-widget .fa-chevron-down { display:none; }
  .stats-grid { grid-template-columns:1fr; gap:12px; }
  .stat-card { padding:16px 18px; }
  .welcome-banner { padding:20px 18px; flex-direction:column; text-align:center; gap:10px; }
  .welcome-banner h1 { font-size:1.1rem; justify-content:center; }
  .welcome-banner p { font-size:0.8rem; }
  .welcome-avatar { width:44px; height:44px; font-size:18px; }
  .quick-actions { flex-direction:column; }
  .quick-action-btn { width:100%; justify-content:center; }
  .section-header { flex-direction:column; align-items:flex-start; gap:8px; }
  .section-header h2 { font-size:0.95rem; }
  .card-header { padding:14px 16px; }
  .card-body { padding:16px; }
  .card-footer { padding:12px 16px; flex-direction:column; }
  .fields-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .table-container { margin:0 -16px; border-radius:0; border-left:none; border-right:none; }
  .table th, .table td { padding:8px 10px; font-size:0.75rem; }
  .table th { font-size:0.65rem; }
  .cell-actions .btn { padding:5px 8px; font-size:0.7rem; }
  .modal-content { padding:20px; margin:12px; max-width:100%; border-radius:var(--radius-lg); }
  .preview-document { padding:16px; min-height:auto; }
  .preview-tools .card-body { padding:12px; }
  .toast { max-width:calc(100vw - 32px); font-size:0.78rem; }
  .breadcrumbs { font-size:0.72rem; margin-bottom:12px; gap:6px; }
}

/* Phones (576px down) */
@media (max-width:576px) {
  .page-content { padding:12px 12px; }
  .topbar { padding:0 12px; height:52px; }
  .topbar-toggle { width:32px; height:32px; font-size:14px; }
  .stats-grid { gap:10px; }
  .stat-card { padding:14px 14px; }
  .stat-icon { width:40px; height:40px; font-size:16px; border-radius:10px; }
  .stat-info h3 { font-size:1.35rem; }
  .stat-info p { font-size:0.65rem; }
  .stat-link { font-size:0.72rem; margin-top:10px; padding-top:10px; }
  .welcome-banner { padding:16px 14px; border-radius:var(--radius); }
  .welcome-banner h1 { font-size:1rem; }
  .welcome-avatar { width:38px; height:38px; font-size:15px; border-radius:10px; }
  .quick-action-btn { padding:10px 14px; font-size:0.78rem; }
  .card { margin-bottom:14px; border-radius:var(--radius); }
  .card-header h2, .card-header h3 { font-size:0.82rem; }
  .card-body { padding:12px; }
  .table-container { margin:0 -12px; }
  .table th, .table td { padding:6px 8px; font-size:0.7rem; white-space:nowrap; }
  .btn { padding:7px 14px; font-size:0.78rem; }
  .btn-sm { padding:5px 8px; font-size:0.68rem; }
  .badge { font-size:0.6rem; padding:1px 6px; }
  .modal-content { padding:16px; border-radius:var(--radius); }
  .modal-content h2 { font-size:1rem; }
  .page-header { flex-direction:column; align-items:flex-start; gap:8px; }
  .page-header h1 { font-size:1.2rem; }
  .page-subtitle { font-size:0.78rem; }
  .form-actions { flex-direction:column; }
  .form-actions .btn { width:100%; justify-content:center; }
  .preview-document { padding:12px; }
  .doc-tab { padding:8px 12px; font-size:0.78rem; }
  .tool-btn { font-size:0.68rem; padding:8px 6px; }
  .tool-btn span { display:none; }
  .empty-state { padding:30px 14px; }
  .empty-state i { font-size:32px; }
  .empty-state h3 { font-size:0.9rem; }
}

/* === UTILITY === */
.text-muted { color:var(--gray-400); }
.text-primary { color:var(--amber-dark); }
.text-success { color:var(--success); }
.text-amber { color:var(--amber-dark); }
.text-danger { color:var(--danger); }
.text-info { color:var(--info); }
.text-warning { color:var(--warning-dark); }
.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; }

/* === PROGRESS BARS === */
.progress-bar-wrap {
  width:100%; height:6px; background:var(--gray-200); border-radius:3px;
  overflow:hidden; margin-top:10px;
}
.progress-bar-fill {
  height:100%; border-radius:3px; background: linear-gradient(90deg, var(--amber), var(--amber-dark));
  transition: width 1.2s cubic-bezier(0.4,0,0.2,1); width:0%;
  position:relative;
}
.progress-bar-fill::after {
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: progressShimmer 2s ease-in-out infinite;
}
@keyframes progressShimmer {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(100%); }
}
.progress-bar-fill.green { background: linear-gradient(90deg, var(--success-light), var(--success)); }
.progress-bar-fill.amber { background: linear-gradient(90deg, var(--amber-light), var(--amber-dark)); }
.progress-bar-fill.primary { background: linear-gradient(90deg, var(--primary-bg), var(--primary)); }
.progress-bar-fill.info { background: linear-gradient(90deg, #a5f3fc, #06b6d4); }
.progress-bar-fill.danger { background: linear-gradient(90deg, var(--danger-light), var(--danger)); }

/* === ACTIVITY TIMELINE === */
.activity-timeline {
  position:relative; padding:0; margin:0;
}
.activity-timeline::before {
  content:''; position:absolute; left:18px; top:8px; bottom:8px;
  width:2px; background: linear-gradient(to bottom, var(--amber), var(--amber-light), var(--gray-200));
  border-radius:1px;
}
.activity-item {
  display:flex; align-items:flex-start; gap:14px; padding:10px 0;
  position:relative; animation: activitySlide 0.5s ease-out forwards;
  opacity:0; transform:translateX(-10px);
}
.activity-item:nth-child(1) { animation-delay:0.1s; }
.activity-item:nth-child(2) { animation-delay:0.2s; }
.activity-item:nth-child(3) { animation-delay:0.3s; }
.activity-item:nth-child(4) { animation-delay:0.4s; }
.activity-item:nth-child(5) { animation-delay:0.5s; }
.activity-item:nth-child(6) { animation-delay:0.6s; }
@keyframes activitySlide {
  to { opacity:1; transform:translateX(0); }
}
.activity-dot {
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
  margin-top:5px; position:relative; z-index:1;
  border:2px solid var(--white); box-shadow:0 0 0 2px var(--amber);
}
.activity-dot.success { box-shadow:0 0 0 2px var(--success); }
.activity-dot.warning { box-shadow:0 0 0 2px var(--warning); }
.activity-dot.info { box-shadow:0 0 0 2px var(--info); }
.activity-dot.primary { box-shadow:0 0 0 2px var(--primary); }
.activity-content {
  flex:1; min-width:0;
}
.activity-title {
  font-size:0.85rem; font-weight:600; color:var(--gray-700);
}
.activity-desc {
  font-size:0.78rem; color:var(--gray-400); margin-top:2px;
}
.activity-time {
  font-size:0.7rem; color:var(--gray-400); white-space:nowrap;
  margin-top:1px;
}

/* === CSS BAR CHART === */
.chart-container {
  padding:8px 0;
}
.chart-bar-row {
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.chart-bar-label {
  width:90px; font-size:0.78rem; font-weight:600; color:var(--gray-600);
  flex-shrink:0; text-align:right;
}
.chart-bar-track {
  flex:1; height:28px; background:var(--gray-100); border-radius:6px;
  overflow:hidden; position:relative;
}
.chart-bar-fill {
  height:100%; border-radius:6px; transition: width 1.5s cubic-bezier(0.4,0,0.2,1);
  width:0%; display:flex; align-items:center; padding-left:12px;
  font-size:0.7rem; font-weight:700; color:white;
  position:relative; overflow:hidden;
}
.chart-bar-fill::after {
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: progressShimmer 2.5s ease-in-out infinite;
}
.chart-bar-fill.completed { background: linear-gradient(90deg, #059669, #10b981); }
.chart-bar-fill.draft { background: linear-gradient(90deg, #b45309, #d97706); }
.chart-bar-fill.pending { background: linear-gradient(90deg, #1e40af, #3b82f6); }
.chart-bar-count {
  width:36px; font-size:0.78rem; font-weight:700; color:var(--gray-600);
  flex-shrink:0; text-align:left;
}
.chart-legend {
  display:flex; gap:16px; margin-top:12px; flex-wrap:wrap;
}
.chart-legend-item {
  display:flex; align-items:center; gap:6px;
  font-size:0.75rem; color:var(--gray-500);
}
.chart-legend-dot {
  width:10px; height:10px; border-radius:3px;
}
.chart-legend-dot.completed { background:var(--success); }
.chart-legend-dot.draft { background:var(--amber); }
.chart-legend-dot.pending { background:#3b82f6; }

/* === HERO BANNER ENHANCEMENTS === */
.hero-banner {
  position:relative; overflow:hidden;
}
.hero-shapes {
  position:absolute; inset:0; pointer-events:none; z-index:0;
}
.hero-shape {
  position:absolute; border-radius:50%; opacity:0.08;
}
.hero-shape-1 {
  width:300px; height:300px; top:-100px; right:-50px;
  background: radial-gradient(circle, var(--amber), transparent);
  animation: heroFloat 8s ease-in-out infinite alternate;
}
.hero-shape-2 {
  width:200px; height:200px; bottom:-80px; left:-40px;
  background: radial-gradient(circle, var(--primary-light), transparent);
  animation: heroFloat 10s ease-in-out infinite alternate-reverse;
}
.hero-shape-3 {
  width:150px; height:150px; top:20px; left:40%;
  background: radial-gradient(circle, var(--amber), transparent);
  animation: heroFloat 12s ease-in-out infinite alternate;
  opacity:0.05;
}
.hero-shape-4 {
  width:80px; height:80px; bottom:30px; right:25%;
  border:2px solid rgba(217,119,6,0.15); border-radius:50%;
  animation: heroFloat 7s ease-in-out infinite alternate-reverse;
  opacity:0.1;
}
@keyframes heroFloat {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(20px,-15px) scale(1.1); }
}
.hero-grid-overlay {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* === CLOCK / CALENDAR WIDGET === */
.clock-widget {
  display:flex; align-items:center; gap:10px;
  padding:6px 14px; background:var(--gray-50);
  border-radius:var(--radius); border:1px solid var(--gray-200);
  font-size:0.78rem; color:var(--gray-600);
}
.clock-widget .clock-icon {
  color:var(--amber-dark); font-size:0.9rem;
}
.clock-widget .clock-date {
  font-weight:500; color:var(--gray-700);
}
.clock-widget .clock-time {
  font-weight:600; color:var(--amber-dark); font-family:monospace;
  font-size:0.85rem; letter-spacing:0.5px;
}
.clock-widget .clock-sep {
  color:var(--gray-300); font-size:0.7rem;
}

/* === PROFILE WIDGET === */
.profile-widget {
  display:flex; align-items:center; gap:10px;
  padding:4px 12px 4px 4px; background:var(--gray-50);
  border-radius:var(--radius); border:1px solid var(--gray-200);
  cursor:default; transition:var(--transition);
}
.profile-widget:hover { border-color:var(--amber); background:var(--amber-light); }
.profile-avatar {
  width:32px; height:32px; border-radius:8px;
  background: linear-gradient(135deg, var(--amber-dark), var(--amber));
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:white; flex-shrink:0;
  position:relative;
}
.profile-avatar .status-dot {
  position:absolute; bottom:-2px; right:-2px; width:10px; height:10px;
  border-radius:50%; background:var(--success);
  border:2px solid var(--white);
}
.profile-info {
  display:flex; flex-direction:column; line-height:1.3;
}
.profile-name {
  font-size:0.78rem; font-weight:600; color:var(--gray-700);
}
.profile-role {
  font-size:0.65rem; font-weight:600; color:var(--amber-dark);
  text-transform:uppercase; letter-spacing:0.3px;
}
.profile-widget { cursor:pointer; position:relative; }
.profile-widget .fa-chevron-down { font-size:0.65rem; color:var(--gray-400); margin-left:2px; transition:var(--transition); }
.profile-widget.open .fa-chevron-down { transform:rotate(180deg); }
.profile-dropdown {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:var(--glass-light-strong);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border:1px solid var(--glass-border-light); border-radius:var(--radius);
  box-shadow:var(--shadow-glass); padding:6px; z-index:200;
  display:none; opacity:0; transform:translateY(-6px);
  transition:opacity 0.15s ease-out, transform 0.15s ease-out;
}
.profile-widget.open .profile-dropdown { display:block; opacity:1; transform:translateY(0); }
.profile-dropdown-item {
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:var(--radius-sm); font-size:0.85rem; font-weight:500;
  color:var(--gray-700); text-decoration:none; transition:var(--transition);
}
.profile-dropdown-item i { width:16px; color:var(--gray-400); }
.profile-dropdown-item:hover { background:var(--amber-light); color:var(--amber-dark); }
.profile-dropdown-item:hover i { color:var(--amber-dark); }
.profile-dropdown-item.danger:hover { background:var(--danger-light); color:var(--danger); }
.profile-dropdown-item.danger:hover i { color:var(--danger); }
.profile-dropdown-divider { height:1px; background:var(--gray-100); margin:6px 4px; }

/* === NOTIFICATION BELL === */
.notif-widget { position:relative; cursor:pointer; }
.notif-bell {
  width:38px; height:38px; border-radius:var(--radius); position:relative;
  display:flex; align-items:center; justify-content:center;
  background:var(--gray-50); border:1px solid var(--gray-200);
  color:var(--gray-600); font-size:16px; transition:var(--transition);
}
.notif-widget:hover .notif-bell { border-color:var(--amber); background:var(--amber-light); color:var(--amber-dark); }
.notif-widget.open .notif-bell { border-color:var(--amber); color:var(--amber-dark); }
.notif-count {
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px;
  background:var(--danger); color:#fff; border-radius:10px;
  font-size:0.62rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--white); animation:notifPulse 2s ease-in-out infinite;
}
@keyframes notifPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.12); } }
.notif-dropdown {
  position:absolute; top:calc(100% + 8px); right:0; width:340px; max-width:90vw;
  background:var(--glass-light-strong);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border:1px solid var(--glass-border-light); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-glass); z-index:200; overflow:hidden;
  display:none; opacity:0; transform:translateY(-6px);
  transition:opacity 0.15s ease-out, transform 0.15s ease-out;
}
.notif-widget.open .notif-dropdown { display:block; opacity:1; transform:translateY(0); }
.notif-dropdown-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--gray-100);
  font-size:0.85rem; font-weight:700; color:var(--dark);
}
.notif-mark-all {
  background:none; border:none; color:var(--amber-dark); font-size:0.72rem;
  font-weight:600; cursor:pointer; padding:2px 4px;
}
.notif-mark-all:hover { text-decoration:underline; }
.notif-dropdown-list { max-height:360px; overflow-y:auto; }
.notif-empty {
  padding:32px 16px; text-align:center; color:var(--gray-400); font-size:0.82rem;
}
.notif-empty i { display:block; font-size:1.6rem; margin-bottom:8px; }
.notif-item {
  display:flex; gap:10px; padding:11px 16px; text-decoration:none;
  border-bottom:1px solid var(--gray-100); transition:var(--transition);
}
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:var(--amber-light); }
.notif-item.unread { background:rgba(217,119,6,0.06); }
.notif-item-icon {
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:var(--amber-light); color:var(--amber-dark);
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.notif-item-body { min-width:0; flex:1; }
.notif-item-title { font-size:0.8rem; font-weight:600; color:var(--gray-700); }
.notif-item-msg { font-size:0.74rem; color:var(--gray-500); margin-top:2px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; }
.notif-item-time { font-size:0.68rem; color:var(--gray-400); margin-top:3px; }
@media (max-width:480px) {
  .notif-dropdown { position:fixed; top:60px; right:8px; left:8px; width:auto; }
}

/* === CONTRACT FLOW STEPPER === */
.contract-stepper {
  display:flex; align-items:center; gap:0;
  background:var(--white); border:1px solid var(--gray-200);
  border-radius:var(--radius-lg); padding:18px 28px; margin-bottom:20px;
}
.stepper-step {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:inherit; flex-shrink:0;
}
.stepper-circle {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0.82rem; font-weight:700;
  background:var(--gray-100); color:var(--gray-400);
  border:2px solid var(--gray-200); transition:var(--transition);
}
.stepper-label {
  font-size:0.85rem; font-weight:600; color:var(--gray-400);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.stepper-step.stepper-done .stepper-circle { background:var(--success); border-color:var(--success); color:#fff; }
.stepper-step.stepper-done .stepper-label { color:var(--gray-600); }
.stepper-step.stepper-active .stepper-circle { background:var(--amber); border-color:var(--amber); color:#fff; box-shadow:0 0 0 4px rgba(245,158,11,0.15); }
.stepper-step.stepper-active .stepper-label { color:var(--amber-dark); }
a.stepper-step.stepper-done:hover .stepper-circle { transform:scale(1.08); }
a.stepper-step.stepper-done:hover .stepper-label { text-decoration:underline; }
.stepper-line {
  flex:1; height:2px; background:var(--gray-200); margin:0 12px; min-width:24px;
}
.stepper-line.stepper-line-done { background:var(--success); }
@media (max-width:768px) {
  .contract-stepper { padding:14px 16px; overflow-x:auto; }
  .stepper-label { font-size:0.76rem; }
  .stepper-line { min-width:14px; margin:0 6px; }
}

.flow-banner {
  display:flex; align-items:flex-start; gap:14px;
  background:linear-gradient(135deg, var(--amber-light), #fff);
  border:1px solid var(--amber); border-radius:var(--radius-lg);
  padding:16px 20px; margin-bottom:20px;
}
.flow-banner i.flow-banner-icon { font-size:1.4rem; color:var(--amber-dark); margin-top:2px; }
.flow-banner strong { color:var(--gray-800); }
.flow-banner p { margin:2px 0 0; font-size:0.86rem; color:var(--gray-600); }
.flow-banner-close {
  margin-left:auto; background:none; border:none; color:var(--gray-400);
  cursor:pointer; font-size:0.9rem; padding:4px;
}
.flow-banner-close:hover { color:var(--gray-600); }

/* Next-step choice modal */
.next-step-options { display:flex; flex-direction:column; gap:10px; }
.next-step-option {
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  border:2px solid var(--gray-200); border-radius:var(--radius); cursor:pointer;
  background:var(--white); transition:var(--transition); text-align:left;
}
.next-step-option:hover { border-color:var(--amber); background:var(--amber-light); }
.next-step-option-icon {
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  background:var(--amber-light); color:var(--amber-dark);
}
.next-step-option-text { flex:1; }
.next-step-option-text strong { display:block; font-size:0.9rem; color:var(--gray-800); }
.next-step-option-text span { font-size:0.78rem; color:var(--gray-500); }
.next-step-option i.chev { color:var(--gray-300); }

/* === CTA PULSE BUTTON === */
.btn-pulse {
  position:relative;
}
.btn-pulse::before {
  content:''; position:absolute; inset:-3px;
  border-radius:calc(var(--radius) + 3px);
  background: linear-gradient(135deg, var(--amber), var(--amber-dark), var(--amber));
  background-size:200% 200%;
  animation: pulseBorder 2s ease-in-out infinite;
  z-index:-1;
  opacity:0.5;
}
@keyframes pulseBorder {
  0%,100% { opacity:0.4; transform:scale(1); }
  50% { opacity:0.8; transform:scale(1.04); }
}

/* === HOVER ANIMATION ENHANCEMENTS === */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
}
.hover-glow {
  transition: box-shadow 0.2s ease;
}
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(217,119,6,0.2);
}
.icon-bounce {
  transition: transform 0.15s ease;
}
.icon-bounce:hover i {
  animation: iconBounce 0.4s ease;
}
@keyframes iconBounce {
  0%,100% { transform:translateY(0); }
  40% { transform:translateY(-4px); }
  60% { transform:translateY(-2px); }
}

/* === EMPTY STATE ILLUSTRATION === */
.empty-state-illustration {
  width:120px; height:120px; margin:0 auto 16px;
  position:relative;
}
.empty-state-illustration svg {
  width:100%; height:100%;
}
.empty-state-illustration .illustration-circle {
  fill: var(--amber-light);
  animation: illustPulse 3s ease-in-out infinite;
}
.empty-state-illustration .illustration-doc {
  fill: none; stroke: var(--amber-dark); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.empty-state-illustration .illustration-plus {
  fill: var(--amber-dark);
}
@keyframes illustPulse {
  0%,100% { opacity:0.6; transform:scale(1); }
  50% { opacity:1; transform:scale(1.05); }
}

/* === STAT CARD HOVER ENHANCEMENT === */
.stat-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.stat-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--amber);
}
.stat-card:hover .stat-icon {
  transform:scale(1.1) rotate(-3deg);
}
.stat-icon {
  transition: transform 0.25s ease;
}

/* === DASHBOARD SECTION ENHANCEMENTS === */
.section-header h2 i {
  transition: transform 0.3s ease;
}
.section-header:hover h2 i {
  transform:rotate(15deg) scale(1.1);
}

/* === QUICK ACTION BUTTON ENHANCEMENTS === */
.quick-action-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.quick-action-btn:hover {
  transform:translateY(-2px) scale(1.02);
  box-shadow:var(--shadow-md);
}
.quick-action-btn i {
  transition: transform 0.2s ease;
}
.quick-action-btn:hover i {
  transform:scale(1.15);
}