/* CopEntry Professional Graphics Pack Core Styles
   Extracted from copentry_graphics_pack.html on 2025-09-14
   Light theme adapted for existing site design */

:root {
  /* Adapted for light theme compatibility */
  --police-dark-blue:#0f172a;--police-blue:#1e293b;--police-medium-blue:#334155;--police-light-blue:#475569;--accent-blue:#2563eb;--bright-blue:#3b82f6;--badge-gold:#eab308;--warning-amber:#f59e0b;--danger-red:#dc2626;--success-green:#059669;--info-cyan:#0891b2;--gray-900:#111827;--gray-800:#1f2937;--gray-700:#374151;--gray-600:#4b5563;--gray-500:#6b7280;--gray-400:#9ca3af;
  /* Light theme text colors */
  --text-primary:#1f2937;--text-secondary:#4b5563;--text-muted:#6b7280;--text-inverse:#f8fafc;
  /* Light theme backgrounds */
  --bg-primary:#ffffff;--bg-secondary:#f8fafc;--bg-tertiary:#f1f5f9;--bg-surface:#e2e8f0;--bg-glass:rgba(248,250,252,0.8);
  /* Light theme borders */
  --border-primary:#e2e8f0;--border-secondary:#cbd5e1;--border-accent:#2563eb;
  /* Shadows for light theme */
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -1px rgb(0 0 0 / 0.06);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -2px rgb(0 0 0 / 0.05);--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1),0 10px 10px -5px rgb(0 0 0 / 0.04);--shadow-glow:0 0 20px rgba(37,99,235,0.15);
  /* Light-compatible gradients */
  --gradient-primary:linear-gradient(135deg,#f1f5f9 0%,#e2e8f0 100%);--gradient-secondary:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);--gradient-accent:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);--gradient-gold:linear-gradient(135deg,#fbbf24 0%,#eab308 100%);
  --space-xs:.25rem;--space-sm:.5rem;--space-md:.75rem;--space-lg:1rem;--space-xl:1.5rem;--space-2xl:2rem;--space-3xl:2.5rem;--space-4xl:3rem;--space-5xl:4rem;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;--radius-2xl:16px;--radius-full:9999px;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Do not override body styles - let existing site handle background/theme */
.container{max-width:1400px;margin:0 auto;padding:var(--space-2xl)}
.grid{display:grid;gap:var(--space-2xl);margin:var(--space-3xl) 0}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid-6{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.flex{display:flex;gap:var(--space-lg)}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}
/* Light theme cards with subtle styling - PRIORITY OVERRIDE */
.card{background:rgba(255,255,255,0.95) !important;border:1px solid var(--border-primary) !important;border-radius:var(--radius-xl) !important;padding:var(--space-2xl) !important;box-shadow:var(--shadow-lg) !important;transition:.3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.card:before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--gradient-accent);opacity:.3}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl),var(--shadow-glow);border-color:var(--border-accent)}
.card-glass{background:var(--bg-glass) !important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(71,85,105,.3) !important}
.card-elevated{background:var(--bg-secondary) !important;box-shadow:var(--shadow-xl) !important}
.btn{display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:var(--space-sm);padding:var(--space-md) var(--space-xl) !important;border:none !important;border-radius:var(--radius-lg) !important;font-weight:600 !important;font-size:var(--text-sm) !important;text-decoration:none !important;cursor:pointer;transition:.2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;line-height:1;min-height:44px;user-select:none}
.btn:before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}
.btn:hover:before{left:100%}
.btn-primary{background:var(--gradient-accent) !important;color:#fff !important;box-shadow:var(--shadow-md) !important}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 20px rgba(37,99,235,.4)}
.btn-secondary{background:var(--gradient-secondary) !important;color:var(--text-primary) !important;border:1px solid var(--border-primary) !important}
.btn-secondary:hover{background:var(--gradient-primary) !important;border-color:var(--border-accent) !important}
.btn-success{background:linear-gradient(135deg,#059669,#047857) !important;color:#fff !important}
.btn-warning{background:var(--gradient-gold) !important;color:var(--text-inverse) !important}
.btn-danger{background:linear-gradient(135deg,#dc2626,#b91c1c) !important;color:#fff !important}
.btn-ghost{background:transparent !important;color:var(--text-secondary) !important;border:1px solid var(--border-secondary) !important}
.btn-ghost:hover{background:var(--bg-glass) !important;color:var(--text-primary) !important}
.btn-sm{padding:var(--space-sm) var(--space-md) !important;font-size:var(--text-xs) !important;min-height:32px}
.btn-lg{padding:var(--space-lg) var(--space-2xl) !important;font-size:var(--text-lg) !important;min-height:52px}
.form-group{margin-bottom:var(--space-xl)}
.form-label{display:block;margin-bottom:var(--space-sm);font-weight:600;color:var(--text-primary);font-size:var(--text-sm)}
.form-input,.form-textarea,.form-select{width:100%;padding:var(--space-md) var(--space-lg) !important;background:#fff !important;border:2px solid var(--border-primary) !important;border-radius:var(--radius-lg) !important;color:var(--gray-900) !important;font-size:var(--text-base);transition:.2s ease}
.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none !important;border-color:var(--border-accent) !important;box-shadow:0 0 0 4px rgba(37,99,235,.15) !important;background:#fff !important;color:var(--gray-900) !important}
.form-input::placeholder,.form-textarea::placeholder{color:var(--gray-500) !important;opacity:1}
.form-textarea{min-height:120px;resize:vertical}
.status{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.status-online{background:rgba(5,150,105,.2);color:var(--success-green);border:1px solid rgba(5,150,105,.3)}
.status-processing{background:rgba(245,158,11,.2);color:var(--warning-amber);border:1px solid rgba(245,158,11,.3)}
.status-error{background:rgba(220,38,38,.2);color:var(--danger-red);border:1px solid rgba(220,38,38,.3)}
.status-offline{background:rgba(107,114,128,.2);color:var(--gray-400);border:1px solid rgba(107,114,128,.3)}
.status:before{content:'';width:6px;height:6px;border-radius:var(--radius-full);background:currentColor}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.status-online:before,.status-processing:before{animation:pulse 2s infinite}
.table-container{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-xl);overflow:hidden}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:var(--space-lg) var(--space-xl);text-align:left;border-bottom:1px solid var(--border-primary)}
.table th{background:var(--bg-tertiary);font-weight:600;color:var(--text-primary);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.05em}
.table td{color:var(--text-secondary)}
.table tbody tr:hover{background:var(--bg-glass)}
.progress-bar{width:100%;height:8px;background:var(--bg-tertiary);border-radius:var(--radius-full);overflow:hidden;margin:var(--space-lg) 0}
.progress-fill{height:100%;background:var(--gradient-accent);border-radius:var(--radius-full);transition:width .8s ease;position:relative}
.progress-fill:after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.bg-pattern-dots{background-image:radial-gradient(circle at 1px 1px,rgba(71,85,105,.3) 1px,transparent 0);background-size:20px 20px}
.bg-pattern-lines{background-image:linear-gradient(45deg,rgba(71,85,105,.1) 25%,transparent 25%),linear-gradient(-45deg,rgba(71,85,105,.1) 25%,transparent 25%);background-size:30px 30px;background-position:0 0,15px 15px}
.bg-pattern-circuit{background-image:radial-gradient(circle at 25% 25%,rgba(37,99,235,.1) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(37,99,235,.08) 0%,transparent 50%),linear-gradient(90deg,rgba(71,85,105,.05) 1px,transparent 1px),linear-gradient(rgba(71,85,105,.05) 1px,transparent 1px);background-size:200px 200px,300px 300px,20px 20px,20px 20px}
@media (max-width:768px){.container{padding:var(--space-lg)}.grid-2,.grid-3,.grid-4,.grid-6{grid-template-columns:1fr}.btn{width:100%;justify-content:center}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}}
.hidden{display:none}.block{display:block}.cursor-pointer{cursor:pointer}.font-bold{font-weight:700}.opacity-75{opacity:.75}