body{font-family:Arial;margin:0;background:#f5f6fa;color:#222}
.topbar{background:#1d3557;color:#fff;padding:10px 15px;display:flex;justify-content:space-between;align-items:center}
.topbar a{color:#ffda79;text-decoration:none}
.nav{background:#457b9d;padding:8px;display:flex;gap:10px;flex-wrap:wrap}
.nav a{color:#fff;text-decoration:none;background:#1d3557;padding:6px 10px;border-radius:4px}
.nav a:hover{background:#e63946}
.container{padding:20px}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{border:1px solid #ddd;padding:8px;font-size:14px}
th{background:#1d3557;color:#fff}
tr:nth-child(even){background:#f2f2f2}
.status-pending{background:#ffeeba!important}
.status-resolved,.status-installed{background:#c3e6cb!important}
.status-rejected{background:#f5c6cb!important}
form label{display:block;margin-top:10px;font-weight:bold}
input[type=text],input[type=datetime-local],select,textarea{width:80%;padding:8px;margin-top:4px}
textarea{min-height:80px}
.btn{display:inline-block;padding:6px 12px;background:#1d3557;color:#fff;text-decoration:none;border:none;border-radius:4px;cursor:pointer}
.btn.danger{background:#c0392b}
.btn.secondary{background:#457b9d}
.footer{background:#1d3557;color:#fff;text-align:center;padding:12px;margin-top:40px}
.cards{display:flex;gap:15px;flex-wrap:wrap}
.card{background:#fff;padding:15px;border-radius:8px;flex:1 1 200px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.inline-form{display:inline}
.success{color:#27ae60;font-weight:bold}
.error{color:#c0392b;font-weight:bold}
/* v7 additions */
 td, th { word-wrap:break-word; max-width:220px; } .status-pending td { vertical-align:top; }
/* v9 additions */
.card p {margin:4px 0 0 0; line-height:1.3;}
/* v10 additions */
.table-small td{font-size:13px}
/* v12 additions */
.alert-aged { background:#ffcccc !important; animation:pulseAlert 1.5s linear infinite alternate; }
@keyframes pulseAlert { from { background:#ffb3b3; } to { background:#ffcccc; } }
/* v13 Branding + Responsive Enhancements */
:root {
  --brand-bg:#1d3557;
  --brand-accent:#457b9d;
  --brand-accent-2:#00b4d8;
  --danger:#c0392b;
  --success:#27ae60;
  --warning:#ffa600;
  --radius:12px;
}
body{font-family:system-ui, Arial, sans-serif; line-height:1.4;}
.topbar{flex-wrap:wrap; gap:10px;}
.brand{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600;}
.brand .logo{height:38px;display:block;}
.brand-text{white-space:nowrap;}
.nav{display:flex;flex-wrap:wrap;gap:6px;}
.nav a{border-radius:var(--radius);font-size:14px;padding:8px 12px;transition:background .2s, transform .2s;}
.nav a:hover{transform:translateY(-2px);}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.card{border-radius:var(--radius);}

table{font-size:13px;}
table thead th, table tr th{position:sticky;top:0;z-index:2;}

@media (max-width: 900px){
  .container{padding:15px;}
  table, thead, tbody, th, td, tr{display:block;}
  table{border:0;}
  table thead{display:none;}
  table tr{margin:0 0 10px;background:#fff;padding:10px;border:1px solid #ddd;border-radius:var(--radius);}
  table td{border:0 !important;padding:4px 6px; position:relative;}
  table td::before{
    content:attr(data-label);
    font-weight:600;
    display:block;
    margin-bottom:2px;
    color:#1d3557;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
  }
  .nav a{font-size:12px;padding:6px 10px;}
  .brand-text{font-size:16px;}
  .topbar .user-info{font-size:12px;}
  .card h3{font-size:16px;}
}

@media (max-width: 500px){
  .brand .logo{height:32px;}
  .brand-text{font-size:14px;}
  h2{font-size:20px;}
  .btn{padding:6px 10px;font-size:13px;}
  textarea,input[type=text],input[type=datetime-local],select{font-size:14px;}
}

/* Convert table cells to mobile-friendly labels via JS hook later if needed */
.mobile-scroll{overflow-x:auto;}

.alert-aged{box-shadow:0 0 0 2px #ff8d8d inset;}