/* Shared backend theme. Edit these tokens to restyle every opted-in page.
 * Load this file in each document, including iframe pages.
 */
:root {
    --admin-font-family: Arial, "Microsoft JhengHei", sans-serif;
    --admin-font-size: 15px;
    --admin-touch-size: 44px;
    --admin-mobile-font-size: 16px;
    --admin-surface: #ffffff;
    --admin-table-grid-border: var(--admin-input-border);
    --admin-table-head-border: var(--admin-primary);
    --admin-danger-bg: #fbe3e3;
    --admin-danger-border: #dda0a0;
    --admin-danger-text: #9b2929;
    --admin-danger-hover-bg: #f5cccc;
    --admin-danger-active-bg: #efbaba;
    --admin-primary-button-text: #ffffff;
    --admin-group-accent-text: #ffffff;
    --admin-radius: 18px;
    --admin-control-radius: 8px;
    --admin-space: 16px;
    --admin-cell-padding-y: 14px;
    --admin-cell-padding-x: 12px;
    --admin-overlay-bg: rgb(0 0 0 / 38%);
}

:root[data-admin-text-size="small"] {
    --admin-font-size: 13px;
    --admin-mobile-font-size: 15px;
}

:root[data-admin-text-size="medium"] {
    --admin-font-size: 15px;
    --admin-mobile-font-size: 16px;
}

:root[data-admin-text-size="large"] {
    --admin-font-size: 18px;
    --admin-mobile-font-size: 19px;
}

:root,
:root[data-admin-theme="orange"] {
    --admin-primary: #b45309;
    --admin-group-accent: #4f6f85;
    --admin-page-bg: #fff8f1;
    --admin-shell-bg: #fff3e6;
    --admin-shell-hover-bg: #fde2c5;
    --admin-shell-active-bg: #f8cca0;
    --admin-shell-text: #5b3418;
    --admin-text: #3f3026;
    --admin-input-bg: #fffaf5;
    --admin-input-border: #c98245;
    --admin-input-placeholder: #735744;
    --admin-muted: #6f5a4a;
    --admin-border: #ead8c7;
    --admin-field-label-bg: #fff3e6;
    --admin-table-head-bg: #f4d5b5;
    --admin-table-stripe-bg: #fff8f0;
    --admin-table-hover-bg: #fdebd8;
    --admin-selected-bg: #f7d7b5;
    --admin-sync-text: #995116;
    --admin-pending-text: #8a5700;
    --admin-button-bg: #f8e0c7;
    --admin-button-border: #d69a63;
    --admin-button-text: #713707;
    --admin-button-hover-bg: #f2cfaa;
    --admin-button-active-bg: #e9bc8c;
    --admin-button-shadow: 0 1px 2px rgb(113 55 7 / 14%);
    --admin-disabled-bg: #f3e5d6;
    --admin-disabled-text: #876c56;
    --admin-primary-hover-bg: #8f3d08;
    --admin-focus: #c15a0a;
    --admin-shell-border: #e3ccb5;
    --admin-input-shadow: inset 0 1px 2px rgb(113 55 7 / 9%);
    --admin-overlay-shadow: 0 10px 30px rgb(91 52 24 / 18%);
    --admin-card-shadow: 0 4px 16px rgb(91 52 24 / 10%);
}

