:root{
  --gs-blue:#003563;
  --gs-light:#58A0D7;
  --gs-blue-dark:#002746;
  --gs-light-soft:#eaf4fb;
  --page:#f3f7fa;
  --text:#1f2937;
  --muted:#64748b;
  --border:#dbe4eb;
  --white:#fff;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--page)}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--page);color:var(--text)}
.topbar{
  min-height:76px;background:var(--gs-blue);border-top:5px solid var(--gs-blue-dark);
  border-bottom:4px solid var(--gs-light);display:flex;align-items:center;
  justify-content:space-between;padding:8px 24px;box-shadow:0 3px 12px rgba(0,53,99,.20)
}
.brand{font-weight:700;font-size:20px;color:#fff;display:flex;align-items:center;gap:12px}
.brand img{max-height:46px!important;max-width:190px!important;object-fit:contain;background:#fff;padding:4px 8px;border-radius:7px}
.userbox{font-size:14px;color:#fff;display:flex;align-items:center;gap:8px}
.userbox a{color:#fff;font-weight:600;text-decoration:none}
.userbox a:hover{color:#bfe1f5}
.container{max-width:1180px;margin:28px auto;padding:0 18px}
h1,h2,h3{color:var(--gs-blue)}
h1{border-left:6px solid var(--gs-light);padding-left:12px}
.card{
  background:var(--white);border:1px solid var(--border);border-radius:12px;
  padding:20px;margin-bottom:18px;box-shadow:0 2px 8px rgba(0,53,99,.06)
}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.stat{font-size:28px;font-weight:700;margin-top:8px;color:var(--gs-blue)}
.muted{color:var(--muted)}
.btn{
  display:inline-block;padding:10px 14px;border-radius:8px;border:1px solid var(--gs-blue);
  background:var(--gs-blue);color:#fff;text-decoration:none;cursor:pointer;font-weight:600;
  transition:background .15s,border-color .15s,transform .05s
}
.btn:hover{background:var(--gs-light);border-color:var(--gs-light);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:var(--gs-light);border-color:var(--gs-light);color:#fff}
.btn.secondary:hover{background:var(--gs-blue);border-color:var(--gs-blue);color:#fff}
.danger{background:#991b1b;color:#fff;border-color:#991b1b}
.form-row{margin-bottom:14px}
.form-row label{display:block;font-weight:600;margin-bottom:6px;color:var(--gs-blue)}
.form-row input,.form-row select,.form-row textarea,select,textarea{
  width:100%;padding:11px;border:1px solid #cbd5df;border-radius:8px;font:inherit;background:#fff
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--gs-light);box-shadow:0 0 0 3px rgba(88,160,215,.18)
}
.alert{padding:12px;border-radius:8px;background:#fee2e2;color:#991b1b;margin-bottom:15px;border-left:4px solid #dc2626}
.success{padding:12px;border-radius:8px;background:#dcfce7;color:#166534;margin-bottom:15px;border-left:4px solid #16a34a}
.error{padding:10px 12px;border-radius:6px;background:#fdecec;color:#8a1f1f;margin:10px 0;border-left:4px solid #dc2626}
.footer{text-align:center;color:var(--muted);font-size:12px;padding:30px}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
th{background:var(--gs-blue);color:#fff;font-weight:600}
tr:hover td{background:#f7fbfe}
hr{border:0;border-top:1px solid var(--border);margin:20px 0}
.check{display:block;padding:12px;background:#f8fbfd;border:1px solid var(--border);border-radius:8px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700}
.badge.pending{background:#fef3c7;color:#92400e}
.badge.approved{background:#dcfce7;color:#166534}
.badge.rejected{background:#fee2e2;color:#991b1b}
.notification-link{display:inline-flex;align-items:center;gap:4px;text-decoration:none;margin-right:12px}
.notification-count{display:inline-block;min-width:20px;padding:2px 6px;border-radius:999px;background:var(--gs-light);color:#fff;text-align:center;font-size:11px}
.notification-item{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--border)}
.notification-item:last-child{border-bottom:0}
.notification-item.unread{background:var(--gs-light-soft);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:8px;border-left:3px solid var(--gs-light)}
.notification-item small{display:block;margin-top:7px}
button.btn{font:inherit}
a{color:var(--gs-blue)}
a:hover{color:var(--gs-light)}
@media(max-width:600px){
  .topbar{padding:8px 14px;min-height:64px}
  .brand{font-size:16px}
  .brand img{max-width:145px!important;max-height:36px!important}
  .userbox{font-size:12px}
  .container{margin-top:18px;padding:0 12px}
  .card{padding:16px}
  table{display:block;overflow-x:auto;white-space:nowrap}
}


/* V23 - Mobile optimization */
@media (max-width: 700px){
  html{font-size:15px}
  body{margin:0;padding:0;overflow-x:hidden}
  .topbar{
    min-height:64px!important;padding:8px 12px!important;
    gap:8px;flex-wrap:wrap
  }
  .brand{font-size:16px!important;gap:7px;min-width:0}
  .brand img{max-height:38px!important;max-width:130px!important;padding:3px 5px!important}
  .userbox{font-size:12px!important;gap:5px;flex-wrap:wrap;justify-content:flex-end}
  .container,.content,.main,.page{width:auto!important;max-width:none!important;margin:0!important;padding:14px 10px!important}
  h1{font-size:22px!important;margin:8px 0 16px!important}
  h2{font-size:18px!important}
  .grid,.cards,.stats,.row{grid-template-columns:1fr!important;display:grid!important}
  .card,.panel,.box,.stat{width:auto!important;min-width:0!important}
  .actions,.toolbar,.button-row,.form-actions{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important
  }
  .btn,.button,button,input[type="submit"],input[type="button"]{
    width:100%!important;min-height:44px!important;box-sizing:border-box;
    margin:0!important;font-size:15px!important
  }
  input,select,textarea{
    width:100%!important;max-width:100%!important;box-sizing:border-box;
    min-height:42px!important;font-size:16px!important
  }
  textarea{min-height:110px!important}
  table{
    display:block!important;width:100%!important;overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;border-spacing:0
  }
  th,td{white-space:nowrap!important;padding:9px 8px!important;font-size:13px!important}
  .table-responsive{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .alert,.success,.error{font-size:14px!important;line-height:1.4}
  .notification,.communication,.document,.request,.list-item{
    padding:12px!important;margin-bottom:9px!important
  }
  footer{padding:16px 10px!important;font-size:12px!important;text-align:center}
}

/* Very small phones */
@media (max-width:430px){
  .topbar{align-items:flex-start}
  .brand{max-width:55vw}
  .brand img{max-width:105px!important}
  .userbox{max-width:42vw;text-align:right}
  .container,.content,.main,.page{padding:12px 8px!important}
  h1{font-size:20px!important}
  th,td{font-size:12px!important;padding:8px 6px!important}
}


/* V24 - improved smartphone layout */
@media (max-width:700px){
  .topbar{
    min-height:auto!important;
    padding:10px 12px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:center!important;
    gap:8px!important;
  }
  .brand{
    width:100%!important;
    max-width:none!important;
    justify-content:flex-start!important;
    font-size:18px!important;
    line-height:1.05!important;
    gap:10px!important;
  }
  .brand img{
    width:132px!important;
    max-width:132px!important;
    height:auto!important;
    max-height:42px!important;
    flex:0 0 auto!important;
  }
  .userbox{
    width:100%!important;
    max-width:none!important;
    justify-content:flex-start!important;
    text-align:left!important;
    font-size:13px!important;
    gap:7px!important;
    padding-left:2px!important;
  }
  .container,.content,.main,.page{
    padding:12px 10px!important;
  }
  h1{
    font-size:21px!important;
    line-height:1.2!important;
    margin:7px 0 14px!important;
  }
  h2{font-size:18px!important;line-height:1.25!important}
  .card,.panel,.box,.stat{
    padding:12px!important;
  }

  /* Tables: make each row a card, avoiding clipped first columns */
  table.mobile-friendly{
    display:block!important;
    width:100%!important;
    overflow:visible!important;
  }
  table.mobile-friendly thead{display:none!important}
  table.mobile-friendly tbody,
  table.mobile-friendly tr,
  table.mobile-friendly td{
    display:block!important;
    width:100%!important;
    box-sizing:border-box!important;
  }
  table.mobile-friendly tr{
    margin:0 0 10px!important;
    padding:8px 10px!important;
    border:1px solid #d7e5ef!important;
    border-radius:8px!important;
    background:#fff!important;
  }
  table.mobile-friendly td{
    white-space:normal!important;
    padding:6px 0!important;
    border:0!important;
    text-align:left!important;
  }
  table.mobile-friendly td:before{
    content:attr(data-label);
    display:inline-block;
    min-width:86px;
    margin-right:8px;
    font-weight:700;
    color:var(--gs-blue);
  }

  .actions,.toolbar,.button-row,.form-actions{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .btn,.button,button,input[type="submit"],input[type="button"]{
    width:100%!important;
    min-height:44px!important;
  }
}
@media (max-width:430px){
  .brand{font-size:16px!important}
  .brand img{width:116px!important;max-width:116px!important}
  .userbox{font-size:12px!important}
  .container,.content,.main,.page{padding:10px 8px!important}
  h1{font-size:20px!important}
}