/* combined stylesheet - all CSS in one file */

:root{
  --brand-900:#1e3a8a;
  --brand-700:#3730a3;
  --brand-600:#4f46e5;
  --brand-500:#6366f1;
  --accent-300:#93c5fd;
  --slate-900:#0f172a;--slate-700:#334155;--slate-600:#475569;--slate-500:#64748b;--slate-300:#cbd5e1;--slate-200:#e2e8f0;--slate-100:#f1f5f9;--white:#fff;
  --rose-700:#b91c1c;--rose-100:#ffe4e6;
  --amber-100:#fef3c7;--amber-700:#b45309;
  --emerald-100:#d1fae5;--emerald-800:#065f46;
  --orange-100:#ffedd5;--orange-800:#9a3412;
}
*{box-sizing:border-box}
html,body{height: 100%; width: 100%; margin: 0; padding: 0;}
body{background:url('assets/pic1.png') no-repeat center center fixed;background-size:cover;color:var(--slate-900);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,Helvetica,sans-serif}
.container{max-width:1100px;margin:0 auto;padding:24px}
.brand-grad{background:linear-gradient(90deg,var(--brand-900),var(--brand-600));color:#fff}
.header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--slate-200)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 16px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:40px;height:40px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.tabs{display:flex;gap:8px}
.tab{border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;padding:8px 12px;border-radius:12px;font-weight:600}
.tab.active{background:rgba(255,255,255,.22)}
.tab:hover{background:rgba(255,255,255,.12)}
.card{background:#fff;border:1px solid var(--slate-200);border-radius:16px;box-shadow:0 1px 6px rgba(15,23,42,.06)}
.card.pad{padding:20px}

/* All page sections - inherit body background pic1 */
#Dashboard, #Report, #About, #Instructions{
  background: url('assets/pic1.png') no-repeat center center fixed;
  background-size: cover;
}
/* Styling for the new full-width container */
.grid-12.combined {
    padding: 16px; /* Example padding */
    /* Maintain background color and border from the original 'stat' boxes */
}

/* Container for all the status labels and values */
.combined-content {
    display: flex;             /* Use Flexbox for horizontal layout */
    justify-content: space-around; /* Distribute items evenly */
    margin-top: 10px;
}

/* Style for each individual status label/value pair */
.status-item {
    font-size: 1.1em;
    font-weight: bold;
    color: #444; /* Dark gray for the label */
}

