*{box-sizing:border-box}
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#202124;background:#f4f5f7}
body{margin:0;background:#f4f5f7}
/* Core Header Navigation Styles */
/* =================================----------------------------
   Prism-Clean Header & Navigation Layouts
   =================================---------------------------- */
header {
    background: #111;
    color: #fff;
    padding: 18px max(18px, calc((100vw - 1050px) / 2));
    display: flex;
    flex-direction: column; /* Stack logo and nav vertically on mobile */
    gap: 15px;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.header-logo img {max-height: 150px; }
.header-logo h1 { margin: 0; font-size: 24px; }
.header-logo p { margin: 4px 0 0; color: #bbb; font-size: 14px; }

.header-triggers {
    display: flex;
    align-items: center;
    gap: 8px;
}
#tabCreate img.buttonimg { max-height: 35px; }
#menuToggle {
    display: none; /* Hidden on Desktop */
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    line-height: 1;
    cursor: pointer;
    font-weight: 755;
    transition: 0.15s;
}
#menuToggle:hover { background: rgba(255, 255, 255, 0.2); }

.header-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 5px;
}
.header-nav .tab-link { border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 755; font-size: 14px; cursor: pointer; transition: 0.15s; display: flex; align-items: center; justify-content: center;}
.header-nav .tab-link.secondary { background: #e534eb; color: #fee3ff; }
.header-nav .tab-link.secondary:hover { background: #f10afa; }
.header-nav .tab-link.primary { background: #fee3ff; color: #e534eb; }

/* Desktop view (Screens wider than 768px) */
@media(min-width: 769px) {
    header {
        flex-direction: row; /* Put Logo, Nav, and Triggers side-by-side */
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }
    .header-top {
        width: auto;
    }
    .header-nav {
        width: auto;
        margin-top: 0;
    }
}

/* Mobile responsive drawer (Screens 768px or narrower) */
@media(max-width: 768px) {
    #menuToggle {
        display: block; /* Visible on Mobile */
    }
    
    .header-nav {
        display: none; /* Collapsed by default on Mobile */
        flex-direction: column; /* Vertical stack list */
        gap: 6px;
    }
    
    /* Toggle opened class */
    .header-nav.open {
        display: flex;
    }
    
    .header-nav .tab-link {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}
main{max-width:1050px;margin:24px auto;padding:0 16px 60px}
.card{background:#fff;border-radius:16px;padding:20px;margin-bottom:18px;box-shadow:0 2px 12px #0000000d}
h2{font-size:19px;margin:0 0 12px}
.hint{color:#666;font-size:14px;line-height:1.45}
.hidden{display:none!important}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}
.pill{background:#eceef1;padding:5px 10px;border-radius:20px;font-size:13px;white-space:nowrap}
input,textarea{width:100%;padding:11px;border:1px solid #d1d5da;border-radius:9px;font:inherit;background:#fff}
textarea{resize:vertical}
label{display:block;font-weight:650;margin:10px 0}
label input,label textarea{margin-top:5px;font-weight:400}
button{font:inherit}
.primary,.secondary{border:0;border-radius:10px;padding:11px 16px;font-weight:750;cursor:pointer;transition:.15s}
.primary{background:#111;color:#fff}
.primary:disabled{opacity:.45;cursor:not-allowed}
.secondary{background:#e9ebee;color:#111}
.secondary:disabled{opacity:.45}
.big{min-height:48px}
.photo-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.photo-buttons button{flex:1;min-width:170px}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin:16px 0}
.photo-card{min-width:0}
.photo-card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:#eee}
.photo-controls{display:flex;gap:4px;margin-top:5px}
.photo-controls button{flex:1;border:0;background:#e9ebee;border-radius:7px;padding:7px;cursor:pointer}
.photo-footer,.model-actions,.actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 15px}
.price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.model-image{display:block;max-width:600px;width:100%;margin-top:16px;border-radius:13px}
.checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 15px;margin:15px 0}
.checklist label{font-weight:400}
.checklist input{width:auto;margin-right:8px}
.success{color:#18794e;font-weight:650}
@media(max-width:700px){
 header{padding:16px;align-items:flex-start}
 header h1{font-size:21px}
 header p{font-size:14px}
 main{margin:15px auto;padding:0 10px 50px}
 .card{padding:16px;border-radius:14px}
 .fields,.price-grid,.checklist{grid-template-columns:1fr}
 .photo-footer,.model-actions,.actions{align-items:stretch;flex-direction:column}
 .photo-footer .primary,.actions button,.model-actions button{width:100%}
 .photo-footer .hint{margin:0}
}
/* Tab Navigation Styles */
.tabs { display: flex; gap: 8px; margin: 15px auto; max-width: 1050px; padding: 0 16px; }
.tab-link { border: 0; background: #eceef1; color: #111; padding: 10px 16px; border-radius: 8px; font-weight: 650; cursor: pointer; transition: 0.15s; }
.tab-link.active { background: #111; color: #fff; }

/* Inventory Card Widgets */
.inventory-item { background: #f8f9fa; border: 1px solid #e9ebee; padding: 16px; border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }
.inventory-item h3 { margin: 0 0 5px; font-size: 17px; }
.inventory-meta { display: flex; gap: 12px; font-size: 13px; color: #666; flex-wrap: wrap; }
.copy-shortcuts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.copy-shortcuts button { background: #fff; border: 1px solid #d1d5da; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: 0.15s; }
.copy-shortcuts button:hover { background: #eceef1; }
.list-actions { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #d1d5da; }
.list-actions label { margin: 0; font-weight: 600; font-size: 14px; }
.list-actions input { max-width: 120px; padding: 8px; }
.list-actions button { border: 0; border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }

/* Responsive Header Nav Menu */
header { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.header-main { display: flex; flex-direction: column; gap: 10px; }
.header-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.header-nav .tab-link { border: 0; background: #222; color: #bbb; padding: 8px 14px; border-radius: 8px; font-weight: 650; cursor: pointer; transition: 0.15s; font-size: 14px; }
.header-nav .tab-link:hover { background: #333; color: #fff; }
.header-nav .tab-link.active { background: #fff; color: #111; }

/* General Tab System Layout Cleanups */
.tabs { display: none !important; } /* Hide the old lower tabs container */

@media(max-width: 700px) {
  header { flex-direction: column; align-items: flex-start; }
  .header-nav { width: 100%; justify-content: flex-start; }
  #newItem { width: 100%; text-align: center; margin-top: 5px; }
}

/* Premium Tab Navigation Design Rules */
header { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.header-main { display: flex; flex-direction: column; gap: 12px; }

.header-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.header-nav .tab-link { border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 750; font-size: 14px; cursor: pointer; transition: 0.15s; }

/* General Tab System Layout Cleanups */
.tabs { display: none !important; }

@media(max-width: 700px) {
  header { flex-direction: column; align-items: flex-start; }
  .header-nav { width: 100%; justify-content: flex-start; }
  #newItem { width: 100%; text-align: center; margin-top: 5px; }
}

/* Inventory Card Widgets */
.inventory-item { background: #fff; border: 1px solid #e9ebee; padding: 20px; border-radius: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 2px 12px #0000000d; }
.inventory-item h3 { margin: 0 0 5px; font-size: 19px; }
.inventory-meta { display: flex; gap: 15px; font-size: 13px; color: #666; flex-wrap: wrap; }
.copy-shortcuts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.copy-shortcuts button { background: #fff; border: 1px solid #d1d5da; border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: 0.15s; }
.copy-shortcuts button:hover { background: #eceef1; }
.list-actions { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-top: 10px; padding-top: 15px; border-top: 1px dashed #d1d5da; }
.list-actions label { margin: 0; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.list-actions input { max-width: 120px; padding: 8px; border: 1px solid #d1d5da; border-radius: 9px; }
.list-actions button { border: 0; border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: bold; cursor: pointer; }
/* Responsive Grid Table Styles */
.table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 15px; border-radius: 12px; border: 1px solid #e9ebee; }
table { width: 100%; border-collapse: collapse; text-align: left; background: #fff; font-size: 14px; min-width: 800px; }
th, td { padding: 12px 16px; border-bottom: 1px solid #e9ebee; vertical-align: middle; }
th { background: #fafafa; font-weight: 700; color: #111; }
tr:last-child td { border-bottom: 0; }

/* Micro Copy Button Styles */
.copy-btn-compact { background: #fff; border: 1px solid #d1d5da; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; transition: 0.15s; white-space: nowrap; margin-right: 4px; }
.copy-btn-compact:hover { background: #eceef1; }

/* Responsive Mobile Hamburger Menu */
#menuToggle { display: none; font-size: 24px; padding: 6px 12px; border-radius: 8px; line-height: 1; border: 0; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; }

@media(max-width: 700px) {
  #menuToggle { display: block; }
  .header-nav { display: none; width: 100%; flex-direction: column; gap: 6px; margin-top: 10px; }
  .header-nav.open { display: flex; }
  .header-nav .tab-link { width: 100%; text-align: center; }
  #newItem { width: 100%; text-align: center; margin-top: 5px; }
}