/* ADUPay Support System - Material/Google-ish redesign */

:root{
  /* Brand palette */
  --c1:#1a73e8; /* Google Blue */
  --c2:#34a853; /* Google Green */
  --c3:#fbbc04; /* Google Yellow */
  --c4:#ea4335; /* Google Red */

  /* UI neutrals */
  --bg:#f8f9fa;
  --surface:#ffffff;
  --text:#202124;
  --muted:#5f6368;
  --border:#dadce0;

  --radius:14px;
  --shadow:0 1px 2px rgba(60,64,67,.15), 0 1px 3px 1px rgba(60,64,67,.10);
  --shadow2:0 2px 6px rgba(60,64,67,.18), 0 1px 4px 1px rgba(60,64,67,.12);
}

/* Global */
html, body{ background:var(--bg); color:var(--text); }
.container, .container-fluid{ padding-top: 12px; }

/* Links */
a{ color:var(--c1); text-decoration:none; }
a:hover{ color:#1967d2; text-decoration:underline; }

/* Navbar (big visual change) */
.navbar{
  background:var(--surface)!important;
  border-bottom:1px solid var(--border);
  box-shadow: var(--shadow);
}
.navbar .navbar-brand,
.navbar .nav-link{ color:var(--text)!important; }
.navbar .nav-link:hover{ color:var(--c1)!important; }
.nav-link.active{
  color:var(--c1)!important;
  font-weight:700;
  position:relative;
}
.nav-link.active::after{
  content:'';
  position:absolute;
  left:.75rem;
  right:.75rem;
  bottom:.35rem;
  height:3px;
  border-radius:999px;
  background:var(--c1);
}

/* Cards / panels (big visual change) */
.card, .table, .modal-content, .dropdown-menu{
  background:var(--surface);
  border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow);
}
.card:hover{ box-shadow:var(--shadow2); }
.card-header{
  background:transparent!important;
  border-bottom:1px solid var(--border)!important;
  font-weight:700;
}

/* Buttons (Material pill style) */
.btn{
  border-radius:999px!important;
  font-weight:600;
  padding:.55rem 1.05rem;
}
.btn-primary{
  background:var(--c1)!important;
  border-color:var(--c1)!important;
  box-shadow:0 1px 2px rgba(26,115,232,.25);
}
.btn-primary:hover{
  background:#1967d2!important;
  border-color:#1967d2!important;
}
.btn-outline-primary{
  color:var(--c1)!important;
  border-color:var(--border)!important;
  background:var(--surface)!important;
}
.btn-outline-primary:hover{
  border-color:var(--c1)!important;
  background:rgba(26,115,232,.08)!important;
  color:var(--c1)!important;
}

/* Badges (clean chips) */
.badge{ border-radius:999px!important; padding:.35rem .7rem; font-weight:700; }
.badge-important{ background:rgba(251,188,4,.22); color:#7a4f00; }
.badge-normal{ background:rgba(52,168,83,.18); color:#0f6a2c; }

/* Request cards (more obvious status) */
.card-req{
  border-left:6px solid var(--c1)!important;
  background:var(--surface);
}
.card-req.important{ border-left-color:var(--c3)!important; }
.card-req.done{ border-left-color:var(--c2)!important; opacity:.9; }

/* Tables */
.table{
  overflow:hidden;
}
.table thead th{
  background:#f1f3f4!important;
  border-bottom:1px solid var(--border)!important;
  color:var(--muted);
  font-weight:700;
}
.table td, .table th{ border-color:var(--border)!important; }

/* Forms (Google-like focus ring) */
.form-control, input, select, textarea{
  border-radius:12px!important;
  border:1px solid var(--border)!important;
  background:var(--surface)!important;
}
.form-control:focus, input:focus, select:focus, textarea:focus{
  border-color:rgba(26,115,232,.55)!important;
  box-shadow:0 0 0 .2rem rgba(26,115,232,.15)!important;
}
.form-check-input:checked{
  background-color:var(--c1)!important;
  border-color:var(--c1)!important;
}

/* Alerts */
.alert{
  border-radius:var(--radius)!important;
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow);
}

/* Small text */
.kicker{ font-size:.8rem; color:var(--muted); }

/* Timeline */
.timeline{ position:relative; }
.timeline::before{ content:''; position:absolute; left:16px; top:0; bottom:0; width:2px; background:#e9ecef; }
.timeline-item{ position:relative; padding-left:48px; margin-bottom:16px; }
.timeline-item::before{
  content:'';
  position:absolute; left:8px; top:6px;
  width:18px; height:18px; border-radius:50%;
  background:var(--c1);
  border:2px solid #fff;
  box-shadow:0 0 0 3px rgba(26,115,232,.18);
}

/* Avatar */
.avatar{
  width:36px; height:36px; border-radius:50%;
  object-fit:cover;
  border:2px solid #fff;
  box-shadow:0 0 0 3px rgba(26,115,232,.18);
}

.card-title a{ text-decoration:none; }
.comment-attachment a{ text-decoration:none; }