/* ========================================================
   Synchrove — Windows Classic Overrides for Tailwind
   ======================================================== */

/* --- Window Chrome --- */
.win-window {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
}

/* Title bar buttons */
.win-title-btn {
    width: 20px;
    height: 18px;
    background: #c0c0c0;
    box-shadow: inset -1px -1px #404040, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #000;
    cursor: default;
    font-weight: 900;
    line-height: 1;
}

/* --- Menu Items --- */
.win-menu-item {
    padding: 3px 12px;
    text-decoration: none;
    color: #000;
    font-size: 13px;
    border: 1px solid transparent;
    transition: background .12s;
    cursor: pointer;
    background: none;
    font-family: inherit;
}

.win-menu-item:hover {
    background: #0a246a;
    color: #fff;
}

.win-menu-active {
    box-shadow: inset 1px 1px #404040, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #dfdfdf;
    background: #dfdfdf;
}

/* --- Sidebar --- */
.win-sidebar-link {
    display: block;
    padding: 3px 6px;
    text-decoration: none;
    color: #000;
    font-size: 12px;
    transition: background .1s;
}

.win-sidebar-link:hover {
    background: #0a246a;
    color: #fff;
}

/* --- Group Box --- */
.win-group {
    border: 2px groove #c0c0c0;
    padding: 8px;
    margin-bottom: 8px;
    background: #c0c0c0;
}

.win-group-title {
    font-weight: 700;
    font-size: 12px;
    color: #000080;
    margin-bottom: 6px;
}

/* --- 3D Buttons --- */
.win-btn {
    padding: 4px 18px;
    background: #c0c0c0;
    border: none;
    box-shadow: inset -1px -1px #404040, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    color: #000;
    transition: box-shadow .08s;
}

.win-btn:active {
    box-shadow: inset 1px 1px #404040, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #dfdfdf;
}

.win-btn:hover {
    filter: brightness(1.05);
}

.win-btn-primary {
    background: #000080;
    color: #fff;
    box-shadow: inset -1px -1px #000033, inset 1px 1px #3366cc, inset -2px -2px #000066, inset 2px 2px #6699ff;
    transition: background 0.1s, box-shadow 0.1s;
}

.win-btn-primary:active {
    box-shadow: inset 1px 1px #000033, inset -1px -1px #3366cc;
}

.win-btn-primary:hover {
    background: #0000a0;
}

/* --- Form Inputs --- */
.win-input,
.win-textarea {
    width: 100%;
    padding: 3px 5px;
    border: none;
    box-shadow: inset 1px 1px #404040, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #dfdfdf;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color 0.1s;
}

.win-textarea {
    resize: vertical;
    min-height: 90px;
}

.win-input:focus,
.win-textarea:focus {
    outline: 1px dotted #000080;
}

/* --- Status Bar Cell --- */
.win-status-cell {
    box-shadow: inset 1px 1px #404040, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #dfdfdf;
    padding: 0 8px;
    font-size: 11px;
}

/* --- Tags --- */
.win-tag {
    display: inline-block;
    padding: 1px 6px;
    margin: 1px;
    font-size: 10px;
    background: #dfdfdf;
    box-shadow: inset -1px -1px #404040, inset 1px 1px #fff;
    color: #000;
}

/* --- Panel / Card --- */
.win-panel {
    border: 2px groove #c0c0c0;
    padding: 14px;
    margin-bottom: 14px;
    background: #c0c0c0;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.win-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.win-panel-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
    color: #000080;
}

/* --- Blog Card --- */
.win-blog-card {
    border: 2px groove #c0c0c0;
    background: #c0c0c0;
    padding: 12px;
    margin-bottom: 12px;
    transition: background .15s, transform 0.15s;
}

.win-blog-card:hover {
    background: #d4d4d4;
    transform: scale(1.01);
}

.win-blog-card h3 {
    color: #000080;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.win-blog-card .meta {
    font-size: 11px;
    color: #808080;
    margin-bottom: 6px;
}

.win-blog-card p {
    font-size: 13px;
    line-height: 1.5;
}

/* --- Validation --- */
.field-validation-error,
.win-validation-error {
    color: #cc0000;
    font-size: 12px;
    margin-top: 1px;
    display: block;
}

.validation-summary-errors ul {
    margin: 4px 0;
    padding-left: 18px;
    color: #cc0000;
    font-size: 12px;
}

/* --- Alerts --- */
.win-alert {
    padding: 8px 12px;
    margin-bottom: 12px;
    border: 2px groove #c0c0c0;
    font-size: 13px;
}

.win-alert-success {
    background: #d4edda;
    color: #155724;
}

.win-alert-error {
    background: #f8d7da;
    color: #721c24;
}

/* --- Divider --- */
.win-divider {
    height: 2px;
    background: #808080;
    border: none;
    margin: 16px 0;
    box-shadow: 0 1px 0 #fff;
}

/* --- Dialog (hidden by default) --- */
.win-dialog-hidden {
    display: none;
}

.win-dialog-visible {
    display: block;
}

/* --- Page Transitions (144fps feel) --- */
.page-container {
    opacity: 1;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.page-loading {
    opacity: 0;
    transform: translateY(4px);
}

/* --- Tech Context Sidebar Background --- */
.win-sidebar-bg {
    position: relative;
    background: linear-gradient(135deg, #0a192f 0%, #0d1b2a 100%);
    overflow: hidden;
}

.win-sidebar-bg::before {
    content: "function init() { growth = chart.data; branding.sync(); }\n$ npm run build --prod\nSELECT * FROM Leads WHERE Intrest = 'Cloud';\n<div class='marketing-node'>Growth</div>\n// Syncing branding assets...\nwhile(branding) { evolve(); }\nMarketing ROI: +240%\n[SYSTEM] Authorized Access Only";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    font-family: 'Courier New', monospace;
    font-size: 8px;
    line-height: 1.4;
    color: rgba(64, 224, 208, 0.04);
    pointer-events: none;
    white-space: pre;
    transform: rotate(-12deg) translate(-10%, -10%);
    mask-image: linear-gradient(to bottom, black, transparent);
}

.win-sidebar-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(10, 25, 47, 0.6) 100%);
    backdrop-filter: blur(2px);
    pointer-events: none;
}

/* --- Professional Admin Dashboard --- */
.win-dashboard-nav {
    border-right: 2px groove #c0c0c0;
    background: #dfdfdf;
}

.win-stat-card {
    background: #fff;
    box-shadow: inset 1px 1px #404040, inset -1px -1px #fff;
    padding: 12px;
    border: 1px solid #808080;
}

.win-stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #000080;
}

.win-table-container {
    box-shadow: inset 1px 1px #808080, inset -1px -1px #fff;
    background: #fff;
    border: 1px solid #404040;
}

.tint-dashboard {
    border-color: #000080 !important;
}

/* --- Animations --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fade-in {
    animation: fadeIn 0.15s ease-out;
}

/* --- Responsive & Mobile Menu Overrides --- */
@media (max-width: 768px) {
    .win-menu-item {
        padding: 3px 8px;
        font-size: 12px;
    }
}