/* =========================
   TOKENS
========================= */

:root{
  --spv-footer-h: 56px;
  --spv-safe-bottom: env(safe-area-inset-bottom, 0px);
  --spv-container-pad-bottom: calc(var(--spv-footer-h) + var(--spv-safe-bottom));
}

/* =========================
   BASE
========================= */

*,
*::before,
*::after{
  box-sizing: border-box;
}

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body{
  background: #0f1a2a !important;
  color: #ddd;
  font-family: system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* body has no scroll, only internal scrollers */
}

a{
  color: inherit;
  text-decoration: none;
}

/* =========================
   HEADER
========================= */

.app-header{
  background: #141414;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  height: 33px;
}

.app-header-left,
.app-header-center,
.app-header-right{
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.app-header-left{ justify-content: flex-start; }

.app-header-center{
  justify-content: center;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
  color: #c8ced6;
}

.app-header-right{ justify-content: flex-end; }

.user-info{ display: none; }

.app-header i{
  transform: translateY(0);
  filter:
    drop-shadow(0 1px 1px rgba(255,255,255,.15))
    drop-shadow(0 2px 3px rgba(0,0,0,.85));
  transition: transform .12s ease, filter .12s ease;
}

.app-header a:hover i{ transform: translateY(-1px); }
.app-header a:active i{ transform: translateY(1px); }

.app-header .fa-house{ color: #7b9bb5; } 

.app-header .fa-right-from-bracket{
  color: #b22222 !important;
  filter: none;
}

/* =========================
   MAIN CONTAINER
========================= */

.app-container{
  flex: 1;

  width: 94%;
  max-width: 640px;
  margin: 0 auto;

  padding: 0px 14px var(--spv-container-pad-bottom);


  display: flex;
  flex-direction: column;

  overflow: hidden;
}

/* =========================
   DASHBOARD ACTIONS
========================= */

.dash-actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px; /* closer to title */
}

/* =========================
   UNIFIED ACTION BUTTONS
========================= */

.action-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  height: 28px;
  line-height: 28px;
  padding: 0 10px;

  font-size: 0.85rem !important;
  font-weight: 700 !important;

  background: #1b1b1b;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 0.4rem;
  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 4px rgba(0,0,0,.6);

  box-sizing: border-box;
}

/* === Install: center single action button === */
form > div:last-child{
  display: flex;
  justify-content: center;
}


.action-btn span,
.action-btn i{
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}

