/* ------------------------------------------------------------------------
   1. GLOBAL RESET & ROOT VARIABLES
   ------------------------------------------------------------------------ */
:root {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --error: #dc2626;
  --success: #16a34a;
  --text: #1e293b;
  --light: #f8fafc;
  --white: #ffffff;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --radius: 0.375rem;
}

html, body { height: 100%; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; }

/* ------------------------------------------------------------------------
   2. LOGIN / REGISTER  (moved from inline <style>)
   ------------------------------------------------------------------------ */
body.login,
body.register {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--light);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.login-container,
.register-container {
  width: 100%;
  max-width: 28rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
}

.form-group { position: relative; }

.password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;          /* ❌ fără fundal */
  border: none;              /* ❌ fără bordură */
  color: #6b7280;            /* culoare iconiță */
  font-size: 1.2rem;
  cursor: pointer;

  outline: none;             /* ❌ fără contur albastru la focus */
}

.form-input {
  width: 100%;
  padding: 0.625rem 2.5rem 0.625rem 0.625rem; /* space for icon */
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background-color: var(--white);
  font-size: 0.875rem;
  transition: all 0.2s;
}


.btn {
  width: 100%;
  padding: 0.75rem;
  background-color: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn:hover { background-color: var(--primary-hover); }
.btn:disabled { background-color: #9ca3af; cursor: not-allowed; }

.login-footer,
.register-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: #4b5563;
}

.link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.link:hover { text-decoration: underline; }



@media (max-width: 640px) {
  .login-container,
  .register-container { padding: 1.5rem; }
  body.login,
  body.register { padding: 0.5rem; }
}


/* ------------------------------------------------------------------------
   2. HEADER & GLOBAL NAV
   ------------------------------------------------------------------------ */
header {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
header img {
  height: 60px;
  margin-right: 10px;
}
header h3 {
  margin: 0;
  color: #2c3e50;
}

/* Logout / Admin buttons */
.logout-btn-container {
  position: absolute;
  top: 10px;
  right: 10px;
}
.admin-btn,
.logout-btn,
.logout-btn-dashboard {
  color: white;
  padding: 8px 15px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s;
  border: none;
  cursor: pointer;
  font-size: 14px;
  margin-left: 15px;
}
.admin-btn {
  background: #00008A;
}
.admin-btn:hover {
  background: #0000FF;
}
.logout-btn {
  background: #e74c3c;
}
.logout-btn:hover {
  background: #c0392b;
}
.logout-btn-dashboard {
  background: #f3d8b6;
}
.logout-btn-dashboard:hover {
  background: #CCC;
}

/* ------------------------------------------------------------------------
   3. LOGIN PAGE
   ------------------------------------------------------------------------ */
body.login {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--light);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.login .login-container {
  width: 100%;
  max-width: 28rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  position: relative;
}
.login .login-header {
  text-align: center;
  margin-bottom: 2rem;
}
.login .login-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.login .alert {
  padding: 0.75rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  animation: fadeIn 0.3s ease-out;
}
.login .alert-error {
  background-color: #fee2e2;
  color: var(--error);
  border: 1px solid #fecaca;
}
.login .form-group {
  margin-bottom: 1.25rem;
  position: relative;
}
.login .form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.login .form-input {
  width: 100%;
  padding: 0.625rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background-color: var(--white);
  font-size: 0.875rem;
  transition: all 0.2s;
}
.login .form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.login .btn {
  width: 100%;
  padding: 0.75rem;
  background-color: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}
.login .btn:hover {
  background-color: var(--primary-hover);
}
.login .btn:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}
.login .login-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: #4b5563;
}
.login .link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.login .link:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .login .login-container { padding: 1.5rem; }
  body.login { padding: 0.5rem; }
}

/* ------------------------------------------------------------------------
   4. REGISTRATION PAGE
   ------------------------------------------------------------------------ */
