/* === Google Fonts === */
/* (Link this in your HTML head, not needed in CSS)
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Mandali:wght@400;700&family=Anek+Telugu:wght@400;700&display=swap" rel="stylesheet">
*/

body {
  font-family: 'Anek Telugu', 'Mandali', 'Inter', Arial, sans-serif;
  background: linear-gradient(120deg, #e3f2fd 0%, #e0eafc 100%);
  margin: 0; padding: 0;
  color: #19415a;
}

h1, h2, h3, h4 {
  font-family: 'Anek Telugu', 'Mandali', 'Inter', Arial, sans-serif;
  color: #1959a7;
  margin: 0 0 16px 0;
  font-weight: 700;
  letter-spacing: 0.2px;
}

a {
  color: #1959a7;
  text-decoration: none;
  transition: color 0.14s;
}

a:hover, a:focus {
  color: #1372bb;
  text-decoration: underline;
}

/* ==== CARD CONTAINERS ==== */
.card, .filter-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 3px 18px rgba(37,99,235,0.09);
  padding: 22px 18px 16px 18px;
  margin-bottom: 22px;
  transition: box-shadow .18s;
}

.card:hover {
  box-shadow: 0 7px 30px rgba(16,80,182,0.15);
}

/* ==== FORMS & INPUTS ==== */
input[type=text], input[type=password], select, input[type=file], textarea {
  font-size: 1.15em;
  padding: 13px 14px;
  border: 1.5px solid #cbe2f7;
  border-radius: 11px;
  width: 100%;
  margin-bottom: 15px;
  font-family: inherit;
  background: #f6fafd;
  transition: border-color 0.18s;
  box-sizing: border-box;
}

input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus {
  border-color: #2577be;
  outline: none;
}

input[type=file] {
  background: #f4fafd;
  padding: 7px;
}

/* ==== BUTTONS ==== */
button, .big-btn, .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 1.08em;
  background: linear-gradient(90deg, #1959a7 80%, #3bbfdb 100%);
  color: #fff !important;
  border: none;
  border-radius: 13px;
  font-weight: 600;
  padding: 13px 18px;
  margin: 7px 2px 7px 0;
  box-shadow: 0 2px 10px rgba(0,32,55,0.07);
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.14s, box-shadow 0.14s;
}