/* Roles (colors) */
.action-btn.btn-save,
.action-btn.btn-save span,
.action-btn.btn-save i{ color:#e6e6e6 !important; }

.action-btn.btn-back,
.action-btn.btn-back span,
.action-btn.btn-back i{ color:#7b9bb5 !important; }

.action-btn.btn-edit,
.action-btn.btn-edit span,
.action-btn.btn-edit i{ color:#c9ad73 !important; }

.action-btn.btn-clear,
.action-btn.btn-clear span,
.action-btn.btn-clear i,
.action-btn.btn-undo,
.action-btn.btn-undo span,
.action-btn.btn-undo i{ color:#c98a2b !important; }

.action-btn.btn-danger,
.action-btn.btn-danger span,
.action-btn.btn-danger i{ color:#b22222 !important; }

/* Category list (special case: gold) */
.action-btn.btn-category,
.action-btn.btn-category span,
.action-btn.btn-category i{ color:#c9ad73 !important; }



/* =========================
   ACCORDION
========================= */

.accordion{
  width: 100%;
  margin-top: 4px;
}

.accordion-item{
  background: #1e1e1e;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 10px rgba(0,0,0,.75);
}

.accordion-header{ margin: 0; }

.accordion-button{
  all: unset;
  display: block;
  width: 100%;
  padding: 8px 36px 8px 12px;
  cursor: pointer;
  font-size: 0.78rem;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.accordion-button:active{
  box-shadow: inset 0 3px 6px rgba(0,0,0,.7);
}

.collapse{ display: none; }
.collapse.show{ display: block; }

.accordion-body{
  padding: 8px;
}

/* ACCORDION TITLE / EYE */
.acc-eye{ color: #aaa; margin-right: 0; }

.acc-title{
  margin-left: 10px;
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.accordion-button.collapsed .acc-eye,
.accordion-button.collapsed .acc-title{ color: #7b9bb5 !important; }

.accordion-button:not(.collapsed) .acc-eye,
.accordion-button:not(.collapsed) .acc-title{ color: #c9ad73 !important; }

/* =========================
   MINI TABLE
========================= */

.table-mini{
  width: 100%;
  font-size: 0.8rem;
  border-collapse: separate;
  border-spacing: 0 6px;
}

.table-mini tr{
  background: #222;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 2px 6px rgba(0,0,0,.7);
}

.table-mini td{ padding: 5px 8px; }

.field-label{
  width: 60px;
  white-space: nowrap;
  color: #7b9bb5;
  font-size: 0.75rem;
  text-decoration: none !important;
  text-transform: none;
}

.field-label span{ font-weight: normal !important; }

.pw-field{
  font-family: monospace;
  letter-spacing: 2px;
}

.pw-toggle{
  color: #6ec1ff;
  cursor: pointer;
}

/* ACCORDION ACTIONS */
.accordion-body .d-flex.justify-content-between{
  display: flex;
  align-items: center;
  margin-top: 6px;
  width: 100%;
}

.accordion-body .d-flex.gap-2{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.accordion-body .action-btn{
  padding: 0.12rem 0.26rem;
}

/* EDIT */
.fa-pen,
a.action-btn .fa-pen + span{
  color: #c9ad73 !important;
  font-weight: bold;
}

/* DELETE */
.fa-trash,
a.action-btn .fa-trash + span{
  color: #b22222 !important;
  font-weight: bold;
}

/* CLOSE */
.close-btn,
.close-btn i,
.close-btn span{
  color: #2f7a5a !important;
  font-weight: bold;
}

.close-btn{ margin-left: auto !important; }

/* =========================
   SEARCH
========================= */

.vault-search{
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin: 6px 0 10px;
}

#vaultClear,
#vaultSearch{
  min-height: 34px;
  padding: 6px 12px;
  font-size: 0.85rem;
}

#vaultSearch{
  width: 60%;
  max-width: 260px;
  background: #1b1b1b;
  border: 1px solid rgba(255,255,255,.25);
  color: #ddd;
  line-height: 1.4;
}

#vaultSearch::placeholder{
  color: rgba(123,155,181,.55);
}

/* =========================
   SCROLLBAR (GLOBAL)
========================= */

*{
  scrollbar-width: thin;
  scrollbar-color: #7b9bb5 #181818;
}

::-webkit-scrollbar{ width: 10px; }

::-webkit-scrollbar-track{ background: #181818; }

::-webkit-scrollbar-thumb{
  background-color: #7b9bb5;
  border-radius: 8px;
  border: 2px solid #181818;
}

::-webkit-scrollbar-thumb:hover{ background-color: #9bb6cc; }

/* =========================
   FOOTER (FIXED + RESERVED SPACE)
========================= */

.app-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height: var(--spv-footer-h);
  padding: 6px 0;
  padding-bottom: var(--spv-safe-bottom);

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;

  text-align: center;
  font-size: 0.6rem;
  line-height: 1.15;
  color: #777;
  background: #181818;
  border-top: 1px solid #222;
  z-index: 8000;
}

/* =========================
   HR
========================= */

hr{
  border: none;
  border-top: 1px solid rgba(110,193,255,.25);
  margin: 6px 0;
}

/* =========================
   CONFIRM OVERLAY – MODAL
========================= */

.confirm-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}

.confirm-overlay.hidden{ display: none !important; }

.confirm-overlay:not(.hidden){ display: flex !important; }

.confirm-box{
  background: #1e1e1e;
  border-radius: 10px;
  padding: 14px 16px;
  min-width: 260px;
  max-width: 360px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 18px rgba(0,0,0,.9);
  border: 1px solid rgba(255,255,255,.16);
}

.confirm-title{
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 4px;
  color: #c9ad73;
}

.confirm-text{
  font-size: 0.8rem;
  color: #ddd;
  opacity: 0.9;
  margin-bottom: 10px;
}

.confirm-actions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.confirm-btn{
  border: none;
  background: #1b1b1b;
  border-radius: 0.4rem;
  padding: 0.22rem 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 4px rgba(0,0,0,.8);
}

.confirm-btn i{ font-size: 0.9rem; }

.confirm-btn.cancel{ color: #7b9bb5; }
.confirm-btn.ok{ color: #b22222; }

.confirm-btn.cancel:hover,
.confirm-btn.ok:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 3px 6px rgba(0,0,0,.9);
}

/* =========================
   VAULT – TWO COLUMNS LAYOUT
========================= */

.vault-columns{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 4px;
}

.vault-col{
  flex: 1;
  min-width: 0;
}

/* list/view internal scroll */
.vault-scroll{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* =========================
   RECORD DETAIL OVERLAY
========================= */

.accordion-collapse.show{
  position: fixed;
  inset: 36px 8px calc(var(--spv-footer-h) + 8px) 8px; /* above fixed footer */
  z-index: 9000;
  background: rgba(0,0,0,.70);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.accordion-collapse.show .accordion-body{
  width: 100%;
  max-width: 720px;
  max-height: 100%;
  overflow-y: auto;
  background: #1e1e1e;
  border-radius: 10px;
  padding: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 12px rgba(0,0,0,.9);
}

.accordion-collapse.show hr{ margin: 8px 0 0; }

/* =========================
   FORMS – BASE INPUT STYLE
========================= */

.form-control{
  background: #1b1b1b;
  color: #969da4 !important;
  border: 1px solid #444;
  font-size: 0.8rem;
  padding: 5px 36px 5px 12px;
  border-radius: 6px !important;
  padding-right: 22px !important;
}

.form-control:focus{
  background: #1b1b1b;
  color: #969da4 !important;
  border-color: #6ec1ff;
  outline: none;
  box-shadow: none;
}

.form-locked{
  opacity: .35;
  pointer-events: none;
}

/* Other custom field style */
.other-highlight{
  border-color: #2f7a5a !important;
  box-shadow: 0 0 0 1px rgba(47,122,90,.25);
}

.other-wrap{ position: relative; }

.send-inside{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #2f7a5a;
  font-size: 1rem;
  cursor: pointer;
}

/* custom pseudo-select */
.fake-select{
  width: 100%;
  background: #1b1b1b;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 6px 30px 6px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  position: relative;
  display: block;
}

.fake-select::after{
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #7b9bb5;
  transform: translateY(-40%);
}

.fake-select-menu{
  display: none;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 6px;
  margin-top: 4px;
  overflow: hidden;
}

.fake-select-menu div{
  padding: 8px 10px;
  cursor: pointer;
  color: #969da4;
  font-size: 0.8rem;
}

.fake-select-menu div:hover{ background: #3a3a3a; }

/* update narrow fields */
.update-narrow,
.update-select{
  width: 100%;
  max-width: 260px;
}

/* password eye icon */
.pw-inside-wrap{
  position: relative;
  display: inline-block;
  width: 100%;
}

.pw-inside-wrap .form-control{
  width: 100%;
  padding-right: 28px !important;
}

.pw-inside-toggle{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 0.9rem;
  color: #7b9bb5 !important;
}

/* dashboard password eye icon */
td .pw-inside-toggle,
td .pw-toggle{ color: #7b9bb5 !important; }

td .pw-inside-toggle.fa-eye-slash,
td .pw-toggle.fa-eye-slash{ color: #7b9bb5 !important; }

/* autofill */
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0 30px #2a2a2a inset !important;
  -webkit-text-fill-color: #b8c2cc !important;
  caret-color: #b8c2cc !important;
}

input.form-control:-moz-autofill{
  box-shadow: 0 0 0 30px #2a2a2a inset !important;
  -moz-text-fill-color: #b8c2cc !important;
  caret-color: #b8c2cc !important;
}

/* always selectable */
input[type="text"],
input[type="password"],
input[type="email"],
textarea{
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

input.form-control.update-narrow[readonly]{
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* =========================
   VIEW.PHP – READONLY FIELDS
========================= */

.view-field{
  display: block;
  width: 100%;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  background-color: #f2f2f2;
  color: #222222;
  font-size: 0.9rem;
  line-height: 1.3;
  word-break: break-all;
}

.view-field-placeholder{
  color: #999999;
  font-style: italic;
}

.view-field-password{
  font-family: monospace;
  letter-spacing: 0.08em;
}

/* view box layout */
.vault-view{
  width: 95% !important;
  margin: 0 auto !important;
  background: #181818 !important;
  border-radius: 18px;
  padding-top: 20px !important;
  padding-bottom: 12px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  font-size: 0.78rem;
}

.vault-view .view-row{
  display:flex;
  padding:6px 4px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.vault-view .view-row:last-child{ border-bottom: none; }

.vault-view .view-col-left{
  width:40%;
  font-weight:700;
  color:#7b9bb5;
  opacity:0.9;
}

.vault-view .view-col-right{
  width:60%;
  font-weight:400;
  color:#969da4 !important;
  word-break:break-all;

  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px;
}

.vault-view .pw-inside-toggle{
  position: static !important;
  transform: none !important;
  margin: 0 0 0 6px !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

.vault-view .mt-3{
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

.vault-view .action-btn .fa-trash,
.vault-view .action-btn .fa-trash + span{
  color: #b22222 !important;
  font-weight: bold;
}

/* Make add_new inputs as wide as Category */
.table-mini td:nth-child(2) .form-control,
.table-mini td:nth-child(2) .fake-select{
  width: 100%;
  display: block;
}

/* =========================
   DASHBOARD LIST LAYOUT
========================= */

.dash-home{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.dash-home .row-link{
  width: 100% !important;
  padding: 10px 12px !important;
}

/* === HEAD TITLES: slightly bigger & clearer === */
.dash-title{
  text-align: center;
  color: #969da4 !important;

  font-size: 1.05rem;
  line-height: 1.25;
  margin-bottom: 10px;
}

/* === START: global mobile overflow safety (inputs) === */
input,
select,
textarea{
  max-width: 98%;
}
/* === END: global mobile overflow safety (inputs) === */


/* Dashboard buttons: wide row-style, keep height */
.dash-btn{
  height: 44px;
  line-height: 44px;
  padding: 0 18px;
  width: 100%;
}

/* === START: Dashboard row links (dedicated) === */
.dash-row{
  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;
  min-height: 44px;
  padding: 0 36px;

  font-size: 0.95rem;
  font-weight: 700;

  background: #1b1b1b;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 0.4rem;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 4px rgba(0,0,0,.6);
}

.dash-row i{
  width: 20px;
  text-align: center;
  font-size: 1.1rem;
  color: #7b9bb5;
}

.dash-row span{
  color: #e3e7ec;
}

/* === SETUP: centered narrow action buttons === */
.setup-actions-stack,
.dash-home{
  align-items: center;
}

.setup-actions-stack .dash-row,
.dash-home .dash-row{
  width: auto !important;
  min-width: 200px;
  max-width: 320px;
  justify-content: center;
}


/* === END: Dashboard row links (dedicated) === */

/* Dashboard title spacing (lift toward header) */
.dash-home .dash-title{
  margin-top: 12px;
}

/* === DASHBOARD: compact (dashboard-only) === */
.dash-home{
  gap: 8px;
}

.dash-row{
  min-height: 40px;
  padding: 0 28px;
  font-size: 0.88rem;
}

.dash-row i{
  font-size: 1rem;
}

/* dashboard help box (the block right after .dash-home) */
.dash-home + div{
  margin-top: 14px !important;
  margin-bottom: 24px !important;
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
  line-height: 1.35 !important;
}
/* === END DASHBOARD: compact === */

/* =========================
   EXPERIMENT — COOL BLUE TONE (v4)
   Lighter overall, same blue hue
========================= */

/* General page background */
body{
  background: #222836; /* lighter blue-grey */
}

/* Main container "box" */
.app-container{
  background: #152440; /* clearly lighter box */
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 6px 18px rgba(0,0,0,.6);
}

/* Header & footer still slightly darker */
.app-header{
  background: #1d2330;
}

.app-footer{
  background: #202736;
}

.action-btn,
.action-btn:visited,
.action-btn:hover,
.action-btn:active {
  color: #ffffff !important;
}

/* --- FIX: allow full page scroll in install env (mobile) --- */
html, body {
  height: auto !important;
  min-height: 100% !important;
}

body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.app-main,
.app-container {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
/* --- END FIX --- */

/* --- FIX: scroll only content, keep header/footer fixed --- */
.app-header,
.app-footer{
  position: fixed !important;
  left: 0;
  right: 0;
  z-index: 1000;
}

.app-header{ top: 0; }
.app-footer{ bottom: 0; }

.app-main{
  position: fixed !important;
  top: 44px;        /* header height */
  bottom: 44px;     /* footer height */
  left: 0;
  right: 0;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* --- END FIX --- */

/* === iOS Safari anti-auto-zoom (global safeguard) === */
input,
select,
textarea {
    font-size: 16px !important;
}

.unlock-error {
    color: #ffc107;
}

/* tighten top spacing on unlock page */
.app-container .dash-title {
    margin-top: 12px;
}


/* DEMO WATERMARK */

body::before,
body::after{
  position: fixed;
  top: 0;
  width: 32vw;
  height: calc(100vh - var(--spv-footer-h));
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: pre-line;
  text-align: center;
  font-size: clamp(0.82rem, 1.9vw, 1.15rem);
  font-weight: 500;
  line-height: 2.3;
  letter-spacing: 2px;
  color: #7f8790;
  opacity: 0.15;
  transform: rotate(30deg);
  pointer-events: none;
  z-index: 7000;
  content:
    "Demo App\A Demo App\A Demo App\A Demo App\A Demo App\A Demo App\A Demo App\A Demo App\A Demo App\A Demo App\A Demo App\A Demo App\A Demo App\A Demo App\A Demo App\A Demo App\A Demo App\A Demo App\A Demo App\A Demo App";
}
body::before{
  left: 50%;
  transform: translateX(-65%) rotate(30deg);
}

body::after{
  left: 50%;
  transform: translateX(-35%) rotate(30deg);
}