/* styles.css */
:root {
    /* Dark Theme Variables */
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --text-primary: #e2e8f0;
    --text-secondary: #a0aec0;
    --text-placeholder: #6b7280;
    --border-color: #4b5563;
    --nav-bg: #1a202c;
    --nav-border-color: #2d3748;
    --nav-hover-bg: #2d3748;
    --nav-active-bg: var(--bg-primary);
    --nav-active-text: white;
    --main-header-gradient-from: #63b3ed;
    --main-header-gradient-to: #805ad5;
    --input-focus-border: #34d399;
    --input-focus-ring-color: rgba(52, 211, 153, 0.5);
    /* Strength Bar Colors */
    --strength-very-weak: #ef4444;
    --strength-weak: #f97316;
    --strength-medium: #eab308;
    --strength-strong: #22c55e;
    --strength-very-strong: #14b8a6;
    --accent-pink: #ec4899;
    --accent-purple: #8b5cf6;
}

/* Base styles */
body {
    font-family: 'Vazirmatn', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.app-container {
    max-width: 1800px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Header, Nav, Content, Footer */
.main-header { text-align: center; padding: 2rem 0; }
.main-header h1 {
    font-size: 2.25rem;
    font-weight: bold;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to right, var(--main-header-gradient-from), var(--main-header-gradient-to));
}
.top-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    border-bottom: 2px solid var(--nav-border-color);
    margin-bottom: 2rem;
}
.nav-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    color: var(--text-secondary);
    background-color: transparent;
    margin-bottom: -2px; 
    white-space: nowrap;
    border: 2px solid transparent;
}
.nav-item:hover { background-color: var(--nav-hover-bg); color: var(--text-primary); }
.nav-item.active {
    background-color: var(--nav-active-bg);
    color: var(--nav-active-text);
    font-weight: 500;
    border-color: var(--nav-border-color);
    border-bottom-color: var(--nav-active-bg);
}
.nav-item-icon { width: 1.25rem; height: 1.25rem; margin-left: 0.5rem; }
.main-content { padding: 2rem 0; flex-grow: 1; }
.app-footer {
    text-align: center;
    padding: 2rem 0;
    margin-top: 2rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* Form Elements */
.modern-input, .custom-select {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1rem;
    color: var(--text-primary);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.modern-input:focus, .custom-select:focus {
    border-color: var(--input-focus-border);
    outline: none;
    box-shadow: 0 0 0 3px var(--input-focus-ring-color);
}
.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%239CA3AF" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>');
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    background-size: 1.5em 1.5em;
    padding-left: 2.5rem;
}
.custom-select option { background-color: var(--bg-secondary); }

/* Password Generator Specific Styles */
.password-input-display {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
.strength-bar-container {
    background-color: var(--bg-tertiary);
    height: 10px;
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 0.5rem;
}
.strength-bar {
    height: 100%;
    width: 0%;
    border-radius: 9999px;
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.strength-bar.strength-very-weak { background-color: var(--strength-very-weak); }
.strength-bar.strength-weak { background-color: var(--strength-weak); }
.strength-bar.strength-medium { background-color: var(--strength-medium); }
.strength-bar.strength-strong { background-color: var(--strength-strong); }
.strength-bar.strength-very-strong { background-color: var(--strength-very-strong); }

.strength-text {
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.5rem;
    color: var(--text-secondary);
}

.option-toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.option-toggle-switch {
    position: relative;
    width: 50px;
    height: 28px;
    background: #374151;
    border-radius: 9999px;
}
.option-toggle-switch::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s;
}
.option-checkbox { display: none; }
.option-checkbox:checked + .option-toggle-switch { background-color: #22c55e; }
.option-checkbox:checked + .option-toggle-switch::before { transform: translateX(22px); }

/* Unit Converter Result Styles */
.unit-result-display {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 1.5rem 2rem;
    border-radius: 0.75rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 1.5rem;
    min-height: 80px;
}
.unit-result-display .value { font-weight: 700; color: #67e8f9; }
.unit-result-display .unit { color: var(--text-secondary); font-size: 1.1rem; }
.unit-result-display .equals { color: var(--text-primary); font-weight: 700; font-size: 1.2rem; }
.unit-result-display .placeholder { font-size: 1rem; color: var(--text-placeholder); }

/* Crypto Tools Styles */
.crypto-actions-card {
    background: linear-gradient(145deg, var(--bg-secondary), #2a374a);
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
}
.crypto-actions-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent-pink);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.crypto-btn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}
.crypto-btn {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
    border: 1px solid var(--border-color);
    cursor: pointer;
    text-align: center;
}
.crypto-btn:hover {
    background-color: #4b5563;
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.3);
}
.crypto-btn:active {
    transform: scale(0.97);
    background-color: var(--accent-pink);
}

/* UUID Generator Styles */
#uuid-output-list {
    height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--bg-primary);
}
#uuid-output-list li {
    background-color: var(--bg-secondary);
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    font-family: monospace;
    font-size: 1rem;
    color: var(--text-primary);
    position: relative;
    margin-bottom: 0.5rem;
}
#uuid-output-list li:last-child {
    margin-bottom: 0;
}
#uuid-output-list li::before {
    counter-increment: uuid-counter;
    content: counter(uuid-counter);
    color: var(--accent-purple);
    font-weight: bold;
    margin-right: 1.5rem;
    min-width: 2ch;
    text-align: right;
}
#uuid-output-list li .uuid-text-content {
    flex-grow: 1;
    color: var(--text-primary);
}
#uuid-output-list li .copy-single-uuid-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s, color 0.2s, transform 0.2s;
}
#uuid-output-list li:hover .copy-single-uuid-btn {
    opacity: 1;
    color: var(--text-primary);
}
#uuid-output-list li .copy-single-uuid-btn:hover {
    transform: scale(1.1);
}
#uuid-output-list .placeholder {
    color: var(--text-placeholder);
    font-family: 'Vazirmatn', sans-serif;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
}
#uuid-output-list .placeholder::before {
    content: none;
}

/* General direction for LTR content - This should override RTL parent */
/* Apply this to elements that specifically need LTR display like code blocks, inputs for English text */
.direction-ltr {
    direction: ltr !important;
    text-align: left !important;
}

/* For any content that might implicitly inherit RTL but needs LTR like code snippets */
pre, code, textarea.direction-ltr {
    direction: ltr !important;
    text-align: left !important;
}