@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

:root{
  --primary:#0d6efd;
  --muted:#6c757d;
  --bg:#f8f9fa;
  --brand:#0f8b8d;       
  --brand-600:#0d7779;
  --accent:#c9a64b;       
  --text:#172026;
}

body{
  font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color:var(--text);
}

/*.navbar-brand svg{ height:28px; vertical-align:middle; }*/
.card{ border-radius: 1rem; }
.btn{ border-radius: .75rem; }
.form-control{ border-radius: .6rem; }
.hero{
  padding:4rem 0;
  text-align:center;
}
.status-badge{
  padding:.35rem .6rem; border-radius:.6rem; font-size:.85rem; color:#fff;
}
.status-pending{ background:#ffc107; }
.status-approved{ background:#198754; }
.status-rejected{ background:#dc3545; }
.bg-pattern{
  background:
  radial-gradient(1000px 600px at 80% -10%, rgba(15,139,141,.06), transparent 60%),
  radial-gradient(800px 500px at -10% 110%, rgba(201,166,75,.05), transparent 60%),
  #f6f8fa;
}
.fw-600{ font-weight:600 }
.fw-extrabold{ font-weight:800 }
.brand-logo{
  height:44px; width:auto; display:block;
}
.brand-title{ font-weight:800; letter-spacing:.2px; }
.navbar .nav-link{ padding:.6rem .85rem; }
.navbar .nav-link.active{ color:var(--brand); font-weight:700; }
.nav-accent{
  height:3px; width:100%;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
.auth-wrap{
  min-height: calc(100vh - 140px); 
  display:flex; align-items:center; justify-content:center;
}
.auth-card {
  max-width: 520px;
  width: 100%;
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(13,119,121,.12);
  background: linear-gradient(135deg, #f9fafb 0%, #ecf4f4 100%);
}
.auth-logo{
  height:76px; width:auto; 
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.form-control{
  border-radius:.75rem;
  height: 46px;
}
.form-control:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem rgba(15,139,141,.15);
}

.btn-brand{
  background: var(--brand);
  border-color: var(--brand);
}
.btn-brand:hover{
  background: var(--brand-600);
  border-color: var(--brand-600);
}

.link-brand{ color: var(--brand); text-decoration: none; }
.link-brand:hover{ text-decoration: underline; }

@media (max-width: 576px){
  .brand-logo{ height:38px; }
  .brand-title{ font-size: 1rem; }
}
.navbar .brand-text{ display:flex; flex-direction:column; }
.navbar .brand-title{ font-size:1.05rem; }
.navbar .nav-link{ padding:.55rem .75rem; }
.auth-wrap{ padding-block: 4vh; }
.auth-card{ margin-inline:auto; }
.brand-logo, .auth-logo{
  height: 64px;
}
@media (min-width: 992px){
  .brand-logo{ height: 48px; }
  .auth-logo{ height: 80px; }
}
.btn-brand{ background: var(--brand); border-color: var(--brand); }
.btn-brand:hover{ background: var(--brand-600); border-color: var(--brand-600); }
@media (max-width: 420px) {
  .auth-card { margin: 2rem 1rem; padding: 1.2rem; }
  .auth-logo { height: 64px; }
  .brand-title { font-size: 0.95rem; }
  .navbar .nav-link { font-size: 0.92rem; padding: .45rem .5rem; }
  .table-responsive table { font-size: 0.95rem; }
  .container { padding-left: 0.6rem; padding-right: 0.6rem; }
}
.form-control { min-height:44px; border-radius:.6rem; }
.btn { min-height:42px; }
.preview-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid #198754;
  cursor: pointer;
  transition: transform 0.2s;
}
.preview-thumb:hover {
  transform: scale(1.05);
}
.pdf-thumb {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  background-color: #dc3545;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  cursor: pointer;
  transition: transform 0.2s;
}
.pdf-thumb:hover {
  transform: scale(1.05);
}
input.filled, select.filled, textarea.filled {
  border-color: #28a745 !important;
  box-shadow: 0 0 4px rgba(40, 167, 69, 0.5);
  transition: all 0.2s ease-in-out;
}
input:focus, select:focus, textarea:focus {
  border-color: #0d6efd !important;
  box-shadow: 0 0 6px rgba(13, 110, 253, 0.5);
}
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}
.shake {
  animation: shake 0.3s;
  border-color: #dc3545 !important;
  box-shadow: 0 0 6px rgba(220, 53, 69, 0.5);
}
@media (max-width: 768px) {
  table.table td, table.table th {
    white-space: nowrap;
  }
  .table-responsive {
    overflow-x: auto;
  }
}
#preview1 img, #preview2 img, #preview3 img, #preview4 img {
  border-radius: 8px;
  transition: transform 0.2s ease;
}
#preview1 img:hover, #preview2 img:hover, #preview3 img:hover, #preview4 img:hover {
  transform: scale(1.05);
}