/* =========================================================
   Petrol Ofisi AKILLI İSTASYON SİSTEMİ - PROFESYONEL CSS
   ========================================================= */

/* === TEMA DEĞİŞKENLERİ === */
:root {
    /* Petrol Ofisi Marka Renkleri (petrolofisi.com.tr) */
    --po-red: #ed1d24;
    --po-red-dark: #c9191f;
    --po-red-light: #f68e92;
    --po-accent: #1a1d21;
    --po-accent-dark: #121416;

    /* Light Theme */
    --bg-primary: #f9f9fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #F4F4F4;
    --bg-hover: #EBEBEB;
    --bg-active: #e3e8ef;

    --text-primary: #000c19;
    --text-secondary: #495057;
    --text-muted: #a1a6b7;
    --text-light: #adb5bd;

    --border-color: #d9d9d9;
    --border-light: #EBEBEB;
    --border-dark: #ced4da;

    --shadow-sm: 0 1px 3px rgba(0,12,25,0.08);
    --shadow-md: 0 4px 12px rgba(0,12,25,0.1);
    --shadow-lg: 0 8px 25px rgba(0,12,25,0.12);
    --shadow-xl: 0 15px 40px rgba(0,12,25,0.15);

    /* Kart ve Input */
    --card-bg: #ffffff;
    --card-shadow: 0 4px 20px rgba(0,12,25,0.08);
    --input-bg: #ffffff;
    --navbar-bg: #ffffff;

    /* Durum Renkleri */
    --success: #28BF3C;
    --success-bg: #d1fae5;
    --danger: #db1430;
    --danger-bg: #fee2e2;
    --warning: #C4942C;
    --warning-bg: #fef3c7;
    --info: #17a2b8;
    --info-bg: #dbeafe;

    /* Geçiş */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 50rem;
}

/* === DARK THEME === */
[data-theme="dark"] {
    --bg-primary: #121416;
    --bg-secondary: #1a1d21;
    --bg-tertiary: #222528;
    --bg-hover: #2a2d31;
    --bg-active: #343740;

    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #a1a6b7;
    --text-light: #64748b;

    --border-color: #2a2d31;
    --border-light: #343740;
    --border-dark: #3f4247;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 25px rgba(0,0,0,0.5);
    --shadow-xl: 0 15px 40px rgba(0,0,0,0.6);

    /* Kart ve Input - Dark */
    --card-bg: #1a1d21;
    --card-shadow: 0 4px 20px rgba(0,0,0,0.3);
    --input-bg: #222528;
    --navbar-bg: #1a1d21;

    --success-bg: #064e3b;
    --danger-bg: #7f1d1d;
    --warning-bg: #78350f;
    --info-bg: #1e3a5f;
}

/* === RESET & BASE === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    transition: background-color var(--transition-normal), color var(--transition-normal);
    -webkit-font-smoothing: antialiased;
}

/* === NAVBAR === */
.navbar {
    background: var(--bg-secondary);
    height: 65px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all var(--transition-normal);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo-container a {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 38px;
    transition: transform var(--transition-fast);
}

.logo-img:hover {
    transform: scale(1.05);
}

.page-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--po-red);
    padding-left: 16px;
    border-left: 3px solid var(--po-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .page-title {
    color: var(--po-accent);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Tema Toggle */
.theme-toggle {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.theme-toggle:hover {
    background: var(--po-red);
    border-color: var(--po-red);
    color: white;
    transform: rotate(180deg);
}

/* Nav Butonları */
.nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

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

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

/* Geri Butonu - Profesyonel */
.back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: 2px solid var(--danger);
    color: var(--danger);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}
.back-btn:hover {
    background: var(--danger);
    color: white;
}

/* === CONTAINER === */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 24px;
}

/* === KARTLAR (Menü/Navigasyon) === */
.menu-grid .card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 28px;
    text-decoration: none;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    display: block;
    position: relative;
    overflow: hidden;
}

.menu-grid .card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--po-red);
    transform: scaleX(0);
    transition: transform var(--transition-normal);
}

.menu-grid .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--po-red);
}

.menu-grid .card:hover::before {
    transform: scaleX(1);
}

.menu-grid .card.blue-card::before { background: var(--po-red); transform: scaleX(1); }
.menu-grid .card.yellow-card::before { background: var(--po-accent); transform: scaleX(1); }

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.icon-box {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--po-red), var(--po-red-light));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
    box-shadow: 0 4px 15px rgba(237, 29, 36, 0.3);
}

.menu-grid .card-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.menu-grid .card-desc {
    font-size: 14px;
    color: var(--text-muted);
}

/* === FORM CARD === */
.form-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

/* === FORM ELEMANLARI === */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

input, select, textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all var(--transition-fast);
    outline: none;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--po-red);
    box-shadow: 0 0 0 3px rgba(237, 29, 36, 0.1);
}

input::placeholder, textarea::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #94a3b8;
}

textarea {
    resize: vertical;
    min-height: 100px;
}

/* === BUTONLAR === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--po-red), var(--po-red-dark));
    color: white;
    box-shadow: 0 4px 15px rgba(237, 29, 36, 0.3);
    width: 100%;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(237, 29, 36, 0.4);
}

.btn-success {
    background: linear-gradient(135deg, var(--success), #059669);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-success:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger), #dc2626);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.btn-warning {
    background: linear-gradient(135deg, var(--po-accent), var(--po-accent-dark));
    color: var(--po-red);
    box-shadow: 0 4px 15px rgba(255, 194, 14, 0.3);
}

/* === CHECKBOX SATIRI === */
.check-row {
    display: flex;
    align-items: center;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: 10px;
}

.check-row:hover {
    border-color: var(--po-red);
    background: var(--bg-hover);
}

.check-row.checked {
    border-color: var(--success);
    background: var(--success-bg);
}

.check-row input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-right: 14px;
    accent-color: var(--po-red);
    cursor: pointer;
}

