/* ============================================================
   Edscha shared theme
   ------------------------------------------------------------
   Single source of truth for the site look & feel, extracted
   from producttracker.php / index.php / sidenav.php so every
   page shares the same design language (light theme, white
   cards, soft shadows, rounded pills, Edscha green accent).

   Include AFTER login_header.css, e.g.:
     <link rel="stylesheet" href="login_header.css">
     <link rel="stylesheet" href="theme.css">
   ============================================================ */

:root{
    --brand:#009e59;
    --brand-dark:#007c46;
    --brand-light:#e7f6ee;
    --bg:#eef1f4;
    --panel:#ffffff;
    --border:#dde3e7;
    --text:#283139;
    --muted:#6c7781;
    --danger:#d92d20;
    --danger-bg:#fdecea;
    --radius:12px;
    --radius-sm:8px;
    --shadow:0 1px 3px rgba(16,24,40,.06),0 4px 12px rgba(16,24,40,.06);
    --shadow-sm:0 1px 2px rgba(16,24,40,.08);
    --header-h:60px; /* .loginheader: 30px content + 2x15px padding (fixed) */
}

*{ box-sizing:border-box; }

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    font-size:14px;
}

.text-red   { color:var(--danger); font-weight:700; }
.text-brand { color:var(--brand);  font-weight:700; }

/* ------------------------------------------------------------
   Tabs  (mirrors producttracker)
   ------------------------------------------------------------ */
.tabs-container{
    flex:0 0 auto;
    background:var(--panel);
    border-bottom:1px solid var(--border);
    display:flex; gap:2px; padding:0 8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.tab{
    background:transparent; color:var(--muted);
    padding:12px 16px; cursor:pointer; font-size:13px; font-weight:600;
    white-space:nowrap; user-select:none;
    border:none; border-bottom:3px solid transparent;
    text-decoration:none; display:inline-flex; align-items:center; gap:8px;
    transition:color .15s, border-color .15s, background .15s;
}
.tab:hover{ color:var(--brand); background:var(--brand-light); }
.tab.active{ color:var(--brand); border-bottom-color:var(--brand); }
.tab.alarm-tab{ color:#b23; }
.tab.alarm-tab:hover{ color:var(--danger); background:var(--danger-bg); }
.tab.alarm-tab.active{ color:var(--danger); border-bottom-color:var(--danger); background:transparent; }

.tab-content        { display:none; }
.tab-content.active { display:block; }

/* Brand label that can sit on the right side of a tab row */
.tabs-brand{
    margin-left:auto;
    display:flex; align-items:center; gap:8px;
    padding:10px 12px;
    color:var(--brand);
    font-size:14px; font-weight:800; letter-spacing:1.5px;
    white-space:nowrap; user-select:none;
}
.tabs-brand i{ font-size:18px; }

/* ------------------------------------------------------------
   Content wrapper
   ------------------------------------------------------------ */
.main-content{ padding:18px; }

.error{
    color:var(--danger); background:var(--danger-bg); border:1px solid #f3c9c4;
    padding:10px 12px; border-radius:var(--radius-sm); margin-bottom:12px; font-weight:600;
}
.notice{
    color:var(--brand-dark); background:var(--brand-light); border:1px solid #bfe6d2;
    padding:10px 12px; border-radius:var(--radius-sm); margin-bottom:12px; font-weight:600;
}

/* ------------------------------------------------------------
   Search box with an instant-clear "X"
   Markup:
     <div class="input-clear-wrap">
       <input type="text" ...>
       <span class="clear-x" title="Clear">&times;</span>
     </div>
   Toggle the ".visible" class on .clear-x from JS (see theme.js
   helper attachClearX below, or wire manually).
   ------------------------------------------------------------ */
.search-area{
    flex:0 0 auto; margin-bottom:16px; font-size:13px;
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-sm); padding:14px 16px;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.search-area label{ font-weight:600; color:var(--muted); }

.input-clear-wrap{
    position:relative; display:flex;
    flex:1; min-width:200px; max-width:340px;
}
.input-clear-wrap input[type="text"],
.input-clear-wrap input[type="search"]{
    width:100%; padding:8px 32px 8px 10px;
    border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px;
}
.input-clear-wrap input:focus{
    outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light);
}
/* Hide the native search "x" so we can use our own */
.input-clear-wrap input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; }

