/* Premium Flutter-style UI layer for Romana Pharmacy */
:root{
  --rp-primary:#0f766e;
  --rp-primary-2:#14b8a6;
  --rp-primary-3:#0d9488;
  --rp-dark:#062b2b;
  --rp-ink:#0f172a;
  --rp-muted:#64748b;
  --rp-soft:#ecfeff;
  --rp-bg:#f3fbfa;
  --rp-card:#ffffff;
  --rp-border:rgba(15,118,110,.13);
  --rp-shadow:0 20px 55px rgba(15,118,110,.13);
  --rp-shadow-soft:0 12px 32px rgba(15,23,42,.08);
  --rp-radius:24px;
}

html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(circle at 0% 0%, rgba(20,184,166,.18), transparent 28%),
    radial-gradient(circle at 100% 20%, rgba(34,211,238,.14), transparent 24%),
    linear-gradient(180deg,#f5fffd 0%,#eefaf8 46%,#f8fafc 100%) !important;
  color:var(--rp-ink);
  -webkit-font-smoothing:antialiased;
  padding-bottom:86px;
}

.navbar,
.topbar-ui{
  background:linear-gradient(135deg,#053c3c 0%, #0f766e 52%, #14b8a6 100%) !important;
  box-shadow:0 16px 40px rgba(15,118,110,.22) !important;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.navbar-brand{font-weight:900 !important;letter-spacing:.2px;}
.navbar-brand span:last-child,
.navbar-brand{color:#fff !important;}
.brand-badge,
.navbar-brand span:first-child:not(:empty){
  background:rgba(255,255,255,.17) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 8px 20px rgba(0,0,0,.12);
}
.navbar .nav-link,
.topbar-ui .nav-link{border-radius:16px !important;}
.navbar .nav-link.active,
.topbar-ui .nav-link.active{
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 22px rgba(0,0,0,.12) !important;
}

.container,.container-fluid{max-width:1220px;}
.page-wrap,.main-wrap,.content-wrap{padding-bottom:22px;}

.card,.summary-card,.kpi-card,.hero-card,.table-card,.filter-card,.form-card,.stat-card{
  border:1px solid var(--rp-border) !important;
  border-radius:var(--rp-radius) !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:var(--rp-shadow-soft) !important;
  backdrop-filter:blur(12px);
}
.card:hover,.summary-card:hover,.kpi-card:hover,.stat-card:hover{
  transform:translateY(-2px);
  transition:.24s ease;
  box-shadow:var(--rp-shadow) !important;
}

.hero-card,.page-hero,.dashboard-hero{
  background:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.28),transparent 28%),
    linear-gradient(135deg,#064e4b,#0f766e 55%,#2dd4bf) !important;
  color:#fff !important;
  border:0 !important;
  overflow:hidden;
  position:relative;
}
.hero-card::after,.page-hero::after,.dashboard-hero::after{
  content:"";position:absolute;right:-80px;top:-90px;width:240px;height:240px;border-radius:50%;
  background:rgba(255,255,255,.13);
}
.hero-card *,.page-hero *,.dashboard-hero *{position:relative;z-index:1;}

.btn-primary,.btn-success{
  background:linear-gradient(135deg,var(--rp-primary),var(--rp-primary-2)) !important;
  border:0 !important;
  border-radius:16px !important;
  box-shadow:0 12px 24px rgba(15,118,110,.22);
  font-weight:800;
}
.btn-primary:hover,.btn-success:hover{filter:brightness(.97);transform:translateY(-1px);}
.btn-outline-primary{
  color:var(--rp-primary) !important;
  border-color:rgba(15,118,110,.32) !important;
  border-radius:16px !important;
  font-weight:800;
}
.btn-outline-primary:hover{background:var(--rp-primary) !important;color:#fff !important;}
.btn,.form-control,.form-select{min-height:44px;}
.form-control,.form-select,.select2-container--bootstrap-5 .select2-selection{
  border-radius:16px !important;
  border-color:#d9e7e4 !important;
  box-shadow:none !important;
}
.form-control:focus,.form-select:focus{
  border-color:rgba(15,118,110,.56) !important;
  box-shadow:0 0 0 4px rgba(20,184,166,.13) !important;
}

.table{vertical-align:middle;}
.table thead th{
  background:#e9fbf8 !important;
  color:#065f5b !important;
  border-bottom:1px solid #ccefeb !important;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.table tbody tr{transition:.18s ease;}
.table tbody tr:hover{background:#f0fdfa !important;}
.badge{border-radius:999px;padding:.48rem .7rem;font-weight:800;}

.footer-simple{display:none;}

.rp-mobile-nav{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:1050;
  display:none;align-items:center;justify-content:space-around;gap:6px;
  padding:9px;border-radius:26px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,118,110,.16);
  box-shadow:0 18px 50px rgba(15,23,42,.22);
  backdrop-filter:blur(16px);
}
.rp-mobile-nav a{
  flex:1;text-decoration:none;color:#64748b;border-radius:19px;padding:8px 6px 7px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:.72rem;font-weight:800;min-width:0;
}
.rp-mobile-nav a i{font-size:1.18rem;line-height:1;}
.rp-mobile-nav a.active{
  color:#fff;background:linear-gradient(135deg,var(--rp-primary),var(--rp-primary-2));
  box-shadow:0 12px 22px rgba(15,118,110,.24);
}
.rp-mobile-nav a.rp-sell{
  margin-top:-26px;min-height:70px;border-radius:24px;background:linear-gradient(135deg,#0f766e,#22c55e);color:#fff;
  box-shadow:0 18px 32px rgba(15,118,110,.33);
}
.rp-mobile-nav a.rp-sell i{font-size:1.45rem;}

.rp-install-fab{
  position:fixed;right:18px;bottom:96px;z-index:1049;border:0;border-radius:999px;
  background:linear-gradient(135deg,#0f766e,#14b8a6);color:#fff;padding:12px 15px;
  box-shadow:0 18px 35px rgba(15,118,110,.25);font-weight:900;display:none;align-items:center;gap:8px;
}

@media(max-width: 991.98px){
  body{padding-bottom:96px;}
  .rp-mobile-nav{display:flex;}
  .container,.container-fluid{padding-left:14px !important;padding-right:14px !important;}
  .card,.summary-card,.kpi-card,.hero-card,.table-card,.filter-card,.form-card,.stat-card{border-radius:22px !important;}
  .table-responsive{border-radius:20px;box-shadow:var(--rp-shadow-soft);background:#fff;}
  .navbar-collapse{border-radius:20px !important;}
}

@media(max-width:575.98px){
  body{font-size:.94rem;}
  h1{font-size:1.55rem !important;} h2{font-size:1.35rem !important;} h3{font-size:1.16rem !important;}
  .btn{width:auto;white-space:normal;}
  .btn-group,.d-flex.gap-2{flex-wrap:wrap;}
  .rp-mobile-nav{left:8px;right:8px;bottom:8px;border-radius:24px;padding:7px;}
  .rp-mobile-nav a span{font-size:.68rem;}
}


/* === Advanced mobile app view layer: 20260526_adv_mobile1 === */
:root{
  --rp-safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{-webkit-tap-highlight-color: transparent;}
body{overflow-x:hidden;}

/* Touch-first header behaviour */
.navbar{position:sticky;top:0;z-index:1030;}
.navbar .navbar-toggler{border:0 !important;border-radius:16px;background:rgba(255,255,255,.14);min-height:42px;}
.navbar .navbar-toggler:focus{box-shadow:0 0 0 4px rgba(255,255,255,.16) !important;}

/* App-like sections */
.rp-page-title,
.page-title,
.content-title{
  font-weight:900;
  letter-spacing:-.02em;
}
.rp-soft-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.84));
  border:1px solid rgba(15,118,110,.13);
  border-radius:24px;
  box-shadow:var(--rp-shadow-soft);
}

/* Make action groups usable on phones */
.action-bar,.filter-actions,.page-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.action-bar .btn,.filter-actions .btn,.page-actions .btn{border-radius:16px;font-weight:800;}

/* Advanced responsive tables: JS adds data-labels; CSS turns rows into cards */
.rp-card-table .rp-row-actions,
.rp-mobile-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.rp-card-table .btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:5px;}
.rp-card-table td .btn + .btn{margin-left:4px;}
.rp-card-table .form-control,
.rp-card-table .form-select{min-height:40px;}

/* Better form and cart layout on mobile */
.rp-form-stack .row>[class*="col-"],
form .row>[class*="col-"]{margin-bottom:.35rem;}
.input-group .btn{min-height:44px;}

/* Mobile quick action button */
.rp-quick-sale-fab{
  position:fixed;right:16px;bottom:calc(102px + var(--rp-safe-bottom));z-index:1048;
  width:54px;height:54px;border-radius:20px;border:0;
  display:none;align-items:center;justify-content:center;text-decoration:none;
  background:linear-gradient(135deg,#0f766e,#22c55e);color:#fff;
  box-shadow:0 18px 38px rgba(15,118,110,.34);font-size:1.35rem;
}
.rp-quick-sale-fab:active{transform:scale(.96);}

/* Offline/install and app shell polish */
.rp-install-fab{bottom:calc(104px + var(--rp-safe-bottom));}
.rp-mobile-nav{bottom:calc(10px + var(--rp-safe-bottom));}
.rp-mobile-nav a{touch-action:manipulation;}

@media(max-width: 991.98px){
  body{padding-bottom:calc(106px + var(--rp-safe-bottom));}
  .navbar-collapse{
    margin-top:10px;padding:10px;background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);
  }
  .navbar .nav-link{min-height:42px;display:flex;align-items:center;}
  .hero-card,.page-hero,.dashboard-hero{border-radius:26px !important;}
  .card-body{padding:1rem !important;}
  .rp-quick-sale-fab{display:flex;}
  .rp-install-fab{right:14px;padding:10px 13px;}
}

@media(max-width: 767.98px){
  .container,.container-fluid{width:100%;max-width:100%;}
  .row.g-4{--bs-gutter-y:1rem;}
  .table-responsive{
    overflow:visible !important;
    box-shadow:none !important;
    background:transparent !important;
  }
  table.rp-card-table{
    border-collapse:separate !important;
    border-spacing:0 12px !important;
    width:100% !important;
  }
  table.rp-card-table thead{display:none !important;}
  table.rp-card-table tbody,
  table.rp-card-table tr,
  table.rp-card-table td{display:block !important;width:100% !important;}
  table.rp-card-table tr{
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(15,118,110,.13) !important;
    border-radius:22px !important;
    padding:10px 12px !important;
    margin-bottom:12px !important;
    box-shadow:0 12px 30px rgba(15,23,42,.08) !important;
    overflow:hidden;
  }
  table.rp-card-table td{
    border:0 !important;
    border-bottom:1px solid rgba(15,118,110,.08) !important;
    padding:9px 2px !important;
    min-height:38px;
    display:grid !important;
    grid-template-columns:minmax(104px,42%) 1fr;
    gap:10px;
    align-items:center;
    text-align:right;
    word-break:break-word;
  }
  table.rp-card-table td:last-child{border-bottom:0 !important;}
  table.rp-card-table td::before{
    content:attr(data-label);
    text-align:left;
    color:#64748b;
    font-size:.77rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
  }
  table.rp-card-table td[data-label=""],
  table.rp-card-table td:not([data-label]){grid-template-columns:1fr;}
  table.rp-card-table td[data-label=""]::before,
  table.rp-card-table td:not([data-label])::before{display:none;}
  table.rp-card-table td.rp-actions-cell{
    display:flex !important;justify-content:flex-end;gap:8px;flex-wrap:wrap;text-align:right;
  }
  table.rp-card-table td.rp-actions-cell::before{width:100%;content:attr(data-label);text-align:left;}
  table.rp-card-table td.rp-actions-cell .btn{flex:0 0 auto;}

  .btn{min-height:44px;}
  .btn-sm{min-height:38px;border-radius:14px !important;}
  .form-control,.form-select{font-size:16px !important;} /* Prevent iPhone zoom */
  .input-group{border-radius:18px;}
  .input-group>.form-control,.input-group>.form-select{min-width:0;}

  .modal-dialog{margin:.75rem;}
  .modal-content{border-radius:24px;}
}

@media(max-width:575.98px){
  .card,.summary-card,.kpi-card,.hero-card,.table-card,.filter-card,.form-card,.stat-card{border-radius:20px !important;}
  .card-header{padding:.85rem 1rem !important;}
  .hero-card,.page-hero,.dashboard-hero{padding:1rem !important;}
  .btn-group{width:100%;display:grid !important;grid-template-columns:1fr 1fr;gap:8px;}
  .btn-group>.btn{border-radius:16px !important;width:100%;}
  .d-flex.gap-2 > .btn{flex:1 1 auto;}
  table.rp-card-table td{grid-template-columns:1fr;text-align:left;gap:3px;}
  table.rp-card-table td::before{margin-bottom:2px;}
  table.rp-card-table td.rp-actions-cell{justify-content:stretch;}
  table.rp-card-table td.rp-actions-cell .btn{flex:1 1 120px;}
}