.check-row span {
    font-weight: 600;
    color: var(--text-primary);
}

/* === SAYAÇ KUTUSU === */
.counter-box {
    background: linear-gradient(135deg, var(--po-red), var(--po-red-dark));
    border-radius: var(--radius-lg);
    padding: 30px;
    text-align: center;
    color: white;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.counter-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}

.counter-value {
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.counter-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 8px;
    opacity: 0.9;
}

/* === BÖLÜM BAŞLIĞI === */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
}

.section-header i {
    font-size: 20px;
    color: var(--po-red);
}

.section-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

[data-theme="dark"] .section-header i {
    color: var(--po-accent);
}

/* === FOTOĞRAF ALANI === */
.photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.photo-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    background: var(--bg-tertiary);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-muted);
}

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

.photo-btn i {
    font-size: 28px;
}

.photo-btn span {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

/* === SIDEBAR === */
.page-layout {
    display: flex;
    min-height: calc(100vh - 65px);
}

/* Sidebar panel - sayfa içi yan panel (sidebar.css'teki ana sidebar değil) */
.sidebar-panel {
    width: 320px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    padding: 24px;
    overflow-y: auto;
    flex-shrink: 0;
}

.sidebar-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--po-red);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--po-accent);
    display: flex;
    align-items: center;
    gap: 10px;
}

[data-theme="dark"] .sidebar-header {
    color: var(--po-accent);
}

/* Main content - sidebar.css'te de tanımlı, bu sadece ek stiller */
/* .main-content ve .main-wrapper sidebar.css'de tanımlı (çakışma önlendi) */

/* Log Item */
.log-item {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 12px;
    border-left: 4px solid var(--po-red);
    transition: all var(--transition-fast);
}

.log-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.log-user {
    font-weight: 700;
    color: var(--po-red);
    font-size: 13px;
}

[data-theme="dark"] .log-user {
    color: var(--po-accent);
}

.log-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.log-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
    line-height: 1.5;
}

/* === TABLO === */
.table-container {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.styled-table {
    width: 100%;
    border-collapse: collapse;
}

.styled-table th {
    background: var(--bg-tertiary);
    padding: 14px 18px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
}

.styled-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    font-size: 14px;
}

.styled-table tbody tr {
    transition: background var(--transition-fast);
}

.styled-table tbody tr:hover {
    background: var(--bg-hover);
}

.styled-table tbody tr:last-child td {
    border-bottom: none;
}

/* === BADGE === */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.badge-success {
    background: var(--success-bg);
    color: var(--success);
}

.badge-danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.badge-info {
    background: var(--info-bg);
    color: var(--info);
}

/* === MODAL === */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.modal-box {
    background: var(--bg-secondary);
    width: 90%;
    max-width: 420px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    animation: slideUp 0.3s ease;
}

