/* =========================================================
   ERP - Yhteiset ja Mobiilioptimoidut Tyylit & Teemat
   ========================================================= */

/* OLETUSTEEMA (SININEN) */
:root { 
    --primary: #3498db; 
    --primary-hover: #2980b9; 
    --secondary: #2c3e50; 
    --bg-light: #f4f7f6; 
    --text-dark: #333; 
    --text-gray: #7f8c8d; 
}

/* VAIHTOEHTOISET TEEMAT */
body.theme-red { --primary: #e74c3c; --primary-hover: #c0392b; }
body.theme-green { --primary: #27ae60; --primary-hover: #219653; }
body.theme-purple { --primary: #9b59b6; --primary-hover: #8e44ad; }
body.theme-dark { --primary: #34495e; --primary-hover: #2c3e50; --secondary: #1a252f; --bg-light: #e2e8ea; }

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

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: var(--bg-light); 
    color: var(--text-dark); 
    margin: 0; padding: 20px; 
}

/* HEADER (YLÄPALKKI) */
.header-nav { 
    display: flex; justify-content: space-between; align-items: center; 
    background: var(--secondary); padding: 12px 20px; border-radius: 8px; 
    margin-bottom: 20px; max-width: 1400px; margin: 0 auto 20px auto; 
    color: white; box-shadow: 0 4px 10px rgba(0,0,0,0.1); flex-wrap: wrap; gap: 15px; 
}
.header-logo { margin: 0; font-size: 24px; color: var(--primary); text-decoration: none; font-weight: bold; white-space: nowrap; }
.nav-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search-form { display: flex; margin-right: 10px; }
.search-input { padding: 8px 12px; border: none; border-radius: 4px 0 0 4px; outline: none; width: 160px; font-size: 13px; }
.search-btn { padding: 8px 15px; background: var(--primary); border: none; color: white; font-weight: bold; border-radius: 0 4px 4px 0; cursor: pointer; transition: 0.3s;}
.search-btn:hover { background: var(--primary-hover); }

.nav-btn { color: white; text-decoration: none; font-weight: bold; background: rgba(255,255,255,0.1); padding: 8px 12px; border-radius: 4px; font-size: 13px; transition: 0.3s; white-space: nowrap; }
.nav-btn:hover { background: var(--primary); }
.nav-btn.active { background: var(--primary); }

/* BOXIT JA ASETTELU */
.main-wrapper { max-width: 1400px; margin: 0 auto; }
.container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; max-width: 1400px; margin: 0 auto; }
.full-width { grid-column: span 2; }
.box { background: white; padding: 25px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow-x: auto; }
.box h2 { color: var(--secondary); border-bottom: 2px solid #ecf0f1; padding-bottom: 10px; margin-top: 0; font-size: 24px; }
.box h3 { margin-top: 0; border-bottom: 2px solid #eee; padding-bottom: 10px; color: var(--secondary); font-size: 18px;}

/* LOMAKKEET */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-group { display: flex; flex-direction: column; margin-bottom: 15px; }
.form-group.full-width { grid-column: span 2; }
.form-group label { font-weight: bold; font-size: 13px; margin-bottom: 5px; color: #555; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 14px; transition: 0.3s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 5px var(--primary); }

/* NAPIT */
.btn-save { background-color: var(--primary); color: white; border: none; padding: 15px; border-radius: 6px; font-weight: bold; font-size: 16px; cursor: pointer; width: 100%; transition: 0.3s; margin-top: 20px; }
.btn-save:hover { background-color: var(--primary-hover); transform: translateY(-2px); }
.action-btn { padding: 15px; text-align: center; color: white; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--primary);}
.action-btn:hover { background: var(--primary-hover); transform: translateY(-2px); }

/* TAULUKOT & TILASTOT */
.quick-actions, .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; max-width: 1400px; margin: 0 auto; }
.stat-card { background: white; padding: 20px; border-radius: 8px; text-align: center; border: 1px solid #eee; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.stat-card h4 { margin: 0 0 10px 0; color: var(--text-gray); font-size: 12px; text-transform: uppercase; font-weight: bold; }
.stat-card .num { font-size: 28px; font-weight: bold; margin: 0; color: var(--primary); }
.data-table, .user-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 500px; }
.data-table th, .data-table td, .user-table th, .user-table td { padding: 12px; border-bottom: 1px solid #eee; text-align: left; }
.data-table th, .user-table th { color: var(--text-gray); font-weight: bold; text-transform: uppercase; font-size: 12px; background: #f8f9fa; }
.data-table tr:hover, .user-table tr:hover { background-color: #f9f9f9; }

/* BADGET */
.status-badge, .badge { padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; color: white; text-transform: uppercase; display: inline-block; white-space: nowrap; }
.status-avoin, .badge-orange { background: #f39c12; } 
.status-työn_alla, .badge-blue { background: #3498db; } 
.status-valmis, .badge-green { background: #27ae60; } 
.status-peruutettu, .badge-red { background: #e74c3c; }

/* ILMOITUKSET */
.alert { padding: 15px; border-radius: 8px; font-weight: bold; margin-bottom: 20px; text-align: center; }
.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.notification-area { background: #fff3cd; border-left: 5px solid #ffc107; padding: 15px; margin-bottom: 20px; border-radius: 4px; max-width: 1400px; margin: 0 auto 20px auto; }
.notif-item { border-bottom: 1px solid rgba(0,0,0,0.05); padding: 10px 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.notif-item:last-child { border-bottom: none; }
.alert-item { display: flex; justify-content: space-between; padding: 10px; background: #fff5f5; border-left: 4px solid #e74c3c; margin-bottom: 5px; }

/* MOBIILI */
@media (max-width: 992px) {
    .container { grid-template-columns: 1fr; }
    .full-width { grid-column: span 1; }
}
@media (max-width: 768px) {
    body { padding: 10px; }
    .header-nav { flex-direction: column; align-items: stretch; text-align: center; padding: 15px; }
    .header-logo { margin-bottom: 10px; }
    .nav-right { justify-content: center; width: 100%; }
    .search-form { width: 100%; justify-content: center; margin-right: 0; margin-bottom: 10px; }
    .form-grid { grid-template-columns: 1fr; gap: 10px; }
    .form-group.full-width { grid-column: span 1; }
    .notif-item { flex-direction: column; align-items: flex-start; }
}