:root[data-admin-theme="blue"] {
    --admin-primary: #205b83;
    --admin-group-accent: #8a6548;
    --admin-page-bg: #f4f7fa;
    --admin-shell-bg: #eaf1fb;
    --admin-shell-hover-bg: #d8e7f8;
    --admin-shell-active-bg: #c7ddf5;
    --admin-shell-text: #253b5b;
    --admin-text: #263b49;
    --admin-input-bg: #f1f7fc;
    --admin-input-border: #7298b5;
    --admin-input-placeholder: #536b7c;
    --admin-muted: #637785;
    --admin-border: #dce7ee;
    --admin-field-label-bg: #eef6fc;
    --admin-table-head-bg: #cbdfea;
    --admin-table-stripe-bg: #edf7fd;
    --admin-table-hover-bg: #e0f0fb;
    --admin-selected-bg: #c7e5f8;
    --admin-sync-text: #294dad;
    --admin-pending-text: #946000;
    --admin-button-bg: #dceaf5;
    --admin-button-border: #9bbbd3;
    --admin-button-text: #184d73;
    --admin-button-hover-bg: #c8dfef;
    --admin-button-active-bg: #b5d3e8;
    --admin-button-shadow: 0 1px 2px rgb(24 77 115 / 12%);
    --admin-disabled-bg: #e0e9f1;
    --admin-disabled-text: #627887;
    --admin-primary-hover-bg: #164563;
    --admin-focus: #1674b0;
    --admin-shell-border: #cad8e8;
    --admin-input-shadow: inset 0 1px 2px rgb(24 77 115 / 8%);
    --admin-overlay-shadow: 0 10px 30px rgb(35 59 91 / 18%);
    --admin-card-shadow: 0 4px 16px rgb(35 59 91 / 10%);
}

:root[data-admin-theme="mono"] {
    --admin-primary: #303030;
    --admin-group-accent: #666666;
    --admin-page-bg: #f6f6f6;
    --admin-shell-bg: #eeeeee;
    --admin-shell-hover-bg: #dedede;
    --admin-shell-active-bg: #cccccc;
    --admin-shell-text: #202020;
    --admin-text: #242424;
    --admin-input-bg: #ffffff;
    --admin-input-border: #737373;
    --admin-input-placeholder: #595959;
    --admin-muted: #666666;
    --admin-border: #dddddd;
    --admin-field-label-bg: #f1f1f1;
    --admin-table-head-bg: #d5d5d5;
    --admin-table-stripe-bg: #fafafa;
    --admin-table-hover-bg: #ededed;
    --admin-selected-bg: #d9d9d9;
    --admin-sync-text: #383838;
    --admin-pending-text: #555555;
    --admin-button-bg: #e7e7e7;
    --admin-button-border: #aaaaaa;
    --admin-button-text: #222222;
    --admin-button-hover-bg: #d8d8d8;
    --admin-button-active-bg: #c8c8c8;
    --admin-button-shadow: 0 1px 2px rgb(0 0 0 / 14%);
    --admin-disabled-bg: #e5e5e5;
    --admin-disabled-text: #666666;
    --admin-primary-hover-bg: #111111;
    --admin-focus: #202020;
    --admin-shell-border: #d0d0d0;
    --admin-input-shadow: inset 0 1px 2px rgb(0 0 0 / 9%);
    --admin-overlay-shadow: 0 10px 30px rgb(0 0 0 / 18%);
    --admin-card-shadow: 0 4px 16px rgb(0 0 0 / 10%);
}

:root[data-admin-theme="teal"] {
    --admin-primary: #0f766e;
    --admin-group-accent: #765d4e;
    --admin-page-bg: #f3fbfa;
    --admin-shell-bg: #e8f5f3;
    --admin-shell-hover-bg: #d6ece9;
    --admin-shell-active-bg: #c2e1dd;
    --admin-shell-text: #234844;
    --admin-text: #243b39;
    --admin-input-bg: #f7fcfb;
    --admin-input-border: #65a9a2;
    --admin-input-placeholder: #4d6f6b;
    --admin-muted: #5f7774;
    --admin-border: #d4e8e5;
    --admin-field-label-bg: #edf8f6;
    --admin-table-head-bg: #c4e2dc;
    --admin-table-stripe-bg: #f5fbfa;
    --admin-table-hover-bg: #dff1ef;
    --admin-selected-bg: #c6e5e1;
    --admin-sync-text: #23615b;
    --admin-pending-text: #795614;
    --admin-button-bg: #d5ebe8;
    --admin-button-border: #72ada7;
    --admin-button-text: #15534e;
    --admin-button-hover-bg: #c2e0dc;
    --admin-button-active-bg: #acd4cf;
    --admin-button-shadow: 0 1px 2px rgb(21 83 78 / 13%);
    --admin-disabled-bg: #e1ecea;
    --admin-disabled-text: #667b78;
    --admin-primary-hover-bg: #0b5d57;
    --admin-focus: #13877d;
    --admin-shell-border: #c5dfdc;
    --admin-input-shadow: inset 0 1px 2px rgb(21 83 78 / 9%);
    --admin-overlay-shadow: 0 10px 30px rgb(35 72 68 / 18%);
    --admin-card-shadow: 0 4px 16px rgb(35 72 68 / 10%);
}

