/* =====================================================
   iOS 18 PREMIUM GLASS UI — FULL STYLE SHEET
   ===================================================== */

/* Apple Font */
@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&family=SF+Pro+Text:wght@300;400;500;600&display=swap');

:root{
  --tint: 92, 63, 255;     /* Apple Purple Tint */
  --bg-soft: #f5f6fa;      /* iOS 18 light background */
  --text-dark: #1d1d1f;
  --text-soft: rgba(0,0,0,0.45);
  --radius: 18px;
}

/* Global */
body{
  margin:0;
  padding:12px;
  font-family:"SF Pro Text","SF Pro Display",-apple-system;
  background:
    radial-gradient(800px at 20% 10%, rgba(140,120,255,0.16), transparent),
    radial-gradient(900px at 90% 90%, rgba(100,140,255,0.08), transparent),
    var(--bg-soft);
  color:var(--text-dark);
  -webkit-font-smoothing: antialiased;
}

/* =====================================================
   iOS 18 CONTAINER (like rounded floating panels)
   ===================================================== */

.container, .container-sm{
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(22px) saturate(180%);
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.6);
  padding:20px;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.04),
    0 1px 3px rgba(0,0,0,0.08);
}

/* =====================================================
   NAVBAR — iOS 18 Transparent Bar
   ===================================================== */

.navbar{
  background: rgba(255,255,255,0.55);
  backdrop-filter:blur(14px);
  border-radius:16px;
  padding:14px 20px;
  border:1px solid rgba(255,255,255,0.60);
  color:var(--text-dark) !important;
  box-shadow:0 6px 15px rgba(0,0,0,0.06);
}

.navbar-brand{
  font-weight:700;
  color:var(--text-dark) !important;
}

/* =====================================================
   SEARCH — iOS 18 Rounded Search Field
   ===================================================== */

.search-wrapper{
  position:relative;
  max-width:360px;
  width:100%;
}

.search-wrapper .search-icon{
  position:absolute;
  left:14px; top:50%;
  transform:translateY(-50%);
  font-size:15px;
  color:var(--text-soft);
}

#searchInput{
  width:100%;
  border-radius:100px;
  height:38px;
  padding:6px 16px 6px 42px;
  border:1px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.80);
  backdrop-filter:blur(12px);
  color:var(--text-dark);
}

#searchInput::placeholder{ color:var(--text-soft); }

/* =====================================================
   FILTER SELECTS (Project / Status)
   ===================================================== */

#projectFilter,
#statusFilter{
  border-radius:14px;
  padding:8px 10px;
  border:1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(10px);
  color:var(--text-dark);
}

/* =====================================================
   CUSTOMER CARDS — iOS 18 “Floating Glass Cards”
   ===================================================== */

.customer-card{
  background:rgba(255,255,255,0.75);
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.65);
  backdrop-filter:blur(20px);
  padding:14px;
  color:var(--text-dark);
  box-shadow:
    0 10px 25px rgba(0,0,0,0.07),
    0 4px 8px rgba(0,0,0,0.08);
  transition:0.22s ease;
}

.customer-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.12),
    0 5px 10px rgba(0,0,0,0.10);
}

.customer-card h5{
  margin:0;
  font-size:16px;
  font-weight:600;
}

.customer-card small{
  color:var(--text-soft);
}

.last-note{
  margin-top:6px;
  font-size:13px;
  color:#444;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =====================================================
   BUTTONS — iOS 18 Tinted Buttons
   ===================================================== */

.btn{
  border-radius:14px !important;
  padding:9px 14px !important;
  background: rgba(255,255,255,0.85) !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  color:var(--text-dark) !important;
  backdrop-filter:blur(10px);
  transition:0.2s;
}

.btn:hover{
  background:rgba(255,255,255,1) !important;
}

/* Tinted Accent */
.btn-accent{
  background: rgba(var(--tint),0.25) !important;
  border-color: rgba(var(--tint),0.35) !important;
  color:#fff !important;
}

/* Danger */
.btn-danger{
  background: rgba(255,60,80,0.25) !important;
  border-color: rgba(255,60,80,0.35) !important;
  color:#fff !important;
}

/* =====================================================
   MODAL — iOS 18 Sheet Style
   ===================================================== */

.modal-content{
  background:rgba(255,255,255,0.85) !important;
  border-radius:26px !important;
  border:1px solid rgba(255,255,255,0.7) !important;
  backdrop-filter:blur(32px) saturate(180%);
  padding:12px;
  color:var(--text-dark);
  box-shadow:
    0 -4px 30px rgba(0,0,0,0.08),
    0 12px 32px rgba(0,0,0,0.12);
}

.modal-content input,
.modal-content textarea,
.modal-content select{
  background:rgba(255,255,255,0.9) !important;
  border:1px solid rgba(0,0,0,0.10) !important;
  color:var(--text-dark) !important;
  border-radius:14px !important;
  padding:10px;
}

.modal-content input::placeholder,
.modal-content textarea::placeholder{
  color:var(--text-soft);
}

/* =====================================================
   NOTES
   ===================================================== */

.note-box{
  background:rgba(255,255,255,0.85);
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.08);
  padding:10px;
  color:var(--text-dark);
}

.text-dim{ color:var(--text-soft); }

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media(max-width:768px){
  .customer-card{ padding:12px; }
  #searchInput{ height:36px; }
}