/* ============================================================
   FTPSearch — Clean modern UI
   ============================================================ */

:root {
    --bg:       #e8f4f8;
    --bg2:      #f4fafc;
    --bg3:      #ffffff;
    --border:   #b8d8e8;
    --border2:  #90c0d5;
    --accent:   #1a7fa8;
    --accent2:  #155f80;
    --cyan:     #1a7fa8;
    --green:    #1a7fa8;
    --amber:    #c07800;
    --red:      #c0392b;
    --text:     #1a2830;
    --text-dim: #4a7080;
    --text-faint: #8aacb8;
    --font:     system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

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

html, body {
    background: var(--bg) !important;
    color: var(--text);
    font-family: var(--font);
    font-size: 18px;
    min-height: 100%;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent2); text-decoration: underline; }

/* ---- NAVBAR ---- */
.navbar { background: var(--bg3) !important; border-bottom: 2px solid var(--border) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.navbar-brand { font-family: var(--font); font-size: 1.15rem; font-weight: 600; color: var(--accent) !important; letter-spacing: 0; }
.navbar-brand span { color: var(--text-dim); }
.nav-link { color: var(--text-dim) !important; font-size: 0.9rem; font-weight: 500; }
.nav-link.active, .nav-link:hover { color: var(--accent) !important; text-decoration: none; }

.navbar .form-control {
    background: var(--bg); border: 1px solid var(--border2); color: var(--text);
    font-size: 0.9rem; border-radius: 4px;
}
.navbar .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,127,168,0.15); }
.navbar .form-control::placeholder { color: var(--text-faint); }

/* Search button */
.btn-search {
    background: var(--accent) !important; border: none !important;
    color: #fff !important; font-weight: 500; font-size: 0.9rem; border-radius: 4px !important;
}
.btn-search:hover { background: var(--accent2) !important; }