/* Style for the numerical value */
.status-item .value {
    color: #1e1f20; /* A prominent color for the number */
    margin-left: 5px;
    font-size: 1.2em;
}
/* Report section cover: removed background image */
#Report .card.pad:first-of-type{
  position: relative;
  overflow: hidden;
}
#Report .card.pad:first-of-type::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35));
  z-index: 0;
}
/* Keep inner content above overlay and readable */
#Report .card.pad:first-of-type > *{ position: relative; z-index: 1; }
#Report .card.pad:first-of-type .label{ color: #fff }
#Report .card.pad:first-of-type h3, #Report .card.pad:first-of-type p{ color: #fff }
#Report .card.pad:first-of-type .input,
#Report .card.pad:first-of-type .select,
#Report .card.pad:first-of-type .textarea{
  background: rgba(255,255,255,0.95);
  color: var(--slate-900);
}
.row{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.mt{margin-top:18px}
.mb{margin-bottom:18px}
.btn{border:1px solid var(--slate-200);background:#fff;padding:8px 12px;border-radius:12px;cursor:pointer}
.btn:hover{background:#f8fafc}
.btn.brand{background:var(--brand-600);border-color:var(--brand-700);color:#fff}
.btn.brand:hover{background:var(--brand-700)}

/* Import / Export distinct color schemes */
#export-csv{background:#eef2ff;border-color:#c7d2fe;color:var(--brand-700)}
#export-csv:hover{background:#c7d2fe;color:#fff}

#export-json{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
#export-json:hover{background:#34d399;color:#fff}

#import-json-label{background:#fff7ed;border-color:#ffd8a8;color:#92400e}
#import-json-label:hover{background:#fb923c;color:#fff}

/* Smooth transitions for these buttons */
.btn, #import-json-label{transition:background .12s ease, color .12s ease, border-color .12s ease}
.input,.select,.textarea{width:100%;border:1px solid var(--slate-300);border-radius:12px;padding:8px 10px;background:#fff;box-shadow:0 0 0 0 rgba(99,102,241,.35)}
.input:focus,.select:focus,.textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(99,102,241,.25)}

/* Dropdown option hover highlight */
select option:hover,
select option:checked {
  background: var(--brand-600);
  color: #fff;
}

/* Compact variant for team/severity/status selects */
#assignedTo, #severity, #d-status, #f-team, #f-sev, #f-status, select[data-status]{
  width: auto;           /* don't force full width */
  max-width: 220px;      /* reasonable maximum width */
  padding: 6px 8px;      /* slightly smaller padding */
  font-size: 13px;       /* slightly smaller text */
  border-radius: 8px;    /* slightly smaller radius */
}

/* Ensure compact selects render nicely in narrow grid cells */
.grid-6 #assignedTo, .grid-6 #severity, .grid-6 #f-team, .grid-6 #f-sev{ max-width:100%; }
.label{display:block;font-size:13px;color:var(--slate-700);margin-bottom:6px}
.grid-2{grid-column:span 6}
.grid-3{grid-column:span 4}
.grid-4{grid-column:span 3}
.grid-6{grid-column:span 2}
.grid-12{grid-column:span 12}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;border-top:1px solid var(--slate-200);vertical-align:top}
thead th{background:var(--slate-100);text-align:left;color:var(--slate-700)}
tbody tr:hover{background:var(--slate-900);color:var(--white)}
tbody tr:hover td{color:var(--white)}
tbody tr:hover .btn{background:var(--slate-700);color:var(--white);border-color:var(--slate-600)}
tbody tr:hover .select{background:var(--slate-700);color:var(--white);border-color:var(--slate-600)}
.actions{white-space:nowrap;text-align:right}
.stat{padding:14px;border:1px solid var(--slate-200);border-radius:14px;background:#fff}
.stat .title{font-size:12px;color:var(--slate-600)}
.stat .value{font-size:22px;font-weight:800;margin-top:4px}
.kpill{display:inline-flex;padding:4px 8px;border-radius:10px;font-size:12px;font-weight:700}
.sev-low{background:var(--emerald-100);color:var(--emerald-800)}
.sev-med{background:var(--amber-100);color:var(--amber-700)}
.sev-high{background:var(--orange-100);color:var(--orange-800)}
.sev-crit{background:var(--rose-100);color:var(--rose-700)}
.tablewrap{overflow:auto;border:1px solid var(--slate-200);border-radius:16px}
.footer{border-top:1px solid var(--slate-200);background:#fff;margin-top:20px}
.footer-inner{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:16px}
.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;border:1px solid(var(--slate-200));background:#fff;font-size:12px}
/* Drawer */
.drawer-back{position:fixed;inset:0;background:rgba(2,6,23,.35)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:640px;max-width:100%;background:#fff;border-left:1px solid var(--slate-200);box-shadow:-4px 0 30px rgba(2,6,23,.2);display:flex;flex-direction:column}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--slate-200)}
.drawer-body{padding:16px;overflow:auto}
.hidden{display:none}
/* Responsive */
@media (max-width: 800px){
  .grid-2,.grid-3,.grid-4,.grid-6{grid-column:span 12}
  .header-inner{height:auto;padding:8px 16px;gap:10px;flex-wrap:wrap}
}


/* custom-background.css (merged) */
/* Full-screen background slideshow container */
#bg-slideshow{position:fixed;inset:0;z-index:-1;overflow:hidden}
#bg-slideshow .bg-slide{position:absolute;inset:0;background-size:cover;background-position:center center;opacity:0;transition:opacity .4s ease-in-out}
#bg-slideshow .bg-slide.visible{opacity:1}

/* Fallback single-image body background (kept low priority) */
body{background:var(--slate-100)}

/* Example: slides will be created/managed by JS. Images must exist in assets/ */


/* color-style.css (merged) */
.card, .stat, .tablewrap.card {
  color: #111 !important;
  text-shadow: 0 1px 4px rgba(255,255,255,0.4);
}
/* Custom color styles for cards/boxes */


.card {
  background: rgba(239, 81, 213, 0.25); /* semi-transparent pink */
  border: 1px solid #ecf0e2;
  border-radius: 14px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
}

.card.pad {
  padding: 28px 24px;
}

/* Accent for About, Contact, and Report sections */
#About .card, #Contact .card, #Report .card {
  background: rgba(240, 249, 255, 0.25); /* semi-transparent blue */
  border-color: #38bdf8;
}

/* Dashboard stat boxes */
.stat {
  background: rgba(50, 21, 218, 0.25);
  border: 1px solid #02070a;
  border-radius: 12px;
  padding: 18px 0 20px 0;
  text-align: center;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.973);
}

/* Table wrap */
.tablewrap.card {
  background: rgba(255,255,255,0.25); /* semi-transparent white */
  border: 1px solid #e0e7ef;
}

/* Danger zone */
.card[style*="background:#fff0f1"] {
  background: #fff0f1 !important;
  border-color: #fecdd3 !important;
}