/* ═══════════════════════════════════════════════════════════
   DigitalMall Contracts v2 — Design System
   Brand Colors from digitalmall.gr
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&display=swap');

/* ── CSS Custom Properties ── */
:root {
  --dm-orange: #F68720;
  --dm-orange-hover: #E5761A;
  --dm-orange-light: #F6982040;
  --dm-orange-glow: #F6872060;
  --dm-dark: #303031;
  --dm-dark-deep: #262626;
  --dm-dark-surface: #3b3b3c;
  --dm-dark-card: #383839;
  --dm-dark-border: #4a4a4b;
  --dm-dark-hover: #454546;
  --text-primary: #FFFFFF;
  --text-secondary: #B0B0B1;
  --text-muted: #808082;
  --text-orange: #F68720;
  --status-pending: #FFB020;
  --status-pending-bg: #FFB02015;
  --status-complete: #22C55E;
  --status-complete-bg: #22C55E15;
  --status-draft: #6B7280;
  --status-draft-bg: #6B728015;
  --status-expired: #EF4444;
  --status-expired-bg: #EF444415;
  --stamp-red: #C0392B;
  --stamp-red-light: #E74C3C;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 30px var(--dm-orange-glow);
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

body {
  font-family: var(--font-family);
  background-color: var(--dm-dark);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Background gradient removed for performance — use a subtle solid overlay via box-shadow on .app-main instead */

a { color: var(--dm-orange); text-decoration:none; }
a:hover { color: var(--dm-orange-hover); }

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background: var(--dm-dark-deep); }
::-webkit-scrollbar-thumb { background: var(--dm-dark-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--dm-orange); }

/* ══════ HEADER ══════ */
.app-header {
  position:fixed; top:0; left:0; width:100%; height:72px;
  background: var(--dm-dark-deep);
  border-bottom: 1px solid var(--dm-dark-border);
  display:flex; align-items:center;
  padding: 0 var(--space-xl);
  z-index:1000;
}

.header-logo {
  display:flex; align-items:center; gap: var(--space-md);
  cursor:pointer; transition: opacity var(--transition-fast);
}
.header-logo:hover { opacity:0.85; }
.header-logo svg { height:36px; width:auto; }
.header-logo-text { font-size: var(--font-size-xl); font-weight:700; color: var(--text-primary); letter-spacing:0.5px; }
.header-logo-text span { color: var(--dm-orange); }
.header-badge {
  background: var(--dm-orange); color:white; font-size: var(--font-size-xs);
  font-weight:700; padding:2px 10px; border-radius: var(--radius-full);
  text-transform:uppercase; letter-spacing:1px; margin-left: var(--space-sm);
}

.header-nav { display:flex; align-items:center; gap: var(--space-xs); margin-left:auto; }

.nav-btn {
  display:flex; align-items:center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border:none; background:transparent;
  color: var(--text-secondary); font-family: var(--font-family);
  font-size: var(--font-size-sm); font-weight:600;
  border-radius: var(--radius-md); cursor:pointer;
  transition: background var(--transition-fast), color var(--transition-fast); white-space:nowrap;
}
.nav-btn:hover { background: var(--dm-dark-surface); color: var(--text-primary); }
.nav-btn.active { background: var(--dm-orange); color:white; }
.nav-btn svg { width:18px; height:18px; flex-shrink:0; }
.nav-btn .badge-count {
  background: var(--dm-orange); color:white; font-size:10px; font-weight:800;
  min-width:18px; height:18px; border-radius: var(--radius-full);
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.nav-btn.active .badge-count { background:white; color: var(--dm-orange); }

/* ══════ MAIN LAYOUT ══════ */
.app-main { margin-top:72px; min-height:calc(100vh - 72px); position:relative; z-index:1; }
.view-container {
  max-width:1200px; margin:0 auto; padding: var(--space-xl);
  animation: fadeSlideIn 0.25s ease;
}
@keyframes fadeSlideIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ══════ PAGE HEADERS ══════ */
.page-header { margin-bottom: var(--space-xl); }
.page-header h1 {
  font-size: var(--font-size-3xl); font-weight:800; margin-bottom: var(--space-xs);
  background: linear-gradient(135deg, var(--text-primary), var(--dm-orange));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.page-header p { color: var(--text-secondary); font-size: var(--font-size-base); }

/* ══════ GLASS CARDS ══════ */
.glass-card {
  background: rgba(50,50,51,0.85);
  border: 1px solid var(--dm-dark-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  transition: border-color var(--transition-fast);
}
.glass-card:hover { border-color: var(--dm-orange-light); box-shadow: var(--shadow-md); }
.glass-card-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: var(--space-lg); padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--dm-dark-border);
}
.glass-card-header h2 { font-size: var(--font-size-xl); font-weight:700; display:flex; align-items:center; gap: var(--space-sm); }
.glass-card-header h2 svg { color: var(--dm-orange); width:22px; height:22px; }

/* ══════ FORM ELEMENTS ══════ */
.form-group { margin-bottom: var(--space-lg); }
.form-label {
  display:block; font-size: var(--font-size-sm); font-weight:600;
  color: var(--text-secondary); margin-bottom: var(--space-sm);
  text-transform:uppercase; letter-spacing:0.5px;
}
.form-input, .form-textarea, .form-select {
  width:100%; padding: var(--space-md);
  background: var(--dm-dark-deep); border: 1px solid var(--dm-dark-border);
  border-radius: var(--radius-md); color: var(--text-primary);
  font-family: var(--font-family); font-size: var(--font-size-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast); outline:none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--dm-orange); box-shadow: 0 0 0 3px var(--dm-orange-light);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); }
