/* Main CSS - Base styles and layout */

/* Google Sans Code — local font files (no external network request) */
/* latin */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google-sans-code/google-sans-code-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google-sans-code/google-sans-code-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* vietnamese */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google-sans-code/google-sans-code-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* math */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google-sans-code/google-sans-code-math.woff2') format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google-sans-code/google-sans-code-symbols.woff2') format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB;
}
/* symbols2 */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google-sans-code/google-sans-code-symbols2.woff2') format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* adlam */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google-sans-code/google-sans-code-adlam.woff2') format('woff2');
  unicode-range: U+061F, U+0640, U+2015, U+201B, U+2020-2021, U+2030, U+204F, U+25CC, U+2E28-2E29, U+2E41, U+1E900-1E95F;
}
/* canadian-aboriginal */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google-sans-code/google-sans-code-canadian-aboriginal.woff2') format('woff2');
  unicode-range: U+02C7, U+02D8-02D9, U+02DB, U+0307, U+1400-167F, U+18B0-18F5, U+25CC, U+11AB0-11ABF;
}
/* cherokee */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google-sans-code/google-sans-code-cherokee.woff2') format('woff2');
  unicode-range: U+0300-0302, U+0304, U+030B-030C, U+0323-0324, U+0330-0331, U+13A0-13FF, U+AB70-ABBF;
}
/* old-permic */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google-sans-code/google-sans-code-old-permic.woff2') format('woff2');
  unicode-range: U+0300, U+0306-0308, U+0313, U+0483, U+20DB, U+25CC, U+10350-1037A;
}
/* syriac */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google-sans-code/google-sans-code-syriac.woff2') format('woff2');
  unicode-range: U+0303-0304, U+0307-0308, U+030A, U+0320, U+0323-0325, U+032D-032E, U+0330-0331, U+060C, U+061B-061C, U+061F, U+0621, U+0640, U+064B-0655, U+0660-066C, U+0670, U+0700-074F, U+0860-086A, U+1DF8, U+1DFA, U+200C-200F, U+25CC, U+2670-2671;
}

/* Reset and base styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Google Sans Code', monospace;
    font-size: 14px;
    line-height: 1.5;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
}

/* Header */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    height: 50px;
    flex-shrink: 0;
    z-index: 100;
}

.header-left, .header-center, .header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-center {
    flex: 1;
    justify-content: center;
    max-width: 500px;
}

.logo {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--accent-color);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.app-logo {
    flex-shrink: 0;
}

.app-version {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 0.5rem;
    vertical-align: middle;
    letter-spacing: 0.03em;
}

/* Search */
.search-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: stretch;
    gap: 0;
}

.search-scope {
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: 6px 0 0 6px;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 1rem;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    max-width: 140px;
}
.search-scope:focus { outline: none; }
.search-container .search-input {
    border-radius: 0 6px 6px 0;
    flex: 1;
}

.search-input {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-alpha);
}

.search-input::placeholder {
    color: var(--text-muted);
}

.search-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

/* Stats */
.stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.stat-divider {
    color: var(--border-color);
}

.header-divider {
    width: 1px;
    height: 20px;
    background-color: var(--border-color);
    margin: 0 0.25rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-hover);
}

.btn:active {
    transform: scale(0.98);
}

.btn-icon {
    padding: 0.4rem 0.6rem;
    font-size: 1rem;
    min-width: 36px;
    gap: 0.35rem;
}

.btn-small {
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    gap: 0.3rem;
}

/* SVG Icons */
.icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    vertical-align: middle;
    display: inline-block;
}

.icon-sm {
    width: 14px;
    height: 14px;
}

.icon-lg {
    width: 20px;
    height: 20px;
}

.search-icon .icon {
    width: 16px;
    height: 16px;
}

.btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-secondary {
    background-color: transparent;
}

.btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
}

.btn-danger:hover {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
}

/* Main Container */
.main-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    margin-bottom: 44px; /* Default drawer height when collapsed */
    transition: margin-bottom 0.2s ease;
}

/* Form Elements */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-alpha);
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

/* Checkboxes and Radios */
.checkbox-label, .radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem 0;
}

.checkbox-group, .radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.checkboxes {
    display: flex;
    gap: 1.5rem;
}

/* Empty State */
.empty-state {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.btn-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.text-muted {
    color: var(--text-muted);
}

.text-secondary {
    color: var(--text-secondary);
}

.label-hint {
    font-weight: normal;
    color: var(--text-muted);
}

.form-group-no-mb {
    margin-bottom: 0;
}

.highlight {
    background-color: var(--highlight-color) !important;
}

/* Tooltip */
.tooltip {
    position: absolute;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-tooltip);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    box-shadow: 0 4px 12px var(--shadow-color);
    z-index: 1000;
    pointer-events: none;
    max-width: 300px;
}

.tooltip-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.125rem 0;
}

.tooltip-label {
    color: var(--text-muted);
    min-width: 80px;
}

.tooltip-value {
    color: var(--text-primary);
}

.tooltip-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooltip-close:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}