/* H450-P02 PRIMROSE UNIFIED THEME */

:root{
  --primrose-primary:#2563eb;
  --primrose-primary-dark:#1d4ed8;
  --primrose-success:#0f766e;
  --primrose-warning:#f59e0b;
  --primrose-danger:#dc2626;
  --primrose-text:#1e293b;
  --primrose-muted:#64748b;
  --primrose-border:#dbe3ef;
  --primrose-surface:#ffffff;
  --primrose-background:#f4f7fc;
  --primrose-radius:12px;
  --primrose-shadow:0 5px 18px rgba(30,64,175,.06);
}

/* Main application background */
body:not(:has(.login:not(.hide))){
  background:var(--primrose-background);
}

/* Consistent panels */
main .panel{
  border:1px solid var(--primrose-border);
  border-radius:var(--primrose-radius);
  box-shadow:var(--primrose-shadow);
}

/* Unified headings */
main .panel > h3,
main .panel > h4{
  color:var(--primrose-primary-dark);
  font-weight:800;
  letter-spacing:.1px;
}

/* Unified labels */
main .field > label,
main .panel label{
  color:var(--primrose-text);
  font-weight:600;
}

/* Unified form controls */
main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
main select,
main textarea{
  border-radius:9px;
  border-color:var(--primrose-border);
  color:var(--primrose-text);
  transition:border-color .15s,box-shadow .15s;
}

