/* KUBEE Security Platform — Apple-inspired CSS with Dark Mode */

[x-cloak] { display: none !important; }

/* ─── Input fields ─── */
.input-field {
    padding: 10px 14px;
    border: 1px solid #e8e8ed;
    border-radius: 10px;
    font-size: 13px;
    background: #fff;
    color: #1d1d1f;
    transition: all 0.2s;
    outline: none;
}
.input-field:focus {
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}
.input-field::placeholder { color: #86868b; }

.dark .input-field {
    background: #1c1c1e;
    color: #f5f5f7;
    border-color: #38383a;
}
.dark .input-field:focus {
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25);
}
.dark .input-field::placeholder { color: #98989d; }

/* ─── Buttons ─── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: #0071e3;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-primary:hover { background: #0077ed; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid #e8e8ed;
    background: #fff;
    color: #1d1d1f;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-sm:hover { background: #f5f5f7; }
.btn-sm:disabled { opacity: 0.5; cursor: not-allowed; }

.dark .btn-sm {
    background: #2c2c2e;
    color: #f5f5f7;
    border-color: #38383a;
}
.dark .btn-sm:hover { background: #3a3a3c; }

.btn-xs {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid #e8e8ed;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
    color: #1d1d1f;
}
.btn-xs:hover { background: #f5f5f7; }

.dark .btn-xs {
    background: #2c2c2e;
    color: #f5f5f7;
    border-color: #38383a;
}
.dark .btn-xs:hover { background: #3a3a3c; }

/* ─── Progress bar ─── */
.progress-bar {
    width: 100%;
    height: 6px;
    background: #e8e8ed;
    border-radius: 3px;
    overflow: hidden;
}
.dark .progress-bar { background: #38383a; }
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0071e3, #40a9ff, #0071e3);
    background-size: 200% 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
    animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ─── Result card ─── */
.result-card {
    display: flex;
    gap: 1px;
    background: #e8e8ed;
    border-radius: 12px;
    overflow: hidden;
}
.dark .result-card { background: #38383a; }

.result-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 12px;
    background: #fff;
    min-width: 0;
}
.dark .result-item { background: #1c1c1e; }

.result-value {
    font-size: 24px;
    font-weight: 700;
    color: #1d1d1f;
    line-height: 1;
    word-break: break-all;
}
.dark .result-value { color: #f5f5f7; }

@media (max-width: 480px) {
    .result-value { font-size: 18px; }
    .result-item { padding: 14px 8px; }
}

.result-label {
    font-size: 10px;
    font-weight: 500;
    color: #86868b;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dark .result-label { color: #98989d; }

/* ─── Data tables ─── */
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th {
    font-size: 11px;
    font-weight: 500;
    color: #86868b;
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1.5px solid #d2d2d7;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.dark .data-table th {
    color: #98989d;
    border-bottom-color: #48484a;
}
.data-table td {
    font-size: 13px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f2;
    vertical-align: middle;
}
.dark .data-table td {
    border-bottom-color: #2c2c2e;
}
.data-table tbody tr:hover { background: #fafafa; }
.dark .data-table tbody tr:hover { background: #2c2c2e; }

/* ─── Stat cards ─── */
.stat-card {
    background: #fff;
    border: 1px solid #e8e8ed;
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
}
.dark .stat-card {
    background: #1c1c1e;
    border-color: #38383a;
}
.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #1d1d1f;
}
.dark .stat-value { color: #f5f5f7; }
.stat-label {
    font-size: 10px;
    color: #86868b;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.dark .stat-label { color: #98989d; }

/* ─── Badges ─── */
.badge-blue {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    background: #e8f0fe;
    color: #0071e3;
}
.dark .badge-blue {
    background: rgba(0, 113, 227, 0.15);
    color: #3395ff;
}
.badge-orange {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    background: #fff3e0;
    color: #e65100;
}
.dark .badge-orange {
    background: rgba(230, 81, 0, 0.15);
    color: #ff9800;
}
.badge-gray {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    background: #f5f5f7;
    color: #86868b;
}
.dark .badge-gray {
    background: #2c2c2e;
    color: #98989d;
}

/* ─── Toast notification ─── */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #1d1d1f;
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    z-index: 9999;
    max-width: calc(100vw - 48px);
    animation: slideUp 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
}
.dark .toast { background: #f5f5f7; color: #1d1d1f; }

@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-10px); } }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d2d2d7; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #86868b; }
.dark ::-webkit-scrollbar-thumb { background: #48484a; }
.dark ::-webkit-scrollbar-thumb:hover { background: #636366; }

/* ─── Hide scrollbar for tab bar ─── */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ─── Mobile-friendly checkbox ─── */
input[type="checkbox"] { width: 16px; height: 16px; accent-color: #0071e3; }

/* ─── Responsive table cells ─── */
@media (max-width: 640px) {
    .data-table th, .data-table td { padding: 8px 8px; font-size: 12px; }
}