:root[data-admin-theme="purple"] {
    --admin-primary: #6d4aa2;
    --admin-group-accent: #58734f;
    --admin-page-bg: #faf8fd;
    --admin-shell-bg: #f1ecf8;
    --admin-shell-hover-bg: #e5dcf2;
    --admin-shell-active-bg: #d7c9ea;
    --admin-shell-text: #45345f;
    --admin-text: #382f43;
    --admin-input-bg: #fcfaff;
    --admin-input-border: #9b7fbe;
    --admin-input-placeholder: #695b79;
    --admin-muted: #756b80;
    --admin-border: #e4daee;
    --admin-field-label-bg: #f5f0fa;
    --admin-table-head-bg: #decdec;
    --admin-table-stripe-bg: #fbf9fd;
    --admin-table-hover-bg: #eee6f7;
    --admin-selected-bg: #ded0ed;
    --admin-sync-text: #62408f;
    --admin-pending-text: #7d5612;
    --admin-button-bg: #e8ddf3;
    --admin-button-border: #a98bc8;
    --admin-button-text: #54357a;
    --admin-button-hover-bg: #dbcbea;
    --admin-button-active-bg: #cab5df;
    --admin-button-shadow: 0 1px 2px rgb(84 53 122 / 13%);
    --admin-disabled-bg: #ebe6f0;
    --admin-disabled-text: #776d80;
    --admin-primary-hover-bg: #563781;
    --admin-focus: #7d55b5;
    --admin-shell-border: #d8cbe5;
    --admin-input-shadow: inset 0 1px 2px rgb(84 53 122 / 9%);
    --admin-overlay-shadow: 0 10px 30px rgb(69 52 95 / 18%);
    --admin-card-shadow: 0 4px 16px rgb(69 52 95 / 10%);
}

:root[data-admin-theme="pink"] {
    --admin-primary: #a33f68;
    --admin-group-accent: #467278;
    --admin-page-bg: #fff8fb;
    --admin-shell-bg: #fbeef3;
    --admin-shell-hover-bg: #f5dce6;
    --admin-shell-active-bg: #edc7d6;
    --admin-shell-text: #613247;
    --admin-text: #49313b;
    --admin-input-bg: #fffafd;
    --admin-input-border: #c47b99;
    --admin-input-placeholder: #795a68;
    --admin-muted: #806b74;
    --admin-border: #eed8e1;
    --admin-field-label-bg: #fdf1f6;
    --admin-table-head-bg: #efd0dc;
    --admin-table-stripe-bg: #fff9fb;
    --admin-table-hover-bg: #f8e4ec;
    --admin-selected-bg: #efccda;
    --admin-sync-text: #8a3558;
    --admin-pending-text: #785514;
    --admin-button-bg: #f4dce6;
    --admin-button-border: #cb87a3;
    --admin-button-text: #7a294b;
    --admin-button-hover-bg: #ecc8d7;
    --admin-button-active-bg: #dfadc1;
    --admin-button-shadow: 0 1px 2px rgb(122 41 75 / 13%);
    --admin-disabled-bg: #f0e4e9;
    --admin-disabled-text: #816d76;
    --admin-primary-hover-bg: #823153;
    --admin-focus: #b34a75;
    --admin-shell-border: #e5cbd6;
    --admin-input-shadow: inset 0 1px 2px rgb(122 41 75 / 9%);
    --admin-overlay-shadow: 0 10px 30px rgb(97 50 71 / 18%);
    --admin-card-shadow: 0 4px 16px rgb(97 50 71 / 10%);
}
