/* =========================================================
   POS 3.0 — exact-look stylesheet
   Replicates the old MS Access style panel: lavender-gray
   page, black double border frame, beveled gray buttons.
   ========================================================= */

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 40px 0;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    background: #eef1f5;
    display: flex;
    justify-content: center;
}

.app-frame {
    width: 900px;
    background: #f3f1ec;
    border: 3px solid #1f2a44;
    outline: 1px solid #1f2a44;
    outline-offset: 4px;
    padding: 18px 22px 14px;
}

/* ---- Title bar ---- */
.app-title {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    position: relative;
    margin-bottom: 12px;
}
.app-title h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 34px;
    font-weight: 700;
    margin: 0;
    color: #1f2a44;
    letter-spacing: .5px;
}
.app-title .version {
    font-family: Georgia, serif;
    font-size: 16px;
    color: #a9852f;
    font-weight: 700;
}
.app-title .meta {
    position: absolute;
    right: 0;
    top: 6px;
    font-size: 12px;
    color: #55606f;
}
.app-title .meta a {
    margin-left: 8px;
    color: #1f2a44;
    text-decoration: underline;
    cursor: pointer;
}

/* ---- Main panel: two columns divided by a vertical rule ---- */
.panel {
    border: 2px solid #1f2a44;
    background: #f8f7f3;
    display: flex;
}
.col {
    flex: 1;
    padding: 14px 16px;
}
.col-left { border-right: 2px solid #1f2a44; }

/* ---- Menu buttons ---- */
.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(#ffffff, #e4e7ed);
    border: 1px solid #b7bdc9;
    border-left: 3px solid #a9852f;
    border-radius: 2px;
    padding: 9px 12px;
    margin-bottom: 8px;
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    color: #1e4d3f; /* muted deep teal tone like "DayBook" etc */
    transition: background .15s ease;
}
.menu-item:hover { background: linear-gradient(#ffffff, #d7dce5); }
.menu-item .arrow {
    color: #a9852f;
    font-weight: 700;
}
.menu-item.active-blue { color: #1a3c78; }

.menu-item.disabled {
    opacity: .4;
    pointer-events: none;
    cursor: not-allowed;
    border-left-color: #b7bdc9;
}

/* Type / Company sit side by side as a split button row */
.split-row {
    display: flex;
    gap: 0;
    margin-bottom: 8px;
}
.split-row .menu-item {
    flex: 1;
    margin-bottom: 0;
    justify-content: center;
}
.split-row .menu-item:first-child { border-right: none; }

/* NEW: Type & Company on one row (dashboard) */
.menu-item-row {
    display: flex;
    align-items: center;
    gap: 0;
    background: linear-gradient(#ffffff, #e4e7ed);
    border: 1px solid #b7bdc9;
    border-left: 3px solid #a9852f;
    border-radius: 2px;
    padding: 9px 12px;
    margin-bottom: 8px;
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 15px;
}
.menu-item-row .arrow {
    color: #a9852f;
    font-weight: 700;
    margin-right: 10px;
}
.menu-item-half {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: #1e4d3f;
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 15px;
    padding: 2px 8px;
    border-left: 1px solid #b7bdc9;
    transition: color .15s ease;
}
.menu-item-half:first-of-type { border-left: none; }
.menu-item-half:hover { color: #a9852f; text-decoration: underline; }
.menu-item-half.disabled {
    opacity: .4;
    pointer-events: none;
    cursor: not-allowed;
}

/* ---- Login box (username / password / unlock / lock) ---- */
.login-box {
    margin-top: 14px;
    border: 1px solid #b7bdc9;
    padding: 8px 10px;
    background: #eef1f5;
}
.login-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.login-row:last-child { margin-bottom: 0; }
.login-row label {
    width: 90px;
    font-size: 13px;
    font-weight: 700;
    color: #1f2a44;
}
.login-row select,
.login-row input {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid #b7bdc9;
    font-size: 13px;
}
.login-row button {
    width: 70px;
    padding: 5px 0;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid #1f2a44;
    border-radius: 2px;
    background: linear-gradient(#ffffff, #d3d8e0);
    color: #1f2a44;
    cursor: pointer;
}
.login-row button:hover { background: linear-gradient(#fff, #c3cad6); }

/* ---- Footer row ---- */
.footer-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #b7bdc9;
}
.footer-note {
    font-size: 11px;
    color: #55606f;
    line-height: 1.5;
}
.footer-note a {
    color: #a9852f;
    font-weight: 700;
    text-decoration: none;
}
.footer-note a:hover { text-decoration: underline; }
.quit-btn {
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 15px;
    padding: 8px 26px;
    border: 1px solid #1f2a44;
    background: linear-gradient(#ffffff, #d3d8e0);
    color: #1f2a44;
    cursor: pointer;
}
.quit-btn:hover { background: linear-gradient(#fff, #c3cad6); }

.error-msg {
    color: #a32d2d;
    font-size: 12px;
    margin-top: 4px;
}

/* =========================================================
   Shared module styles (Sale, DayBook, Items, etc.)
   ========================================================= */

.module-frame {
    width: 960px;
}

.module-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 24px;
    font-weight: 700;
    color: #1f2a44;
    text-align: center;
    margin: 0 0 12px;
}

.section-label {
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 14px;
    color: #1e4d3f;
    background: #eef1f5;
    border: 1px solid #b7bdc9;
    border-left: 4px solid #a9852f;
    padding: 5px 10px;
    margin: 14px 0 8px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 16px;
}

.field { display: flex; flex-direction: column; gap: 3px; }
.field label { font-size: 12px; font-weight: 700; color: #1f2a44; }
.field input,
.field select,
.field textarea {
    padding: 5px 7px;
    border: 1px solid #b7bdc9;
    font-size: 13px;
    background: #fff;
    font-family: inherit;
}
.field.span-2 { grid-column: span 2; }
.field.span-3 { grid-column: span 3; }

table.grid-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
    background: #fff;
}
table.grid-table th {
    background: #1f2a44;
    color: #f3f1ec;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 8px;
    text-align: left;
}
table.grid-table td {
    border: 1px solid #d7dce5;
    padding: 4px 6px;
    font-size: 13px;
}
table.grid-table td input,
table.grid-table td select {
    width: 100%;
    border: none;
    padding: 3px 4px;
    font-size: 13px;
    background: transparent;
}
table.grid-table td input:focus,
table.grid-table td select:focus { background: #fdf6e3; outline: 1px solid #a9852f; }
table.grid-table tfoot td { font-weight: 700; background: #eef1f5; }

.row-remove {
    color: #a32d2d;
    cursor: pointer;
    font-weight: 700;
    text-align: center;
}

.totals-panel {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    background: #eef1f5;
    border: 1px solid #b7bdc9;
    padding: 12px 16px;
}
.totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #1f2a44;
}
.totals-row input {
    width: 130px;
    text-align: right;
    padding: 4px 6px;
    border: 1px solid #b7bdc9;
    font-weight: 700;
}
.totals-row.highlight { color: #a9852f; font-size: 15px; }
.totals-row.highlight input { color: #a9852f; }

.btn-row {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.btn {
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 18px;
    border: 1px solid #1f2a44;
    background: linear-gradient(#ffffff, #d3d8e0);
    color: #1f2a44;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.btn:hover { background: linear-gradient(#fff, #c3cad6); }
.btn.primary { background: linear-gradient(#2c3a5c, #1f2a44); color: #f3f1ec; }
.btn.primary:hover { background: linear-gradient(#354670, #263354); }
.btn.add-row { background: linear-gradient(#eef7f0, #d7ecdc); border-color: #1e4d3f; color: #1e4d3f; }

.save-msg {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
}
.save-msg.success { background: #eaf3de; color: #27500a; border: 1px solid #97c459; }
.save-msg.error { background: #fcebeb; color: #791f1f; border: 1px solid #f09595; }

/* =========================================================
   Customer module specific styles
   ========================================================= */
.customer-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 5px;
}
.customer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: #e8e8e8;
    border-bottom: 2px solid #ccc;
}
.customer-quick-info {
    display: flex;
    gap: 20px;
    padding: 10px 20px;
    background: #fff;
    border-bottom: 1px solid #ddd;
}
.quick-info-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}
.navigation-bar {
    display: flex;
    gap: 5px;
    padding: 10px 20px;
    background: #f0f0f0;
    border-bottom: 1px solid #ccc;
}
.nav-btn {
    padding: 5px 10px;
    background: #ddd;
    border: 1px solid #999;
    cursor: pointer;
    font-size: 12px;
}
.nav-btn:hover { background: #ccc; }
.action-bar {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    background: #e8e8e8;
    border-top: 1px solid #ccc;
}
.action-btn {
    padding: 8px 15px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
}
.action-btn.secondary { background: #2196F3; }
.action-btn.danger { background: #f44336; }
.action-btn:hover { opacity: 0.9; }

/* =========================================================
   Customer view all styles
   ========================================================= */
.customers-grid {
    padding: 20px;
}
.search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 5px;
}
.search-bar input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.search-bar button {
    padding: 10px 20px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
.customers-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}
.customers-table th, .customers-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
.customers-table th {
    background: #f0f0f0;
    font-weight: bold;
    font-size: 12px;
}
.customers-table td {
    font-size: 13px;
}
.customers-table tr:hover {
    background: #f9f9f9;
}
.action-links a {
    margin-right: 10px;
    color: #2196F3;
    text-decoration: none;
    font-size: 12px;
}
.action-links a:hover {
    text-decoration: underline;
}
.back-btn {
    display: inline-block;
    margin-bottom: 15px;
    padding: 8px 15px;
    background: #2196F3;
    color: white;
    text-decoration: none;
    border-radius: 3px;
}
.stats-bar {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    padding: 10px;
    background: #e8e8e8;
    border-radius: 3px;
    font-size: 13px;
}