/* Cards */
.card { background: var(--bg3) !important; border: 1px solid var(--border) !important; border-radius: 6px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.card-header { background: var(--bg) !important; border-bottom: 1px solid var(--border) !important; font-weight: 600; font-size: 0.9rem; color: var(--text); }
.card-body { padding: 20px; }

/* Tables */
.table { color: var(--text) !important; }
.table > :not(caption) > * > * { background: transparent !important; border-color: var(--border) !important; }
.table th {
    font-size: 0.78rem; font-weight: 600; color: var(--text-dim); letter-spacing: 0.5px;
    background: var(--bg) !important; text-transform: uppercase; padding: 10px 16px;
    border-color: var(--border) !important;
}
.table td { padding: 11px 16px; vertical-align: middle; font-size: 0.95rem; border-color: var(--border) !important; color: #1a2830; }
.table tbody tr:hover td { background: rgba(26,127,168,0.04) !important; }

/* Forms */
.form-control, .form-select {
    background: var(--bg3) !important; border: 1px solid var(--border2) !important;
    color: var(--text) !important; border-radius: 4px !important; font-size: 0.9rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(26,127,168,0.15) !important;
}
.form-control::placeholder { color: var(--text-faint) !important; }
.form-select option { background: #fff; }
.form-check-input:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; }
.form-label { font-size: 0.8rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }

/* Buttons */
.btn { border-radius: 4px !important; font-weight: 500; }
.btn-primary   { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.btn-primary:hover { background: var(--accent2) !important; border-color: var(--accent2) !important; }
.btn-warning   { background: #e67e00 !important; border-color: #e67e00 !important; color: #fff !important; }
.btn-danger    { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
.btn-secondary { background: var(--bg) !important; border-color: var(--border2) !important; color: var(--text-dim) !important; }
.btn-secondary:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.btn-success   { background: #1e8a4a !important; border-color: #1e8a4a !important; color: #fff !important; }
.btn-info      { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.btn-sm { font-size: 0.8rem !important; padding: 4px 10px !important; }

/* Alerts */
.alert { border-radius: 4px !important; font-size: 0.9rem; }
.alert-success { background: #eafaf1 !important; border-color: #a3d9b1 !important; color: #1a5e35 !important; }
.alert-danger  { background: #fdf0ef !important; border-color: #f0b0aa !important; color: #8b1a12 !important; }
.alert-warning { background: #fff8e6 !important; border-color: #f5d080 !important; color: #7a4a00 !important; }
.alert-info    { background: #e8f4f8 !important; border-color: #90c0d5 !important; color: #155f80 !important; }

/* Badges */
.badge-status { font-size: 0.75rem; padding: 3px 10px; border-radius: 12px; font-weight: 500; }
.badge-active  { background: #d4f5e2; color: #1a6b35; border: 1px solid #8dd4aa; }
.badge-dead    { background: #fde8e8; color: #8b1a12; border: 1px solid #f0a0a0; }
.badge-paused  { background: #e8eef2; color: #5a7080; border: 1px solid #b0c8d5; }
.badge-crawling{ background: #fff3cc; color: #7a4a00; border: 1px solid #f0c040; }

/* Pagination */
.page-link { background: var(--bg3) !important; border-color: var(--border) !important; color: var(--accent) !important; font-size: 0.9rem; border-radius: 4px !important; margin: 0 2px; }
.page-link:hover { background: var(--bg) !important; }
.page-item.active .page-link { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.page-item.disabled .page-link { background: var(--bg) !important; color: var(--text-faint) !important; }

/* Input groups */
.input-group-text { background: var(--bg) !important; border-color: var(--border2) !important; color: var(--text-dim) !important; }

/* List groups */
.list-group-item { background: var(--bg3) !important; border-color: var(--border) !important; color: var(--text) !important; }

/* Modals */
.modal-content { background: var(--bg3) !important; border-color: var(--border) !important; border-radius: 8px !important; }
.modal-header  { border-color: var(--border) !important; background: var(--bg) !important; }
.modal-footer  { border-color: var(--border) !important; }
.btn-close { filter: none; }

/* ---- CUSTOM COMPONENTS ---- */

.stat-card {
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: 8px; padding: 20px 24px; text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-top: 3px solid var(--accent);
}
.stat-val { font-size: 2rem; font-weight: 600; color: var(--accent); line-height: 1.1; }
.stat-lbl { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

.section-head {
    font-size: 0.82rem; font-weight: 700; color: var(--text-dim);
    letter-spacing: 1px; text-transform: uppercase;
    border-bottom: 2px solid var(--border); padding-bottom: 8px; margin-bottom: 16px;
}

.hostname-link { color: var(--accent) !important; font-weight: 500; font-size: 1rem; }
.hostname-link:hover { color: var(--accent2) !important; text-decoration: underline; }
.file-name  { color: var(--text); font-family: var(--font-mono); font-size: 0.9rem; }
.file-path  { font-size: 0.78rem; color: var(--text-faint); margin-top: 2px; font-family: var(--font-mono); }
.file-path a { color: var(--text-faint); }
.file-path a:hover { color: var(--accent); }
.file-size  { color: #1a4a5a; font-size: 0.95rem; font-weight: 500; }
.file-count { color: #1a4a5a; font-weight: 600; font-size: 0.95rem; }
.timestamp  { color: #2a5060; font-size: 0.9rem; }

.ftp-link { color: var(--amber) !important; font-size: 0.85rem; font-weight: 500; white-space: nowrap; }
.ftp-link:hover { color: var(--text) !important; text-decoration: none; }

.path-bar {
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: 4px; padding: 8px 14px; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-dim);
}
.path-bar .host { color: var(--accent); font-weight: 500; }
.path-bar .pth  { color: var(--text); }

mark { background: rgba(26,127,168,0.15); color: var(--accent); padding: 0 2px; border-radius: 2px; }

pre { background: var(--bg); border: 1px solid var(--border); padding: 12px 16px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text); overflow-x: auto; border-radius: 4px; }
code { font-family: var(--font-mono); color: var(--accent); font-size: 0.85em; }

footer { border-top: 1px solid var(--border) !important; color: #1a2830 !important; font-size: 0.88rem; }

.breadcrumb { background: transparent !important; padding: 0; font-size: 0.85rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-faint); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.hero-wrap {
    background: linear-gradient(135deg, var(--bg3) 0%, var(--bg) 100%);
    border-bottom: 2px solid var(--border);
    padding: 48px 0 36px;
}