/* ===============================
   GLOBAL
================================ */
body{
  font-family: arial;
  background: #b2bec3;
  padding:0;
  margin: 0;
}

/* ===============================
   MAIN LAYOUT
================================ */
#main{
  width: 900px;
  margin: 0 auto;
  background: white;
  font-size: 19px;
}

#header{
  background: #f7d794;
}

h1{
  float: left;
  margin: 15px;
}

/* ===============================
   SEARCH BAR
================================ */
#search-bar{
  padding: 10px 20px 0;
  float: right;
}

#search-bar label{
  font-size: 16px;
  font-weight: bold;
  display: block;
}

#search-bar input{
  width: 250px;
  height: 25px;
  font-size: 18px;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid #000;
}

#search-bar input:focus{
  outline: 0;
}

/* ===============================
   FORM AREA
================================ */
#table-form{
  background: #55efc4;
  padding: 20px 10px;
}

#table-form input[type="text"]{
  width: 180px;
  height: 25px;
  font-size: 18px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid green;
}

#save-button{
  background:#2c3e50;
  color: #fff;
  border:0;
  padding: 8px 30px;
  margin-left: 7px;
  border-radius: 3px;
  cursor: pointer;
}

/* ===============================
   TABLE
================================ */
#table-data{
  padding: 15px;
  height: 500px;
  vertical-align: top;
}

#table-data th{
  background: #74b9ff;
}

#table-data tr:nth-child(odd){
  background: #ecf0f1;
}

/* ===============================
   MESSAGES
================================ */
#success-message{
  background: #DEF1D8;
  color: green;
  padding: 10px;
  margin: 10px;
  display: none;
  position: fixed;
  right: 15px;
  top: 15px;
  z-index: 5000;
}

#error-message{
  background: #EFDCDD;
  color: red;
  padding: 10px;
  margin: 10px;
  display: none;
  position: fixed;
  right: 15px;
  top: 15px;
  z-index: 5000;
}

/* ===============================
   BUTTONS
================================ */
.delete-btn{
  background:#e74c3c;
  color: #fff;
  border:0;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
}

.edit-btn{
  background: #27ae60;
  color: white;
  border: 0;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
}

/* ===============================
   EDIT MODAL (CUSTOM)
================================ */
#modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 3000;
}

#modal-form {
    background: #fff;
    width: 420px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
    border-radius: 4px;
}

#modal-form h2{
    margin-top: 0;
}

#close-btn{
  background: red;
  color: white;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  top: -15px;
  right: -15px;
  cursor: pointer;
}

/* ===============================
   LOGIN LOCK (ONLY FOR LOGIN)
================================ */
body.login-lock #main {
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
}
/* ===============================
   TABLE LOCK IN SEARCH
================================ 

/* Prevent table resizing during search */
#table-data table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/* Lock column behavior */
#table-data th,
#table-data td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Optional: improve appearance */
#table-data th {
    text-align: left;
}

#table-data {
    min-height: 500px; /* same as before */
    width: 100%;
}
/* ===============================
   PASSWORD
================================ 

/* Prevent table resizing during search */
.password-cell {
    white-space: nowrap;
}

.password-cell button {
    margin-left: 5px;
    font-size: 12px;
}

.password-plain {
    font-family: monospace;
}

.d-none {
    display: none;
}

/* =========================================
   Bootstrap modal background blur (FINAL)
========================================= */

/* Blur everything except modal + backdrop */
body.modal-open {
    overflow: hidden;
}

body.modal-open .container,
body.modal-open .container-fluid,
body.modal-open .row,
body.modal-open .col,
body.modal-open main,
body.modal-open section,
body.modal-open header,
body.modal-open footer,
body.modal-open #app,
body.modal-open #content {
    filter: blur(6px);
    transition: filter 0.25s ease;
    pointer-events: none;
    user-select: none;
}

/* Ensure modal itself is NOT blurred */
.modal,
.modal * {
    filter: none !important;
    pointer-events: auto;
}