body.register {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 170vh;
}
.register-container {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.register h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 30px;
}
.register .form-group {
  margin-bottom: 5px;
}
.register label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #34495e;
}
.register input[type="text"],
.register input[type="email"],
.register input[type="tel"],
.register input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}
.register button {
  background-color: #2980b9;
  color: white;
  border: none;
  padding: 12px;
  width: 100%;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}
.register button:hover {
  background-color: #3498db;
}
.register .error {
  color: #e74c3c;
  margin-bottom: 20px;
}
.register .login-link {
  text-align: center;
  margin-top: 20px;
}
.register a {
  color: #2980b9;
  text-decoration: none;
}
.register a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------------
   5. MAIN FORM PAGE
   ------------------------------------------------------------------------ */
body.main {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--light);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  padding: 1rem;
}
.main .container {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
}
.main .form-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  margin-top: 1.5rem;
}
.main .page-title {
  color: var(--primary);
  text-align: center;
  font-size: 1.875rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.main .section {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-200);
}
.main .section-title {
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.main .form-group {
  margin-bottom: 1.25rem;
}
.main .form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.main .form-control {
  width: 100%;
  padding: 0.625rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background-color: var(--white);
  font-size: 0.875rem;
  transition: border-color 0.15s;
}
.main .form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.main .form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.main .form-col {
  flex: 1;
  min-width: 0;
}
.main .btn {
  width: 100%;
  max-width: 24rem;
  padding: 0.75rem;
  background-color: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.15s;
  margin: 2rem auto 0;
  display: block;
}
.main .btn:hover {
  background-color: var(--primary-hover);
}
.main .badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}
.main .badge-lux {
  color: #fff;
  background-color: #6f42c1;
}
.main .badge-std {
  color: #fff;
  background-color: #6c757d;
}
@media (max-width: 768px) {
  .main .form-row {
    flex-direction: column;
    gap: 0;
  }
  .main .form-card {
    padding: 1.5rem;
  }
  .main .page-title {
    font-size: 1.5rem;
  }
}

/* ------------------------------------------------------------------------
   6. RESULTS PAGE
   ------------------------------------------------------------------------ */
body.results {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background: #f5f5f5;
}
.results .container {
  max-width: 1200px;
  margin: 0 auto;
}
.results h1,
.results h2 {
  color: #2c3e50;
  text-align: center;
}
.results .result-section {
  padding: 25px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background: #ffffff;
}
.results .two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.results .result-item {
  margin: 12px 0;
  display: flex;
  justify-content: space-between;
}
.results .result-label {
  font-weight: bold;
}
.results .highlight {
  color: #2980b9;
  font-weight: bold;
}
.results .profit {
  color: #27ae60;
  font-weight: bold;
  font-size: 1.1em;
  background-color: #e8f5e9;
  padding: 8px;
  border-radius: 4px;
  text-align: center;
}
.results .location-info {
  background: #e8f4fc;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  border-left: 5px solid #2980b9;
}
.results .btn-export {
  background: #2980b9;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px;
  font-size: 16px;
  display: block;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.results .btn-export:hover {
  background: #3498db;
}
.results .sources-box {
  background: #f9f9f9;
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
  font-size: 0.9em;
  border-left: 3px solid #ddd;
}
.results .value-cell {
  text-align: right;
  min-width: 120px;
  display: inline-block;
}
.results .project-box:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.results .marketing-details {
  margin-top: 15px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 5px;
}
.results .marketing-category {
  font-weight: bold;
  margin-top: 10px;
}
.results .unit-type-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: bold;
  margin-left: 10px;
}
.results .luxury-badge {
  background-color: #d4edda;
  color: #155724;
}
.results .standard-badge {
  background-color: #fff3cd;
  color: #856404;
}
.results .unit-type-display {
  font-weight: bold;
  color: #6f42c1;
}

/* ------------------------------------------------------------------------
   7. ADMIN PANEL
   ------------------------------------------------------------------------ */