main input:not([type="checkbox"]):not([type="radio"]):focus,
main select:focus,
main textarea:focus{
  border-color:var(--primrose-primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

/* Unified standard buttons */
main button{
  border-radius:9px;
  font-weight:650;
  transition:filter .15s,transform .15s;
}

main button:not(:disabled):hover{
  filter:brightness(.96);
}

main button:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Primary actions */
main button.primary,
main .primary{
  background:var(--primrose-primary);
  color:#fff;
}

/* Secondary actions */
main button.secondary,
main .secondary{
  border-color:var(--primrose-border);
}

/* Unified data tables */
main table{
  border-radius:10px;
  border-collapse:separate;
  border-spacing:0;
}

main table th{
  background:#eaf1ff;
  color:#1e40af;
  font-weight:750;
}

main table td{
  border-bottom-color:#e2e8f0;
}

main table tbody tr:hover{
  background:#f8fbff;
}

/* Accessible keyboard navigation */
main button:focus-visible,
main a:focus-visible{
  outline:2px solid var(--primrose-primary);
  outline-offset:2px;
}

/* Consistent mobile spacing */
@media(max-width:700px){
  main .panel{
    border-radius:10px;
  }
  main button{
    max-width:100%;
  }
}


/* H450-P05 UNIFIED COMPONENT STYLES START */

/* Shared professional surfaces */
main .panel{
  background:#ffffff;
  border:1px solid var(--primrose-border);
  border-radius:12px;
  box-shadow:0 5px 18px rgba(30,64,175,.06);
}

main .panel > h3,
main .panel > h4{
  color:#1d4ed8 !important;
  font-weight:800;
}

/* Form labels */
main .field label,
main .panel label{
  font-weight:650;
  color:#334155;
}

/* Inputs and selectors */
main .field input:not([type="checkbox"]):not([type="radio"]),
main .field select,
main .field textarea{
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#ffffff;
  color:#1e293b;
}

main .field input:focus,
main .field select:focus,
main .field textarea:focus{
  border-color:#2563eb !important;
  outline:none;
  box-shadow:0 0 0 3px rgba(37,99,235,.13);
}

/* Buttons: shared geometry, preserving semantic colors */
main button{
  border-radius:9px;
  font-weight:650;
  letter-spacing:.1px;
}



main button.secondary{
  border:1px solid #cbd5e1;
  border-radius:9px;
}

/* Consistent table headers */
main table{
  border:1px solid #dbe3ef;
  border-radius:10px;
  overflow:hidden;
}

main table thead th{
  background:#eaf1ff !important;
  color:#1e40af !important;
  font-weight:750;
  border-bottom:1px solid #cbd5e1;
}

main table tbody td{
  border-bottom-color:#e2e8f0;
}

main table tbody tr:hover{
  background:#f8fbff;
}

/* Unified section separation */
main .panel + .panel{
  margin-top:16px;
}

/* Accessible focus indicators */
main button:focus-visible,
main input:focus-visible,
main select:focus-visible,
main textarea:focus-visible{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

/* Small screen consistency */
@media(max-width:700px){
  main .panel{
    border-radius:10px;
  }

  main table{
    max-width:100%;
  }
}

/* H450-P05 UNIFIED COMPONENT STYLES END */


/* H450-P06 UNIFIED UI COMPONENTS */

/* Common form spacing */
main form .field{
  margin-bottom:12px;
}

main form .field > label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:650;
}

/* Common controls */
main input[type="search"],
main input[type="text"],
main input[type="number"],
main input[type="date"],
main input[type="datetime-local"],
main input[type="email"],
main input[type="password"],
main select{
  border-radius:9px;
}

main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):disabled,
main select:disabled,
main textarea:disabled{
  background:#f1f5f9;
  color:#64748b;
  cursor:not-allowed;
}

/* Search and filter inputs */
main input[type="search"]:focus,
main input[type="date"]:focus,
main select:focus{
  border-color:#2563eb !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

/* Consistent table layout */
main table{
  width:100%;
  background:#ffffff;
}

main table th,
main table td{
  vertical-align:middle;
}

main table thead th{
  white-space:normal;
  line-height:1.4;
}

main table tbody tr:nth-child(even){
  background-color:#f8fafc;
}

main table tbody tr:hover{
  background-color:#eff6ff;
}

/* Buttons used within forms and lists */
main form button,
main .panel button{
  border-radius:9px;
}

main button:not(:disabled):active{
  transform:translateY(1px);
}

/* Modal surfaces: only common modal class structures */
main .modal-content,
main .modal .modal-content{
  background:#ffffff;
  border:1px solid #dbe3ef;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(15,23,42,.15);
}

main .modal-content h3,
main .modal-content h4{
  color:#1d4ed8;
  font-weight:800;
}

/* Shared muted helper text */
main .field small,
main .panel small{
  color:#64748b;
}

/* Responsive tables */
@media(max-width:700px){
  main .panel{
    max-width:100%;
  }

  main input,
  main select,
  main textarea{
    max-width:100%;
  }

  main .modal-content{
    max-width:calc(100vw - 24px);
  }
}

/* End H450-P06 */


/* H450-P08 SAFE GLOBAL UI NORMALIZATION */

/*
 Scope: Admin/Operator content only.
 Preserve special Other Customers colors and semantic actions.
*/

/* Consistent section headings */
main .panel:not(.h449-other-customers) > h3,
main .panel:not(.h449-other-customers) > h4{
  color:#1d4ed8 !important;
  font-weight:800;
}

/* Standard input appearance */
main .panel:not(.h449-other-customers)
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
main .panel:not(.h449-other-customers) select,
main .panel:not(.h449-other-customers) textarea{
  border-radius:9px;
  border-color:#cbd5e1;
}

/* Consistent labels */
main .panel:not(.h449-other-customers) label{
  color:#334155;
  font-weight:650;
}

/* Table heading consistency */
main .panel:not(.h449-other-customers) table thead th{
  background:#eaf1ff !important;
  color:#1e40af !important;
  font-weight:750;
}

/* Standard button geometry without changing action colors */
main .panel button{
  border-radius:9px;
  font-weight:650;
}

/* Default primary buttons outside the custom Other Customers panel */
main .panel:not(.h449-other-customers) button.primary:not(
  .danger,
  .delete,
  .warning,
  .success
){
  background:#2563eb !important;
  border-color:#2563eb !important;
  color:#ffffff !important;
}

/* Accessible interaction */
main .panel button:focus-visible,
main .panel input:focus-visible,
main .panel select:focus-visible{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

/* Uniform helper text */
main .panel small{
  color:#64748b;
}

/* Responsive component boundaries */
@media(max-width:700px){
  main .panel{
    max-width:100%;
    box-sizing:border-box;
  }

  main .panel input,
  main .panel select,
  main .panel textarea{
    max-width:100%;
    box-sizing:border-box;
  }
}

/* END H450-P08 */


/* H450-P09 BEAUTIFUL BACKGROUND THEME */

/* Main Admin/Operator workspace background */
body:has(main){
  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(191,219,254,.38),
      transparent 36%
    ),
    radial-gradient(
      circle at 88% 20%,
      rgba(221,214,254,.32),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #eef5ff 0%,
      #f3f0ff 48%,
      #f6faff 100%
    );
  background-attachment:fixed;
}

/* Main content area */
main{
  background:transparent;
}

/* Soft colored cards */
main .panel{
  background:linear-gradient(
    145deg,
    #ffffff 0%,
    #f8fbff 100%
  );
  border:1px solid #dbe6f5;
  box-shadow:
    0 5px 20px rgba(37,99,235,.055);
}

/* Consistent section headers */
main .panel > h3,
main .panel > h4{
  color:#1d4ed8;
}

/* Forms remain readable */
main .field input,
main .field select,
main .field textarea{
  background-color:#ffffff;
}

/* Soft table background */
main table{
  background:#ffffff;
}

main table thead th{
  background:#eaf1ff;
}

/* Gentle row highlighting */
main table tbody tr:nth-child(even){
  background:#f8fbff;
}

main table tbody tr:hover{
  background:#eef5ff;
}

/* Preserve custom Other Customers panel */
main .h449-other-customers{
  background:linear-gradient(
    145deg,
    #ffffff 0%,
    #f8fbff 100%
  );
}

/* Mobile performance */
@media(max-width:700px){
  body:has(main){
    background-attachment:scroll;
  }

  main .panel{
    box-shadow:0 3px 12px rgba(37,99,235,.045);
  }
}

/* END H450-P09 */


/* H450-P13 WORKSPACE AND MODAL REFINEMENT */

/* Subtle workspace color, without changing navigation */
body:has(#app.top-layout) main,
body:has(#app.top-layout) .layout main{
  background:transparent;
}

/* Professional soft-blue content panels */
main .panel:not(.h449-other-customers){
  background:linear-gradient(
    145deg,
    #ffffff 0%,
    #f5f9ff 100%
  );
  border-color:#dce7f7;
}

/* Preserve existing status-card colors */
main .panel .cards .card{
  border-radius:12px;
}

/* Modal dialog surface */
.owner-modal .owner-modal-dialog,
.pcd-modal-dialog{
  background:linear-gradient(
    145deg,
    #ffffff 0%,
    #f7faff 100%
  );
  border:1px solid #dbe6f5;
  border-radius:15px;
  box-shadow:0 18px 48px rgba(15,23,42,.16);
}

/* Modal headings, not the entire modal overlay */
.owner-modal .owner-modal-dialog h3,
.owner-modal .owner-modal-dialog h4,
.pcd-modal-header h3,
.pcd-modal-header h4{
  color:#1d4ed8;
  font-weight:800;
}

/* Comfortable form backgrounds */
main input:not([type="checkbox"]):not([type="radio"]),
main select,
main textarea{
  background-color:#ffffff;
}

/* Accessible keyboard navigation */
.owner-modal button:focus-visible,
.pcd-modal-dialog button:focus-visible{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

/* Mobile adjustments */
@media(max-width:700px){
  .owner-modal .owner-modal-dialog,
  .pcd-modal-dialog{
    max-width:calc(100vw - 24px);
    box-sizing:border-box;
  }
}

/* END H450-P13 */


/* H450-P14 RICH BACKGROUND AND COLORFUL BUTTONS */

/* More visible blue and lavender workspace background */
body:has(main){
  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(96,165,250,.36),
      transparent 42%
    ),
    radial-gradient(
      circle at 90% 20%,
      rgba(167,139,250,.34),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #c7deff 0%,
      #dcd0ff 48%,
      #d7e8ff 100%
    ) !important;
  background-attachment:fixed !important;
}

/* Keep main content transparent so page colors remain visible */
body:has(main) main{
  background:transparent;
}

/* Clear separation between background and forms */
main .panel:not(.h449-other-customers){
  background:linear-gradient(
    145deg,
    #ffffff 0%,
    #eef5ff 100%
  );
  border:1px solid #b8cdef;
  box-shadow:0 7px 22px rgba(37,99,235,.10);
}

/* Shared button geometry */
main button,
main input[type="button"],
main input[type="submit"],
main input[type="reset"]{
  border-radius:9px;
  font-weight:700;
  transition:
    background-color .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

/* Primary / Save */
main button.primary,
main button[type="submit"],
main input[type="submit"]{
  background-color:#2563eb;
  border-color:#2563eb;
  color:#ffffff;
}

/* Success / Add */
main button.success,
main button.add,
main button.create,
main button[class*="btn-success"],
main button[class*="btn-add"]{
  background-color:#059669;
  border-color:#059669;
  color:#ffffff;
}

/* Edit / Update */
main button.edit,
main button.update,
main button[class*="btn-edit"],
main button[class*="btn-update"]{
  background-color:#d97706;
  border-color:#d97706;
  color:#ffffff;
}

/* Dangerous actions */
main button.danger,
main button.delete,
main button.remove,
main button[class*="btn-danger"],
main button[class*="btn-delete"]{
  background-color:#b91c1c;
  border-color:#b91c1c;
  color:#ffffff;
}

/* Export actions: match the colorful Other Customers style */
main button.csv,
main button[class*="export-csv"],
main button[class*="btn-csv"]{
  background-color:#0f766e;
  border-color:#0f766e;
  color:#ffffff;
}

main button.excel,
main button.xlsx,
main button[class*="export-excel"],
main button[class*="btn-excel"]{
  background-color:#15803d;
  border-color:#15803d;
  color:#ffffff;
}

main button.pdf,
main button[class*="export-pdf"],
main button[class*="btn-pdf"]{
  background-color:#dc2626;
  border-color:#dc2626;
  color:#ffffff;
}

main button.print,
main button[class*="btn-print"]{
  background-color:#7c3aed;
  border-color:#7c3aed;
  color:#ffffff;
}

/* Secondary actions remain clearly visible */
main button.secondary{
  background-color:#e0e7ff;
  border-color:#a5b4fc;
  color:#1e40af;
}

/* Hover emphasis without changing action meaning */
main button:not(:disabled):hover{
  filter:brightness(.94);
  box-shadow:0 3px 10px rgba(15,23,42,.13);
}

/* Disabled buttons stay visibly disabled */
main button:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}

/* Mobile background */
@media(max-width:700px){
  body:has(main){
    background-attachment:scroll !important;
  }
}

/* END H450-P14 */


/* H450-P16 COLORFUL BUTTON STANDARDIZATION */


/* Consistent shape for Admin/Operator buttons */
main button:not(.nav-dropdown-toggle){
  border-radius:9px;
  font-weight:700;
}

/* Consistent keyboard accessibility */
main button:focus-visible{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

/* Preserve disabled appearance */
main button:disabled{
  opacity:.55;
  cursor:not-allowed;
}


/* CSV BUTTONS */
main #h428CsvCustomers,
main .h428-csv-btn,
main .h428-all-csv-btn {
  background:#0f766e !important;
  border-color:#0f766e !important;
  color:#ffffff !important;
}

/* EXCEL BUTTONS */
main #h428ExcelCustomers,
main #exportPrepaidExcel,
main .h428-excel-btn,
main .h428-all-excel-btn {
  background:#15803d !important;
  border-color:#15803d !important;
  color:#ffffff !important;
}

/* PDF BUTTONS */
main #h428PdfCustomers,
main .h428-pdf-btn,
main .h428-all-pdf-btn {
  background:#dc2626 !important;
  border-color:#dc2626 !important;
  color:#ffffff !important;
}

/* PRINT BUTTONS */
main #h428PrintCustomers,
main #paymentsReportPrint,
main #printPrepaidCards,
main .h428-print-btn,
main .h428-all-print-btn,
main .printExistingReceipt {
  background:#7c3aed !important;
  border-color:#7c3aed !important;
  color:#ffffff !important;
}

/* SAVE BUTTONS */
main .h427-save,
main .h426-save-button,
main .package-save-btn,
main .save-package-customer-rate,
main .primrose-gateway-save,
main #operatorPasswordSave,
main #saveOperatorPermissions,
main #saveNotificationSettingsBtn,
main #pcdMacSave,
main #pkgSaveBtn {
  background:#2563eb !important;
  border-color:#2563eb !important;
  color:#ffffff !important;
}

/* ADD BUTTONS */
main #saveCustomer,
main .otherAddBalance,
main .otherRenewPackage {
  background:#059669 !important;
  border-color:#059669 !important;
  color:#ffffff !important;
}

/* EDIT BUTTONS */
main .editCustomer,
main .account-edit-btn,
main .ip-pool-edit-btn,
main .nas-edit-btn,
main .user-group-edit-btn,
main .pkg-edit-btn,
main .otherChangePackage,
main .changeCustomerOwner {
  background:#d97706 !important;
  border-color:#d97706 !important;
  color:#ffffff !important;
}

/* DANGER BUTTONS */
main .deleteCustomer,
main .account-delete-btn,
main .ip-pool-delete-btn,
main .nas-disable-btn,
main .user-group-delete-btn,
main .pkg-delete-btn {
  background:#b91c1c !important;
  border-color:#b91c1c !important;
  color:#ffffff !important;
}

/* SEARCH BUTTONS */
main #paymentCustomerSearchBtn,
main #paymentsReportApply,
main #cashClosingShow,
main .h397-search-btn {
  background:#0369a1 !important;
  border-color:#0369a1 !important;
  color:#ffffff !important;
}

/* SECONDARY BUTTONS */
main #cancelEdit,
main #cancelIpPool,
main #cancelNas,
main #cancelUserGroup,
main #pkgCancelEdit,
main #operatorEditCancel,
main #cancelOwnerChange {
  background:#475569 !important;
  border-color:#475569 !important;
  color:#ffffff !important;
}


/* Gentle hover emphasis */
main button:not(:disabled):hover{
  filter:brightness(.94);
}

/* END H450-P16 */


/* H450-P17 REMAINING BUTTON STYLING */

/* BLUE SAVE / APPLY */
main #operatorPasswordSave,
main #saveOperatorPermissions,
main #saveNotificationSettingsBtn,
main #pcdMacSave,
main #pkgSaveBtn,
main #h434SavePaymentSettings,
main #h425SaveSettings,
main #h446SaveCustomerSettings {
  background-color:#2563eb !important;
  border-color:#2563eb !important;
  color:#ffffff !important;
}

/* TEAL SEARCH / REPORT */
main #paymentCustomerSearchBtn,
main #paymentsReportApply,
main #cashClosingShow,
main .h397-search-btn {
  background-color:#0891b2 !important;
  border-color:#0891b2 !important;
  color:#ffffff !important;
}

/* GREEN CREATE / CONFIRM */
main #saveCustomer,
main #pcdUpgradeNow,
main #h444TopupSubmit {
  background-color:#059669 !important;
  border-color:#059669 !important;
  color:#ffffff !important;
}

/* PURPLE PREVIEW / UTILITY */
main #bulkPersonalizedPreviewButton,
main #h435SandboxPreviewButton,
main #operatorChangePasswordToggle {
  background-color:#7c3aed !important;
  border-color:#7c3aed !important;
  color:#ffffff !important;
}

/* SLATE BACK / CANCEL */
main #backCustomers,
main #backFromPermissions,
main #backToAccounts,
main #cancelEdit,
main #cancelOwnerChange,
main #cancelIpPool,
main #cancelNas,
main #cancelUserGroup,
main #pkgCancelEdit,
main #operatorEditCancel {
  background-color:#475569 !important;
  border-color:#475569 !important;
  color:#ffffff !important;
}

/* INDIGO PAGINATION */
main #customerPrevPage,
main #customerNextPage,
main .h428-prev,
main .h428-next {
  background-color:#4f46e5 !important;
  border-color:#4f46e5 !important;
  color:#ffffff !important;
}


/* Disabled controls stay disabled-looking */
main button:disabled,
main button[aria-disabled="true"]{
  opacity:.52;
  cursor:not-allowed;
  box-shadow:none;
}

/* Keyboard accessibility */
main button:focus-visible{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

/* END H450-P17 */