button:active, .big-btn:active, .action-btn:active {
  background: linear-gradient(90deg, #164b7b 80%, #31c97b 100%);
}

.big-btn.whatsapp, .action-btn.whatsapp {
  background: linear-gradient(90deg, #25d366 60%, #3bbfdb 100%);
  color: #134d27 !important;
}

button i, .big-btn i, .action-btn i { font-size: 1.15em; }

/* Icon links inside buttons */
a.big-btn, a.action-btn {
  color: #fff !important;
}

/* ==== TABLES ==== */
.desktop-table {
  width:100%; border-spacing:0; border-collapse:collapse; margin-bottom:15px;
}
.desktop-table th, .desktop-table td {
  font-size: 1.13em;
  padding: 13px 10px;
  border-bottom: 1px solid #e5ebfa;
}
.desktop-table th {
  background: #f6fafd;
  color: #1959a7;
  font-weight: 700;
}

/* ==== CONTACT CARDS ==== */
.contacts-list {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start;
}

.contact-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 1px 10px rgba(33,63,141,0.11);
  padding: 18px 14px;
  min-width: 215px; max-width: 310px;
  width: 100%;
  font-size: 1.03em;
  display: flex; flex-direction: column; gap: 7px;
  position: relative;
  flex: 1 1 215px;
  transition: box-shadow .14s;
}
.contact-card:hover { box-shadow: 0 6px 20px rgba(37,99,235,0.14);}
.contact-title { font-weight: bold; font-size: 1.15em; color: #17467a;}
.contact-row { color: #256; font-size: .97em; margin-bottom:2px;}
.contact-actions {
  display: flex; gap: 7px; margin-top: 4px; flex-wrap: wrap;
}

.action-btn.edit { background: #e1ecff; color: #17467a !important; }
.action-btn.delete { background: #ffefed; color: #be3540 !important; }
.action-btn.edit:hover { background: #d4f1fd; }
.action-btn.delete:hover { background: #ffd1d7; }

/* ==== NAVBAR/TOPBAR ==== */
.topnav {
  width: 100%; background: linear-gradient(90deg, #1959a7 70%, #3bbfdb 100%);
  color: #fff; display: flex; align-items: center;
  padding: 0 22px; height: 62px; box-shadow: 0 2px 18px rgba(33,63,141,0.07);
  position: relative; z-index: 99;
}

.topnav .logo {
  width: 44px; height: 44px; background: #fff; border-radius: 50%;
  padding: 3px; margin-right: 14px; margin-top: 4px; box-shadow: 0 1px 8px rgba(0,0,0,0.08);
}
.topnav .brand {
  font-size: 1.19rem; font-weight: bold; letter-spacing: .6px;
  color: #fff; margin-right: 24px; font-family: 'Mandali','Anek Telugu','Inter',sans-serif;
}
.topnav .menu-toggle { display: none; font-size: 2rem; background: none; border: none; color: #fff; margin-left: auto; cursor: pointer;}
.topnav .navlinks {
  display: flex; gap: 14px; flex: 1; transition: max-height 0.2s;
}
.topnav .navlinks a {
  color: #fff; text-decoration: none; font-size: 16px; font-weight: 500;
  padding: 7px 11px; border-radius: 9px; transition: background 0.13s;
  display: flex; align-items: center; gap: 7px;
  font-family: 'Anek Telugu', 'Mandali', 'Inter', Arial, sans-serif;
}
.topnav .navlinks a.active, .topnav .navlinks a:hover {
  background: rgba(240,255,255,0.16); text-decoration: none;
}
.topnav .userbox { margin-left: 10px; display: flex; align-items: center; gap: 10px;}
.topnav .lang-switch a { color: #fff; font-size: 18px; margin: 0 2px; text-decoration: none;}
/* Mobile nav */
@media (max-width: 900px) {
  .topnav { flex-wrap: wrap; height: auto; padding: 7px 0 8px 5px; }
  .topnav .brand { margin-bottom:5px;}
  .topnav .userbox { margin: 6px 0 0 0; }
  .topnav .menu-toggle { display: block; }
  .topnav .navlinks {
    flex-direction: column;
    width: 100%;
    background: linear-gradient(90deg,#1959a7 94%,#3bbfdb 100%);
    position: absolute; left: 0; top: 55px;
    max-height: 0; overflow: hidden;
    transition: max-height 0.23s;
    z-index: 100;
  }
  .topnav .navlinks.open { max-height: 390px; box-shadow: 0 10px 32px rgba(37,99,235,0.12);}
  .topnav .navlinks a { padding: 14px 13px; border-radius: 0; border-bottom: 1px solid #2469c9; font-size: 16.5px;}
}

/* ==== BOTTOM TAB BAR ==== */
.bottom-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; background: #fff;
  box-shadow: 0 -2px 18px rgba(33,63,141,0.08);
  display: flex; justify-content: space-around; align-items: center;
  height: 56px; z-index: 101; border-top-left-radius: 14px; border-top-right-radius: 14px;
}
.bottom-tabbar a {
  flex:1; color: #1959a7; text-decoration: none; font-size: 15px;
  text-align: center; padding: 2px 0; font-weight: 500; display: flex; flex-direction: column;
  align-items: center; opacity: 0.86; transition: color .13s, opacity .13s;
  font-family: 'Anek Telugu','Mandali','Inter', Arial, sans-serif;
}
.bottom-tabbar a.active, .bottom-tabbar a:hover { color: #247be3; opacity: 1;}
.bottom-tabbar i { font-size: 1.32em; margin-bottom: 1px;}
@media (min-width: 901px) { .bottom-tabbar { display:none; } }
@media (max-width:900px){ body { padding-bottom: 80px; } }

/* ==== MISC ==== */
@media (max-width: 900px) {
  .card, .filter-card { padding: 15px 5vw 12px 5vw; }
  .contacts-list { flex-direction: column; gap:11px;}
  .contact-card { min-width: 0; max-width: 100vw;}
  .filter-card { flex-direction: column; align-items: flex-start; }
  .desktop-table { display:none;}
}
@media (min-width:801px){
  .contacts-list { display:none;}
}

::-webkit-input-placeholder { color: #8ca3b7; }
::-moz-placeholder { color: #8ca3b7; }
:-ms-input-placeholder { color: #8ca3b7; }
::placeholder { color: #8ca3b7; }

hr { border: 0; border-top: 1px solid #e5ebfa; margin: 16px 0; }