/* itwx PassMan – Application Styles */
/* Tailwind CSS is loaded via CDN in base.twig for development.
   For production, run: npx tailwindcss -i ./public/assets/css/app.css -o ./public/assets/css/compiled.css --minify */

@import url('https://fonts.bunny.net/css?family=inter:300,400,500,600,700&display=swap');

/* Base */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; padding: 0; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #111827;
    background: #f9fafb;
    -webkit-font-smoothing: antialiased;
}

/* Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Focus rings */
*:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Sensitive field masking animation */
.field-masked {
    letter-spacing: 0.15em;
    color: #9ca3af;
}

/* Password strength bars */
.strength-bar {
    transition: background-color 0.2s ease;
}

/* Clipboard cleared animation */
@keyframes clipboardCleared {
    0%   { opacity: 1; transform: scale(1); }
    50%  { opacity: 0.5; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}
.clipboard-cleared { animation: clipboardCleared 0.3s ease; }

/* Vault entry type color accents */
.entry-type-login       { --accent: #3b82f6; }
.entry-type-credit_card { --accent: #8b5cf6; }
.entry-type-ssh_key     { --accent: #f59e0b; }
.entry-type-api_token   { --accent: #10b981; }
.entry-type-secure_note { --accent: #6b7280; }
.entry-type-certificate { --accent: #f97316; }

/* Monospace for sensitive values */
.font-mono { font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace; }

/* Spin animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }

/* Tooltip */
[title] { cursor: default; }

/* Print styles */
@media print {
    #sidebar, header, .no-print { display: none !important; }
    main { padding: 0 !important; overflow: visible !important; }
}