/* theme gold: d8af69 */


/* ==========================================================================
   Variables & Reset
   ========================================================================== */
:root {
  /* Colors */
  --color-primary:    #c6419c;        /* magenta / theme color */
  --color-primary-d:  #ad2983;        /* darker magenta */
  --color-link:       #007bff;        /* link blue */
  --color-bg:         #ffffff;        /* page background */
  --color-offwhite:   #fafafa;        /* section backgrounds */
  --color-border:     #ddd;           /* light border */
  --color-shadow:     rgba(0,0,0,0.05);
  --color-text:       #000;
  --color-text-light: #666;
  --color-toast:      #f44336;

  /* Sizing */
  --header-height:  40px;
  --footer-height:  40px;
  --gutter:         20px;
  --radius:         4px;
  --transition:     0.3s ease;

  /* Typography */
  --font-base:      Arial, sans-serif;
  --font-size-sm:   0.9em;
}

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

/* Remove default margins/padding */
html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  font-family: var(--font-base);
  color: var(--color-text);
}

/* ==========================================================================
   Base Elements
   ========================================================================== */
h1, h2, h3 {
  margin: 1rem 0 0.5rem;
  font-weight: normal;
}

p, label, input, select, textarea {
  font-size: 1rem;
}

a {
  color: var(--color-link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
th, td {
  border: 1px solid var(--color-border);
  padding: 0.5rem;
  text-align: left;
}

/* ==========================================================================
   Layout
   ========================================================================== */
/* Header */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  z-index: 1000;
}
.site-header .logo {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
}
.site-header .logo img {
  display: block;
  height: 36px;
  width: 202px;
}
.site-header .main-nav {
  display: flex;
  gap: 24px;
}
.site-header .main-nav a {
  color: #fff;
  font-size: 14px;
  padding: 4px 0;
}

/* Main content pushed below header */
main {
  margin-top: var(--header-height);
  padding: var(--gutter);
  /* ensure footer space */
  padding-bottom: calc(var(--footer-height) + var(--gutter));
}

/* Footer */
footer {
  text-align: center;
  color: var(--color-text-light);
  padding: var(--gutter);
}

/* Floating  footer */
.floating-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--footer-height, 40px);
  background-color: var(--color-primary, magenta);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;       /* center the Grand Total text */
  padding: 0 var(--gutter, 20px);
  z-index: 1000;
}

.floating-footer .btn-save-footer {
  position: absolute;
  right: var(--gutter, 20px);    /* same padding as the footer */
  background: #fff;
  color: var(--color-primary, magenta);
  border: 2px solid #fff;
  padding: 6px 12px;
  font-size: 1rem;
  border-radius: var(--radius,4px);
  cursor: pointer;
  transition: background var(--transition,0.3s);
}
.floating-footer .btn-save-footer:hover {
  background: rgba(255,255,255,0.8);
}


/* ==========================================================================
   Navigation
   ========================================================================== */
nav a {
  margin-right: 1rem;
}

/* ==========================================================================
   Components: Sections & Items
   ========================================================================== */
/* Section wrapper */
.section {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px var(--color-shadow);
}

/* Section header */
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.section-header .section-handle {
  cursor: move;
  font-size: 1.5em;
  margin-right: 8px;
}

/* Items list */
.items-list li {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  margin-top: 5px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  cursor: move;
  position: relative;
}
.item-handle {
  font-size: 1.5em;
  margin-right: 0.5rem;
  cursor: move;
}

/* Inline field widths */
.item-img, .new-item-img { width:120px; margin-right:1em; flex-shrink:0; }
.item-search  { flex:2;   margin-right:1em; }
.item-name    { width:80ch; }
.eventtitle, .customername_field, .venuename_field { width:50ch; }
.quantity     { width:8ch; margin-right:1em; flex-shrink:0; }
.price        { width:12ch;margin-right:1em; flex-shrink:0; }
.subtotal     { width:16ch;text-align:right;margin-right:1em; flex-shrink:0; }
.section-total { font-weight:bold; }

/* Item actions on hover */
.item-actions {
  display: none;
  position: absolute;
  top: 4px; right: 4px;
}
.items-list li:hover .item-actions {
  display: block;
}

/* ==========================================================================
   Components: Billing & Schedule
   ========================================================================== */
#billing-summary,
#payment-schedule {
  background: var(--color-offwhite);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 24px;
  box-shadow: 0 1px 3px var(--color-shadow);
}
#billing-summary div,
#payment-schedule .payment-row {
  margin-bottom: 8px;
}

/* Editable schedule inputs */
#payment-schedule input[type="text"] {
  background: #f9f9f9;
  border: 1px solid #ccc;
}
#payment-schedule input[type="text"].editable {
  background: #fff;
  border-color: #888;
}

