/* ============================================================
   School ERP — Main Stylesheet
   Theme variables are set inline from settings.theme
   ============================================================ */
:root {
  --p:#7141b1;
  --s:#3f9ec5;
  --a:#f59e0b;
  --p-rgb:113,65,177;
  --s-rgb:63,158,197;

  --bg: #f4f5fa;
  --surface: #ffffff;
  --text: #1f2937;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --sidebar-bg: linear-gradient(180deg, var(--p) 0%, var(--s) 100%);
  --sidebar-text: rgba(255,255,255,.88);
  --sidebar-active: rgba(255,255,255,.18);

  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.12);

  --sidebar-w: 260px;
  --sidebar-w-collapsed: 76px;
  --navbar-h: 64px;

  --transition: .25s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  --bg: #0f172a;
  --surface: #1e293b;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --border: #334155;
}

* { box-sizing:border-box }
html, body { height:100%; margin:0 }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--p); text-decoration: none; }
a:hover { color: var(--s); }

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
  position: fixed; top:0; left:0;
  width: var(--sidebar-w); height:100vh;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  z-index: 1030;
  display:flex; flex-direction:column;
  transition: width var(--transition);
  overflow:hidden;
  box-shadow: 4px 0 24px rgba(0,0,0,.06);
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  white-space:nowrap;
}
.sidebar-brand .logo{
  width:40px; height:40px; border-radius:10px;
  background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:22px; color:#fff; flex-shrink:0;
}
.sidebar-brand .brand-text{
  font-weight:700; font-size:1.05rem; color:#fff; line-height:1.1;
}
.sidebar-brand .brand-text small{ font-size:.7rem; opacity:.7; font-weight:400 }

.sidebar-nav{
  flex:1; overflow-y:auto; padding:14px 0;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
}
.sidebar-nav::-webkit-scrollbar{ width:6px }
.sidebar-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:3px }