body.admin {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 20px;
}
.admin .container {
  max-width: 1200px;
  margin: 0 auto;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.admin h1 {
  color: #2c3e50;
  margin-bottom: 30px;
}
.admin table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.admin th,
.admin td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.admin th {
  background-color: #2980b9;
  color: white;
}
.admin tr:hover {
  background-color: #f5f5f5;
}
.admin button {
  background-color: #2980b9;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}
.admin button:hover {
  background-color: #3498db;
}
.admin .success {
  color: #27ae60;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #d5f5e3;
  border-radius: 4px;
}
.admin .logout {
  text-align: right;
  margin-bottom: 20px;
}
.admin a {
  color: #2980b9;
  text-decoration: none;
}
.admin a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------------
   8. RESULTS – CALCULE_T.PHP STYLES
   ------------------------------------------------------------------------ */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background: #f5f5f5;
}
.container {
  max-width: 900px;
  margin: 0 auto;
}
h1,
h2 {
  color: #2c3e50;
  text-align: center;
}
.result-section {
  padding: 25px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.section-1 {
  background: #ffffff;
}
.section-2 {
  background: #f0f8ff;
}
.section-3 {
  background: #fffaf0;
}
.section-4 {
  background: #f5fffa;
}
.section-5 {
  background: #fff9f0;
}
.result-item {
  margin: 12px 0;
  display: flex;
  justify-content: space-between;
}
.result-label {
  font-weight: bold;
}
.highlight {
  color: #2980b9;
  font-weight: bold;
}
.profit {
  color: #27ae60;
  font-weight: bold;
  font-size: 1.1em;
  background-color: #e8f5e9;
  padding: 8px;
  border-radius: 4px;
  text-align: center;
}
.location-info {
  background: #e8f4fc;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  border-left: 5px solid #2980b9;
}
.btn-export {
  background: #2980b9;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px;
  font-size: 16px;
  display: block;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.btn-export:hover {
  background: #3498db;
}
.sources-box {
  background: #f9f9f9;
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
  font-size: 0.9em;
  border-left: 3px solid #ddd;
}
.unit-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.unit-row:last-child {
  border-bottom: none;
}
.unit-name {
  font-weight: bold;
  width: 20%;
}
.unit-count {
  width: 15%;
  text-align: center;
}
.unit-size {
  width: 15%;
  text-align: center;
}
.unit-price {
  width: 15%;
  text-align: right;
}
.unit-price-unit {
  width: 25%;
  text-align: right;
}
.unit-total {
  width: 25%;
  text-align: right;
  font-weight: bold;
}
.unit-header {
  font-weight: bold;
  border-bottom: 2px solid #2980b9;
  margin-bottom: 5px;
}
.project-box {
  margin-bottom: 15px;
  padding: 12px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ------------------------------------------------------------------------
   9. PRINT STYLES
   ------------------------------------------------------------------------ */
@media print {
  .print-vat-note {
    display: block !important;
    font-size: 10px;
    color: #555;
    margin-top: 10px;
  }
  .btn-export,
  .logout-btn,
  .inv,
  button[type="submit"],
  .password-toggle,
  .logout-container,
  .logout-button {
    display: none !important;
  }
}

/* ------------------------------------------------------------------------
   10. RESPONSIVE UTILITIES
   ------------------------------------------------------------------------ */
.container {
  max-width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
}
.col-12,
.col-md-6,
.col-lg-4 {
  flex: 1 1 100%;
  padding: 5px;
  box-sizing: border-box;
}
@media (min-width: 576px) {
  .col-md-6 {
    flex: 0 0 50%;
  }
}
@media (min-width: 992px) {
  .col-lg-4 {
    flex: 0 0 33.333%;
  }
}

/* 5. Horizontal scroll fix */
.result-section {
  overflow-x: auto;
}
table {
  min-width: 400px;
}
@media (max-width: 767px) {
  .result-section h2,
  .result-section h3 {
    font-size: 2 rem;
    margin-top: 0.5rem;
  }
  .unit-row {
    display: block;
    border-bottom: 1px solid #ddd;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
  .unit-row > div {
    display: inline-block;
    width: 100%;
    padding: 2px 0;
  }
  .unit-header {
    display: none;
  }
}

/* 6. Touch-friendly inputs & buttons */
input,
select,
textarea {
  width: 100%;
  padding: 12px 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
button,
.btn-export {
  display: block;
  width: 100%;
  padding: 14px;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  background: #007bff;
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}
button:active,
.btn-export:active {
  background: #0056b3;
}

/* -------------------------------------------------------
   11. MOBILE-FIRST / RESPONSIVE OVERRIDES
   ------------------------------------------------------- */

/* 1. Allow horizontal scroll for wide tables */
.admin table,
.results table {
  width: 100%;
  min-width: 300px;           /* keep columns readable */
}

.result-section,
.admin .container {
  overflow-x: auto;           /* enable swipe scroll */
}

/* 2. Fluid typography */
body {
  font-size: 14px;
}
@media (min-width: 576px) {
  body { font-size: 16px; }
}

/* 3. Card-style rows on phones */
@media (max-width: 767px) {
  .admin table,
  .results table {
    border: 0;
  }
  .admin thead,
  .results thead {
    display: none;            /* hide table header */
  }
  .admin tr,
  .results tr {
    display: block;
    margin: 0 0 1rem;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.75rem;
  }
  .admin td,
  .results td {
    display: block;
    border: none;
    padding: 0.5rem 0;
    text-align: left;
    position: relative;
    padding-left: 50%;
  }
  .admin td::before,
  .results td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    font-weight: 600;
    color: var(--text);
    text-align: left;
  }
}

/* 4. Touch-friendly inputs & buttons */
input,
select,
textarea,
button,
.btn-export {
  font-size: 16px;            /* prevents zoom on iOS */
  padding: 0.75rem;
  border-radius: var(--radius);
}

button,
.btn-export {
  min-height: 44px;           /* Apple / Android HIG */
}

/* -------------------------------------------------------
   12. Ultra-compact mobile overrides
   ------------------------------------------------------- */
@media (max-width: 600px) {
  body.admin { padding: 0; }
  .admin .container {
    padding: .5rem .25rem;
    margin: 0;
  }
  .admin table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }
  .admin th,
  .admin td {
    text-align: left;
    padding: .35rem .25rem;
    font-size: .875rem;
  }
  .admin td[data-label="Rămas"] {
    white-space: nowrap;
    min-width: 80px;   /* enough for “zz înc.” / “zz zile” */
  }
  /* card-style rows */
  .admin thead { display: none; }
  .admin tr {
    display: block;
    margin-bottom: .75rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: .5rem;
  }
  .admin td {
    display: block;
    border: none;
    padding: .25rem 0 .25rem .25rem;
  }
  .admin td::before {
    content: attr(data-label);
    font-weight: 600;
    display: block;
    margin-bottom: .1rem;
  }
}

.btn-3d {
    display: inline-block;
    background: transparent;          /* fără fundal */
    color: #2c3e50;                   /* aceeași culoare ca textul antetului */
    padding: 4px 10px;                /* la fel ca butonul „Salvează” */
    margin-left: 10px;
    border: 1px solid #ccc;           /* chenar subțire, ca „Salvează” */
    border-radius: 4px;
    font-size: 12px;
    text-decoration: none;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.15); /* umbră ușoară dreapta-jos */
    transition: all .1s ease;
}
.btn-3d:hover {
    background: #f5f5f5;              /* highlight discret la hover */
    box-shadow: 1px 1px 4px rgba(0,0,0,0.25);
}
.btn-3d:active {
    transform: translate(1px, 1px);   /* apăsat – se mută cu 1 px */
    box-shadow: none;
}