/* ==========================================================================
   Components: Live-search
   ========================================================================== */
/* Live-search container */
.search-results {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--color-offwhite);
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}

/* Search table */
.search-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.search-table th,
.search-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
}
.search-table img {
  width: 40px;
  display: block;
}
.search-table tr.search-item:hover {
  background: #f5f5f5;
  cursor: pointer;
}

/* ==========================================================================
   Components: Loader & Notifications
   ========================================================================== */
.loader {
  border: 2px solid #f3f3f3;
  border-top: 2px solid #555;
  border-radius: 50%;
  width: 16px; height: 16px;
  animation: spin 0.75s var(--transition) infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

#notification {
  position: fixed;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  background: var(--color-toast);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 2000;
  pointer-events: none;
}
#notification.show { opacity: 1; }

/* ==========================================================================
   Components: Buttons & Form Controls
   ========================================================================== */
button {
  cursor: pointer;
}
#save-proposal {
  background: var(--color-primary);
  color: #fff;
  width: 200px;
  height: 50px;
  border: 0;
  transition: background var(--transition);
}
#save-proposal:hover {
  background: var(--color-primary-d);
}

/* ==========================================================================
   Utilities
   ========================================================================== */
/* Print‐hide class */
@media print {
  .no-print, .no-print * { display: none !important; }
}



/* ==========================================================================
   Search Forms
   ========================================================================== */
/* keep the form itself auto‐sized */
.search-form {
  display: inline-block;   /* shrink to fit its contents */
  margin-bottom: 1rem;
}

/* give the text input a 20-character width */
.search-form input[type="text"] {
  width: 30ch;             /* exactly 20 characters wide */
  max-width: 100%;         /* so it never overflows on small screens */
  box-sizing: border-box;  /* include padding/border in that width */
}
.search-form button {
  padding: 0.5em 1em;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.search-form button:hover {
  background: var(--color-primary-d);
}





/* ==========================================================================
   Inventory item form
   ========================================================================== */
.item-form {
  max-width: 800px;
  margin: 2rem auto;
  background: #fff;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px var(--color-shadow);
}

.item-form h2 {
  margin-top: 0;
  font-weight: normal;
  color: var(--color-primary);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 1rem 2rem;
}

.form-group {
  display: contents;
}

.form-group label {
  font-weight: bold;
  align-self: center;
}

.form-group .required {
  color: red;
  margin-left: 0.25rem;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(198,65,156,0.2);
}

.form-group.full-width {
  grid-column: 1 / span 2;
}

#picture-preview {
  max-width: 100%;
  max-height: 300px;
}

#current-picture {
  max-width: 200px;
  border: 1px solid var(--color-border);
  padding: 4px;
}




.form-actions {
  text-align: right;
  margin-top: 1.5rem;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition);
}

.btn-primary:hover {
  background: var(--color-primary-d);
}



/* ==========================================================================
   Override variables for dark mode
   ========================================================================== */
:root[data-theme="dark"] {
  --color-bg:         #121212;
  --color-offwhite:   #1e1e1e;
  --color-border:     #333;
  --color-text:       #eee;
  --color-text-light: #aaa;
  --color-shadow:     rgba(0,0,0,0.5);

  /* 1) Darken the “add/edit inventory” form container */
  .item-form {
    background: #1e1e1e;
    border-color: #444;    /* match the darker border */
  }

  /* 2) Inputs, selects, textareas in that form */
  .item-form input[type="text"],
  .item-form input[type="number"],
  .item-form select,
  .item-form textarea {
    background: #2a2a2a;
    color: #eee;
    border: 1px solid #555;
  }

  /* 3) Labels inside the form */
  .item-form label {
    color: #eee;
  }

  /* 4) Inventory table rows/headers */
  .inventory-table,
  .inventory-table th,
  .inventory-table td {
    background: #1e1e1e;
    color: #eee;
    border-color: #444;
  }

  /* 5) If any odd/even row stripes are desired (optional) */
  .inventory-table tr:nth-child(odd) {
    background: #1a1a1a;
  }
  .inventory-table tr:nth-child(even) {
    background: #222;
  }

}

/* Style the toggle button */
.dark-toggle {
  position: absolute;
  top: 50%;
  right: var(--gutter);
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.dark-toggle:hover {
  opacity: 0.8;
}



/* ==========================================================================
   Inventory Overview page
   ========================================================================== */
.inventory-table {
  width: 100%;
  table-layout: fixed;     /* honor colgroup widths */
  border-collapse: collapse;
}

/* break long names inside their cell */
.inventory-table td.break {
  word-wrap: break-word;
  white-space: normal;
}

/* optional: ellipsize overflow in the fixed columns */
.inventory-table td,
.inventory-table th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
}