.clear-x{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    width:18px; height:18px; border-radius:50%;
    background:#c5ccd2; color:#fff;
    display:none; align-items:center; justify-content:center;
    font-size:13px; line-height:1; font-weight:700;
    cursor:pointer; user-select:none; z-index:2;
}
.clear-x:hover{ background:#8a949c; }
.clear-x.visible{ display:flex; }

/* ------------------------------------------------------------
   Buttons & inputs
   ------------------------------------------------------------ */
.btn,
.main-content button,
.login-required button{
    background:var(--brand); color:#fff; border:none;
    padding:8px 16px; border-radius:var(--radius-sm); cursor:pointer;
    font-size:13px; font-weight:600; transition:background .15s;
}
.btn:hover,
.main-content button:hover,
.login-required button:hover{ background:var(--brand-dark); }
.btn.btn-muted,
button.btn-muted{ background:#6c7781; }
.btn.btn-muted:hover,
button.btn-muted:hover{ background:#565f68; }
.btn.btn-danger,
button.btn-danger{ background:var(--danger); }
.btn.btn-danger:hover,
button.btn-danger:hover{ background:#b0221a; }

input[type="text"], input[type="number"], input[type="date"],
input[type="search"], input[type="password"], input[type="email"],
select, textarea{
    border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:7px 9px; font-size:13px; font-family:inherit; color:var(--text);
}
input:focus, select:focus, textarea:focus{
    outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light);
}

/* ------------------------------------------------------------
   Cards / white boxes
   ------------------------------------------------------------ */
.card, .box{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    position:relative;
}
.card{ padding:18px; }
.box{ overflow:auto; }
.box-title{
    position:absolute; top:-19px; left:2px;
    color:var(--brand); font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.5px;
}

/* ------------------------------------------------------------
   Tables
   ------------------------------------------------------------ */
.main-content table,
table.themed{ width:100%; border-collapse:collapse; font-size:13px; }
.main-content th,
table.themed th{
    background:#f6f8f9; color:var(--muted);
    border-bottom:1px solid var(--border);
    padding:9px 12px; text-align:left; font-weight:600; font-style:normal;
    white-space:nowrap;
}
.main-content td,
table.themed td{ border-bottom:1px solid #eef1f3; padding:9px 12px; }
.main-content tbody tr:hover td,
table.themed tbody tr:hover td{ background:var(--brand-light); }
.error-table th{ background:var(--danger-bg); color:#a3271d; }
.error-text{ color:var(--danger); font-weight:600; }

/* ------------------------------------------------------------
   Login-required panel (shared with session_check.php gate)
   ------------------------------------------------------------ */
.login-required{
    max-width:480px; margin:60px auto; text-align:center;
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:34px 28px;
}
.login-required .lr-icon{
    width:56px; height:56px; margin:0 auto 16px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:var(--brand-light); color:var(--brand);
    font-size:26px;
}
.login-required h2{ margin:0 0 8px; color:var(--brand); font-size:20px; }
.login-required p{ color:var(--muted); font-size:14px; margin:0 0 18px; }
.login-required .lr-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.login-required a.btn{ text-decoration:none; display:inline-block; }

/* ------------------------------------------------------------
   Badges
   ------------------------------------------------------------ */
.badge{
    display:inline-block; padding:2px 9px; border-radius:999px;
    font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
.badge.brand{ background:var(--brand); color:#fff; }
.badge.muted{ background:#c5ccd2; color:#fff; }