.nav-section-title{
  padding: 14px 22px 6px;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.1em;
  color: rgba(255,255,255,.5); font-weight:600;
}
.nav-item{ margin: 1px 12px; position:relative; }
.nav-link{
  display:flex; align-items:center; gap:12px;
  padding: 10px 14px; border-radius:10px;
  color: var(--sidebar-text); font-weight:500; font-size:.92rem;
  white-space:nowrap;
  transition: all var(--transition);
  cursor:pointer;
}
.nav-link i:first-child{ font-size:1.1rem; width:22px; text-align:center; flex-shrink:0; }
.nav-link .nav-text{ flex:1; }
.nav-link .nav-arrow{ font-size:.8rem; transition: transform var(--transition); }
.nav-link.has-sub.open .nav-arrow{ transform: rotate(90deg); }
.nav-link:hover{ background: rgba(255,255,255,.1); color:#fff; }
.nav-link.active{ background: var(--sidebar-active); color:#fff; box-shadow: inset 3px 0 0 #fff; }

.nav-sub{ padding: 4px 0 4px 36px; display:none; }
.nav-link.has-sub.open + .nav-sub{ display:block; }
.nav-sub .nav-link{ padding: 7px 12px; font-size:.86rem; opacity:.9; }
.nav-sub .nav-link::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background: rgba(255,255,255,.4); flex-shrink:0;
}
.nav-sub .nav-link i:first-child{ display:none; }

.badge-nav{
  background: #ef4444; color:#fff; font-size:.65rem;
  padding:2px 6px; border-radius:10px;
}

/* Collapsed sidebar */
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-arrow,
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .badge-nav { display:none; }
.sidebar.collapsed .nav-sub { display:none !important; }
.sidebar.collapsed .nav-link{ justify-content:center; padding:11px 0 }
.sidebar.collapsed .nav-link i:first-child{ font-size:1.25rem; width:auto; }
.sidebar.collapsed .sidebar-brand{ justify-content:center; padding:18px 0; }

/* ============================================================
   Top Navbar
   ============================================================ */
.main-wrap{
  margin-left: var(--sidebar-w);
  min-height:100vh;
  transition: margin-left var(--transition);
  display:flex; flex-direction:column;
}
.sidebar.collapsed ~ .main-wrap{ margin-left: var(--sidebar-w-collapsed); }

.topbar{
  height: var(--navbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center;
  padding: 0 20px;
  gap:16px;
  position: sticky; top:0; z-index:1020;
  box-shadow: var(--shadow-sm);
}
.btn-icon{
  width:40px; height:40px; border:none;
  background: transparent;
  border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--text-muted); font-size:1.1rem;
  position:relative; cursor:pointer;
  transition: all .15s;
}
.btn-icon:hover{ background: var(--bg); color: var(--p); }
.btn-icon .dot{
  position:absolute; top:8px; right:8px;
  min-width:18px; height:18px; padding:0 4px;
  background:#ef4444; color:#fff;
  font-size:.65rem; font-weight:700;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
}
.topbar-search{
  flex:1; max-width: 420px; position:relative;
}
.topbar-search input{
  width:100%; height:40px; padding: 0 16px 0 40px;
  background: var(--bg); border:1px solid transparent;
  border-radius:10px; font-size:.9rem;
  color: var(--text);
  transition: all .15s;
}
.topbar-search input:focus{ outline:none; border-color: var(--p); background:var(--surface); }
.topbar-search i{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color: var(--text-muted);
}
.topbar-spacer{ flex:1; }

/* User dropdown */
.user-menu-btn{
  display:flex; align-items:center; gap:10px; padding: 4px 10px 4px 4px;
  background:transparent; border:none; border-radius:10px; cursor:pointer;
}
.user-menu-btn:hover{ background:var(--bg) }
.user-avatar{
  width:34px; height:34px; border-radius:50%;
  background: linear-gradient(135deg,var(--p),var(--s));
  color:#fff; font-weight:600; font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}
.user-avatar-img{
  object-fit:cover;
  border:2px solid rgba(var(--p-rgb),.15);
  padding:0;
}
.user-avatar img{ width:100%; height:100%; object-fit:cover; }
.user-info{ text-align:left; line-height:1.1 }
.user-info strong{ font-size:.85rem; color:var(--text); display:block; }
.user-info span{ font-size:.7rem; color:var(--text-muted); }

/* Dropdowns */
.dropdown-menu{
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow: var(--shadow-lg);
  padding:6px;
  margin-top:6px !important;
  background: var(--surface);
}
.dropdown-item{
  border-radius:8px;
  padding: 8px 12px;
  font-size:.88rem;
  color: var(--text);
  display:flex; align-items:center; gap:10px;
}
.dropdown-item:hover{ background: var(--bg); color: var(--p); }
.dropdown-item i { color: var(--text-muted); }

/* Notification & chat dropdowns (managed manually in app.js) */
.dropdown-x{ position: relative; }
.notify-dropdown, .chat-dropdown{
  width: 360px; max-height: 520px; overflow:hidden;
  display:none; flex-direction:column;
  padding:0;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 1050;
}
.notify-dropdown.show, .chat-dropdown.show{
  display: flex;
}
.notify-dropdown .dd-footer, .chat-dropdown .dd-footer{
  padding: 10px 16px; border-top:1px solid var(--border); text-align:center;
  background: var(--bg);
}
.notify-dropdown .dd-footer a, .chat-dropdown .dd-footer a{ color: var(--p); font-weight:500; }
@media (max-width: 576px){
  .notify-dropdown, .chat-dropdown{
    position: fixed !important;
    top: var(--navbar-h) !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
  }
}
.notify-dropdown .dd-header, .chat-dropdown .dd-header{
  padding: 14px 16px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.notify-dropdown .dd-header h6, .chat-dropdown .dd-header h6{ margin:0; font-size:.95rem; font-weight:700; }
.notify-list, .chat-list{
  flex:1; overflow-y:auto; max-height:360px;
}
.notify-item{
  display:flex; gap:12px; padding: 12px 16px;
  border-bottom:1px solid var(--border);
  cursor:pointer; transition: background .15s;
}
.notify-item:hover{ background: var(--bg) }
.notify-item.unread{ background: rgba(var(--p-rgb),.04) }
.notify-icon{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(var(--p-rgb),.15),rgba(var(--s-rgb),.15));
  color:var(--p);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.notify-content { flex:1; min-width:0 }
.notify-content strong{ font-size:.85rem; color:var(--text); display:block; }
.notify-content p{ margin:2px 0; font-size:.8rem; color:var(--text-muted); }
.notify-time{ font-size:.7rem; color:var(--text-muted); }

/* Chat list items */
.chat-contact{
  display:flex; gap:10px; padding: 10px 14px; cursor:pointer;
  border-bottom:1px solid var(--border);
}
.chat-contact:hover{ background:var(--bg) }
.chat-contact .user-avatar{ width:42px; height:42px; font-size:.9rem; flex-shrink:0; }
.chat-contact .info{ flex:1; min-width:0 }
.chat-contact .info strong{ font-size:.88rem; display:block; color:var(--text); }
.chat-contact .info p{ margin:1px 0; font-size:.78rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.online-dot{
  width:10px;height:10px;border-radius:50%;
  background:#10b981; border:2px solid var(--surface);
  position:absolute; bottom:0; right:0;
}

/* ============================================================
   Live Chat Floating Box
   ============================================================ */
.chat-window{
  position:fixed; right:24px; bottom:24px;
  width:340px; height:480px;
  background:var(--surface);
  border-radius:14px; box-shadow: var(--shadow-lg);
  display:none; flex-direction:column;
  overflow:hidden;
  z-index:1100;
  border:1px solid var(--border);
}
.chat-window.open{ display:flex; }
.chat-window .chat-head{
  padding:12px 14px;
  background:linear-gradient(135deg,var(--p),var(--s));
  color:#fff; display:flex; align-items:center; gap:10px;
}
.chat-window .chat-head .user-avatar{ width:36px; height:36px; background:rgba(255,255,255,.2) }
.chat-window .chat-head .info{ flex:1; min-width:0 }
.chat-window .chat-head .info strong{ font-size:.92rem; display:block; }
.chat-window .chat-head .info span{ font-size:.72rem; opacity:.85 }
.chat-window .chat-head button{ background:transparent;border:none;color:#fff;font-size:1.1rem }
.chat-body{ flex:1; overflow-y:auto; padding:14px; background:var(--bg); display:flex; flex-direction:column; gap:8px; }
.chat-msg{ max-width:75%; padding:8px 12px; border-radius:14px; font-size:.85rem; line-height:1.35; word-wrap:break-word; }
.chat-msg.in{ background:var(--surface); border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:4px; }
.chat-msg.out{ background:linear-gradient(135deg,var(--p),var(--s)); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.chat-msg .time{ display:block; font-size:.65rem; opacity:.7; margin-top:2px; }
.chat-input{
  padding:10px; border-top:1px solid var(--border);
  display:flex; gap:8px; align-items:center; background:var(--surface);
}
.chat-input input{ flex:1; height:38px; border:1px solid var(--border); border-radius:10px; padding:0 12px; font-size:.88rem; background:var(--bg); color:var(--text); }
.chat-input input:focus{ outline:none; border-color:var(--p); }
.chat-input button{ width:38px;height:38px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--p),var(--s));color:#fff; }

/* ============================================================
   Content area
   ============================================================ */
.content{ padding: 24px; flex:1; }
.page-header{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  margin-bottom:24px;
}
.page-header h1{ font-size:1.5rem; font-weight:700; margin:0; color:var(--text); }
.page-header .breadcrumb-x{ font-size:.82rem; color:var(--text-muted); margin-top:2px; }
.page-header .breadcrumb-x a{ color:var(--text-muted); }
.page-header .breadcrumb-x .sep{ margin:0 6px; }

/* Cards */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom:20px;
}
.card-header{
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  background:transparent;
}
.card-header h5{ margin:0; font-size:1rem; font-weight:600; }
.card-body{ padding:20px; }

/* Stat cards */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-bottom:24px; }
.stat-card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  display:flex; gap:14px; align-items:center;
  transition: all .2s; cursor:default;
  position:relative; overflow:hidden;
}
.stat-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--accent, linear-gradient(90deg,var(--p),var(--s)));
}
.stat-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.stat-card .icon{
  width:56px; height:56px; border-radius:14px;
  background: linear-gradient(135deg, rgba(var(--p-rgb),.15), rgba(var(--s-rgb),.15));
  color: var(--p);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; flex-shrink:0;
}
.stat-card .meta{ flex:1; }
.stat-card .label{ color: var(--text-muted); font-size:.85rem; margin-bottom:2px; }
.stat-card .value{ font-size:1.6rem; font-weight:700; line-height:1; color:var(--text); }
.stat-card .trend{ font-size:.75rem; margin-top:6px; }
.stat-card .trend.up{ color:#10b981 } .stat-card .trend.down{ color:#ef4444 }

/* Buttons */
.btn{
  border-radius:10px; padding:8px 16px; font-weight:500; font-size:.88rem;
  transition: all .15s; border:1px solid transparent;
}
.btn-primary{
  background: linear-gradient(135deg,var(--p),var(--s));
  border:none; color:#fff;
}
.btn-primary:hover{ filter:brightness(.95); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--p-rgb),.3); color:#fff; }
.btn-outline-primary{ border-color:var(--p); color:var(--p); background:transparent; }
.btn-outline-primary:hover{ background:var(--p); color:#fff; }
.btn-sm{ padding:4px 10px; font-size:.8rem; }
.btn-light{ background:var(--bg); border:1px solid var(--border); color:var(--text); }
.btn-light:hover{ background:var(--surface); border-color:var(--p); color:var(--p); }

/* Tables */
.table{ color:var(--text); margin-bottom:0 }
.table thead th{
  font-size:.75rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); font-weight:600;
  border-bottom: 2px solid var(--border); padding:12px;
}
.table td{ padding:12px; vertical-align:middle; border-color:var(--border); }
.table tbody tr:hover{ background: var(--bg); }

