import { StyleSheet } from "react-native";

export default StyleSheet.create({
  container: {
    width: "100%",
    backgroundColor: "#fff",
    borderRadius: 10,
    padding: 12,
    marginVertical: 10,
    borderWidth: 1,
    borderColor: "#eee",
    shadowColor: "#000",
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 1,
  },
  headerRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  title: {
    fontSize: 18,
    fontWeight: "700",
  },
  totalCollapsed: {
    color: "#ff6600",
    fontSize: 18,
    fontWeight: "700",
    textAlign: "center",
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingVertical: 8,
    borderBottomWidth: 0.6,
    borderBottomColor: "#eee",
  },
  tableHeader: {
    backgroundColor: "#fafafa",
    borderRadius: 6,
    marginTop: 10,
  },
  cell: {
    flex: 1,
    fontSize: 15,
    color: "#111",
    textAlign: "center",
  },
  left: {
    textAlign: "left",
  },
  right: {
    textAlign: "right",
  },
  headerText: {
    fontWeight: "600",
  },
  statusContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  statusDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: "#2ecc71",
    marginRight: 6,
  },
  statusText: {
    fontSize: 15,
    color: "#111",
  },
  actions: {
    flexDirection: "row",
    justifyContent: "flex-end",
  },
});