.modal-header {
    background: linear-gradient(135deg, var(--po-red), var(--po-red-dark));
    color: white;
    padding: 20px 24px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-body {
    padding: 32px 24px;
    text-align: center;
}

.modal-icon {
    font-size: 56px;
    margin-bottom: 16px;
}

.modal-icon.success { color: var(--success); }
.modal-icon.danger { color: var(--danger); }
.modal-icon.warning { color: var(--warning); }

.modal-text {
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.5;
}

.modal-footer {
    padding: 16px 24px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 12px;
}

.modal-footer .btn {
    flex: 1;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* === STAT KARTLARI === */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid var(--border-color);
    text-align: center;
    transition: all var(--transition-fast);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-value {
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === SHIFT PANEL (Menü) === */
.shift-panel {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.shift-panel .greeting {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    text-align: center;
}

.shift-panel .greeting strong {
    color: var(--po-red);
}

[data-theme="dark"] .shift-panel .greeting strong {
    color: var(--po-accent);
}

.shift-btn {
    width: 100%;
    padding: 16px;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all var(--transition-fast);
}

.shift-btn.start {
    background: linear-gradient(135deg, var(--success), #059669);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.shift-btn.end {
    background: linear-gradient(135deg, var(--danger), #dc2626);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.shift-btn:hover {
    transform: translateY(-2px);
}

/* === VARDİYA KARTLARI === */
.shift-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.shift-card-header {
    background: linear-gradient(135deg, var(--po-red), var(--po-red-dark));
    color: white;
    padding: 14px 20px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shift-card-body {
    padding: 16px 20px;
}

.shift-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}

.shift-row:last-child {
    border-bottom: none;
}

.shift-time {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
}

.shift-name {
    font-weight: 700;
    color: var(--text-primary);
}

.shift-name.empty {
    color: var(--text-light);
    font-style: italic;
    font-weight: 400;
}

/* === LOGIN PAGE === */
body.login-page {
    background: #f9f9fa;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

.login-card {
    background: #ffffff;
    border: none;
    border-radius: 0.75rem;
    padding: 0;
    width: 100%;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 0.5rem 1rem rgba(0, 12, 25, 0.15);
    overflow: hidden;
}

.login-card::before {
    content: '';
    display: block;
    height: 5px;
    background: var(--po-red);
}

.login-card .logo {
    height: 44px;
    margin: 40px 0 12px;
}

.login-card h1 {
    color: var(--po-accent);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 32px;
    letter-spacing: 0.02em;
}

.login-card form {
    padding: 0 40px;
}

.login-card input {
    background: #f9f9fa;
    border: 1px solid #d9d9d9;
    margin-bottom: 16px;
    color: #000c19;
    border-radius: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-card input:focus {
    border-color: var(--po-red);
    outline: none;
    box-shadow: 0 0 0 3px rgba(237, 29, 36, 0.15);
    background: #ffffff;
}

.login-card input::placeholder {
    color: #a1a6b7;
}

.login-card .btn-login {
    width: 100%;
    padding: 0.625rem 1.25rem;
    background: var(--po-red);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 15px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    margin-top: 8px;
}

.login-card .btn-login:hover {
    background: var(--po-red-dark);
    box-shadow: 0 0.5rem 1rem rgba(237, 29, 36, 0.25);
}

.login-card .error {
    color: var(--danger);
    margin-top: 16px;
    padding: 0 40px;
    font-weight: 500;
    font-size: 13px;
}

.login-card .footer {
    margin-top: 32px;
    padding-bottom: 24px;
    color: #a1a6b7;
    font-size: 12px;
}

/* === EKİPMAN LİSTESİ === */
.equip-list {
    list-style: none;
}

.equip-item {
    background: var(--bg-secondary);
    padding: 20px;
    margin-bottom: 12px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.equip-item:hover {
    transform: translateX(6px);
    border-color: var(--po-red);
    box-shadow: var(--shadow-md);
}

.equip-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--po-red), var(--po-red-light));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 16px;
    flex-shrink: 0;
}

.equip-info {
    flex: 1;
    min-width: 0;
}

.equip-info h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.equip-info p {
    font-size: 13px;
    color: var(--text-muted);
}

.equip-arrow {
    color: var(--text-light);
    font-size: 14px;
}

/* === SCAN AREA === */
.scan-area {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    display: none;
}

.scan-area.active {
    display: block;
}

#reader {
    max-width: 350px;
    margin: 16px auto;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.camera-controls {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

.camera-btn {
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
}

.camera-btn.close { background: var(--danger); color: white; }
.camera-btn.switch { background: var(--info); color: white; }

/* === ARIZA KARTLARI === */
.fault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.fault-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.fault-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background: var(--bg-tertiary);
}

.fault-content {
    padding: 16px;
}

.fault-loc {
    font-weight: 700;
    color: var(--po-red);
    margin-bottom: 8px;
}

[data-theme="dark"] .fault-loc {
    color: var(--po-accent);
}

.fault-note {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.5;
}

.fault-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* === TOAST === */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--po-red);
    color: white;
    padding: 14px 28px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 14px;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* === ACCORDION PANEL === */
.accordion-section {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    flex-shrink: 0;
}

.fault-accordion {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
    margin-bottom: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fault-accordion:last-child {
    margin-bottom: 0;
}

.fault-accordion:hover {
    border-color: var(--po-red);
}

[data-theme="dark"] .fault-accordion:hover {
    border-color: var(--po-accent);
}

/* === GELİŞMİŞ ARIZA TAKİP KARTI === */
.po-fault-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    overflow: hidden;
    position: relative;
}

.po-fault-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--po-accent);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

[data-theme="dark"] .po-fault-card {
    background: var(--bg-secondary);
}

.po-fault-card .card-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.po-fault-card .card-header:hover {
    background: var(--bg-hover);
}

.po-fault-card .header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.po-fault-card .alert-icon-circle {
    width: 44px;
    height: 44px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.po-fault-card .header-text h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.po-fault-card .header-text p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.po-fault-card .header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.po-fault-card .count-badge {
    min-width: 26px;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.po-fault-card .count-badge.danger {
    background: var(--danger);
}

.po-fault-card .count-badge.success {
    background: var(--success);
}

.po-fault-card .toggle-arrow {
    font-size: 14px;
    color: var(--text-muted);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.po-fault-card.active .toggle-arrow {
    transform: rotate(180deg);
}

/* Fault Drawer */
.po-fault-card .fault-drawer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-tertiary);
}

.po-fault-card.active .fault-drawer {
    max-height: 400px;
    border-top: 1px solid var(--border-color);
}

.po-fault-card .fault-list-container {
    padding: 12px 16px;
}

.po-fault-card .fault-row {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    transition: all 0.2s ease;
}

.po-fault-card .fault-row:last-child {
    margin-bottom: 0;
}

.po-fault-card .fault-row:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.po-fault-card .fault-row.critical {
    background: #fff5f5;
    border-left: 4px solid var(--danger);
    border-color: #ffebeb;
}

[data-theme="dark"] .po-fault-card .fault-row.critical {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.po-fault-card .fault-row.warning {
    background: #fffbeb;
    border-left: 4px solid var(--warning);
    border-color: #fef3c7;
}

[data-theme="dark"] .po-fault-card .fault-row.warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.po-fault-card .fault-row.success {
    background: #f0fff4;
    border-left: 4px solid var(--success);
    border-color: #d1fae5;
}

[data-theme="dark"] .po-fault-card .fault-row.success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.po-fault-card .fault-row i {
    font-size: 18px;
    flex-shrink: 0;
}

.po-fault-card .fault-row.critical i {
    color: var(--danger);
}

.po-fault-card .fault-row.warning i {
    color: var(--warning);
}

.po-fault-card .fault-row.success i {
    color: var(--success);
}

.po-fault-card .row-info {
    flex: 1;
    min-width: 0;
}

.po-fault-card .row-info strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.po-fault-card .row-info small {
    font-size: 12px;
    color: var(--text-muted);
}

.po-fault-card .row-info .val {
    font-weight: 700;
}

.po-fault-card .row-info .val.danger {
    color: var(--danger);
}

.po-fault-card .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse-dot 2s infinite;
}

.po-fault-card .fault-row.critical .status-dot {
    background: var(--danger);
}

.po-fault-card .fault-row.warning .status-dot {
    background: var(--warning);
}

.po-fault-card .fault-row.success .status-dot {
    background: var(--success);
    animation: none;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* === IT MONITORING PAGE === */
.it-monitoring-page .main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.it-monitoring-page .welcome-banner {
    background: linear-gradient(135deg, var(--po-red) 0%, var(--po-red-dark) 100%);
    padding: 20px 40px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid var(--po-accent);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.it-monitoring-page .welcome-text h2 {
    font-size: 22px;
    font-weight: 800;
}

.it-monitoring-page .welcome-text p {
    font-size: 12px;
    opacity: 0.8;
}

.it-monitoring-page .kpi-quick {
    display: flex;
    gap: 30px;
}

.it-monitoring-page .kpi-item {
    text-align: center;
}

.it-monitoring-page .kpi-val {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--po-accent);
}

.it-monitoring-page .kpi-lab {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.9;
}

.it-monitoring-page .dashboard-container {
    flex: 1;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 380px;
    grid-template-rows: auto 1fr 1fr;
    gap: 20px;
    height: calc(100vh - 100px);
}

.it-monitoring-page .po-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.it-monitoring-page .po-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--po-accent);
}

.it-monitoring-page .card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 10px;
}

.it-monitoring-page .card-head h3 {
    font-size: 13px;
    font-weight: 800;
    color: var(--po-red);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .it-monitoring-page .card-head h3 {
    color: var(--po-accent);
}

.it-monitoring-page .data-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
}

.it-monitoring-page .data-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
    font-weight: 500;
}

.it-monitoring-page .data-val {
    font-weight: 800;
    color: var(--po-red);
}

[data-theme="dark"] .it-monitoring-page .data-val {
    color: var(--po-accent);
}

.it-monitoring-page .fault-panel {
    grid-column: 3;
    grid-row: 2;
    border-left: 5px solid var(--danger);
}

.it-monitoring-page .fault-item {
    padding: 10px;
    border-radius: var(--radius-sm);
    background: #fff5f5;
    border: 1px solid #ffebeb;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
}

[data-theme="dark"] .it-monitoring-page .fault-item {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.it-monitoring-page .fault-item strong {
    color: var(--danger);
    display: block;
}

.it-monitoring-page .wc-panel {
    grid-column: 3;
    grid-row: 3;
}

.it-monitoring-page .chart-wrap {
    flex: 1;
    min-height: 120px;
}

/* Gelişmiş Arıza Kartı - Grid Yerleşimi */
.it-monitoring-page .advanced-fault-section {
    grid-column: 1 / span 2;
    grid-row: 1;
}

.accordion-header {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.accordion-header:hover {
    background: var(--bg-hover);
}

.header-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-main i {
    font-size: 16px;
}

.header-main i.danger-icon { color: var(--danger); }
.header-main i.warning-icon { color: var(--warning); }
.header-main i.info-icon { color: var(--info); }

.header-main h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.header-action {
    display: flex;
    align-items: center;
    gap: 10px;
}

.accordion-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.accordion-badge.danger { background: var(--danger); }
.accordion-badge.warning { background: var(--warning); }
.accordion-badge.info { background: var(--info); }
.accordion-badge.success { background: var(--success); }

.accordion-arrow {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.fault-accordion.active .accordion-arrow {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.3s ease;
    background: var(--bg-tertiary);
}

.fault-accordion.active .accordion-content {
    max-height: 400px;
    overflow-y: auto;
}

.accordion-content-inner {
    padding: 0;
}

.fault-accordion.active .accordion-content-inner {
    padding: 12px;
    border-top: 1px solid var(--border-color);
}

/* Accordion İçindeki Öğeler */
.accordion-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    background: var(--bg-secondary);
    border-left: 3px solid var(--border-color);
    transition: all 0.2s ease;
}

.accordion-item:last-child {
    margin-bottom: 0;
}

.accordion-item:hover {
    transform: translateX(3px);
}

.accordion-item.danger { border-left-color: var(--danger); }
.accordion-item.warning { border-left-color: var(--warning); }
.accordion-item.info { border-left-color: var(--info); }
.accordion-item.success { border-left-color: var(--success); }

.item-info {
    flex: 1;
    min-width: 0;
}

.item-info strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.item-info span {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-time {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
    margin-left: 10px;
}

/* Accordion Boş Durum */
.accordion-empty {
    text-align: center;
    padding: 16px;
    color: var(--text-muted);
    font-size: 12px;
}

.accordion-empty i {
    font-size: 24px;
    margin-bottom: 8px;
    opacity: 0.4;
    display: block;
}

/* === YENİ ARIZA PANELİ STİLİ === */
.po-fault-accordion {
    background: #fff !important;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    margin-bottom: 15px;
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--po-accent);
}

[data-theme="dark"] .po-fault-accordion {
    background: var(--bg-secondary) !important;
}

.fault-header {
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s ease;
}

.fault-header:hover {
    background: var(--bg-hover);
}

.fault-drawer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: var(--bg-tertiary);
}

.po-fault-accordion.is-open .fault-drawer {
    max-height: 400px;
    padding: 10px;
}

.po-fault-accordion.is-open .fault-header i.fa-chevron-down {
    transform: rotate(180deg);
}

.fault-header i.fa-chevron-down {
    transition: transform 0.3s ease;
}

.fault-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: var(--bg-secondary);
    border-left: 3px solid var(--border-color);
}

.fault-item-row.critical {
    background: #fff5f5;
    border-left-color: var(--danger);
}

[data-theme="dark"] .fault-item-row.critical {
    background: rgba(239, 68, 68, 0.1);
}

.fault-item-row.warning {
    background: #fffbeb;
    border-left-color: var(--warning);
}

[data-theme="dark"] .fault-item-row.warning {
    background: rgba(245, 158, 11, 0.1);
}

.fault-item-row.success {
    background: #f0fff4;
    border-left-color: var(--success);
}

[data-theme="dark"] .fault-item-row.success {
    background: rgba(16, 185, 129, 0.1);
}

.fault-item-row i {
    font-size: 16px;
}

.fault-item-row.critical i { color: var(--danger); }
.fault-item-row.warning i { color: var(--warning); }
.fault-item-row.success i { color: var(--success); }

.fault-item-info {
    flex: 1;
}

.fault-item-info strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.fault-item-info small {
    font-size: 11px;
    color: var(--text-muted);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .navbar {
        padding: 0 16px;
        height: 58px;
    }

    .logo-img {
        height: 32px;
    }

    .page-title {
        display: none;
    }

    .nav-btn span {
        display: none;
    }

    .nav-btn {
        padding: 10px 12px;
    }

    .container {
        padding: 20px 16px;
    }

    .menu-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .card {
        padding: 20px;
    }

    .form-card {
        padding: 24px 20px;
    }

    .page-layout {
        flex-direction: column;
    }

    .sidebar-panel {
        width: 100%;
        max-height: 300px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        order: 2;
    }

    .main-content,
    .main-wrapper {
        margin-left: 0;
        order: 1;
    }

    .counter-value {
        font-size: 48px;
    }

    .photo-grid {
        grid-template-columns: 1fr;
    }

    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fault-grid {
        grid-template-columns: 1fr;
    }

    .modal-box {
        width: 95%;
        margin: 16px;
    }

    .theme-toggle {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .navbar {
        height: 54px;
    }

    .logo-img {
        height: 28px;
    }

    .stat-grid {
        grid-template-columns: 1fr;
    }

    .camera-controls {
        flex-direction: column;
    }

    .login-card {
        padding: 36px 24px;
    }
}

/* =========================================================
   SHARED HEADER BAR - Tüm sayfalarda ortak üst panel
   ========================================================= */
.shared-header {
    background: var(--card-bg, #fff);
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 3px solid var(--po-accent, #1a1d21);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 100;
}
[data-theme="dark"] .shared-header {
    background: var(--bg-secondary, #1e293b);
}
.shared-header .logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}
.shared-header .logo-area span {
    font-weight: 700;
    color: var(--po-red, #ed1d24);
    font-size: 16px;
}
[data-theme="dark"] .shared-header .logo-area span {
    color: var(--po-accent, #1a1d21);
}
.shared-header .header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.shared-header .clock {
    font-size: 22px;
    font-weight: 800;
    color: var(--po-red, #ed1d24);
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .shared-header .clock {
    color: var(--po-accent, #1a1d21);
}
.shared-header .hbtn {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--card-bg, #fff);
    color: var(--text-secondary, #4a5568);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.shared-header .hbtn:hover {
    background: var(--po-red, #ed1d24);
    color: #fff;
    border-color: var(--po-red, #ed1d24);
}

/* TOP ALERTS */
.shared-header .top-alerts {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
}
.shared-header .alert-badge-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-tertiary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    color: var(--text-secondary, #4a5568);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.shared-header .alert-badge-btn:hover {
    background: var(--bg-primary, #f0f4f8);
    border-color: var(--po-red, #ed1d24);
}
.shared-header .alert-badge-btn.danger {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.3);
    color: #ef4444;
}
.shared-header .alert-badge-btn.warning {
    background: rgba(245,158,11,0.1);
    border-color: rgba(245,158,11,0.3);
    color: #f59e0b;
}
.shared-header .alert-badge-btn.success {
    background: rgba(16,185,129,0.1);
    border-color: rgba(16,185,129,0.3);
    color: #10b981;
}
.shared-header .alert-badge-btn.info {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.3);
    color: #3b82f6;
}
.shared-header .alert-badge-btn i { font-size: 14px; }
.shared-header .alert-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shared-header .alert-badge-btn.danger .alert-count { background: #ef4444; color: white; }
.shared-header .alert-badge-btn.warning .alert-count { background: #f59e0b; color: white; }
.shared-header .alert-badge-btn.success .alert-count { background: #10b981; color: white; }
.shared-header .alert-badge-btn.info .alert-count { background: #3b82f6; color: white; }

/* Alert Dropdown */
.shared-header .alert-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-height: 400px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 1000;
    display: none;
    overflow: hidden;
}
[data-theme="dark"] .shared-header .alert-dropdown {
    background: var(--bg-secondary, #1e293b);
}
.shared-header .alert-dropdown.active { display: block; animation: sharedHeaderFadeIn 0.2s ease; }
@keyframes sharedHeaderFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.shared-header .dropdown-header {
    padding: 14px 16px;
    background: var(--bg-tertiary, #f8fafc);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #1a202c);
    display: flex;
    align-items: center;
    gap: 8px;
}
.shared-header .dropdown-header i { font-size: 16px; }
.shared-header .dropdown-header.danger i { color: #ef4444; }
.shared-header .dropdown-header.warning i { color: #f59e0b; }
.shared-header .dropdown-header.info i { color: #3b82f6; }
.shared-header .dropdown-body {
    max-height: 300px;
    overflow-y: auto;
}
.shared-header .dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    transition: background 0.2s;
}
.shared-header .dropdown-item:last-child { border-bottom: none; }
.shared-header .dropdown-item:hover { background: var(--bg-tertiary, #f8fafc); }
.shared-header .dropdown-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.shared-header .dropdown-icon.danger { background: rgba(239,68,68,0.15); color: #ef4444; }
.shared-header .dropdown-icon.warning { background: rgba(245,158,11,0.15); color: #f59e0b; }
.shared-header .dropdown-icon.info { background: rgba(59,130,246,0.15); color: #3b82f6; }
.shared-header .dropdown-icon.success { background: rgba(16,185,129,0.15); color: #10b981; }
.shared-header .dropdown-content { flex: 1; min-width: 0; }
.shared-header .dropdown-title { font-size: 13px; font-weight: 600; color: var(--text-primary, #1a202c); }
.shared-header .dropdown-desc { font-size: 11px; color: var(--text-muted, #718096); margin-top: 2px; }
.shared-header .dropdown-time { font-size: 10px; color: var(--text-muted, #718096); margin-top: 4px; }
.shared-header .dropdown-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-muted, #718096);
}
.shared-header .dropdown-empty i { font-size: 28px; margin-bottom: 8px; opacity: 0.4; display: block; }
.shared-header .dropdown-empty p { font-size: 12px; }

@media (max-width: 768px) {
    .shared-header { padding: 0 12px; }
    .shared-header .top-alerts { gap: 4px; margin-right: 8px; }
    .shared-header .alert-badge-btn { padding: 6px 10px; font-size: 11px; }
    .shared-header .alert-badge-btn span:not(.alert-count) { display: none; }
    .shared-header .alert-dropdown { width: 280px; right: -50px; }
    .shared-header .logo-area span { font-size: 13px; }
    .shared-header .clock { font-size: 18px; }
}

/* === 3D VIEWER EQUIPMENT TOOLTIP (Tandem Native Tarzı) === */
#equipmentTooltip {
    position: absolute;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    min-width: 180px;
    max-width: 280px;
    background: rgba(50, 50, 50, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    font-family: 'Inter', -apple-system, sans-serif;
    color: #e0e0e0;
}

#equipmentTooltip.visible {
    opacity: 1;
}

/* Başlık: Stream adı + model */
#equipmentTooltip .eq-tooltip-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

#equipmentTooltip .eq-tooltip-title {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}

#equipmentTooltip .eq-tooltip-subtitle {
    font-size: 11px;
    color: #aaaaaa;
    margin-top: 3px;
}

/* Parametre satırları */
#equipmentTooltip .eq-tooltip-params {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

#equipmentTooltip .eq-tooltip-param {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

#equipmentTooltip .eq-tooltip-param-label {
    font-size: 11px;
    color: #aaaaaa;
}

#equipmentTooltip .eq-tooltip-param-value {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

#equipmentTooltip .eq-tooltip-param-value.warning {
    color: #fbbf24;
}

#equipmentTooltip .eq-tooltip-param-value.critical {
    color: #f87171;
}

/* Son okuma zamanı */
#equipmentTooltip .eq-tooltip-footer {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 10px;
    color: #888888;
    text-align: center;
}

/* === JENERATOR KART === */
.jenerator-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.jenerator-item {
    background: var(--bg-tertiary, #f8fafc);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    border: 1px solid var(--border-light, #e2e8f0);
}
[data-theme="dark"] .jenerator-item {
    background: rgba(255,255,255,0.04);
}
.jenerator-icon {
    font-size: 18px;
    margin-bottom: 6px;
}
.jenerator-icon.battery { color: #10b981; }
.jenerator-icon.fuel { color: #f59e0b; }
.jenerator-icon.power { color: #3b82f6; }
.jenerator-icon.clock { color: #8b5cf6; }
.jenerator-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
}
.jenerator-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    font-weight: 600;
}
.jenerator-phases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light, #e2e8f0);
}
.jenerator-phase {
    background: var(--bg-tertiary, #f8fafc);
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid var(--border-light, #e2e8f0);
}
[data-theme="dark"] .jenerator-phase {
    background: rgba(255,255,255,0.04);
}
.jenerator-phase .phase-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--po-red, #ed1d24);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
[data-theme="dark"] .jenerator-phase .phase-label {
    color: var(--po-accent, #1a1d21);
}
.jenerator-phase .phase-val {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 2px;
}
.jenerator-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
}
.jenerator-status.offline { color: var(--text-muted); }
.jenerator-status.running { color: var(--success, #10b981); }

/* === KLİMA DETAY KART === */
.klima-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.klima-unit {
    background: var(--bg-tertiary, #f8fafc);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid var(--border-light, #e2e8f0);
}
[data-theme="dark"] .klima-unit {
    background: rgba(255,255,255,0.04);
}
.klima-unit-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--po-red, #ed1d24);
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
[data-theme="dark"] .klima-unit-name {
    color: var(--po-accent, #1a1d21);
}
.klima-temps {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.klima-temp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}
.klima-temp-row .temp-label {
    color: var(--text-muted);
    font-weight: 500;
}
.klima-temp-row .temp-val {
    font-weight: 800;
    color: var(--text-primary);
}
.klima-filter {
    font-size: 11px;
    font-weight: 700;
    margin-top: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    text-align: center;
}
.klima-filter.clean {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success, #10b981);
}
.klima-filter.dirty {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger, #ef4444);
}

/* === SU ALT SAYAÇ === */
.water-sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 6px;
}
.water-sub-item {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    padding: 3px 6px;
    background: var(--bg-tertiary, #f8fafc);
    border-radius: 4px;
}
[data-theme="dark"] .water-sub-item {
    background: rgba(255,255,255,0.04);
}
.water-sub-item .wsub-val {
    font-weight: 700;
    color: var(--text-primary);
}

/* === YAKIT POMPALARI KART === */
.pump-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.pump-item {
    background: var(--bg-tertiary, #f8fafc);
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid var(--border-light, #e2e8f0);
    position: relative;
    transition: all 0.2s;
}
[data-theme="dark"] .pump-item {
    background: rgba(255,255,255,0.04);
}
.pump-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.pump-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pump-temp {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}
.pump-temp.normal { color: var(--success, #10b981); }
.pump-temp.warm { color: var(--warning, #f59e0b); }
.pump-temp.hot { color: var(--danger, #ef4444); }
.pump-status {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
}
.pump-status.online {
    background: rgba(16,185,129,0.15);
    color: var(--success, #10b981);
}
.pump-status.offline {
    background: rgba(239,68,68,0.15);
    color: var(--danger, #ef4444);
}
@media (max-width: 1200px) {
    .pump-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .pump-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .pump-item { padding: 8px 6px; }
    .pump-temp { font-size: 14px; }
}

/* === BASINÇ GÖSTERGELERİ KART === */
.pressure-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.pressure-item {
    background: var(--bg-tertiary, #f8fafc);
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
    border: 1px solid var(--border-light, #e2e8f0);
}
[data-theme="dark"] .pressure-item {
    background: rgba(255,255,255,0.04);
}
.pressure-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.pressure-val {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}
.pressure-val.ok { color: var(--success, #10b981); }
.pressure-val.warn { color: var(--warning, #f59e0b); }
.pressure-val.danger { color: var(--danger, #ef4444); }
.pressure-unit {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}
@media (max-width: 768px) {
    .pressure-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .pressure-val { font-size: 18px; }
}

/* === DEPO & ARAÇ YIKAMA KART === */
.depot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.depot-item {
    background: var(--bg-tertiary, #f8fafc);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    border: 1px solid var(--border-light, #e2e8f0);
}
[data-theme="dark"] .depot-item {
    background: rgba(255,255,255,0.04);
}
.depot-icon {
    font-size: 24px;
    margin-bottom: 8px;
}
.depot-icon.fuel { color: var(--warning, #f59e0b); }
.depot-icon.wash { color: #3b82f6; }
.depot-icon.temp { color: var(--danger, #ef4444); }
.depot-val {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}
.depot-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 600;
}
.depot-sub {
    font-size: 10px;
    color: var(--text-light);
    margin-top: 2px;
}
@media (max-width: 768px) {
    .depot-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .depot-val { font-size: 22px; }
}

/* =====================================================
   DASHBOARD ORTAK BİLEŞENLER
   (main_dashboard2 ve diğer dashboard sayfaları için)
   ===================================================== */

/* Dashboard Card */
.pmwsi-main .card {
    background: var(--bg-secondary, #fff);
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    padding: 0;
}
[data-theme="dark"] .pmwsi-main .card {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-color, #334155);
}
.pmwsi-main .card::before { display: none; }
.pmwsi-main .card:hover { transform: none; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.card-head {
    padding: 14px 18px;
    background: var(--bg-tertiary, #f8fafc);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
[data-theme="dark"] .card-head {
    background: rgba(255,255,255,0.03);
    border-color: var(--border-color, #334155);
}
.pmwsi-main .card-title {
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}
.pmwsi-main .card-title i {
    color: var(--po-red, #ed1d24);
    font-size: 16px;
}
[data-theme="dark"] .pmwsi-main .card-title i {
    color: var(--po-accent, #1a1d21);
}
.card-body { padding: 16px; }
.live-dot {
    width: 8px; height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pmwsiPulse 1.5s infinite;
}

/* KPI Boxes */
.kpi {
    background: var(--bg-secondary, #fff);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .kpi {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border-color, #334155);
}
.kpi::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.kpi.blue::before { background: var(--po-red, #ed1d24); }
.kpi.green::before { background: #10b981; }
.kpi.orange::before { background: #f59e0b; }
.kpi.red::before { background: #ef4444; }
.kpi-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    flex-shrink: 0;
}
.kpi.blue .kpi-icon { background: rgba(237,29,36,0.1); color: var(--po-red, #ed1d24); }
.kpi.green .kpi-icon { background: rgba(16,185,129,0.1); color: #10b981; }
.kpi.orange .kpi-icon { background: rgba(245,158,11,0.1); color: #f59e0b; }
.kpi.red .kpi-icon { background: rgba(239,68,68,0.1); color: #ef4444; }
.kpi-info { flex: 1; }
.kpi-val { font-size: 26px; font-weight: 800; line-height: 1; }
.kpi-label { font-size: 12px; color: var(--text-muted, #718096); margin-top: 4px; font-weight: 500; }

/* WC Components */
.wc-item {
    background: var(--bg-tertiary, #f8fafc);
    border-radius: 10px;
    padding: 14px 12px;
    text-align: center;
    border: 1px solid var(--border-color, #e2e8f0);
}
[data-theme="dark"] .wc-item {
    background: rgba(255,255,255,0.03);
    border-color: var(--border-color, #334155);
}
.wc-icon { font-size: 22px; margin-bottom: 8px; }
.wc-icon.bay { color: #3b82f6; }
.wc-icon.bayan { color: #ec4899; }
.wc-count { font-size: 26px; font-weight: 800; }
.wc-count.ok { color: #10b981; }
.wc-count.warn { color: #f59e0b; }
.wc-count.danger { color: #ef4444; }
.wc-label { font-size: 11px; color: var(--text-muted, #718096); font-weight: 600; margin-top: 4px; }
.wc-stats {
    display: flex;
    justify-content: space-around;
    padding: 12px;
    background: var(--bg-tertiary, #f8fafc);
    border-radius: 10px;
    margin-top: 12px;
}
[data-theme="dark"] .wc-stats {
    background: rgba(255,255,255,0.03);
}
.wc-stat { text-align: center; }
.wc-stat-val { font-size: 18px; font-weight: 700; }
.wc-stat-label { font-size: 10px; color: var(--text-muted, #718096); margin-top: 2px; }

/* Chart */
.chart-wrap { height: 140px; position: relative; margin-top: 12px; }

/* Energy Grid */
.energy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.energy-item {
    background: var(--bg-tertiary, #f8fafc);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
}
[data-theme="dark"] .energy-item {
    background: rgba(255,255,255,0.03);
    border-color: var(--border-color, #334155);
}
.energy-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    flex-shrink: 0;
}
.energy-icon.elec { background: rgba(245,158,11,0.15); color: #f59e0b; }
.energy-icon.water { background: rgba(59,130,246,0.15); color: #3b82f6; }
.energy-icon.solar { background: rgba(16,185,129,0.15); color: #10b981; }
.energy-info { flex: 1; min-width: 0; }
.energy-val { font-size: 18px; font-weight: 700; }
.energy-label { font-size: 11px; color: var(--text-muted, #718096); }
.pmwsi-main .energy-grid .energy-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* =====================================================
   PMWSI CANLI VERİ PANELİ (main_dashboard2.html)
   ===================================================== */

/* Header */
.pmwsi-header {
    background: var(--card-bg, #fff);
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 3px solid var(--po-accent, #1a1d21);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 100;
}
[data-theme="dark"] .pmwsi-header {
    background: var(--card-bg, #1e293b);
}
.pmwsi-logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pmwsi-logo-area > span:first-child {
    font-weight: 700;
    color: var(--po-red, #ed1d24);
    font-size: 16px;
}
[data-theme="dark"] .pmwsi-logo-area > span:first-child {
    color: var(--po-accent, #1a1d21);
}
.pmwsi-badge {
    background: linear-gradient(135deg, #ed1d24, #f68e92);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.pmwsi-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pmwsi-live-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: 20px;
}
.pmwsi-live-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pmwsiPulse 1.5s infinite;
}
@keyframes pmwsiPulse { 50% { opacity: 0.4; } }
.pmwsi-live-text {
    font-size: 11px;
    font-weight: 700;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pmwsi-clock {
    font-size: 22px;
    font-weight: 800;
    color: var(--po-red, #ed1d24);
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .pmwsi-clock {
    color: var(--po-accent, #1a1d21);
}
.pmwsi-hbtn {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--card-bg, #fff);
    color: var(--text-secondary, #4a5568);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.pmwsi-hbtn:hover {
    background: var(--po-red, #ed1d24);
    color: #fff;
    border-color: var(--po-red, #ed1d24);
}
[data-theme="dark"] .pmwsi-hbtn {
    background: var(--card-bg, #1e293b);
    border-color: var(--border-color, #334155);
    color: var(--text-secondary, #cbd5e1);
}

/* Main Grid - 2 columns for 4 cards + full width KPI row */
.pmwsi-main {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
    height: calc(100vh - 63px);
    grid-template-rows: auto 1fr 1fr;
    overflow: hidden;
}

/* KPI Row */
.pmwsi-kpi-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* WC Grid for 2 items (Bay + Bayan) */
.pmwsi-wc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

/* Responsive - Tablet */
@media (max-width: 1200px) {
    .pmwsi-main {
        grid-template-columns: repeat(2, 1fr);
        height: auto;
        overflow: auto;
    }
    .pmwsi-kpi-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .pmwsi-main {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 12px;
        height: auto;
        overflow: auto;
    }
    .pmwsi-kpi-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .pmwsi-header {
        height: 56px;
        padding: 0 12px;
    }
    .pmwsi-logo-area > span:first-child {
        font-size: 14px;
    }
    .pmwsi-clock {
        font-size: 18px;
    }
    .pmwsi-hbtn {
        padding: 8px 12px;
        font-size: 12px;
    }
    .pmwsi-hbtn span {
        display: none;
    }
    .pmwsi-badge {
        display: none;
    }
    .pmwsi-live-text {
        display: none;
    }
    .pmwsi-wc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pmwsi-main .energy-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .pmwsi-kpi-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ORTAK SAYFA BİLEŞENLERİ (Shared Utilities)
   ========================================================= */

/* Loading Overlay */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.loading-overlay.show { display: flex; }
.loading-spinner {
    background: var(--card-bg);
    padding: 40px 60px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
}
.spinner {
    width: 50px; height: 50px;
    border: 4px solid var(--border-color);
    border-top-color: var(--po-red);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 15px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-spinner p {
    color: var(--text-primary);
    font-weight: 600;
    margin: 0;
}

/* Pull to Refresh Indicator */
.pull-indicator {
    position: fixed;
    top: 0; left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: var(--po-red);
    color: white;
    padding: 10px 20px;
    border-radius: 0 0 12px 12px;
    font-size: 13px;
    font-weight: 600;
    z-index: 9998;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pull-indicator.visible { transform: translateX(-50%) translateY(0); }
.pull-indicator i { animation: spin 1s linear infinite; }

/* =========================================================
   TOAST / SNACKBAR BİLDİRİM SİSTEMİ
   ========================================================= */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 10px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #1a202c);
    pointer-events: auto;
    transform: translateX(120%);
    animation: toastIn 0.35s ease forwards;
    max-width: 380px;
    min-width: 260px;
}
[data-theme="dark"] .toast {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.toast.removing { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn { to { transform: translateX(0); } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }
.toast-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.toast.success .toast-icon { background: rgba(16,185,129,0.12); color: #10b981; }
.toast.error .toast-icon { background: rgba(239,68,68,0.12); color: #ef4444; }
.toast.warning .toast-icon { background: rgba(245,158,11,0.12); color: #f59e0b; }
.toast.info .toast-icon { background: rgba(59,130,246,0.12); color: #3b82f6; }
.toast-body { flex: 1; line-height: 1.4; }
.toast-close {
    background: none;
    border: none;
    color: var(--text-muted, #718096);
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.toast-close:hover { opacity: 1; }
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 10px 10px;
    animation: toastProgress linear forwards;
}
.toast.success .toast-progress { background: #10b981; }
.toast.error .toast-progress { background: #ef4444; }
.toast.warning .toast-progress { background: #f59e0b; }
.toast.info .toast-progress { background: #3b82f6; }
@keyframes toastProgress { from { width: 100%; } to { width: 0%; } }

@media (max-width: 480px) {
    .toast-container { top: 10px; right: 10px; left: 10px; }
    .toast { max-width: 100%; min-width: 0; }
}

/* =========================================================
   SKELETON LOADER
   ========================================================= */
.skeleton {
    background: var(--bg-tertiary, #f8fafc);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .skeleton { background: #273449; }
.skeleton::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: skeletonShimmer 1.5s infinite;
}
[data-theme="dark"] .skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}
@keyframes skeletonShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.sm { height: 10px; width: 60%; }
.skeleton-text.lg { height: 28px; width: 40%; }
.skeleton-circle { border-radius: 50%; }
.skeleton-card {
    padding: 18px 20px;
    border-radius: 12px;
    border-top: 4px solid var(--border-color, #e2e8f0);
    background: var(--card-bg, #fff);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="dark"] .skeleton-card { background: #1e293b; border-color: #334155; }
.skeleton-row { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.skeleton-row:last-child { margin-bottom: 0; }