/* Forms */
.form-label{ font-size:.85rem; font-weight:500; color:var(--text); margin-bottom:6px; }
.form-control, .form-select{
  border:1px solid var(--border); border-radius:10px;
  padding: 9px 14px; font-size:.9rem; height:auto;
  background: var(--surface); color: var(--text);
  transition: all .15s;
}
.form-control:focus, .form-select:focus{
  border-color: var(--p);
  box-shadow: 0 0 0 .2rem rgba(var(--p-rgb),.15);
  background: var(--surface); color:var(--text);
}

/* Badges */
.badge{
  font-weight:500; padding: 5px 10px; border-radius:8px; font-size:.72rem;
}
.badge.bg-success{ background:#dcfce7 !important; color:#166534; }
.badge.bg-danger{ background:#fee2e2 !important; color:#991b1b; }
.badge.bg-warning{ background:#fef3c7 !important; color:#92400e; }
.badge.bg-info{ background:#dbeafe !important; color:#1e40af; }
.badge.bg-primary{ background: rgba(var(--p-rgb),.15) !important; color: var(--p); }

/* Alerts */
.alert{ border-radius: var(--radius); border: none; padding: 12px 16px; font-size:.88rem; }
.alert-success{ background:#dcfce7; color:#166534; }
.alert-danger{ background:#fee2e2; color:#991b1b; }
.alert-info{ background:#dbeafe; color:#1e40af; }
.alert-warning{ background:#fef3c7; color:#92400e; }

/* Tabs */
.nav-tabs{ border-bottom:1px solid var(--border); }
.nav-tabs .nav-link{
  border:none; color: var(--text-muted); font-weight:500;
  padding: 10px 16px; border-radius: 0; background:transparent;
  border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link.active{ color: var(--p); border-bottom-color: var(--p); background:transparent; }

/* Misc */
.text-muted{ color: var(--text-muted) !important; }
hr{ border-color: var(--border); opacity:1; }
.empty-state{ text-align:center; padding: 60px 20px; color:var(--text-muted); }
.empty-state i{ font-size:3.5rem; opacity:.3; }

/* Responsive */
@media (max-width: 992px){
  .sidebar{ transform: translateX(-100%); }
  .sidebar.show{ transform: translateX(0); width: var(--sidebar-w); }
  .main-wrap{ margin-left:0 !important; }
  .topbar-search{ display:none; }
}
.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1029;
}
.sidebar-backdrop.show{ display:block; }

/* Login */
.login-wrap{
  min-height:100vh; display:flex; align-items:center;
  /*background: linear-gradient(135deg, var(--p) 0%, var(--s) 100%);*/
  padding: 20px;
}
.login-card{
  background: var(--surface); border-radius: 18px;
  box-shadow: 0 25px 70px rgba(0,0,0,.25);
  overflow:hidden; max-width: 980px; width:100%; margin:0 auto;
}
.login-side{
  background: linear-gradient(135deg, #500379 30%, #e24c4a 100%);
  color:#fff; padding:50px 40px; min-height:480px;
  display:flex; flex-direction:column; justify-content:center;
}
.login-side .icon{ font-size:64px; opacity:.9; margin-bottom:18px; }
.login-side h2{ font-weight:700; }
.login-form-side{ padding:50px 40px; }
@media (max-width:768px){
  .login-side{ display:none; }
}

/* Print */
@media print{
  .sidebar, .topbar, .chat-window, .no-print{ display:none !important; }
  .main-wrap{ margin-left:0 !important; }
  .content{ padding:0; }
  body{ background:#fff; }
  .card{ box-shadow:none; border:1px solid #ccc; }
}

/* ============================================================
   Module 8.1 — Preloader
   ============================================================ */
#app-preloader{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .35s ease;
}
#app-preloader.is-hidden{ opacity:0; pointer-events:none; }
#app-preloader .pl-inner{ display:flex; flex-direction:column; align-items:center; gap:16px; }
#app-preloader .pl-msg{ color:#6b7280; font-weight:500; font-size:.95rem; }

/* spinner */
#app-preloader .pl-spinner{
  width:56px; height:56px; border:5px solid #e5e7eb;
  border-top-color: var(--p); border-radius:50%;
  animation: pl-spin .9s linear infinite;
}
@keyframes pl-spin{ to{ transform:rotate(360deg) } }

/* dots */
#app-preloader .pl-dots{ display:flex; gap:8px; }
#app-preloader .pl-dots span, .pl-dot{
  width:12px; height:12px; border-radius:50%;
  background: var(--p); display:inline-block;
  animation: pl-bounce 1.2s ease-in-out infinite;
}
#app-preloader .pl-dots span:nth-child(2){ animation-delay:.15s; background: var(--s); }
#app-preloader .pl-dots span:nth-child(3){ animation-delay:.3s;  background: var(--a); }
@keyframes pl-bounce{
  0%,80%,100%{ transform: scale(.7); opacity:.5; }
  40%{ transform: scale(1); opacity:1; }
}

/* progress bar */
#app-preloader .pl-bar{ width:220px; height:4px; background:#e5e7eb; border-radius:2px; overflow:hidden; }
#app-preloader .pl-bar > div{
  width:40%; height:100%; background: var(--p);
  animation: pl-bar 1.2s ease-in-out infinite;
}
@keyframes pl-bar{
  0%{ margin-left:-40%; } 100%{ margin-left:100%; }
}

/* pulse */
#app-preloader .pl-pulse{
  width:64px; height:64px; border-radius:16px;
  background: linear-gradient(135deg, var(--p), var(--s));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:32px;
  animation: pl-pulse 1s ease-in-out infinite;
  box-shadow: 0 8px 24px rgba(var(--p-rgb),.35);
}
@keyframes pl-pulse{
  0%,100%{ transform: scale(1);   box-shadow:0 8px 24px rgba(var(--p-rgb),.35); }
  50%    { transform: scale(1.1); box-shadow:0 12px 32px rgba(var(--p-rgb),.55); }
}

/* ============================================================
   Module 8.1 — Application footer
   ============================================================ */
.app-footer{
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted); font-size: .85rem;
  gap: 12px; flex-wrap: wrap;
}
.app-footer .af-left{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.app-footer .af-ver{
  padding: 2px 8px; border-radius: 8px;
  background: rgba(var(--p-rgb), .08); color: var(--p);
  font-weight: 600; font-size: .75rem;
}
.app-footer .af-powered{ opacity:.8; }
.app-footer .af-right{ display:flex; gap:16px; flex-wrap:wrap; }
.app-footer .af-right a{ color: var(--text-muted); }
.app-footer .af-right a:hover{ color: var(--p); }
@media (max-width: 640px){
  .app-footer{ flex-direction:column; align-items:flex-start; }
}