.form-textarea { min-height:200px; resize:vertical; line-height:1.8; }
.form-select { appearance:none; cursor:pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808082' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  padding-right:40px;
}
.form-select option { background: var(--dm-dark-deep); color: var(--text-primary); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap: var(--space-md); }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap: var(--space-md); }
.form-row-4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap: var(--space-md); }

@media (max-width:768px) {
  .form-row, .form-row-3, .form-row-4 { grid-template-columns:1fr; }
}

/* ── Collapsible Section ── */
.form-section {
  border: 1px solid var(--dm-dark-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  overflow:hidden;
}
.form-section-header {
  display:flex; align-items:center; gap: var(--space-sm);
  padding: var(--space-md); background: var(--dm-dark-surface);
  cursor:pointer; font-weight:600; font-size: var(--font-size-sm);
  color: var(--text-secondary); transition: color var(--transition-fast), background var(--transition-fast);
  user-select:none;
}
.form-section-header:hover { color: var(--text-primary); background: var(--dm-dark-hover); }
.form-section-header svg { width:16px; height:16px; color: var(--dm-orange); }
.form-section-header .chevron {
  margin-left:auto; transition: transform var(--transition-fast);
  width:16px; height:16px;
}
.form-section-header.open .chevron { transform:rotate(180deg); }
.form-section-body { padding: var(--space-md); display:none; }
.form-section-body.open { display:block; }

/* ══════ BUTTONS ══════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap: var(--space-sm); padding: var(--space-md) var(--space-lg);
  border:none; border-radius: var(--radius-md);
  font-family: var(--font-family); font-size: var(--font-size-sm); font-weight:700;
  cursor:pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  text-transform:uppercase; letter-spacing:0.5px;
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; top:50%; left:50%;
  width:0; height:0; border-radius:50%;
  background:rgba(255,255,255,0.2);
  transition: width 0.4s ease, height 0.4s ease;
  transform:translate(-50%,-50%);
}
.btn:active::after { width:300px; height:300px; }
.btn svg { width:18px; height:18px; flex-shrink:0; }
.btn-primary {
  background: linear-gradient(135deg, var(--dm-orange), var(--dm-orange-hover));
  color:white; box-shadow: 0 4px 15px var(--dm-orange-glow);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow: 0 6px 25px var(--dm-orange-glow); }
.btn-secondary {
  background: var(--dm-dark-surface); color: var(--text-primary);
  border: 1px solid var(--dm-dark-border);
}
.btn-secondary:hover { background: var(--dm-dark-hover); border-color: var(--dm-orange); }
.btn-danger { background:rgba(239,68,68,0.15); color:#EF4444; border:1px solid rgba(239,68,68,0.3); }
.btn-danger:hover { background:rgba(239,68,68,0.25); }
.btn-ghost { background:transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--dm-dark-surface); color: var(--text-primary); }
.btn-success { background:rgba(34,197,94,0.15); color: var(--status-complete); border:1px solid rgba(34,197,94,0.3); }
.btn-success:hover { background:rgba(34,197,94,0.25); }
.btn-lg { padding: var(--space-md) var(--space-xl); font-size: var(--font-size-base); border-radius: var(--radius-lg); }
.btn-sm { padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-xs); }
.btn-full { width:100%; }
.btn-group { display:flex; gap: var(--space-md); flex-wrap:wrap; }

/* ══════ CONTRACT DOCUMENT PREVIEW ══════ */
.contract-document {
  background: #FAFAFA; color: #1a1a1a;
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  max-width:800px; margin: 0 auto var(--space-xl);
  box-shadow: var(--shadow-lg); position:relative;
  font-family: 'Open Sans', serif; line-height:1.9;
  border: 1px solid #e5e5e5;
}
.contract-document::before {
  content:''; position:absolute; top:0; left:40px; right:40px; height:4px;
  background: linear-gradient(90deg, var(--dm-orange), var(--dm-orange-hover));
  border-radius:0 0 4px 4px;
}
.contract-logo-area {
  text-align:center; margin-bottom: var(--space-lg);
}
.contract-logo-area img {
  max-height:60px; max-width:200px; object-fit:contain;
}
.contract-number {
  text-align:right; font-size: var(--font-size-xs); color:#999;
  font-weight:600; letter-spacing:1px; margin-bottom: var(--space-sm);
}
.contract-header { text-align:center; margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom:2px solid #e5e5e5; }
.contract-header h2 { font-size: var(--font-size-2xl); font-weight:800; color:#1a1a1a; text-transform:uppercase; letter-spacing:2px; }
.contract-date { font-size: var(--font-size-sm); color:#666; margin-top: var(--space-sm); }
.contract-place { font-size: var(--font-size-sm); color:#666; }
.contract-expiry { font-size: var(--font-size-xs); color: var(--stamp-red); margin-top: var(--space-xs); font-weight:600; }

.contract-parties { display:grid; grid-template-columns:1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom:1px solid #e5e5e5; }
.contract-party { padding: var(--space-md); background:#f0f0f0; border-radius: var(--radius-md); border-left:3px solid var(--dm-orange); }
.contract-party-label { font-size: var(--font-size-xs); font-weight:700; color: var(--dm-orange); text-transform:uppercase; letter-spacing:1px; margin-bottom: var(--space-xs); }
.contract-party-name { font-size: var(--font-size-lg); font-weight:700; color:#1a1a1a; margin-bottom: var(--space-xs); }
.contract-party-detail { font-size: var(--font-size-xs); color:#666; line-height:1.6; }
.contract-party-detail strong { color:#444; }

.contract-body { white-space:pre-wrap; font-size: var(--font-size-base); line-height:2; color:#333; min-height:100px; }

/* ── Category tag ── */
.contract-category-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 10px; border-radius: var(--radius-full);
  font-size: var(--font-size-xs); font-weight:700;
  background: var(--dm-orange-light); color: var(--dm-orange);
  border:1px solid rgba(246,135,32,0.3);
}

/* ── Signatures ── */
.signatures-area { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top:2px solid #e5e5e5; }
.signatures-grid { display:grid; grid-template-columns:1fr 1fr; gap: var(--space-2xl); margin-top: var(--space-lg); }
.signature-block { text-align:center; }
.signature-block-label { font-size: var(--font-size-xs); font-weight:700; color: var(--dm-orange); text-transform:uppercase; letter-spacing:1px; margin-bottom: var(--space-sm); }
.signature-pad-container {
  position:relative; width:100%; height:150px;
  background:#fff; border:2px dashed #ccc;
  border-radius: var(--radius-md); cursor:crosshair;
  transition: border-color var(--transition-fast); overflow:hidden;
}
.signature-pad-container:hover { border-color: var(--dm-orange); }
.signature-pad-container.signed { border-style:solid; border-color: var(--status-complete); }
.signature-pad-container.disabled { cursor:not-allowed; opacity:0.6; }
.signature-canvas { width:100%; height:100%; display:block; }
.signature-placeholder {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:#bbb; font-size: var(--font-size-sm); pointer-events:none; text-align:center;
}
.signature-placeholder svg { display:block; margin:0 auto var(--space-xs); width:24px; height:24px; }
.signature-name { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top:1px solid #ddd; font-size: var(--font-size-sm); color:#666; font-weight:600; }
.signature-actions { margin-top: var(--space-xs); }
.signature-actions button {
  background:none; border:none; color: var(--stamp-red);
  font-size: var(--font-size-xs); cursor:pointer;
  font-family: var(--font-family); font-weight:600;
  padding:2px 8px; border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.signature-actions button:hover { background:rgba(192,57,43,0.1); }

/* ── Stamp ── */
.stamp-area { display:flex; justify-content:center; margin-top: var(--space-xl); }
.stamp {
  width:140px; height:140px;
  border:4px solid var(--stamp-red); border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  transform:rotate(-15deg); opacity:0.85;
  position:relative; padding: var(--space-md);
  animation: stampAppear 0.5s ease;
}
.stamp::before { content:''; position:absolute; inset:4px; border:2px solid var(--stamp-red); border-radius:50%; }
.stamp-text { font-size:11px; font-weight:800; color: var(--stamp-red); text-transform:uppercase; letter-spacing:1px; line-height:1.3; }
.stamp-date { font-size:9px; color: var(--stamp-red-light); margin-top:2px; }
@keyframes stampAppear { 0%{transform:rotate(-15deg) scale(2);opacity:0} 60%{transform:rotate(-15deg) scale(0.9);opacity:1} 100%{transform:rotate(-15deg) scale(1);opacity:0.85} }

/* ══════ CREATE FORM LAYOUT ══════ */
.create-layout { display:grid; grid-template-columns:1fr 1fr; gap: var(--space-xl); align-items:start; }
@media(max-width:1024px){ .create-layout{ grid-template-columns:1fr; } }
.editor-panel { position:sticky; top:96px; }
.preview-panel .contract-document { margin:0; }

/* ══════ TEMPLATES GRID ══════ */
.templates-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); }
.template-card {
  background: var(--dm-dark-surface); border:1px solid var(--dm-dark-border);
  border-radius: var(--radius-md); padding: var(--space-md);
  cursor:pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); text-align:center;
}
.template-card:hover { border-color: var(--dm-orange); transform:translateY(-2px); box-shadow: var(--shadow-md); }
.template-card.selected { border-color: var(--dm-orange); background: var(--dm-orange-light); }
.template-card-icon { font-size:28px; margin-bottom: var(--space-sm); }
.template-card-name { font-size: var(--font-size-sm); font-weight:700; color: var(--text-primary); }
.template-card-desc { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: var(--space-xs); }

/* ══════ LIBRARY ══════ */
.library-toolbar { display:flex; align-items:center; gap: var(--space-md); margin-bottom: var(--space-xl); flex-wrap:wrap; }
.search-input-wrapper { position:relative; flex:1; min-width:200px; }
.search-input-wrapper svg { position:absolute; left: var(--space-md); top:50%; transform:translateY(-50%); width:18px; height:18px; color: var(--text-muted); }
.search-input {
  width:100%; padding: var(--space-md) var(--space-md) var(--space-md) 44px;
  background: var(--dm-dark-deep); border:1px solid var(--dm-dark-border);
  border-radius: var(--radius-md); color: var(--text-primary);
  font-family: var(--font-family); font-size: var(--font-size-sm); outline:none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-input:focus { border-color: var(--dm-orange); box-shadow: 0 0 0 3px var(--dm-orange-light); }
.filter-btn {
  padding: var(--space-sm) var(--space-md);
  background: var(--dm-dark-surface); border:1px solid var(--dm-dark-border);
  border-radius: var(--radius-full); color: var(--text-secondary);
  font-family: var(--font-family); font-size: var(--font-size-xs); font-weight:600;
  cursor:pointer; transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
  text-transform:uppercase; letter-spacing:0.5px;
}
.filter-btn:hover { border-color: var(--dm-orange); color: var(--dm-orange); }
.filter-btn.active { background: var(--dm-orange); border-color: var(--dm-orange); color:white; }

.contracts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap: var(--space-lg); }
@media(max-width:480px){ .contracts-grid{ grid-template-columns:1fr; } }

.contract-card {
  background: rgba(50,50,51,0.7);
  border:1px solid var(--dm-dark-border); border-radius: var(--radius-xl);
  padding: var(--space-lg); cursor:pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  position:relative; overflow:hidden;
  will-change: transform;
}
.contract-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--dm-orange), transparent);
  opacity:0; transition: opacity var(--transition-base);
}
.contract-card:hover { border-color: var(--dm-orange); transform:translateY(-4px); box-shadow: var(--shadow-lg); }
.contract-card:hover::before { opacity:1; }
.contract-card-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom: var(--space-sm); }
.contract-card-title { font-size: var(--font-size-lg); font-weight:700; color: var(--text-primary); line-height:1.3; flex:1; margin-right: var(--space-sm); }
.contract-card-number { font-size: var(--font-size-xs); color: var(--text-muted); font-weight:600; margin-bottom: var(--space-sm); letter-spacing:0.5px; }

.status-badge {
  display:inline-flex; align-items:center; gap: var(--space-xs);
  padding:3px 10px; border-radius: var(--radius-full);
  font-size: var(--font-size-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:0.5px; flex-shrink:0;
}
.status-badge.pending { background: var(--status-pending-bg); color: var(--status-pending); border:1px solid rgba(255,176,32,0.2); }
.status-badge.complete { background: var(--status-complete-bg); color: var(--status-complete); border:1px solid rgba(34,197,94,0.2); }
.status-badge.draft { background: var(--status-draft-bg); color: var(--status-draft); border:1px solid rgba(107,114,128,0.2); }
.status-badge.expired { background: var(--status-expired-bg); color: var(--status-expired); border:1px solid rgba(239,68,68,0.2); }
.status-badge-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }

.contract-card-meta { display:flex; align-items:center; gap: var(--space-md); flex-wrap:wrap; margin-bottom: var(--space-sm); }
.contract-card-parties { display:flex; align-items:center; gap: var(--space-sm); color: var(--text-secondary); font-size: var(--font-size-sm); }
.contract-card-parties svg { width:16px; height:16px; color: var(--dm-orange); flex-shrink:0; }
.contract-card-excerpt {
  color: var(--text-muted); font-size: var(--font-size-sm); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin-bottom: var(--space-md);
}
.contract-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top: var(--space-md); border-top:1px solid var(--dm-dark-border);
}
.contract-card-date { font-size: var(--font-size-xs); color: var(--text-muted); display:flex; align-items:center; gap: var(--space-xs); }
.contract-card-actions { display:flex; gap: var(--space-xs); }
.card-action-btn {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:none; background: var(--dm-dark-surface); color: var(--text-secondary);
  border-radius: var(--radius-sm); cursor:pointer; transition: background-color var(--transition-fast), color var(--transition-fast);
}
.card-action-btn:hover { background: var(--dm-orange); color:white; }
.card-action-btn svg { width:16px; height:16px; }

/* ── Empty State ── */
.empty-state { text-align:center; padding: var(--space-3xl) var(--space-xl); color: var(--text-muted); }
.empty-state-icon {
  width:80px; height:80px; margin:0 auto var(--space-lg);
  background: var(--dm-dark-surface); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color: var(--dm-orange);
}
.empty-state-icon svg { width:36px; height:36px; }
.empty-state h3 { font-size: var(--font-size-xl); color: var(--text-secondary); margin-bottom: var(--space-sm); }
.empty-state p { font-size: var(--font-size-sm); margin-bottom: var(--space-lg); }

/* ══════ REMINDERS BANNER ══════ */
.reminders-banner {
  background: linear-gradient(135deg, rgba(255,176,32,0.1), rgba(239,68,68,0.1));
  border: 1px solid rgba(255,176,32,0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
  animation: fadeSlideIn 0.5s ease;
}
.reminders-banner-title {
  font-size: var(--font-size-sm); font-weight:700;
  color: var(--status-pending); margin-bottom: var(--space-sm);
  display:flex; align-items:center; gap: var(--space-sm);
}
.reminders-banner-title svg { width:18px; height:18px; }
.reminder-item {
  display:flex; align-items:center; gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: var(--font-size-sm);
}
.reminder-item:last-child { border-bottom:none; }
.reminder-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.reminder-dot.pending { background: var(--status-pending); }
.reminder-dot.expiring { background: var(--status-expired); }
.reminder-text { flex:1; color: var(--text-secondary); }
.reminder-action { color: var(--dm-orange); font-weight:600; cursor:pointer; font-size: var(--font-size-xs); text-transform:uppercase; }
.reminder-action:hover { text-decoration:underline; }

/* ══════ SIGN VIEW ══════ */
.sign-view { max-width:800px; margin:0 auto; }
.sign-banner {
  background: linear-gradient(135deg, var(--dm-orange), var(--dm-orange-hover));
  border-radius: var(--radius-xl); padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-xl); display:flex; align-items:center;
  gap: var(--space-md); color:white;
}
.sign-banner svg { width:32px; height:32px; flex-shrink:0; }
.sign-banner h2 { font-size: var(--font-size-xl); font-weight:700; }
.sign-banner p { font-size: var(--font-size-sm); opacity:0.9; }

/* ══════ VERSION HISTORY ══════ */
.version-timeline { position:relative; padding-left: var(--space-xl); }
.version-timeline::before {
  content:''; position:absolute; left:8px; top:0; bottom:0;
  width:2px; background: var(--dm-dark-border);
}
.version-item {
  position:relative; margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--dm-dark-surface); border-radius: var(--radius-sm);
}
.version-item::before {
  content:''; position:absolute; left:-20px; top:12px;
  width:10px; height:10px; border-radius:50%;
  background: var(--dm-orange); border:2px solid var(--dm-dark);
}
.version-date { font-size: var(--font-size-xs); color: var(--text-muted); }
.version-text { font-size: var(--font-size-sm); color: var(--text-secondary); }

/* ══════ NOTES SECTION ══════ */
.notes-section { margin-top: var(--space-xl); }
.notes-textarea {
  width:100%; min-height:80px; padding: var(--space-md);
  background: var(--dm-dark-deep); border:1px solid var(--dm-dark-border);
  border-radius: var(--radius-md); color: var(--text-primary);
  font-family: var(--font-family); font-size: var(--font-size-sm);
  resize:vertical; outline:none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.notes-textarea:focus { border-color: var(--dm-orange); box-shadow: 0 0 0 3px var(--dm-orange-light); }

/* ══════ LOGO UPLOAD ══════ */
.logo-upload-area {
  border:2px dashed var(--dm-dark-border); border-radius: var(--radius-md);
  padding: var(--space-lg); text-align:center; cursor:pointer;
  transition: border-color var(--transition-fast); position:relative;
}
.logo-upload-area:hover { border-color: var(--dm-orange); }
.logo-upload-area.has-logo { border-style:solid; border-color: var(--status-complete); }
.logo-upload-area img { max-height:50px; max-width:180px; object-fit:contain; }
.logo-upload-area input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.logo-upload-label { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: var(--space-xs); }

/* ══════ BACKUP PANEL ══════ */
.backup-panel {
  background: var(--dm-dark-surface); border:1px solid var(--dm-dark-border);
  border-radius: var(--radius-lg); padding: var(--space-lg);
  display:flex; align-items:center; gap: var(--space-lg);
  flex-wrap:wrap; margin-top: var(--space-xl);
}
.backup-panel-info { flex:1; min-width:200px; }
.backup-panel-info h4 { font-size: var(--font-size-base); font-weight:700; margin-bottom: var(--space-xs); }
.backup-panel-info p { font-size: var(--font-size-sm); color: var(--text-muted); }
.backup-panel-actions { display:flex; gap: var(--space-sm); flex-wrap:wrap; }

/* ══════ MODAL ══════ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(15,15,15,0.85);
  display:flex; align-items:center; justify-content:center;
  z-index:2000; opacity:0; visibility:hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base); padding: var(--space-xl);
}
.modal-overlay.active { opacity:1; visibility:visible; }
.modal {
  background: var(--dm-dark); border:1px solid var(--dm-dark-border);
  border-radius: var(--radius-xl); padding: var(--space-xl);
  max-width:600px; width:100%;
  transform: scale(0.9) translateY(20px);
  transition: transform var(--transition-base);
  max-height:90vh; overflow-y:auto;
}
.modal-overlay.active .modal { transform: scale(1) translateY(0); }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--space-lg); }
.modal-header h3 { font-size: var(--font-size-xl); font-weight:700; }
.modal-close {
  width:36px; height:36px; border:none;
  background: var(--dm-dark-surface); color: var(--text-secondary);
  border-radius: var(--radius-sm); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.modal-close:hover { background:rgba(239,68,68,0.2); color:#EF4444; }
.modal-close svg { width:18px; height:18px; }
.modal-body { margin-bottom: var(--space-lg); }
.modal-footer { display:flex; gap: var(--space-md); justify-content:flex-end; }
.modal.modal-lg { max-width:800px; }

.share-link-container { display:flex; gap: var(--space-sm); margin-top: var(--space-md); }
.share-link-input {
  flex:1; padding: var(--space-md);
  background: var(--dm-dark-deep); border:1px solid var(--dm-dark-border);
  border-radius: var(--radius-md); color: var(--text-primary);
  font-family: var(--font-family); font-size: var(--font-size-sm); outline:none;
}
.copy-feedback { color: var(--status-complete); font-size: var(--font-size-sm); font-weight:600; margin-top: var(--space-sm); opacity:0; transition: opacity var(--transition-fast); }
.copy-feedback.show { opacity:1; }

/* ══════ DETAIL VIEW ══════ */
.detail-actions-bar { display:flex; align-items:center; gap: var(--space-md); margin-bottom: var(--space-xl); flex-wrap:wrap; }

/* ══════ TOAST ══════ */
.toast-container { position:fixed; bottom: var(--space-xl); right: var(--space-xl); z-index:3000; display:flex; flex-direction:column-reverse; gap: var(--space-sm); }
.toast {
  background: var(--dm-dark-deep); border:1px solid var(--dm-dark-border);
  border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg);
  display:flex; align-items:center; gap: var(--space-md);
  box-shadow: var(--shadow-lg); animation: toastIn 0.4s ease;
  min-width:300px; max-width:420px;
}
.toast.success { border-left:4px solid var(--status-complete); }
.toast.warning { border-left:4px solid var(--status-pending); }
.toast.error { border-left:4px solid #EF4444; }
.toast-icon { width:20px; height:20px; flex-shrink:0; }
.toast.success .toast-icon { color: var(--status-complete); }
.toast.warning .toast-icon { color: var(--status-pending); }
.toast.error .toast-icon { color: #EF4444; }
.toast-message { font-size: var(--font-size-sm); color: var(--text-primary); flex:1; }
.toast-close { background:none; border:none; color: var(--text-muted); cursor:pointer; padding:2px; transition: color var(--transition-fast); }
.toast-close:hover { color: var(--text-primary); }
@keyframes toastIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
.toast.removing { animation: toastOut 0.3s ease forwards; }
@keyframes toastOut { to{opacity:0;transform:translateX(40px)} }

/* ══════ STATS ══════ */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap: var(--space-md); margin-bottom: var(--space-xl); }
@media(max-width:768px){ .stats-row{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .stats-row{ grid-template-columns:1fr; } }
.stat-card {
  background: rgba(50,50,51,0.5);
  border:1px solid var(--dm-dark-border); border-radius: var(--radius-lg);
  padding: var(--space-lg); text-align:center;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.stat-card:hover { border-color: var(--dm-orange); transform:translateY(-2px); }
.stat-number { font-size: var(--font-size-3xl); font-weight:800; color: var(--dm-orange); line-height:1; margin-bottom: var(--space-xs); }
.stat-label { font-size: var(--font-size-xs); color: var(--text-muted); text-transform:uppercase; letter-spacing:1px; font-weight:600; }

/* ══════ TABS ══════ */
.tabs { display:flex; gap:2px; background: var(--dm-dark-deep); border-radius: var(--radius-md); padding:3px; margin-bottom: var(--space-lg); }
.tab-btn {
  flex:1; padding: var(--space-sm) var(--space-md);
  background:transparent; border:none;
  color: var(--text-muted); font-family: var(--font-family);
  font-size: var(--font-size-sm); font-weight:600;
  border-radius: var(--radius-sm); cursor:pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast); text-align:center;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { background: var(--dm-orange); color:white; }
.tab-content { display:none; animation: fadeSlideIn 0.3s ease; }
.tab-content.active { display:block; }

/* ══════ PRINT ══════ */
@media print {
  body { background:white; color:black; }
  body::before, .app-header, .detail-actions-bar, .toast-container, .signature-actions, .btn-group, .notes-section, .backup-panel, .reminders-banner { display:none !important; }
  .app-main { margin-top:0; }
  .contract-document { box-shadow:none; border:none; max-width:100%; padding:20px 40px; }
  .view-container { max-width:100%; padding:0; }
}

/* ══════ RESPONSIVE ══════ */
@media(max-width:768px){
  .app-header { padding:0 var(--space-md); }
  .header-logo-text { font-size: var(--font-size-base); }
  .header-badge { display:none; }
  .nav-btn span { display:none; }
  .nav-btn { padding: var(--space-sm); }
  .view-container { padding: var(--space-md); }
  .page-header h1 { font-size: var(--font-size-2xl); }
  .contract-parties, .signatures-grid { grid-template-columns:1fr; }
  .contracts-grid { grid-template-columns:1fr; }
  .modal { margin: var(--space-md); padding: var(--space-lg); }
}

.skeleton {
  background: linear-gradient(90deg, var(--dm-dark-surface) 25%, var(--dm-dark-hover) 50%, var(--dm-dark-surface) 75%);
  background-size:200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.text-center { text-align:center; }
.text-orange { color: var(--dm-orange); }
.text-muted { color: var(--text-muted); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.hidden { display:none !important; }
.flex-center { display:flex; align-items:center; justify-content:center; }

/* ══════ FIREBASE SYNC STYLES ══════ */
.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-left: var(--space-sm);
  vertical-align: middle;
  transition: all var(--transition-fast);
}
.sync-badge.online {
  background: rgba(34, 197, 94, 0.15);
  color: var(--status-complete);
  border: 1px solid rgba(34, 197, 94, 0.3);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.1);
}
.sync-badge.offline {
  background: rgba(107, 114, 128, 0.15);
  color: var(--text-muted);
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.firebase-panel {
  background: var(--dm-dark-surface);
  border: 1px solid var(--dm-dark-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-top: var(--space-xl);
  transition: border-color var(--transition-fast);
}
.firebase-panel:hover {
  border-color: var(--dm-orange);
}
.firebase-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.firebase-panel-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.firebase-panel-title svg {
  color: #FFCA28;
  width: 20px;
  height: 20px;
}
.firebase-panel-body {
  margin-top: var(--space-md);
  display: none;
}
.firebase-panel-body.open {
  display: block;
}
.firebase-textarea {
  font-family: monospace;
  font-size: var(--font-size-sm);
  min-height: 100px;
  background: var(--dm-dark-deep);
  color: var(--text-primary);
  border: 1px solid var(--dm-dark-border);
  border-radius: var(--radius-md);
  width: 100%;
  padding: var(--space-md);
  outline: none;
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.firebase-textarea:focus {
  border-color: var(--dm-orange);
  box-shadow: 0 0 0 3px var(--dm-orange-light);
}
.firebase-connection-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-md);
  color: var(--text-secondary);
}
.firebase-connection-status .status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.firebase-connection-status .status-indicator.online {
  background: var(--status-complete);
  box-shadow: 0 0 8px var(--status-complete);
}
.firebase-connection-status .status-indicator.offline {
  background: var(--text-muted);
}

/* ══════ GUEST MODE OVERRIDES ══════ */
body.guest-mode .app-header {
  display: none !important;
}
body.guest-mode .app-main {
  margin-top: 0 !important;
}

/* ══════ ADMIN LOGIN SCREEN ══════ */
.login-view-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: var(--space-xl);
}
.login-card {
  max-width: 420px;
  width: 100%;
  background: rgba(50,50,51,0.85);
  border: 1px solid var(--dm-dark-border);
  border-top: 4px solid var(--dm-orange);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-xl);
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: fadeSlideIn 0.3s ease;
}
.login-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.login-logo svg {
  height: 48px;
  width: auto;
}
.login-logo-text {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--text-primary);
}
.login-logo-text span {
  color: var(--dm-orange);
}
.login-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}
.login-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
}
.login-form .form-group {
  text-align: left;
}
.login-error {
  color: #EF4444;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-md);
  text-align: center;
  display: none;
}
.login-error.show {
  display: block;
}

/* ══════ SVG SPECIFIC CORRECTIONS ══════ */
.form-label svg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
  color: var(--dm-orange);
}

.backup-panel-info h4 svg {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
  color: var(--dm-orange);
}

.logo-upload-preview svg {
  width: 36px;
  height: 36px;
  color: var(--text-muted);
  display: inline-block;
  vertical-align: middle;
}

.chevron svg {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}